update init lp_category,

2025-04-19 06:42:55 +08:00
parent 2c20496a13
commit 1c865595bf
88 changed files with 10716 additions and 3 deletions
--- a/002_source/cms/src/components/dashboard/mf_questions/customers-table.tsx
+++ b/002_source/cms/src/components/dashboard/mf_questions/customers-table.tsx
@@ -0,0 +1,139 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import IconButton from '@mui/material/IconButton';
+import LinearProgress from '@mui/material/LinearProgress';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
+import { Clock as ClockIcon } from '@phosphor-icons/react/dist/ssr/Clock';
+import { Minus as MinusIcon } from '@phosphor-icons/react/dist/ssr/Minus';
+import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
+
+import { paths } from '@/paths';
+import { dayjs } from '@/lib/dayjs';
+import { DataTable } from '@/components/core/data-table';
+import type { ColumnDef } from '@/components/core/data-table';
+
+import { useCustomersSelection } from './customers-selection-context';
+
+export interface Customer {
+  id: string;
+  name: string;
+  avatar?: string;
+  email: string;
+  phone?: string;
+  quota: number;
+  status: 'pending' | 'active' | 'blocked';
+  createdAt: Date;
+}
+
+const columns = [
+  {
+    formatter: (row): React.JSX.Element => (
+      <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+        <Avatar src={row.avatar} />{' '}
+        <div>
+          <Link
+            color="inherit"
+            component={RouterLink}
+            href={paths.dashboard.customers.details('1')}
+            sx={{ whiteSpace: 'nowrap' }}
+            variant="subtitle2"
+          >
+            {row.name}
+          </Link>
+          <Typography color="text.secondary" variant="body2">
+            {row.email}
+          </Typography>
+        </div>
+      </Stack>
+    ),
+    name: 'Name',
+    width: '250px',
+  },
+  {
+    formatter: (row): React.JSX.Element => (
+      <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
+        <LinearProgress sx={{ flex: '1 1 auto' }} value={row.quota} variant="determinate" />
+        <Typography color="text.secondary" variant="body2">
+          {new Intl.NumberFormat('en-US', { style: 'percent', maximumFractionDigits: 2 }).format(row.quota / 100)}
+        </Typography>
+      </Stack>
+    ),
+    name: 'Quota',
+    width: '250px',
+  },
+  { field: 'phone', name: 'Phone number', width: '150px' },
+  {
+    formatter(row) {
+      return dayjs(row.createdAt).format('MMM D, YYYY h:mm A');
+    },
+    name: 'Created at',
+    width: '200px',
+  },
+  {
+    formatter: (row): React.JSX.Element => {
+      const mapping = {
+        active: { label: 'Active', icon: <CheckCircleIcon color="var(--mui-palette-success-main)" weight="fill" /> },
+        blocked: { label: 'Blocked', icon: <MinusIcon color="var(--mui-palette-error-main)" /> },
+        pending: { label: 'Pending', icon: <ClockIcon color="var(--mui-palette-warning-main)" weight="fill" /> },
+      } as const;
+      const { label, icon } = mapping[row.status] ?? { label: 'Unknown', icon: null };
+
+      return <Chip icon={icon} label={label} size="small" variant="outlined" />;
+    },
+    name: 'Status',
+    width: '150px',
+  },
+  {
+    formatter: (): React.JSX.Element => (
+      <IconButton component={RouterLink} href={paths.dashboard.customers.details('1')}>
+        <PencilSimpleIcon />
+      </IconButton>
+    ),
+    name: 'Actions',
+    hideName: true,
+    width: '100px',
+    align: 'right',
+  },
+] satisfies ColumnDef<Customer>[];
+
+export interface CustomersTableProps {
+  rows: Customer[];
+}
+
+export function CustomersTable({ rows }: CustomersTableProps): React.JSX.Element {
+  const { deselectAll, deselectOne, selectAll, selectOne, selected } = useCustomersSelection();
+
+  return (
+    <React.Fragment>
+      <DataTable<Customer>
+        columns={columns}
+        onDeselectAll={deselectAll}
+        onDeselectOne={(_, row) => {
+          deselectOne(row.id);
+        }}
+        onSelectAll={selectAll}
+        onSelectOne={(_, row) => {
+          selectOne(row.id);
+        }}
+        rows={rows}
+        selectable
+        selected={selected}
+      />
+      {!rows.length ? (
+        <Box sx={{ p: 3 }}>
+          <Typography color="text.secondary" sx={{ textAlign: 'center' }} variant="body2">
+            No customers found
+          </Typography>
+        </Box>
+      ) : null}
+    </React.Fragment>
+  );
+}