chore: adjustment status badged color

packages/ui/src/components/status-badge/status-badge.tsx

@@ -71,8 +71,8 @@ export enum STATUS_DATA {
   PARTIAL_REFUND = 'partial-refund',
   PARTIALLY_REFUNDED = 'partially-refunded',
   REFUND_PROCESSING = 'refund-processing',
+  REFUND_PROCESS = 'refund-process',
   CANCEL_REFUNDED = 'cancel-refunded',
-  REFUND_PROCESS = 'refund-processing',
 
   TRANSFERRED = 'transferred',
 
@@ -100,6 +100,78 @@ export enum STATUS_DATA {
   PRESENT = 'present',
 }
 
+export enum STATUS_COLOR {
+  // DRAFT = '#6A6725',
+  DRAFT = '#B6B6B6',
+  TODO = '#CCCF77',
+
+  // INACTIVE = '#6A252A',
+  // DEACTIVATED = '#792A2C',
+  INACTIVE = '#B52B24',
+  DEACTIVATED = '#B52B24',
+  CLOSE = '#883230',
+  CLOSED = '#973C35',
+
+  // ACTIVE = '#518F00',
+  ACTIVE = '#54BE05',
+  ACTIVATED = '#539B01',
+  APPROVED = '#54A702',
+  PROCESSED = '#54B304',
+  COMPLETED = '#54BE05',
+  COMPLETE = '#53CA07',
+  DONE = '#51D509',
+  SHIPPED = '#4EE00B',
+  REFUNDED = '#4BEB0D',
+  SETTLED = '#4BF114',
+  PAID = '#4DF022',
+  INVOICED = '#51EF30',
+  RESOLVED = '#56EF3D',
+  JOINED = '#5CEF4B',
+  PRESENT = '#62EE58',
+
+  REQUEST = '#00758F',
+  REQUESTING = '#017A9D',
+  REQUESTED = '#037FAB',
+  OPEN = '#0482B8',
+  OPENED = '#0685C6',
+  PROCESS = '#0886D3',
+  PROCESSING = '#0B86E0',
+  IN_PROCESS = '#0D86ED',
+  SHIPMENT = '#1985F0',
+  SHIPPING = '#2985F0',
+  TRANSFERRED = '#3986EF',
+  PAYMENT = '#4988EF',
+  INVOICE = '#588BEE',
+
+  APPROVAL = '#8F4500',
+  PENDING = '#9D5301',
+  WAIT = '#AB6103',
+  WAITING = '#B87104',
+  WAITING_LIST = '#C68106',
+  PARTIAL_DONE = '#D39308',
+  ON_HOLD = '#E0A50B',
+  REFUND = '#EDB70D',
+  REFUND_PROCESSING = '#F0C519',
+  REFUND_PROCESS = '#F0C519',
+  PARTIAL_REFUND = '#F0D029',
+  PARTIALLY_REFUNDED = '#EFD939',
+  SETTLEMENT = '#EFE149',
+  INVITED = '#EEE858',
+
+  CANCEL = '#7C1217',
+  CANCELLED = '#991B1A',
+  REJECTION = '#B52B24',
+  REJECTED = '#CF3D2E',
+  ISSUE = '#D3614F',
+  PROBLEM = '#D78270',
+
+  EXPIRED = '#8F0005',
+  CANCEL_REFUNDED = '#BC1913',
+
+  CHECKOUT = '#FF7B00',
+  SETTLED_FREE = '#3D6E93',
+}
+
 export type StatusBadgeConfigCallback = (status: string) => Partial<BadgeProps>;
 
 export interface StatusBadgeProps extends Omit<BadgeProps, 'color' | 'leftSection'> {
@@ -121,90 +193,71 @@ const STROKE_WIDTH = 2.5;
 const getIcon = (IconCmp: any) => <IconCmp size={ICON_SIZE} strokeWidth={STROKE_WIDTH} />;
 
 export const DEFAULT_STATUS_MAP: Record<string, BadgeProps> = {
-  // #B6B6B6
+  [STATUS_DATA.DRAFT]: { color: STATUS_COLOR.DRAFT, leftSection: getIcon(Edit2) },
-  [STATUS_DATA.DRAFT]: { color: '#B6B6B6', leftSection: getIcon(Edit2) },
+  [STATUS_DATA.TODO]: { color: STATUS_COLOR.TODO, leftSection: getIcon(Clock) },
-  [STATUS_DATA.CHECKOUT]: { color: '#B6B6B6', leftSection: getIcon(CreditCard) },
 
-  // #66BB6A
+  [STATUS_DATA.INACTIVE]: { color: STATUS_COLOR.INACTIVE, leftSection: getIcon(XCircle) },
-  [STATUS_DATA.ACTIVE]: { color: '#66BB6A', leftSection: getIcon(CheckCircle2) },
+  [STATUS_DATA.DEACTIVATED]: { color: STATUS_COLOR.DEACTIVATED, leftSection: getIcon(XCircle) },
-  [STATUS_DATA.ACTIVATED]: { color: '#66BB6A', leftSection: getIcon(CheckCircle2) },
+  [STATUS_DATA.CLOSE]: { color: STATUS_COLOR.CLOSE, leftSection: getIcon(XCircle) },
-  [STATUS_DATA.APPROVAL]: { color: '#66BB6A', leftSection: getIcon(CheckCircle2) },
+  [STATUS_DATA.CLOSED]: { color: STATUS_COLOR.CLOSED, leftSection: getIcon(XCircle) },
-  [STATUS_DATA.APPROVED]: { color: '#66BB6A', leftSection: getIcon(CheckCircle2) },
-  [STATUS_DATA.COMPLETE]: { color: '#66BB6A', leftSection: getIcon(CheckCircle2) },
-  [STATUS_DATA.COMPLETED]: { color: '#66BB6A', leftSection: getIcon(CheckCircle2) },
-  [STATUS_DATA.DONE]: { color: '#66BB6A', leftSection: getIcon(CheckCircle2) },
-  [STATUS_DATA.PARTIAL_DONE]: { color: '#66BB6A', leftSection: getIcon(Clock) },
-  [STATUS_DATA.JOINED]: { color: '#66BB6A', leftSection: getIcon(Users) },
-  [STATUS_DATA.RESOLVED]: { color: '#66BB6A', leftSection: getIcon(CheckCircle2) },
-  [STATUS_DATA.PAID]: { color: '#66BB6A', leftSection: getIcon(CreditCard) },
 
-  // #EF5350
+  [STATUS_DATA.ACTIVE]: { color: STATUS_COLOR.ACTIVE, leftSection: getIcon(CheckCircle2) },
-  [STATUS_DATA.INACTIVE]: { color: '#EF5350', leftSection: getIcon(XCircle) },
+  [STATUS_DATA.ACTIVATED]: { color: STATUS_COLOR.ACTIVATED, leftSection: getIcon(CheckCircle2) },
-  [STATUS_DATA.DEACTIVATED]: { color: '#EF5350', leftSection: getIcon(XCircle) },
+  [STATUS_DATA.APPROVED]: { color: STATUS_COLOR.APPROVED, leftSection: getIcon(CheckCircle2) },
-  [STATUS_DATA.CLOSE]: { color: '#EF5350', leftSection: getIcon(XCircle) },
+  [STATUS_DATA.PROCESSED]: { color: STATUS_COLOR.PROCESSED, leftSection: getIcon(Check) },
-  [STATUS_DATA.CLOSED]: { color: '#EF5350', leftSection: getIcon(XCircle) },
+  [STATUS_DATA.COMPLETED]: { color: STATUS_COLOR.COMPLETED, leftSection: getIcon(CheckCircle2) },
-  [STATUS_DATA.CANCELLED]: { color: '#EF5350', leftSection: getIcon(XCircle) },
+  [STATUS_DATA.COMPLETE]: { color: STATUS_COLOR.COMPLETE, leftSection: getIcon(CheckCircle2) },
-  [STATUS_DATA.CANCEL_REFUNDED]: { color: '#EF5350', leftSection: getIcon(XCircle) },
+  [STATUS_DATA.DONE]: { color: STATUS_COLOR.DONE, leftSection: getIcon(CheckCircle2) },
-  [STATUS_DATA.REJECTION]: { color: '#EF5350', leftSection: getIcon(XCircle) },
+  [STATUS_DATA.SHIPPED]: { color: STATUS_COLOR.SHIPPED, leftSection: getIcon(Check) },
-  [STATUS_DATA.REJECTED]: { color: '#EF5350', leftSection: getIcon(XCircle) },
+  [STATUS_DATA.REFUNDED]: { color: STATUS_COLOR.REFUNDED, leftSection: getIcon(RotateCcw) },
-  [STATUS_DATA.ISSUE]: { color: '#EF5350', leftSection: getIcon(AlertCircle) },
+  [STATUS_DATA.SETTLED]: { color: STATUS_COLOR.SETTLED, leftSection: getIcon(CheckCircle2) },
-  [STATUS_DATA.PROBLEM]: { color: '#EF5350', leftSection: getIcon(AlertCircle) },
+  [STATUS_DATA.PAID]: { color: STATUS_COLOR.PAID, leftSection: getIcon(CreditCard) },
+  [STATUS_DATA.INVOICED]: { color: STATUS_COLOR.INVOICED, leftSection: getIcon(CreditCard) },
+  [STATUS_DATA.RESOLVED]: { color: STATUS_COLOR.RESOLVED, leftSection: getIcon(CheckCircle2) },
+  [STATUS_DATA.JOINED]: { color: STATUS_COLOR.JOINED, leftSection: getIcon(Users) },
+  [STATUS_DATA.PRESENT]: { color: STATUS_COLOR.PRESENT, leftSection: getIcon(Users) },
 
-  // #42A5F5
+  [STATUS_DATA.REQUEST]: { color: STATUS_COLOR.REQUEST, leftSection: getIcon(Send) },
-  [STATUS_DATA.REQUEST]: { color: '#42A5F5', leftSection: getIcon(Send) },
+  [STATUS_DATA.REQUESTING]: { color: STATUS_COLOR.REQUESTING, leftSection: getIcon(Send) },
-  [STATUS_DATA.REQUESTING]: { color: '#42A5F5', leftSection: getIcon(Send) },
+  [STATUS_DATA.REQUESTED]: { color: STATUS_COLOR.REQUESTED, leftSection: getIcon(Send) },
-  [STATUS_DATA.REQUESTED]: { color: '#42A5F5', leftSection: getIcon(Send) },
+  [STATUS_DATA.OPEN]: { color: STATUS_COLOR.OPEN, leftSection: getIcon(CheckCircle2) },
-  [STATUS_DATA.OPEN]: { color: '#42A5F5', leftSection: getIcon(CheckCircle2) },
+  [STATUS_DATA.OPENED]: { color: STATUS_COLOR.OPENED, leftSection: getIcon(CheckCircle2) },
-  [STATUS_DATA.OPENED]: { color: '#42A5F5', leftSection: getIcon(CheckCircle2) },
+  [STATUS_DATA.PROCESS]: { color: STATUS_COLOR.PROCESS, leftSection: getIcon(Loader2) },
-  [STATUS_DATA.PROCESS]: { color: '#42A5F5', leftSection: getIcon(Loader2) },
+  [STATUS_DATA.PROCESSING]: { color: STATUS_COLOR.PROCESSING, leftSection: getIcon(Loader2) },
-  [STATUS_DATA.PROCESSING]: { color: '#42A5F5', leftSection: getIcon(Loader2) },
+  [STATUS_DATA.IN_PROCESS]: { color: STATUS_COLOR.IN_PROCESS, leftSection: getIcon(Loader2) },
-  [STATUS_DATA.IN_PROCESS]: { color: '#42A5F5', leftSection: getIcon(Loader2) },
+  [STATUS_DATA.SHIPMENT]: { color: STATUS_COLOR.SHIPMENT, leftSection: getIcon(Package) },
-  [STATUS_DATA.PROCESSED]: { color: '#42A5F5', leftSection: getIcon(Check) },
+  [STATUS_DATA.SHIPPING]: { color: STATUS_COLOR.SHIPPING, leftSection: getIcon(Package) },
-  [STATUS_DATA.SHIPMENT]: { color: '#42A5F5', leftSection: getIcon(Package) },
+  [STATUS_DATA.TRANSFERRED]: { color: STATUS_COLOR.TRANSFERRED, leftSection: getIcon(Send) },
-  [STATUS_DATA.SHIPPING]: { color: '#42A5F5', leftSection: getIcon(Package) },
+  [STATUS_DATA.PAYMENT]: { color: STATUS_COLOR.PAYMENT, leftSection: getIcon(CreditCard) },
-  [STATUS_DATA.SHIPPED]: { color: '#42A5F5', leftSection: getIcon(Check) },
+  [STATUS_DATA.INVOICE]: { color: STATUS_COLOR.INVOICE, leftSection: getIcon(CreditCard) },
-  [STATUS_DATA.PAYMENT]: { color: '#42A5F5', leftSection: getIcon(CreditCard) },
-  [STATUS_DATA.INVOICE]: { color: '#42A5F5', leftSection: getIcon(CreditCard) },
-  [STATUS_DATA.INVOICED]: { color: '#42A5F5', leftSection: getIcon(CreditCard) },
 
-  // #DFAB45
+  [STATUS_DATA.APPROVAL]: { color: STATUS_COLOR.APPROVAL, leftSection: getIcon(CheckCircle2) },
-  [STATUS_DATA.PENDING]: { color: '#DFAB45', leftSection: getIcon(Clock) },
+  [STATUS_DATA.PENDING]: { color: STATUS_COLOR.PENDING, leftSection: getIcon(Clock) },
+  [STATUS_DATA.WAIT]: { color: STATUS_COLOR.WAIT, leftSection: getIcon(Clock) },
+  [STATUS_DATA.WAITING]: { color: STATUS_COLOR.WAITING, leftSection: getIcon(Clock) },
+  [STATUS_DATA.WAITING_LIST]: { color: STATUS_COLOR.WAITING_LIST, leftSection: getIcon(Clock) },
+  [STATUS_DATA.PARTIAL_DONE]: { color: STATUS_COLOR.PARTIAL_DONE, leftSection: getIcon(Clock) },
+  [STATUS_DATA.ON_HOLD]: { color: STATUS_COLOR.ON_HOLD, leftSection: getIcon(Clock) },
+  [STATUS_DATA.REFUND]: { color: STATUS_COLOR.REFUND, leftSection: getIcon(RotateCcw) },
+  [STATUS_DATA.REFUND_PROCESSING]: { color: STATUS_COLOR.REFUND_PROCESSING, leftSection: getIcon(Loader2) },
+  [STATUS_DATA.REFUND_PROCESS]: { color: STATUS_COLOR.REFUND_PROCESS, leftSection: getIcon(Loader2) },
+  [STATUS_DATA.PARTIAL_REFUND]: { color: STATUS_COLOR.PARTIAL_REFUND, leftSection: getIcon(RotateCcw) },
+  [STATUS_DATA.PARTIALLY_REFUNDED]: { color: STATUS_COLOR.PARTIALLY_REFUNDED, leftSection: getIcon(RotateCcw) },
+  [STATUS_DATA.SETTLEMENT]: { color: STATUS_COLOR.SETTLEMENT, leftSection: getIcon(CheckCircle2) },
+  [STATUS_DATA.INVITED]: { color: STATUS_COLOR.INVITED, leftSection: getIcon(Users) },
 
-  // #6C5DD0
+  [STATUS_DATA.CANCEL]: { color: STATUS_COLOR.CANCEL, leftSection: getIcon(XCircle) },
-  [STATUS_DATA.WAIT]: { color: '#6C5DD0', leftSection: getIcon(Clock) },
+  [STATUS_DATA.CANCELLED]: { color: STATUS_COLOR.CANCELLED, leftSection: getIcon(XCircle) },
-  [STATUS_DATA.WAITING]: { color: '#6C5DD0', leftSection: getIcon(Clock) },
+  [STATUS_DATA.REJECTION]: { color: STATUS_COLOR.REJECTION, leftSection: getIcon(XCircle) },
-  [STATUS_DATA.WAITING_LIST]: { color: '#6C5DD0', leftSection: getIcon(Clock) },
+  [STATUS_DATA.REJECTED]: { color: STATUS_COLOR.REJECTED, leftSection: getIcon(XCircle) },
+  [STATUS_DATA.ISSUE]: { color: STATUS_COLOR.ISSUE, leftSection: getIcon(AlertCircle) },
+  [STATUS_DATA.PROBLEM]: { color: STATUS_COLOR.PROBLEM, leftSection: getIcon(AlertCircle) },
 
-  // #D26DA9
+  [STATUS_DATA.EXPIRED]: { color: STATUS_COLOR.EXPIRED, leftSection: getIcon(AlertCircle) },
-  [STATUS_DATA.CANCEL]: { color: '#D26DA9', leftSection: getIcon(XCircle) },
+  [STATUS_DATA.CANCEL_REFUNDED]: { color: STATUS_COLOR.CANCEL_REFUNDED, leftSection: getIcon(XCircle) },
-  [STATUS_DATA.TRANSFERRED]: { color: '#D26DA9', leftSection: getIcon(Send) },
 
-  // #9575CD
+  [STATUS_DATA.CHECKOUT]: { color: STATUS_COLOR.CHECKOUT, leftSection: getIcon(CreditCard) },
-  [STATUS_DATA.TODO]: { color: '#9575CD', leftSection: getIcon(Clock) },
+  [STATUS_DATA.SETTLED_FREE]: { color: STATUS_COLOR.SETTLED_FREE, leftSection: getIcon(CheckCircle2) },
-
-  // #FFB74D
-  [STATUS_DATA.ON_HOLD]: { color: '#FFB74D', leftSection: getIcon(Clock) },
-
-  // #787878
-  [STATUS_DATA.EXPIRED]: { color: '#787878', leftSection: getIcon(AlertCircle) },
-
-  // #FE725E
-  [STATUS_DATA.REFUND]: { color: '#FE725E', leftSection: getIcon(RotateCcw) },
-  [STATUS_DATA.REFUNDED]: { color: '#FE725E', leftSection: getIcon(RotateCcw) },
-  [STATUS_DATA.PARTIAL_REFUND]: { color: '#FE725E', leftSection: getIcon(RotateCcw) },
-  [STATUS_DATA.PARTIALLY_REFUNDED]: { color: '#FE725E', leftSection: getIcon(RotateCcw) },
-  [STATUS_DATA.INVITED]: { color: '#FE725E', leftSection: getIcon(Users) },
-
-  // #D7A29A
-  [STATUS_DATA.REFUND_PROCESSING]: { color: '#D7A29A', leftSection: getIcon(Loader2) },
-
-  // #5DADD0
-  [STATUS_DATA.SETTLEMENT]: { color: '#5DADD0', leftSection: getIcon(CheckCircle2) },
-  [STATUS_DATA.SETTLED]: { color: '#5DADD0', leftSection: getIcon(CheckCircle2) },
-  [STATUS_DATA.SETTLED_FREE]: { color: '#5DADD0', leftSection: getIcon(CheckCircle2) },
-
-  // #E2B43E
-  [STATUS_DATA.PRESENT]: { color: '#E2B43E', leftSection: getIcon(Users) },
 };
 
 export function StatusBadge({ status, label, getCustomConfig, color, ...rest }: StatusBadgeProps) {

packages/ui/src/foundations/enterprise-module/components/data-table/index.tsx

@@ -678,7 +678,7 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
 
       field: 'status' as any,
       headerName: t('common:fields.status'),
-      cellRenderer: ({ value }: any) => <StatusBadge status={value} size="sm" variant="outline" />,
+      cellRenderer: ({ value }: any) => <StatusBadge status={value} size="sm" radius={'lg'} variant="filled" />,
     };
 
     const prefixColumn: ColDef<E>[] = [

packages/ui/src/foundations/enterprise-module/providers/detail-page.provider.tsx

@@ -698,6 +698,8 @@ export function EnterpriseDetailPageProvider<E extends BaseEntity = BaseEntity>(
             badges={
               detailData ? (
                 <StatusBadge
+                  radius={'lg'}
+                  variant="filled"
                   status={detailData[statusKey as keyof typeof detailData] as string}
                   getCustomConfig={getCustomStatusBadgeConfig}
                 />

packages/ui/src/foundations/enterprise-module/providers/form-page.provider.tsx

@@ -532,8 +532,10 @@ export function EnterpriseFormPageProvider<E extends BaseEntity = BaseEntity>(pr
               fz: { base: 'md', sm: 'lg' },
             }}
             badges={
-              detailData ? (
+              detailData && formPageType === 'EDIT' ? (
                 <StatusBadge
+                  radius={'lg'}
+                  variant="filled"
                   status={detailData[statusKey as keyof typeof detailData] as string}
                   getCustomConfig={getCustomStatusBadgeConfig}
                 />