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>
+  );
+}
--- a/002_source/cms/src/app/dashboard/Sample/Helloworld.tsx
+++ b/002_source/cms/src/app/dashboard/Sample/Helloworld.tsx
@@ -0,0 +1,14 @@
+'use client';
+
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+
+function Page(): React.JSX.Element {
+  React.useLayoutEffect(() => {
+    console.log('helloworld');
+  }, []);
+
+  return <>helloworld</>;
+}
+
+export default Page;
--- a/002_source/cms/src/app/dashboard/Sample/SampleAddressCard.tsx
+++ b/002_source/cms/src/app/dashboard/Sample/SampleAddressCard.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import { useParams, useRouter } from 'next/navigation';
+import getLessonCategoryById from '@/db/LessonCategories/GetById';
+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 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 Grid from '@mui/material/Unstable_Grid2';
+import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
+import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';
+import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
+import { CreditCard as CreditCardIcon } from '@phosphor-icons/react/dist/ssr/CreditCard';
+import { House as HouseIcon } from '@phosphor-icons/react/dist/ssr/House';
+import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
+import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
+import { ShieldWarning as ShieldWarningIcon } from '@phosphor-icons/react/dist/ssr/ShieldWarning';
+import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
+import type { RecordModel } from 'pocketbase';
+import { useTranslation } from 'react-i18next';
+
+import type { Address } from '@/types/Address';
+import { LpCategory } from '@/types/LpCategory';
+import { paths } from '@/paths';
+import { dayjs } from '@/lib/dayjs';
+import { logger } from '@/lib/default-logger';
+import { pb } from '@/lib/pb';
+import { PropertyItem } from '@/components/core/property-item';
+import { PropertyList } from '@/components/core/property-list';
+import { toast } from '@/components/core/toaster';
+import ErrorDisplay from '@/components/dashboard/error';
+import LpCategoryDefaultValue, { defaultLpCategory } from '@/components/dashboard/lp_categories/_constants';
+import { Notifications } from '@/components/dashboard/lp_categories/notifications';
+import { Payments } from '@/components/dashboard/lp_categories/payments';
+import { ShippingAddress } from '@/components/dashboard/lp_categories/shipping-address';
+
+import { SampleAddresses } from './SampleAddresses';
+import { SampleNotifications } from './SampleNotifications';
+import { SamplePayments } from './SamplePayments';
+
+export default function SampleAddressCard(): React.JSX.Element {
+  const { t } = useTranslation();
+  return (
+    <Card>
+      <CardHeader
+        action={
+          <Button color="secondary" startIcon={<PlusIcon />}>
+            {t('list.add')}
+          </Button>
+        }
+        avatar={
+          <Avatar>
+            <HouseIcon fontSize="var(--Icon-fontSize)" />
+          </Avatar>
+        }
+        title={t('list.shipping-addresses')}
+      />
+      <CardContent>
+        <Grid container spacing={3}>
+          {(SampleAddresses satisfies Address[]).map((address) => (
+            <Grid key={address.id} md={6} xs={12}>
+              <ShippingAddress address={address} />
+            </Grid>
+          ))}
+        </Grid>
+      </CardContent>
+    </Card>
+  );
+}
--- a/002_source/cms/src/app/dashboard/Sample/SampleAddresses.tsx
+++ b/002_source/cms/src/app/dashboard/Sample/SampleAddresses.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import type { Address } from '@/types/Address';
+
+export const SampleAddresses: Address[] = [
+  {
+    id: 'ADR-001',
+    country: 'United States',
+    state: 'Michigan',
+    city: 'Lansing',
+    zipCode: '48933',
+    street: '480 Haven Lane',
+    primary: true,
+  },
+  {
+    id: 'ADR-002',
+    country: 'United States',
+    state: 'Missouri',
+    city: 'Springfield',
+    zipCode: '65804',
+    street: '4807 Lighthouse Drive',
+  },
+];
--- a/002_source/cms/src/app/dashboard/Sample/SampleNotifications.tsx
+++ b/002_source/cms/src/app/dashboard/Sample/SampleNotifications.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+// import { dayjs } from 'dayjs';
+import type { Notification } from '@/types/notification';
+import { dayjs } from '@/lib/dayjs';
+
+export const SampleNotifications: Notification[] = [
+  {
+    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(),
+  },
+];
--- a/002_source/cms/src/app/dashboard/Sample/SamplePaymentCard.tsx
+++ b/002_source/cms/src/app/dashboard/Sample/SamplePaymentCard.tsx
@@ -0,0 +1,95 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import { useParams, useRouter } from 'next/navigation';
+import getLessonCategoryById from '@/db/LessonCategories/GetById';
+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 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 Grid from '@mui/material/Unstable_Grid2';
+import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
+import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';
+import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
+import { CreditCard as CreditCardIcon } from '@phosphor-icons/react/dist/ssr/CreditCard';
+import { House as HouseIcon } from '@phosphor-icons/react/dist/ssr/House';
+import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
+import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
+import { ShieldWarning as ShieldWarningIcon } from '@phosphor-icons/react/dist/ssr/ShieldWarning';
+import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
+import type { RecordModel } from 'pocketbase';
+import { useTranslation } from 'react-i18next';
+
+import type { Address } from '@/types/Address';
+import { LpCategory } from '@/types/LpCategory';
+import { paths } from '@/paths';
+import { dayjs } from '@/lib/dayjs';
+import { logger } from '@/lib/default-logger';
+import { pb } from '@/lib/pb';
+import { PropertyItem } from '@/components/core/property-item';
+import { PropertyList } from '@/components/core/property-list';
+import { toast } from '@/components/core/toaster';
+import ErrorDisplay from '@/components/dashboard/error';
+import LpCategoryDefaultValue, { defaultLpCategory } from '@/components/dashboard/lp_categories/_constants';
+import { Notifications } from '@/components/dashboard/lp_categories/notifications';
+import { Payments } from '@/components/dashboard/lp_categories/payments';
+import { ShippingAddress } from '@/components/dashboard/lp_categories/shipping-address';
+
+import SampleAddressCard from './SampleAddressCard';
+import { SampleAddresses } from './SampleAddresses';
+import { SampleNotifications } from './SampleNotifications';
+import { SamplePayments } from './SamplePayments';
+
+export default function SamplePaymentCard(): React.JSX.Element {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Payments ordersValue={2069.48} payments={SamplePayments} refundsValue={324.5} totalOrders={5} />
+      <Card>
+        <CardHeader
+          action={
+            <Button color="secondary" startIcon={<PencilSimpleIcon />}>
+              {t('list.edit')}
+            </Button>
+          }
+          avatar={
+            <Avatar>
+              <CreditCardIcon fontSize="var(--Icon-fontSize)" />
+            </Avatar>
+          }
+          title={t('list.billing-details')}
+        />
+        <CardContent>
+          <Card sx={{ borderRadius: 1 }} variant="outlined">
+            <PropertyList divider={<Divider />} sx={{ '--PropertyItem-padding': '16px' }}>
+              {(
+                [
+                  { key: t('Credit card'), value: '**** 4142' },
+                  { key: t('Country'), value: t('United States') },
+                  { key: t('State'), value: t('Michigan') },
+                  { key: t('City'), value: t('Southfield') },
+                  { key: t('Address'), value: t('Address') },
+                  { key: t('Tax ID'), value: t('Tax ID') },
+                ] satisfies { key: string; value: React.ReactNode }[]
+              ).map(
+                (item): React.JSX.Element => (
+                  <PropertyItem key={item.key} name={item.key} value={item.value} />
+                )
+              )}
+            </PropertyList>
+          </Card>
+        </CardContent>
+      </Card>
+    </>
+  );
+}
--- a/002_source/cms/src/app/dashboard/Sample/SamplePayments.tsx
+++ b/002_source/cms/src/app/dashboard/Sample/SamplePayments.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+// import { dayjs } from 'dayjs';
+import type { Payment } from '@/types/Payment';
+import { dayjs } from '@/lib/dayjs';
+
+export const SamplePayments: Payment[] = [
+  {
+    currency: 'USD',
+    amount: 500,
+    invoiceId: 'INV-005',
+    status: 'completed',
+    createdAt: dayjs().subtract(5, 'minute').subtract(1, 'hour').toDate(),
+  },
+  {
+    currency: 'USD',
+    amount: 324.5,
+    invoiceId: 'INV-004',
+    status: 'refunded',
+    createdAt: dayjs().subtract(21, 'minute').subtract(2, 'hour').toDate(),
+  },
+  {
+    currency: 'USD',
+    amount: 746.5,
+    invoiceId: 'INV-003',
+    status: 'completed',
+    createdAt: dayjs().subtract(7, 'minute').subtract(3, 'hour').toDate(),
+  },
+  {
+    currency: 'USD',
+    amount: 56.89,
+    invoiceId: 'INV-002',
+    status: 'completed',
+    createdAt: dayjs().subtract(48, 'minute').subtract(4, 'hour').toDate(),
+  },
+  {
+    currency: 'USD',
+    amount: 541.59,
+    invoiceId: 'INV-001',
+    status: 'completed',
+    createdAt: dayjs().subtract(31, 'minute').subtract(5, 'hour').toDate(),
+  },
+];
--- a/002_source/cms/src/app/dashboard/Sample/SampleSecurityCard.tsx
+++ b/002_source/cms/src/app/dashboard/Sample/SampleSecurityCard.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+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 Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { ShieldWarning as ShieldWarningIcon } from '@phosphor-icons/react/dist/ssr/ShieldWarning';
+import { useTranslation } from 'react-i18next';
+
+export default function SampleSecurityCard(): React.JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <Card>
+      <CardHeader
+        avatar={
+          <Avatar>
+            <ShieldWarningIcon fontSize="var(--Icon-fontSize)" />
+          </Avatar>
+        }
+        title={t('list.security')}
+      />
+      <CardContent>
+        <Stack spacing={1}>
+          <div>
+            <Button color="error" variant="contained">
+              {t('Delete account')}
+            </Button>
+          </div>
+          <Typography color="text.secondary" variant="body2">
+            {t('a-deleted-customer-cannot-be-restored-all-data-will-be-permanently-removed')}
+          </Typography>
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+}
--- a/002_source/cms/src/app/dashboard/Sample/SampleTitleCard.tsx
+++ b/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>
+    </>
+  );
+}