build ok,

002_source/cms/src/components/widgets/detail-lists/detail-list-1.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Container from '@mui/material/Container';
+import Divider from '@mui/material/Divider';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { ArrowRight as ArrowRightIcon } from '@phosphor-icons/react/dist/ssr/ArrowRight';
+
+interface Asset {
+  name: string;
+  value: number;
+  color: string;
+}
+
+const assets = [
+  { name: 'US Dollars', value: 21500, color: '#6C76C4' },
+  { name: 'Bitcoin', value: 15300, color: '#33BB78' },
+  { name: 'XRP Ripple', value: 1076.81, color: '#FF4081' },
+] satisfies Asset[];
+
+export function DetailList1(): React.JSX.Element {
+  const totalAmount = assets.reduce((acc, asset) => {
+    return acc + asset.value;
+  }, 0);
+
+  return (
+    <Box sx={{ bgcolor: 'var(--mui-palette-background-level1)', p: 3 }}>
+      <Container maxWidth="sm">
+        <Card>
+          <CardContent>
+            <Stack divider={<Divider />} spacing={2}>
+              <div>
+                <Typography variant="overline">Total balance</Typography>
+                <Typography variant="h4">
+                  {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(totalAmount)}
+                </Typography>
+              </div>
+              <Stack spacing={2}>
+                <Typography color="text.secondary" variant="overline">
+                  Available currency
+                </Typography>
+                <List disablePadding>
+                  {assets.map((asset) => (
+                    <ListItem disableGutters key={asset.name} sx={{ py: 1.5 }}>
+                      <Stack direction="row" spacing={1} sx={{ alignItems: 'center', flex: '1 1 auto' }}>
+                        <Box sx={{ bgcolor: asset.color, height: '8px', width: '8px', borderRadius: '50%' }} />
+                        <Typography variant="subtitle2">{asset.name}</Typography>
+                      </Stack>
+                      <Typography color="text.secondary" variant="subtitle2">
+                        {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(asset.value)}
+                      </Typography>
+                    </ListItem>
+                  ))}
+                </List>
+              </Stack>
+              <Stack spacing={1} sx={{ alignItems: 'flex-start' }}>
+                <Button color="secondary" endIcon={<ArrowRightIcon />}>
+                  Add money
+                </Button>
+                <Button color="secondary" endIcon={<ArrowRightIcon />}>
+                  Withdraw funds
+                </Button>
+              </Stack>
+            </Stack>
+          </CardContent>
+        </Card>
+      </Container>
+    </Box>
+  );
+}

002_source/cms/src/components/widgets/detail-lists/detail-list-2.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+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 Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { Lock as LockIcon } from '@phosphor-icons/react/dist/ssr/Lock';
+import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
+
+import { PropertyItem } from '@/components/core/property-item';
+import { PropertyList } from '@/components/core/property-list';
+
+export function DetailList2(): React.JSX.Element {
+  return (
+    <Box sx={{ bgcolor: 'var(--mui-palette-background-level1)', p: 3 }}>
+      <Card>
+        <CardHeader title="Contact details" />
+        <Divider />
+        <PropertyList divider={<Divider />} sx={{ '--PropertyItem-padding': '16px 24px' }}>
+          {(
+            [
+              {
+                key: 'Email',
+                value: (
+                  <div>
+                    <Typography variant="body2">miron.vitold@domain.com</Typography>
+                    <Chip color="success" label="Email verified" size="small" variant="soft" />
+                  </div>
+                ),
+              },
+              { key: 'Phone', value: '(425) 434-5535' },
+              { key: 'Country', value: 'United States' },
+              { key: 'State', value: 'Michigan' },
+              { key: 'City', value: 'Southfield' },
+              { key: 'Address1', value: '1721 Bartlett Avenue' },
+              { key: 'Address2', value: '-' },
+            ] satisfies { key: string; value: React.ReactNode }[]
+          ).map(
+            (item): React.JSX.Element => (
+              <PropertyItem key={item.key} name={item.key} value={item.value} />
+            )
+          )}
+        </PropertyList>
+        <Divider />
+        <Stack spacing={1} sx={{ alignItems: 'flex-start', p: 1 }}>
+          <Button color="secondary" startIcon={<LockIcon />}>
+            Reset &amp; send password
+          </Button>
+          <Button color="secondary" startIcon={<UserIcon />}>
+            Login as customer
+          </Button>
+        </Stack>
+      </Card>
+    </Box>
+  );
+}

002_source/cms/src/components/widgets/detail-lists/detail-list-3.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardHeader from '@mui/material/CardHeader';
+import Divider from '@mui/material/Divider';
+import Select from '@mui/material/Select';
+import Typography from '@mui/material/Typography';
+import { Receipt as ReceiptIcon } from '@phosphor-icons/react/dist/ssr/Receipt';
+
+import { dayjs } from '@/lib/dayjs';
+import { Option } from '@/components/core/option';
+import { PropertyItem } from '@/components/core/property-item';
+import { PropertyList } from '@/components/core/property-list';
+
+export function DetailList3(): React.JSX.Element {
+  return (
+    <Box sx={{ bgcolor: 'var(--mui-palette-background-level1)', p: 3 }}>
+      <Card>
+        <CardHeader title="Order info" />
+        <Divider />
+        <PropertyList divider={<Divider />} sx={{ '--PropertyItem-padding': '16px 24px' }}>
+          {(
+            [
+              {
+                key: 'Customer',
+                value: (
+                  <Typography variant="subtitle2">
+                    Miron Vitold
+                    <br />
+                    1721 Bartlett Avenue
+                    <br />
+                    Southfield, Michigan, United States
+                  </Typography>
+                ),
+              },
+              { key: 'ID', value: 'ORD-001' },
+              { key: 'Date', value: dayjs().subtract(34, 'minute').format('MMM D, YYYY hh:mm A') },
+              { key: 'Promotion Code', value: 'N/A' },
+              {
+                key: 'Total Amount',
+                value: new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(94.01),
+              },
+              {
+                key: 'Status',
+                value: (
+                  <Select defaultValue="pending" name="status" sx={{ maxWidth: '100%', width: '240px' }}>
+                    <Option value="pending">Pending</Option>
+                    <Option value="completed">Completed</Option>
+                    <Option value="canceled">Canceled</Option>
+                  </Select>
+                ),
+              },
+            ] satisfies { key: string; value: React.ReactNode }[]
+          ).map(
+            (item): React.JSX.Element => (
+              <PropertyItem key={item.key} name={item.key} value={item.value} />
+            )
+          )}
+        </PropertyList>
+        <Divider />
+        <CardActions>
+          <Button color="secondary" startIcon={<ReceiptIcon />}>
+            Resend invoice
+          </Button>
+        </CardActions>
+      </Card>
+    </Box>
+  );
+}

002_source/cms/src/components/widgets/detail-lists/detail-list-4.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardHeader from '@mui/material/CardHeader';
+import Chip from '@mui/material/Chip';
+import Divider from '@mui/material/Divider';
+import Select from '@mui/material/Select';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { EnvelopeSimple as EnvelopeSimpleIcon } from '@phosphor-icons/react/dist/ssr/EnvelopeSimple';
+
+import { dayjs } from '@/lib/dayjs';
+import type { ColumnDef } from '@/components/core/data-table';
+import { DataTable } from '@/components/core/data-table';
+import { Option } from '@/components/core/option';
+
+interface Notification {
+  id: string;
+  type: string;
+  status: 'delivered' | 'pending' | 'failed';
+  createdAt: Date;
+}
+
+const notifications = [
+  {
+    id: 'EV-002',
+    type: 'Refund request approved',
+    status: 'pending',
+    createdAt: dayjs().subtract(34, 'minute').subtract(5, 'hour').subtract(3, 'day').toDate(),
+  },
+  {
+    id: 'EV-001',
+    type: 'Order confirmation',
+    status: 'delivered',
+    createdAt: dayjs().subtract(49, 'minute').subtract(11, 'hour').subtract(4, 'day').toDate(),
+  },
+] satisfies Notification[];
+
+const columns = [
+  {
+    formatter: (row): React.JSX.Element => (
+      <Typography sx={{ whiteSpace: 'nowrap' }} variant="inherit">
+        {row.type}
+      </Typography>
+    ),
+    name: 'Type',
+  },
+  {
+    formatter: (row): React.JSX.Element => {
+      const mapping = {
+        delivered: { label: 'Delivered', color: 'success' },
+        pending: { label: 'Pending', color: 'warning' },
+        failed: { label: 'Failed', color: 'error' },
+      } as const;
+      const { label, color } = mapping[row.status] ?? { label: 'Unknown', color: 'secondary' };
+
+      return <Chip color={color} label={label} size="small" variant="soft" />;
+    },
+    name: 'Status',
+    width: '200px',
+  },
+  {
+    formatter: (row): React.JSX.Element => (
+      <Typography suppressHydrationWarning sx={{ whiteSpace: 'nowrap' }} variant="inherit">
+        {dayjs(row.createdAt).format('MMM D, YYYY hh:mm A')}
+      </Typography>
+    ),
+    name: 'Date',
+    align: 'right',
+  },
+] satisfies ColumnDef<Notification>[];
+
+export function DetailList4(): React.JSX.Element {
+  return (
+    <Box sx={{ bgcolor: 'var(--mui-palette-background-level1)', p: 3 }}>
+      <Card>
+        <CardHeader
+          avatar={
+            <Avatar>
+              <EnvelopeSimpleIcon fontSize="var(--Icon-fontSize)" />
+            </Avatar>
+          }
+          title="Notifications"
+        />
+        <CardContent>
+          <Stack spacing={2}>
+            <Select defaultValue="last_invoice" name="type" sx={{ maxWidth: '100%', width: '320px' }}>
+              <Option value="last_invoice">Resend last invoice</Option>
+              <Option value="password_reset">Send password reset</Option>
+              <Option value="verification">Send verification</Option>
+            </Select>
+            <div>
+              <Button startIcon={<EnvelopeSimpleIcon />} variant="contained">
+                Send email
+              </Button>
+            </div>
+          </Stack>
+        </CardContent>
+        <Divider />
+        <Box sx={{ overflowX: 'auto' }}>
+          <DataTable<Notification> columns={columns} rows={notifications} />
+        </Box>
+      </Card>
+    </Box>
+  );
+}

002_source/cms/src/components/widgets/detail-lists/detail-list-5.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Markdown from 'react-markdown';
+
+const tags = ['React JS'] satisfies string[];
+
+const description = `Design files are attached in the files tab.
+
+Develop the web app screens for our product called "PDFace". Please look at the wireframes, system activity workflow and read the section above to understand what we're trying to archive.
+
+There's not many screens we need designed, but there will be modals and various other system triggered events that will need to be considered.
+
+The project has been created in Sketch so let me know if there are any problems opening this project and I'll try to convert into a usable file.`;
+
+export function DetailList5(): React.JSX.Element {
+  return (
+    <Box sx={{ bgcolor: 'var(--mui-palette-background-level1)', p: 3 }}>
+      <Card>
+        <CardContent>
+          <Stack spacing={3}>
+            <Stack spacing={1}>
+              <Typography color="text.secondary" variant="overline">
+                Project Name
+              </Typography>
+              <Typography variant="subtitle2">Develop a PDF Export App</Typography>
+            </Stack>
+            <Stack spacing={1}>
+              <Typography color="text.secondary" variant="overline">
+                Tags
+              </Typography>
+              <div>
+                {tags.map((tag) => (
+                  <Chip key={tag} label={tag} variant="outlined" />
+                ))}
+              </div>
+            </Stack>
+            <Stack spacing={1}>
+              <Typography color="text.secondary" variant="overline">
+                Description
+              </Typography>
+              <Box
+                sx={{
+                  '& h2': { fontWeight: 500, fontSize: '1.5rem', lineHeight: 1.2, mb: 3 },
+                  '& h3': { fontWeight: 500, fontSize: '1.25rem', lineHeight: 1.2, mb: 3 },
+                  '& p': { fontWeight: 400, fontSize: '1rem', lineHeight: 1.5, mb: 2, mt: 0 },
+                }}
+              >
+                <Markdown>{description}</Markdown>
+              </Box>
+            </Stack>
+          </Stack>
+        </CardContent>
+      </Card>
+    </Box>
+  );
+}

002_source/cms/src/components/widgets/detail-lists/detail-list-6.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Link from '@mui/material/Link';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+import { dayjs } from '@/lib/dayjs';
+
+export function DetailList6(): React.JSX.Element {
+  return (
+    <Box sx={{ bgcolor: 'var(--mui-palette-background-level1)', p: 3 }}>
+      <Card>
+        <CardContent>
+          <Stack direction="row" spacing={3}>
+            <Avatar src="/assets/avatar-11.png" />
+            <div>
+              <Link color="text.primary" underline="none" variant="subtitle2">
+                Omar Darobe
+              </Link>
+              <Typography color="text.secondary" sx={{ display: 'block', lineHeight: 1 }} variant="overline">
+                Contest holder
+              </Typography>
+            </div>
+          </Stack>
+          <List sx={{ '& .MuiListItem-root': { justifyContent: 'space-between', px: 0, py: 2 } }}>
+            <ListItem divider>
+              <Typography variant="subtitle2">Deadline</Typography>
+              <Typography color="text.secondary" variant="body2">
+                {dayjs().add(14, 'day').format('DD MMM YYYY')}
+              </Typography>
+            </ListItem>
+            <ListItem divider>
+              <Typography variant="subtitle2">Budget</Typography>
+              <Typography color="text.secondary" variant="body2">
+                {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(12500)}
+              </Typography>
+            </ListItem>
+            <ListItem>
+              <Typography variant="subtitle2">Last update</Typography>
+              <Typography color="text.secondary" variant="body2">
+                {dayjs().subtract(23, 'minute').format('DD MMM YYYY')}
+              </Typography>
+            </ListItem>
+          </List>
+        </CardContent>
+      </Card>
+    </Box>
+  );
+}

002_source/cms/src/components/widgets/detail-lists/detail-list-7.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardHeader from '@mui/material/CardHeader';
+import Link from '@mui/material/Link';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { BookOpen as BookOpenIcon } from '@phosphor-icons/react/dist/ssr/BookOpen';
+import { Briefcase as BriefcaseIcon } from '@phosphor-icons/react/dist/ssr/Briefcase';
+import { EnvelopeSimple as EnvelopeSimpleIcon } from '@phosphor-icons/react/dist/ssr/EnvelopeSimple';
+import { House as HouseIcon } from '@phosphor-icons/react/dist/ssr/House';
+
+export function DetailList7(): React.JSX.Element {
+  return (
+    <Box sx={{ bgcolor: 'var(--mui-palette-background-level1)', p: 3 }}>
+      <Card>
+        <CardHeader title="About" />
+        <CardContent>
+          <Stack spacing={2}>
+            <Typography color="text.secondary" variant="subtitle2">
+              &quot; Everyone thinks of changing the world, but no one thinks of changing himself. &quot;
+            </Typography>
+            <List disablePadding sx={{ '& .MuiListItem-root': { px: 0, py: 2 } }}>
+              <ListItem divider>
+                <ListItemIcon>
+                  <BriefcaseIcon />
+                </ListItemIcon>
+                <ListItemText
+                  disableTypography
+                  primary={
+                    <Typography noWrap variant="subtitle2">
+                      Product Designer at{' '}
+                      <Link color="text.primary" variant="subtitle2">
+                        Devias IO
+                      </Link>
+                    </Typography>
+                  }
+                  secondary={
+                    <Typography color="text.secondary" noWrap variant="body2">
+                      Past: UX Designer{' '}
+                      <Link color="text.secondary" variant="body2">
+                        Focus Aesthetic Dynamics
+                      </Link>
+                    </Typography>
+                  }
+                />
+              </ListItem>
+              <ListItem divider>
+                <ListItemIcon>
+                  <BookOpenIcon />
+                </ListItemIcon>
+                <ListItemText
+                  disableTypography
+                  primary={
+                    <Link color="text.secondary" noWrap sx={{ cursor: 'pointer' }} underline="always" variant="body2">
+                      Add school or collage
+                    </Link>
+                  }
+                />
+              </ListItem>
+              <ListItem divider>
+                <ListItemIcon>
+                  <HouseIcon />
+                </ListItemIcon>
+                <ListItemText
+                  disableTypography
+                  primary={
+                    <Typography noWrap variant="subtitle2">
+                      Lives in{' '}
+                      <Link color="text.primary" variant="subtitle2">
+                        Bucharest
+                      </Link>
+                    </Typography>
+                  }
+                  secondary={
+                    <Typography color="text.secondary" noWrap variant="body2">
+                      Originally from{' '}
+                      <Link color="text.secondary" variant="body2">
+                        Rm. Valcea
+                      </Link>
+                    </Typography>
+                  }
+                />
+              </ListItem>
+              <ListItem>
+                <ListItemIcon>
+                  <EnvelopeSimpleIcon />
+                </ListItemIcon>
+                <ListItemText
+                  disableTypography
+                  primary={
+                    <Typography noWrap variant="subtitle2">
+                      sofia@devias.io
+                    </Typography>
+                  }
+                />
+              </ListItem>
+            </List>
+          </Stack>
+        </CardContent>
+      </Card>
+    </Box>
+  );
+}