update build ok,

002_source/cms/src/app/dashboard/Sample/SampleTitleCard.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import * as React from 'react';
+import { Button } from '@mui/material';
+import Avatar from '@mui/material/Avatar';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';
+import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
+import { useTranslation } from 'react-i18next';
+
+export default function SampleTitleCard(): React.JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '1 1 auto' }}>
+        <Avatar src="/assets/avatar-1.png" sx={{ '--Avatar-size': '64px' }}>
+          empty
+        </Avatar>
+        <div>
+          <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flexWrap: 'wrap' }}>
+            <Typography variant="h4">{t('list.customer-name')}</Typography>
+            <Chip
+              icon={<CheckCircleIcon color="var(--mui-palette-success-main)" weight="fill" />}
+              label={t('list.active')}
+              size="small"
+              variant="outlined"
+            />
+          </Stack>
+          <Typography color="text.secondary" variant="body1">
+            {t('list.customer-email')}
+          </Typography>
+        </div>
+      </Stack>
+      <div>
+        <Button endIcon={<CaretDownIcon />} variant="contained">
+          {t('list.action')}
+        </Button>
+      </div>
+    </>
+  );
+}