diff --git a/packages/ui/src/components/status-badge/status-badge.tsx b/packages/ui/src/components/status-badge/status-badge.tsx index bfc314f..f85b579 100644 --- a/packages/ui/src/components/status-badge/status-badge.tsx +++ b/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; export interface StatusBadgeProps extends Omit { @@ -121,90 +193,71 @@ const STROKE_WIDTH = 2.5; const getIcon = (IconCmp: any) => ; export const DEFAULT_STATUS_MAP: Record = { - // #B6B6B6 - [STATUS_DATA.DRAFT]: { color: '#B6B6B6', leftSection: getIcon(Edit2) }, - [STATUS_DATA.CHECKOUT]: { color: '#B6B6B6', leftSection: getIcon(CreditCard) }, + [STATUS_DATA.DRAFT]: { color: STATUS_COLOR.DRAFT, leftSection: getIcon(Edit2) }, + [STATUS_DATA.TODO]: { color: STATUS_COLOR.TODO, leftSection: getIcon(Clock) }, - // #66BB6A - [STATUS_DATA.ACTIVE]: { color: '#66BB6A', leftSection: getIcon(CheckCircle2) }, - [STATUS_DATA.ACTIVATED]: { color: '#66BB6A', leftSection: getIcon(CheckCircle2) }, - [STATUS_DATA.APPROVAL]: { color: '#66BB6A', leftSection: getIcon(CheckCircle2) }, - [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) }, + [STATUS_DATA.INACTIVE]: { color: STATUS_COLOR.INACTIVE, leftSection: getIcon(XCircle) }, + [STATUS_DATA.DEACTIVATED]: { color: STATUS_COLOR.DEACTIVATED, leftSection: getIcon(XCircle) }, + [STATUS_DATA.CLOSE]: { color: STATUS_COLOR.CLOSE, leftSection: getIcon(XCircle) }, + [STATUS_DATA.CLOSED]: { color: STATUS_COLOR.CLOSED, leftSection: getIcon(XCircle) }, - // #EF5350 - [STATUS_DATA.INACTIVE]: { color: '#EF5350', leftSection: getIcon(XCircle) }, - [STATUS_DATA.DEACTIVATED]: { color: '#EF5350', leftSection: getIcon(XCircle) }, - [STATUS_DATA.CLOSE]: { color: '#EF5350', leftSection: getIcon(XCircle) }, - [STATUS_DATA.CLOSED]: { color: '#EF5350', leftSection: getIcon(XCircle) }, - [STATUS_DATA.CANCELLED]: { color: '#EF5350', leftSection: getIcon(XCircle) }, - [STATUS_DATA.CANCEL_REFUNDED]: { color: '#EF5350', leftSection: getIcon(XCircle) }, - [STATUS_DATA.REJECTION]: { color: '#EF5350', leftSection: getIcon(XCircle) }, - [STATUS_DATA.REJECTED]: { color: '#EF5350', leftSection: getIcon(XCircle) }, - [STATUS_DATA.ISSUE]: { color: '#EF5350', leftSection: getIcon(AlertCircle) }, - [STATUS_DATA.PROBLEM]: { color: '#EF5350', leftSection: getIcon(AlertCircle) }, + [STATUS_DATA.ACTIVE]: { color: STATUS_COLOR.ACTIVE, leftSection: getIcon(CheckCircle2) }, + [STATUS_DATA.ACTIVATED]: { color: STATUS_COLOR.ACTIVATED, leftSection: getIcon(CheckCircle2) }, + [STATUS_DATA.APPROVED]: { color: STATUS_COLOR.APPROVED, leftSection: getIcon(CheckCircle2) }, + [STATUS_DATA.PROCESSED]: { color: STATUS_COLOR.PROCESSED, leftSection: getIcon(Check) }, + [STATUS_DATA.COMPLETED]: { color: STATUS_COLOR.COMPLETED, leftSection: getIcon(CheckCircle2) }, + [STATUS_DATA.COMPLETE]: { color: STATUS_COLOR.COMPLETE, leftSection: getIcon(CheckCircle2) }, + [STATUS_DATA.DONE]: { color: STATUS_COLOR.DONE, leftSection: getIcon(CheckCircle2) }, + [STATUS_DATA.SHIPPED]: { color: STATUS_COLOR.SHIPPED, leftSection: getIcon(Check) }, + [STATUS_DATA.REFUNDED]: { color: STATUS_COLOR.REFUNDED, leftSection: getIcon(RotateCcw) }, + [STATUS_DATA.SETTLED]: { color: STATUS_COLOR.SETTLED, leftSection: getIcon(CheckCircle2) }, + [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: '#42A5F5', leftSection: getIcon(Send) }, - [STATUS_DATA.REQUESTING]: { color: '#42A5F5', leftSection: getIcon(Send) }, - [STATUS_DATA.REQUESTED]: { color: '#42A5F5', leftSection: getIcon(Send) }, - [STATUS_DATA.OPEN]: { color: '#42A5F5', leftSection: getIcon(CheckCircle2) }, - [STATUS_DATA.OPENED]: { color: '#42A5F5', leftSection: getIcon(CheckCircle2) }, - [STATUS_DATA.PROCESS]: { color: '#42A5F5', leftSection: getIcon(Loader2) }, - [STATUS_DATA.PROCESSING]: { color: '#42A5F5', leftSection: getIcon(Loader2) }, - [STATUS_DATA.IN_PROCESS]: { color: '#42A5F5', leftSection: getIcon(Loader2) }, - [STATUS_DATA.PROCESSED]: { color: '#42A5F5', leftSection: getIcon(Check) }, - [STATUS_DATA.SHIPMENT]: { color: '#42A5F5', leftSection: getIcon(Package) }, - [STATUS_DATA.SHIPPING]: { color: '#42A5F5', leftSection: getIcon(Package) }, - [STATUS_DATA.SHIPPED]: { color: '#42A5F5', leftSection: getIcon(Check) }, - [STATUS_DATA.PAYMENT]: { color: '#42A5F5', leftSection: getIcon(CreditCard) }, - [STATUS_DATA.INVOICE]: { color: '#42A5F5', leftSection: getIcon(CreditCard) }, - [STATUS_DATA.INVOICED]: { color: '#42A5F5', leftSection: getIcon(CreditCard) }, + [STATUS_DATA.REQUEST]: { color: STATUS_COLOR.REQUEST, leftSection: getIcon(Send) }, + [STATUS_DATA.REQUESTING]: { color: STATUS_COLOR.REQUESTING, leftSection: getIcon(Send) }, + [STATUS_DATA.REQUESTED]: { color: STATUS_COLOR.REQUESTED, leftSection: getIcon(Send) }, + [STATUS_DATA.OPEN]: { color: STATUS_COLOR.OPEN, leftSection: getIcon(CheckCircle2) }, + [STATUS_DATA.OPENED]: { color: STATUS_COLOR.OPENED, leftSection: getIcon(CheckCircle2) }, + [STATUS_DATA.PROCESS]: { color: STATUS_COLOR.PROCESS, leftSection: getIcon(Loader2) }, + [STATUS_DATA.PROCESSING]: { color: STATUS_COLOR.PROCESSING, leftSection: getIcon(Loader2) }, + [STATUS_DATA.IN_PROCESS]: { color: STATUS_COLOR.IN_PROCESS, leftSection: getIcon(Loader2) }, + [STATUS_DATA.SHIPMENT]: { color: STATUS_COLOR.SHIPMENT, leftSection: getIcon(Package) }, + [STATUS_DATA.SHIPPING]: { color: STATUS_COLOR.SHIPPING, leftSection: getIcon(Package) }, + [STATUS_DATA.TRANSFERRED]: { color: STATUS_COLOR.TRANSFERRED, leftSection: getIcon(Send) }, + [STATUS_DATA.PAYMENT]: { color: STATUS_COLOR.PAYMENT, leftSection: getIcon(CreditCard) }, + [STATUS_DATA.INVOICE]: { color: STATUS_COLOR.INVOICE, leftSection: getIcon(CreditCard) }, - // #DFAB45 - [STATUS_DATA.PENDING]: { color: '#DFAB45', leftSection: getIcon(Clock) }, + [STATUS_DATA.APPROVAL]: { color: STATUS_COLOR.APPROVAL, leftSection: getIcon(CheckCircle2) }, + [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.WAIT]: { color: '#6C5DD0', leftSection: getIcon(Clock) }, - [STATUS_DATA.WAITING]: { color: '#6C5DD0', leftSection: getIcon(Clock) }, - [STATUS_DATA.WAITING_LIST]: { color: '#6C5DD0', leftSection: getIcon(Clock) }, + [STATUS_DATA.CANCEL]: { color: STATUS_COLOR.CANCEL, leftSection: getIcon(XCircle) }, + [STATUS_DATA.CANCELLED]: { color: STATUS_COLOR.CANCELLED, leftSection: getIcon(XCircle) }, + [STATUS_DATA.REJECTION]: { color: STATUS_COLOR.REJECTION, leftSection: getIcon(XCircle) }, + [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.CANCEL]: { color: '#D26DA9', leftSection: getIcon(XCircle) }, - [STATUS_DATA.TRANSFERRED]: { color: '#D26DA9', leftSection: getIcon(Send) }, + [STATUS_DATA.EXPIRED]: { color: STATUS_COLOR.EXPIRED, leftSection: getIcon(AlertCircle) }, + [STATUS_DATA.CANCEL_REFUNDED]: { color: STATUS_COLOR.CANCEL_REFUNDED, leftSection: getIcon(XCircle) }, - // #9575CD - [STATUS_DATA.TODO]: { color: '#9575CD', leftSection: getIcon(Clock) }, - - // #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) }, + [STATUS_DATA.CHECKOUT]: { color: STATUS_COLOR.CHECKOUT, leftSection: getIcon(CreditCard) }, + [STATUS_DATA.SETTLED_FREE]: { color: STATUS_COLOR.SETTLED_FREE, leftSection: getIcon(CheckCircle2) }, }; export function StatusBadge({ status, label, getCustomConfig, color, ...rest }: StatusBadgeProps) { diff --git a/packages/ui/src/foundations/enterprise-module/components/data-table/index.tsx b/packages/ui/src/foundations/enterprise-module/components/data-table/index.tsx index e3784b1..8c63284 100644 --- a/packages/ui/src/foundations/enterprise-module/components/data-table/index.tsx +++ b/packages/ui/src/foundations/enterprise-module/components/data-table/index.tsx @@ -678,7 +678,7 @@ export function EnterpriseDataTable(props: EnterpriseDataT field: 'status' as any, headerName: t('common:fields.status'), - cellRenderer: ({ value }: any) => , + cellRenderer: ({ value }: any) => , }; const prefixColumn: ColDef[] = [ diff --git a/packages/ui/src/foundations/enterprise-module/providers/detail-page.provider.tsx b/packages/ui/src/foundations/enterprise-module/providers/detail-page.provider.tsx index a2f1fdd..044552b 100644 --- a/packages/ui/src/foundations/enterprise-module/providers/detail-page.provider.tsx +++ b/packages/ui/src/foundations/enterprise-module/providers/detail-page.provider.tsx @@ -698,6 +698,8 @@ export function EnterpriseDetailPageProvider( badges={ detailData ? ( diff --git a/packages/ui/src/foundations/enterprise-module/providers/form-page.provider.tsx b/packages/ui/src/foundations/enterprise-module/providers/form-page.provider.tsx index 61739f9..6282809 100644 --- a/packages/ui/src/foundations/enterprise-module/providers/form-page.provider.tsx +++ b/packages/ui/src/foundations/enterprise-module/providers/form-page.provider.tsx @@ -532,8 +532,10 @@ export function EnterpriseFormPageProvider(pr fz: { base: 'md', sm: 'lg' }, }} badges={ - detailData ? ( + detailData && formPageType === 'EDIT' ? (