update build ok,

2025-04-20 02:00:25 +08:00
parent 6b19656833
commit b963a85cc6
30 changed files with 1133 additions and 695 deletions
--- a/002_source/cms/src/app/dashboard/Sample/BasicDetailCard.tsx
+++ b/002_source/cms/src/app/dashboard/Sample/BasicDetailCard.tsx
@@ -0,0 +1,79 @@
+'use client';
+
+import * as React from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import Avatar from '@mui/material/Avatar';
+import Card from '@mui/material/Card';
+import CardHeader from '@mui/material/CardHeader';
+import Chip from '@mui/material/Chip';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
+import LinearProgress from '@mui/material/LinearProgress';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
+import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
+import { useTranslation } from 'react-i18next';
+
+import { paths } from '@/paths';
+import { PropertyItem } from '@/components/core/property-item';
+import { PropertyList } from '@/components/core/property-list';
+
+export default function BasicDetailCard({
+  lpCatId,
+  handleEditClick,
+}: {
+  lpCatId: string;
+  handleEditClick: () => void;
+}): React.JSX.Element {
+  const { t } = useTranslation();
+  const router = useRouter();
+
+  return (
+    <Card>
+      <CardHeader
+        action={
+          <IconButton
+            onClick={() => {
+              handleEditClick();
+            }}
+          >
+            <PencilSimpleIcon />
+          </IconButton>
+        }
+        avatar={
+          <Avatar>
+            <UserIcon fontSize="var(--Icon-fontSize)" />
+          </Avatar>
+        }
+        title={t('list.basic-details')}
+      />
+      <PropertyList divider={<Divider />} orientation="vertical" sx={{ '--PropertyItem-padding': '12px 24px' }}>
+        {(
+          [
+            { key: 'Customer ID', value: <Chip label="USR-001" size="small" variant="soft" /> },
+            { key: 'Name', value: 'Miron Vitold' },
+            { key: 'Email', value: 'miron.vitold@domain.com' },
+            { key: 'Phone', value: '(425) 434-5535' },
+            { key: 'Company', value: 'Devias IO' },
+            {
+              key: 'Quota',
+              value: (
+                <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
+                  <LinearProgress sx={{ flex: '1 1 auto' }} value={50} variant="determinate" />
+                  <Typography color="text.secondary" variant="body2">
+                    50%
+                  </Typography>
+                </Stack>
+              ),
+            },
+          ] satisfies { key: string; value: React.ReactNode }[]
+        ).map(
+          (item): React.JSX.Element => (
+            <PropertyItem key={item.key} name={item.key} value={item.value} />
+          )
+        )}
+      </PropertyList>
+    </Card>
+  );
+}