```

add phone field to User model and update notification relations ```
```
2025-05-11 16:59:02 +08:00 · 2025-05-11 16:32:27 +08:00 · 2025-05-11 16:32:01 +08:00 · 2025-05-11 16:31:50 +08:00 · 2025-05-11 16:31:32 +08:00 · 2025-05-11 16:30:50 +08:00
30 changed files with 866 additions and 7498 deletions
--- a/001_documentation/Requirements/REQ0006/schema.dbml
+++ b/001_documentation/Requirements/REQ0006/schema.dbml
@@ -1,4 +1,4 @@
-// Generated at:  2025-05-08T05:00:49.862Z
+// Generated at:  2025-05-11T08:58:29.867Z
 // 
@@ -32,6 +32,7 @@ Table users {
  created datetime
  updated datetime
  visible text
  phone text
 }
 // 
@@ -119,6 +120,8 @@ Table Notifications {
  NOTI_ID text
  created datetime
  updated datetime
  to_user_id integer [ref: > UserMetas.id] // relation704048736
  from_user_id integer [ref: > UserMetas.id] // relation556806202
 }
 // 
@@ -346,7 +349,6 @@ Table UserMetas {
  name text
  email text
  phone text
  avatar_file file
 }
 // 
--- a/001_documentation/Requirements/REQ0006/schema.json
+++ b/001_documentation/Requirements/REQ0006/schema.json
@@ -318,6 +318,20 @@
        "required": false,
        "system": false,
        "type": "text"
      },
      {
        "autogeneratePattern": "",
        "hidden": false,
        "id": "text1146066909",
        "max": 0,
        "min": 0,
        "name": "phone",
        "pattern": "",
        "presentable": false,
        "primaryKey": false,
        "required": false,
        "system": false,
        "type": "text"
      }
    ],
    "indexes": [
@@ -1110,6 +1124,32 @@
        "presentable": false,
        "system": false,
        "type": "autodate"
      },
      {
        "cascadeDelete": false,
        "collectionId": "pbc_1305841361",
        "hidden": false,
        "id": "relation704048736",
        "maxSelect": 1,
        "minSelect": 0,
        "name": "to_user_id",
        "presentable": false,
        "required": false,
        "system": false,
        "type": "relation"
      },
      {
        "cascadeDelete": false,
        "collectionId": "pbc_1305841361",
        "hidden": false,
        "id": "relation556806202",
        "maxSelect": 1,
        "minSelect": 0,
        "name": "from_user_id",
        "presentable": false,
        "required": false,
        "system": false,
        "type": "relation"
      }
    ],
    "indexes": [],
@@ -2903,18 +2943,15 @@
        "type": "text"
      },
      {
-        "autogeneratePattern": "",
+        "exceptDomains": null,
        "hidden": false,
-        "id": "text3885137012",
+        "id": "email3885137012",
        "max": 0,
        "min": 0,
        "name": "email",
-        "pattern": "",
+        "onlyDomains": null,
        "presentable": false,
        "primaryKey": false,
        "required": false,
        "system": false,
-        "type": "text"
+        "type": "email"
      },
      {
        "autogeneratePattern": "",
@@ -2929,20 +2966,6 @@
        "required": false,
        "system": false,
        "type": "text"
      },
      {
        "hidden": false,
        "id": "file507207115",
        "maxSelect": 1,
        "maxSize": 0,
        "mimeTypes": [],
        "name": "avatar_file",
        "presentable": false,
        "protected": false,
        "required": false,
        "system": false,
        "thumbs": [],
        "type": "file"
      }
    ],
    "indexes": [],
--- a/002_source/cms/prettier.config.mjs
+++ b/002_source/cms/prettier.config.mjs
@@ -28,9 +28,7 @@ const config = {
    '',
    '^[./]',
  ],
-  plugins: [
+  plugins: ['@ianvs/prettier-plugin-sort-imports'],
    // '@ianvs/prettier-plugin-sort-imports'
  ],
  overrides: [
    {
      files: ['*.tsx'],
--- a/002_source/cms/src/app/dashboard/Sample/_repomix.md
+++ b/002_source/cms/src/app/dashboard/Sample/_repomix.md
--- a/002_source/cms/src/app/dashboard/Sample/repomix-output.xml
+++ b/002_source/cms/src/app/dashboard/Sample/repomix-output.xml
@@ -1,558 +0,0 @@
 This file is a merged representation of the entire codebase, combined into a single document by Repomix.
 <file_summary>
 This section contains a summary of this file.
 <purpose>
 This file contains a packed representation of the entire repository's contents.
 It is designed to be easily consumable by AI systems for analysis, code review,
 or other automated processes.
 </purpose>
 <file_format>
 The content is organized as follows:
 1. This summary section
 2. Repository information
 3. Directory structure
 4. Repository files, each consisting of:
  - File path as an attribute
  - Full contents of the file
 </file_format>
 <usage_guidelines>
 - This file should be treated as read-only. Any changes should be made to the
  original repository files, not this packed version.
 - When processing this file, use the file path to distinguish
  between different files in the repository.
 - Be aware that this file may contain sensitive information. Handle it with
  the same level of security as you would the original repository.
 </usage_guidelines>
 <notes>
 - Some files may have been excluded based on .gitignore rules and Repomix's configuration
 - Binary files are not included in this packed representation. Please refer to the Repository Structure section for a complete list of file paths, including binary files
 - Files matching patterns in .gitignore are excluded
 - Files matching default ignore patterns are excluded
 - Files are sorted by Git change count (files with more changes are at the bottom)
 </notes>
 <additional_info>
 </additional_info>
 </file_summary>
 <directory_structure>
 AddressCard/
  index.tsx
  SampleAddresses.tsx
 BasicDetailCard/
  index.tsx
 Notifications/
  index.tsx
  type.d.ts
 PaymentCard/
  index.tsx
  SamplePayments.tsx
 SecurityCard/
  index.tsx
 TitleCard/
  index.tsx
 Helloworld.tsx
 </directory_structure>
 <files>
 This section contains the contents of the repository's files.
 <file path="AddressCard/index.tsx">
 '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 Grid from '@mui/material/Unstable_Grid2';
 import { House as HouseIcon } from '@phosphor-icons/react/dist/ssr/House';
 import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
 import { useTranslation } from 'react-i18next';
 import type { Address } from '@/types/Address';
 import { ShippingAddress } from '@/components/dashboard/lp/categories/shipping-address';
 import { SampleAddresses } from './SampleAddresses';
 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>
  );
 }
 </file>
 <file path="AddressCard/SampleAddresses.tsx">
 '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',
  },
 ];
 </file>
 <file path="BasicDetailCard/index.tsx">
 'use client';
 import * as React from 'react';
 import { 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 { 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();
  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>
  );
 }
 </file>
 <file path="Notifications/index.tsx">
 'use client';
 import { dayjs } from '@/lib/dayjs';
 import type { Notification } from './type';
 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(),
  },
 ];
 </file>
 <file path="Notifications/type.d.ts">
 export interface Notification {
  id: string;
  type: string;
  status: 'delivered' | 'pending' | 'failed';
  createdAt: Date;
 }
 </file>
 <file path="PaymentCard/index.tsx">
 '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 Divider from '@mui/material/Divider';
 import { CreditCard as CreditCardIcon } from '@phosphor-icons/react/dist/ssr/CreditCard';
 import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
 import { useTranslation } from 'react-i18next';
 import { PropertyItem } from '@/components/core/property-item';
 import { PropertyList } from '@/components/core/property-list';
 import { Payments } from '@/components/dashboard/lp/categories/payments';
 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>
    </>
  );
 }
 </file>
 <file path="PaymentCard/SamplePayments.tsx">
 '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(),
  },
 ];
 </file>
 <file path="SecurityCard/index.tsx">
 '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>
  );
 }
 </file>
 <file path="TitleCard/index.tsx">
 '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>
    </>
  );
 }
 </file>
 <file path="Helloworld.tsx">
 '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;
 </file>
 </files>
--- a/002_source/cms/src/app/dashboard/lp/_repomix.md
+++ b/002_source/cms/src/app/dashboard/lp/_repomix.md
--- a/002_source/cms/src/app/dashboard/lp/repomix-output.xml
+++ b/002_source/cms/src/app/dashboard/lp/repomix-output.xml
--- a/002_source/cms/src/app/dashboard/settings/account/page.tsx
+++ b/002_source/cms/src/app/dashboard/settings/account/page.tsx
@@ -1,7 +1,10 @@
 'use client';
 import * as React from 'react';
-import type { Metadata } from 'next';
+// import type { Metadata } from 'next';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 import { config } from '@/config';
 import { AccountDetails } from '@/components/dashboard/settings/account-details';
@@ -9,13 +12,15 @@ import { DeleteAccount } from '@/components/dashboard/settings/delete-account';
 import { Privacy } from '@/components/dashboard/settings/privacy';
 import { ThemeSwitch } from '@/components/dashboard/settings/theme-switch';
-export const metadata = { title: `Account | Settings | Dashboard | ${config.site.name}` } satisfies Metadata;
+// export const metadata = { title: `Account | Settings | Dashboard | ${config.site.name}` } satisfies Metadata;
 export default function Page(): React.JSX.Element {
  const { t } = useTranslation();
  return (
    <Stack spacing={4}>
      <div>
-        <Typography variant="h4">Account</Typography>
+        <Typography variant="h4">{t('account')}</Typography>
      </div>
      <Stack spacing={4}>
        <AccountDetails />
--- a/002_source/cms/src/app/dashboard/settings/layout.tsx
+++ b/002_source/cms/src/app/dashboard/settings/layout.tsx
@@ -18,7 +18,11 @@ export default function Layout({ children }: LayoutProps): React.JSX.Element {
        width: 'var(--Content-width)',
      }}
    >
-      <Stack direction={{ xs: 'column', md: 'row' }} spacing={4} sx={{ position: 'relative' }}>
+      <Stack
        direction={{ xs: 'column', md: 'row' }}
        spacing={4}
        sx={{ position: 'relative' }}
      >
        <SideNav />
        <Box sx={{ flex: '1 1 auto', minWidth: 0 }}>{children}</Box>
      </Stack>
--- a/002_source/cms/src/app/dashboard/settings/notifications/page.tsx
+++ b/002_source/cms/src/app/dashboard/settings/notifications/page.tsx
@@ -14,10 +14,11 @@ import { PhoneNotifications } from '@/components/dashboard/settings/phone-notifi
 export default function Page(): React.JSX.Element {
  const { t } = useTranslation();
  return (
    <Stack spacing={4}>
      <div>
-        <Typography variant="h4">{t('Notifications')}</Typography>
+        <Typography variant="h4">{t('notifications')}</Typography>
      </div>
      <Stack spacing={4}>
        <EmailNotifications />
--- a/002_source/cms/src/app/dashboard/settings/security/page.tsx
+++ b/002_source/cms/src/app/dashboard/settings/security/page.tsx
@@ -1,7 +1,10 @@
 'use client';
 import * as React from 'react';
 import type { Metadata } from 'next';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 import { config } from '@/config';
 import { dayjs } from '@/lib/dayjs';
@@ -9,13 +12,15 @@ import { LoginHistory } from '@/components/dashboard/settings/login-history';
 import { MultiFactor } from '@/components/dashboard/settings/multi-factor';
 import { PasswordForm } from '@/components/dashboard/settings/password-form';
-export const metadata = { title: `Security | Settings | Dashboard | ${config.site.name}` } satisfies Metadata;
+// export const metadata = { title: `Security | Settings | Dashboard | ${config.site.name}` } satisfies Metadata;
 export default function Page(): React.JSX.Element {
  const { t } = useTranslation();
  return (
    <Stack spacing={4}>
      <div>
-        <Typography variant="h4">Security</Typography>
+        <Typography variant="h4">{t('security')}</Typography>
      </div>
      <Stack spacing={4}>
        <PasswordForm />
--- a/002_source/cms/src/app/dashboard/settings/team/page.tsx
+++ b/002_source/cms/src/app/dashboard/settings/team/page.tsx
@@ -1,33 +1,38 @@
 'use client';
 import * as React from 'react';
-import type { Metadata } from 'next';
+// import type { Metadata } from 'next';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 import { config } from '@/config';
 import { Members } from '@/components/dashboard/settings/members';
-export const metadata = { title: `Team | Settings | Dashboard | ${config.site.name}` } satisfies Metadata;
+// export const metadata = { title: `Team | Settings | Dashboard | ${config.site.name}` } satisfies Metadata;
 export default function Page(): React.JSX.Element {
  const { t } = useTranslation();
  return (
    <Stack spacing={4}>
      <div>
-        <Typography variant="h4">Team</Typography>
+        <Typography variant="h4">{t('team')}</Typography>
      </div>
      <Members
        members={[
          {
            id: 'USR-000',
-            name: 'Sofia Rivers',
+            name: 'team member1',
            avatar: '/assets/avatar.png',
-            email: 'sofia@devias.io',
+            email: 'teamMember1@devias.io',
            role: 'Owner',
          },
          {
            id: 'USR-002',
-            name: 'Siegbert Gottfried',
+            name: 'team member2',
            avatar: '/assets/avatar-2.png',
-            email: 'siegbert.gottfried@domain.com',
+            email: 'teamMember2@domain.com',
            role: 'Standard',
          },
        ]}
--- a/002_source/cms/src/components/dashboard/layout/contacts-popover.tsx
+++ b/002_source/cms/src/components/dashboard/layout/contacts-popover.tsx
@@ -112,9 +112,15 @@ export function ContactsPopover({ anchorEl, onClose, open = false }: ContactsPop
        <Typography variant="h6">Contacts</Typography>
      </Box>
      <Box sx={{ maxHeight: '400px', overflowY: 'auto', px: 1, pb: 2 }}>
-        <List disablePadding sx={{ '& .MuiListItemButton-root': { borderRadius: 1 } }}>
+        <List
          disablePadding
          sx={{ '& .MuiListItemButton-root': { borderRadius: 1 } }}
        >
          {contacts.map((contact) => (
-            <ListItem disablePadding key={contact.id}>
+            <ListItem
              disablePadding
              key={contact.id}
            >
              <ListItemButton>
                <ListItemAvatar>
                  <Avatar src={contact.avatar} />
@@ -122,14 +128,28 @@ export function ContactsPopover({ anchorEl, onClose, open = false }: ContactsPop
                <ListItemText
                  disableTypography
                  primary={
-                    <Link color="text.primary" noWrap underline="none" variant="subtitle2">
+                    <Link
                      color="text.primary"
                      noWrap
                      underline="none"
                      variant="subtitle2"
                    >
                      {contact.name}
                    </Link>
                  }
                />
-                {contact.status !== 'offline' ? <Presence size="small" status={contact.status} /> : null}
+                {contact.status !== 'offline' ? (
                  <Presence
                    size="small"
                    status={contact.status}
                  />
                ) : null}
                {contact.status === 'offline' && Boolean(contact.lastActivity) ? (
-                  <Typography color="text.secondary" sx={{ whiteSpace: 'nowrap' }} variant="caption">
+                  <Typography
                    color="text.secondary"
                    sx={{ whiteSpace: 'nowrap' }}
                    variant="caption"
                  >
                    {dayjs(contact.lastActivity).fromNow()}
                  </Typography>
                ) : null}
--- a/002_source/cms/src/components/dashboard/layout/horizontal/horizontal-layout.tsx
+++ b/002_source/cms/src/components/dashboard/layout/horizontal/horizontal-layout.tsx
@@ -34,6 +34,7 @@ export function HorizontalLayout({ children }: HorizontalLayoutProps): React.JSX
          color={settings.navColor}
          items={layoutConfig.navItems}
        />
        <Box
          component="main"
          sx={{
--- a/002_source/cms/src/components/dashboard/layout/horizontal/main-nav/index.tsx
+++ b/002_source/cms/src/components/dashboard/layout/horizontal/main-nav/index.tsx
@@ -36,15 +36,15 @@ import { Logo } from '@/components/core/logo';
 import { SearchDialog } from '@/components/dashboard/layout/search-dialog';
 import type { ColorScheme } from '@/styles/theme/types';
-import { ContactsPopover } from '../contacts-popover';
+import { ContactsPopover } from '../../contacts-popover';
-import { languageFlags, LanguagePopover } from '../language-popover';
+import { languageFlags, LanguagePopover } from '../../language-popover';
-import type { Language } from '../language-popover';
+import type { Language } from '../../language-popover';
-import { MobileNav } from '../mobile-nav';
+import { MobileNav } from '../../mobile-nav';
-import { icons } from '../nav-icons';
+import { icons } from '../../nav-icons';
-import { NotificationsPopover } from '../notifications-popover';
+import { NotificationsPopover } from '../../notifications-popover';
-import { UserPopover } from '../user-popover/user-popover';
+import { UserPopover } from '../../user-popover/user-popover';
-import { WorkspacesSwitch } from '../workspaces-switch';
+import { WorkspacesSwitch } from '../../workspaces-switch';
-import { navColorStyles } from './styles';
+import { navColorStyles } from '../styles';
 const logoColors = {
  dark: { blend_in: 'light', discrete: 'light', evident: 'light' },
--- a/002_source/cms/src/components/dashboard/layout/vertical/main-nav/user-button.tsx
+++ b/002_source/cms/src/components/dashboard/layout/vertical/main-nav/user-button.tsx
@@ -9,9 +9,12 @@ import type { User } from '@/types/user';
 import { usePopover } from '@/hooks/use-popover';
 import { UserPopover } from '../../user-popover/user-popover';
 import { useUser } from '@/hooks/use-user';
 import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
 // import { NotificationsButton } from './notifications-button';
-const user = {
+// TODO:remove me
 const user1 = {
  id: 'USR-000',
  name: 'Sofia Rivers',
  avatar: '/assets/avatar.png',
@@ -20,6 +23,9 @@ const user = {
 export function UserButton(): React.JSX.Element {
  const popover = usePopover<HTMLButtonElement>();
  const { user, error, isLoading } = useUser();
  if (!user) return <>loading</>;
  return (
    <React.Fragment>
@@ -44,7 +50,7 @@ export function UserButton(): React.JSX.Element {
          }}
          variant="dot"
        >
-          <Avatar src={user.avatar} />
+          <Avatar src={getImageUrlFromFile(user.collectionId, user.id, user.avatar)} />
        </Badge>
      </Box>
      <UserPopover
--- a/002_source/cms/src/components/dashboard/layout/vertical/side-nav/index.tsx
+++ b/002_source/cms/src/components/dashboard/layout/vertical/side-nav/index.tsx
@@ -0,0 +1,98 @@
 'use client';
 import * as React from 'react';
 import RouterLink from 'next/link';
 import { usePathname } from 'next/navigation';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { ArrowSquareOut as ArrowSquareOutIcon } from '@phosphor-icons/react/dist/ssr/ArrowSquareOut';
 import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';
 import { CaretRight as CaretRightIcon } from '@phosphor-icons/react/dist/ssr/CaretRight';
 import { useTranslation } from 'react-i18next';
 import type { NavItemConfig } from '@/types/nav';
 import type { NavColor } from '@/types/settings';
 import { paths } from '@/paths';
 import { isNavItemActive } from '@/lib/is-nav-item-active';
 import { useSettings } from '@/hooks/use-settings';
 import { Logo } from '@/components/core/logo';
 import type { ColorScheme } from '@/styles/theme/types';
 import { icons } from '../../nav-icons';
 import { WorkspacesSwitch } from '../../workspaces-switch';
 import { navColorStyles } from '../styles';
 import { RenderNavGroups } from './render-nav-groups';
 const logoColors = {
  dark: { blend_in: 'light', discrete: 'light', evident: 'light' },
  light: { blend_in: 'dark', discrete: 'dark', evident: 'light' },
 } as Record<ColorScheme, Record<NavColor, 'dark' | 'light'>>;
 export interface SideNavProps {
  color?: NavColor;
  items?: NavItemConfig[];
 }
 export function SideNav({ color = 'evident', items = [] }: SideNavProps): React.JSX.Element {
  const pathname = usePathname();
  const {
    settings: { colorScheme = 'light' },
  } = useSettings();
  const styles = navColorStyles[colorScheme][color];
  const logoColor = logoColors[colorScheme][color];
  return (
    <Box
      sx={{
        ...styles,
        bgcolor: 'var(--SideNav-background)',
        borderRight: 'var(--SideNav-border)',
        color: 'var(--SideNav-color)',
        display: { xs: 'none', lg: 'flex' },
        flexDirection: 'column',
        height: '100%',
        left: 0,
        position: 'fixed',
        top: 0,
        width: 'var(--SideNav-width)',
        zIndex: 'var(--SideNav-zIndex)',
      }}
    >
      <Stack
        spacing={2}
        sx={{ p: 2 }}
      >
        <div>
          <Box
            component={RouterLink}
            href={paths.home}
            sx={{ display: 'inline-flex' }}
          >
            <Logo
              color={logoColor}
              height={32}
              width={122}
            />
          </Box>
        </div>
        <WorkspacesSwitch />
      </Stack>
      <Box
        component="nav"
        sx={{
          flex: '1 1 auto',
          overflowY: 'auto',
          p: 2,
          scrollbarWidth: 'none',
          '&::-webkit-scrollbar': { display: 'none' },
        }}
      >
        {RenderNavGroups({ items, pathname })}
      </Box>
    </Box>
  );
 }
--- a/002_source/cms/src/components/dashboard/layout/vertical/side-nav/nav-item.tsx
+++ b/002_source/cms/src/components/dashboard/layout/vertical/side-nav/nav-item.tsx
@@ -2,10 +2,8 @@
 import * as React from 'react';
 import RouterLink from 'next/link';
 import { usePathname } from 'next/navigation';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { ArrowSquareOut as ArrowSquareOutIcon } from '@phosphor-icons/react/dist/ssr/ArrowSquareOut';
 import { CaretDown as CaretDownIcon } from '@phosphor-icons/react/dist/ssr/CaretDown';
@@ -13,136 +11,9 @@ import { CaretRight as CaretRightIcon } from '@phosphor-icons/react/dist/ssr/Car
 import { useTranslation } from 'react-i18next';
 import type { NavItemConfig } from '@/types/nav';
 import type { NavColor } from '@/types/settings';
 import { paths } from '@/paths';
 import { isNavItemActive } from '@/lib/is-nav-item-active';
 import { useSettings } from '@/hooks/use-settings';
 import { Logo } from '@/components/core/logo';
 import type { ColorScheme } from '@/styles/theme/types';
-import { icons } from '../nav-icons';
+import { icons } from '../../nav-icons';
 import { WorkspacesSwitch } from '../workspaces-switch';
 import { navColorStyles } from './styles';
 const logoColors = {
  dark: { blend_in: 'light', discrete: 'light', evident: 'light' },
  light: { blend_in: 'dark', discrete: 'dark', evident: 'light' },
 } as Record<ColorScheme, Record<NavColor, 'dark' | 'light'>>;
 export interface SideNavProps {
  color?: NavColor;
  items?: NavItemConfig[];
 }
 export function SideNav({ color = 'evident', items = [] }: SideNavProps): React.JSX.Element {
  const pathname = usePathname();
  const {
    settings: { colorScheme = 'light' },
  } = useSettings();
  const styles = navColorStyles[colorScheme][color];
  const logoColor = logoColors[colorScheme][color];
  return (
    <Box
      sx={{
        ...styles,
        bgcolor: 'var(--SideNav-background)',
        borderRight: 'var(--SideNav-border)',
        color: 'var(--SideNav-color)',
        display: { xs: 'none', lg: 'flex' },
        flexDirection: 'column',
        height: '100%',
        left: 0,
        position: 'fixed',
        top: 0,
        width: 'var(--SideNav-width)',
        zIndex: 'var(--SideNav-zIndex)',
      }}
    >
      <Stack spacing={2} sx={{ p: 2 }}>
        <div>
          <Box component={RouterLink} href={paths.home} sx={{ display: 'inline-flex' }}>
            <Logo color={logoColor} height={32} width={122} />
          </Box>
        </div>
        <WorkspacesSwitch />
      </Stack>
      <Box
        component="nav"
        sx={{
          flex: '1 1 auto',
          overflowY: 'auto',
          p: 2,
          scrollbarWidth: 'none',
          '&::-webkit-scrollbar': { display: 'none' },
        }}
      >
        {RenderNavGroups({ items, pathname })}
      </Box>
    </Box>
  );
 }
 function RenderNavGroups({ items, pathname }: { items: NavItemConfig[]; pathname: string }): React.JSX.Element {
  const { t } = useTranslation();
  const children = items.reduce((acc: React.ReactNode[], curr: NavItemConfig): React.ReactNode[] => {
    acc.push(
      <Stack component="li" key={curr.key} spacing={1.5}>
        {curr.title ? (
          <div>
            <Typography sx={{ color: 'var(--NavGroup-title-color)', fontSize: '0.875rem', fontWeight: 500 }}>
              {t(curr.title)}
            </Typography>
          </div>
        ) : null}
        <div>{renderNavItems({ depth: 0, items: curr.items, pathname })}</div>
      </Stack>
    );
    return acc;
  }, []);
  return (
    <Stack component="ul" spacing={2} sx={{ listStyle: 'none', m: 0, p: 0 }}>
      {children}
    </Stack>
  );
 }
 function renderNavItems({
  depth = 0,
  items = [],
  pathname,
 }: {
  depth: number;
  items?: NavItemConfig[];
  pathname: string;
 }): React.JSX.Element {
  const children = items.reduce((acc: React.ReactNode[], curr: NavItemConfig): React.ReactNode[] => {
    const { items: childItems, key, ...item } = curr;
    const forceOpen = childItems
      ? Boolean(childItems.find((childItem) => childItem.href && pathname.startsWith(childItem.href)))
      : false;
    acc.push(
      <NavItem depth={depth} forceOpen={forceOpen} key={key} pathname={pathname} {...item}>
        {childItems ? renderNavItems({ depth: depth + 1, pathname, items: childItems }) : null}
      </NavItem>
    );
    return acc;
  }, []);
  return (
    <Stack component="ul" data-depth={depth} spacing={1} sx={{ listStyle: 'none', m: 0, p: 0 }}>
      {children}
    </Stack>
  );
 }
 interface NavItemProps extends Omit<NavItemConfig, 'items'> {
  children?: React.ReactNode;
@@ -151,7 +22,7 @@ interface NavItemProps extends Omit<NavItemConfig, 'items'> {
  pathname: string;
 }
-function NavItem({
+export function NavItem({
  children,
  depth,
  disabled,
@@ -173,7 +44,11 @@ function NavItem({
  const { t } = useTranslation();
  return (
-    <Box component="li" data-depth={depth} sx={{ userSelect: 'none' }}>
+    <Box
      component="li"
      data-depth={depth}
      sx={{ userSelect: 'none' }}
    >
      <Box
        {...(isBranch
          ? {
@@ -254,15 +129,27 @@ function NavItem({
            {t(title || '')}
          </Typography>
        </Box>
-        {label ? <Chip color="primary" label={label} size="small" /> : null}
+        {label ? (
          <Chip
            color="primary"
            label={label}
            size="small"
          />
        ) : null}
        {external ? (
          <Box sx={{ alignItems: 'center', display: 'flex', flex: '0 0 auto' }}>
-            <ArrowSquareOutIcon color="var(--NavItem-icon-color)" fontSize="var(--icon-fontSize-sm)" />
+            <ArrowSquareOutIcon
              color="var(--NavItem-icon-color)"
              fontSize="var(--icon-fontSize-sm)"
            />
          </Box>
        ) : null}
        {isBranch ? (
          <Box sx={{ alignItems: 'center', display: 'flex', flex: '0 0 auto' }}>
-            <ExpandIcon color="var(--NavItem-expand-color)" fontSize="var(--icon-fontSize-sm)" />
+            <ExpandIcon
              color="var(--NavItem-expand-color)"
              fontSize="var(--icon-fontSize-sm)"
            />
          </Box>
        ) : null}
      </Box>
--- a/002_source/cms/src/components/dashboard/layout/vertical/side-nav/render-nav-groups.tsx
+++ b/002_source/cms/src/components/dashboard/layout/vertical/side-nav/render-nav-groups.tsx
@@ -0,0 +1,45 @@
 'use client';
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 import type { NavItemConfig } from '@/types/nav';
 import { renderNavItems } from './render-nav-items';
 export function RenderNavGroups({ items, pathname }: { items: NavItemConfig[]; pathname: string }): React.JSX.Element {
  const { t } = useTranslation();
  const children = items.reduce((acc: React.ReactNode[], curr: NavItemConfig): React.ReactNode[] => {
    acc.push(
      <Stack
        component="li"
        key={curr.key}
        spacing={1.5}
      >
        {curr.title ? (
          <div>
            <Typography sx={{ color: 'var(--NavGroup-title-color)', fontSize: '0.875rem', fontWeight: 500 }}>
              {t(curr.title)}
            </Typography>
          </div>
        ) : null}
        <div>{renderNavItems({ depth: 0, items: curr.items, pathname })}</div>
      </Stack>
    );
    return acc;
  }, []);
  return (
    <Stack
      component="ul"
      spacing={2}
      sx={{ listStyle: 'none', m: 0, p: 0 }}
    >
      {children}
    </Stack>
  );
 }
--- a/002_source/cms/src/components/dashboard/layout/vertical/side-nav/render-nav-items.tsx
+++ b/002_source/cms/src/components/dashboard/layout/vertical/side-nav/render-nav-items.tsx
@@ -0,0 +1,51 @@
 'use client';
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import type { NavItemConfig } from '@/types/nav';
 import { NavItem } from './nav-item';
 export function renderNavItems({
  depth = 0,
  items = [],
  pathname,
 }: {
  depth: number;
  items?: NavItemConfig[];
  pathname: string;
 }): React.JSX.Element {
  const children = items.reduce((acc: React.ReactNode[], curr: NavItemConfig): React.ReactNode[] => {
    const { items: childItems, key, ...item } = curr;
    const forceOpen = childItems
      ? Boolean(childItems.find((childItem) => childItem.href && pathname.startsWith(childItem.href)))
      : false;
    acc.push(
      <NavItem
        depth={depth}
        forceOpen={forceOpen}
        key={key}
        pathname={pathname}
        {...item}
      >
        {childItems ? renderNavItems({ depth: depth + 1, pathname, items: childItems }) : null}
      </NavItem>
    );
    return acc;
  }, []);
  return (
    <Stack
      component="ul"
      data-depth={depth}
      spacing={1}
      sx={{ listStyle: 'none', m: 0, p: 0 }}
    >
      {children}
    </Stack>
  );
 }
--- a/002_source/cms/src/components/dashboard/settings/account-details.tsx
+++ b/002_source/cms/src/components/dashboard/settings/account-details.tsx
@@ -1,138 +0,0 @@
 '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 CardActions from '@mui/material/CardActions';
 import CardContent from '@mui/material/CardContent';
 import CardHeader from '@mui/material/CardHeader';
 import FormControl from '@mui/material/FormControl';
 import FormHelperText from '@mui/material/FormHelperText';
 import InputAdornment from '@mui/material/InputAdornment';
 import InputLabel from '@mui/material/InputLabel';
 import Link from '@mui/material/Link';
 import OutlinedInput from '@mui/material/OutlinedInput';
 import Select from '@mui/material/Select';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { Camera as CameraIcon } from '@phosphor-icons/react/dist/ssr/Camera';
 import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
 import { Option } from '@/components/core/option';
 export function AccountDetails(): React.JSX.Element {
  return (
    <Card>
      <CardHeader
        avatar={
          <Avatar>
            <UserIcon fontSize="var(--Icon-fontSize)" />
          </Avatar>
        }
        title="Basic details"
      />
      <CardContent>
        <Stack spacing={3}>
          <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
            <Box
              sx={{
                border: '1px dashed var(--mui-palette-divider)',
                borderRadius: '50%',
                display: 'inline-flex',
                p: '4px',
              }}
            >
              <Box sx={{ borderRadius: 'inherit', position: 'relative' }}>
                <Box
                  sx={{
                    alignItems: 'center',
                    bgcolor: 'rgba(0, 0, 0, 0.5)',
                    borderRadius: 'inherit',
                    bottom: 0,
                    color: 'var(--mui-palette-common-white)',
                    cursor: 'pointer',
                    display: 'flex',
                    justifyContent: 'center',
                    left: 0,
                    opacity: 0,
                    position: 'absolute',
                    right: 0,
                    top: 0,
                    zIndex: 1,
                    '&:hover': { opacity: 1 },
                  }}
                >
                  <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
                    <CameraIcon fontSize="var(--icon-fontSize-md)" />
                    <Typography color="inherit" variant="subtitle2">
                      Select
                    </Typography>
                  </Stack>
                </Box>
                <Avatar src="/assets/avatar.png" sx={{ '--Avatar-size': '100px' }} />
              </Box>
            </Box>
            <Button color="secondary" size="small">
              Remove
            </Button>
          </Stack>
          <Stack spacing={2}>
            <FormControl>
              <InputLabel>Full name</InputLabel>
              <OutlinedInput defaultValue="Sofia Rivers" name="fullName" />
            </FormControl>
            <FormControl disabled>
              <InputLabel>Email address</InputLabel>
              <OutlinedInput name="email" type="email" value="sofia@devias.io" />
              <FormHelperText>
                Please <Link variant="inherit">contact us</Link> to change your email
              </FormHelperText>
            </FormControl>
            <Stack direction="row" spacing={2}>
              <FormControl sx={{ width: '160px' }}>
                <InputLabel>Dial code</InputLabel>
                <Select
                  name="countryCode"
                  startAdornment={
                    <InputAdornment position="start">
                      <Box
                        alt="Spain"
                        component="img"
                        src="/assets/flag-es.svg"
                        sx={{ display: 'block', height: '20px', width: 'auto' }}
                      />
                    </InputAdornment>
                  }
                  value="+34"
                >
                  <Option value="+1">United States</Option>
                  <Option value="+49">Germany</Option>
                  <Option value="+34">Spain</Option>
                </Select>
              </FormControl>
              <FormControl sx={{ flex: '1 1 auto' }}>
                <InputLabel>Phone number</InputLabel>
                <OutlinedInput defaultValue="965 245 7623" name="phone" />
              </FormControl>
            </Stack>
            <FormControl>
              <InputLabel>Title</InputLabel>
              <OutlinedInput name="title" placeholder="e.g Golang Developer" />
            </FormControl>
            <FormControl>
              <InputLabel>Biography (optional)</InputLabel>
              <OutlinedInput name="bio" placeholder="Describe yourself..." />
              <FormHelperText>0/200 characters</FormHelperText>
            </FormControl>
          </Stack>
        </Stack>
      </CardContent>
      <CardActions sx={{ justifyContent: 'flex-end' }}>
        <Button color="secondary">Cancel</Button>
        <Button variant="contained">Save changes</Button>
      </CardActions>
    </Card>
  );
 }
--- a/002_source/cms/src/components/dashboard/settings/account-details/_GUIDELINES.md
+++ b/002_source/cms/src/components/dashboard/settings/account-details/_GUIDELINES.md
@@ -0,0 +1,3 @@
 # GUIDELINES
 - use i18n
--- a/002_source/cms/src/components/dashboard/settings/account-details/index.tsx
+++ b/002_source/cms/src/components/dashboard/settings/account-details/index.tsx
@@ -0,0 +1,348 @@
 'use client';
 import * as React from 'react';
 import RouterLink from 'next/link';
 import { useRouter } from 'next/navigation';
 import { COL_USER_METAS } from '@/constants';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { LoadingButton } from '@mui/lab';
 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 CardActions from '@mui/material/CardActions';
 import CardContent from '@mui/material/CardContent';
 import CardHeader from '@mui/material/CardHeader';
 import FormControl from '@mui/material/FormControl';
 import FormHelperText from '@mui/material/FormHelperText';
 import InputAdornment from '@mui/material/InputAdornment';
 import InputLabel from '@mui/material/InputLabel';
 import Link from '@mui/material/Link';
 import OutlinedInput from '@mui/material/OutlinedInput';
 import Select from '@mui/material/Select';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { Camera as CameraIcon } from '@phosphor-icons/react/dist/ssr/Camera';
 import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
 import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z as zod } from 'zod';
 import { paths } from '@/paths';
 import { logger } from '@/lib/default-logger';
 import { fileToBase64 } from '@/lib/file-to-base64';
 import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
 import { pb } from '@/lib/pb';
 import { useUser } from '@/hooks/use-user';
 import { Option } from '@/components/core/option';
 import { toast } from '@/components/core/toaster';
 import FormLoading from '@/components/loading';
 import ErrorDisplay from '../../error';
 const schema = zod.object({
  name: zod.string().min(1, 'Name is required').max(255),
  email: zod.string().email('Must be a valid email').min(1, 'Email is required').max(255),
  phone: zod.string().min(1, 'Phone is required').max(25),
  company: zod.string().max(255).optional(),
  billingAddress: zod.object({
    country: zod.string().min(1, 'Country is required').max(255),
    state: zod.string().min(1, 'State is required').max(255),
    city: zod.string().min(1, 'City is required').max(255),
    zipCode: zod.string().min(1, 'Zip code is required').max(255),
    line1: zod.string().min(1, 'Street line 1 is required').max(255),
    line2: zod.string().max(255).optional(),
  }),
  taxId: zod.string().max(255).optional(),
  timezone: zod.string().min(1, 'Timezone is required').max(255),
  language: zod.string().min(1, 'Language is required').max(255),
  currency: zod.string().min(1, 'Currency is required').max(255),
  avatar: zod.string().optional(),
 });
 type Values = zod.infer<typeof schema>;
 const defaultValues = {
  name: '',
  email: '',
  phone: '',
  company: '',
  billingAddress: {
    country: '',
    state: '',
    city: '',
    zipCode: '',
    line1: '',
    line2: '',
  },
  taxId: '',
  timezone: '',
  language: '',
  currency: '',
  avatar: '',
 } satisfies Values;
 export function AccountDetails(): React.JSX.Element {
  const router = useRouter();
  const { t } = useTranslation();
  const { user, isLoading } = useUser();
  const [isUpdating, setIsUpdating] = React.useState<boolean>(false);
  const [showLoading, setShowLoading] = React.useState<boolean>(false);
  const [showError, setShowError] = React.useState({ show: false, detail: '' });
  const onSubmit = React.useCallback(
    async (values: Values): Promise<void> => {
      setIsUpdating(true);
      // const updateData = {
      //   name: values.name,
      //   email: values.email,
      //   phone: values.phone,
      //   company: values.company,
      //   billingAddress: values.billingAddress,
      //   taxId: values.taxId,
      //   timezone: values.timezone,
      //   language: values.language,
      //   currency: values.currency,
      //   avatar: values.avatar ? await base64ToFile(values.avatar) : null,
      // };
      // try {
      //   await pb.collection(COL_CUSTOMERS).update(customerId, updateData);
      //   toast.success('Customer updated successfully');
      //   router.push(paths.dashboard.students.list);
      // } catch (error) {
      //   logger.error(error);
      //   toast.error('Failed to update customer');
      // } finally {
      //   setIsUpdating(false);
      // }
    },
    [router]
  );
  const {
    control,
    handleSubmit,
    formState: { errors },
    setValue,
    reset,
    watch,
  } = useForm<Values>({ defaultValues, resolver: zodResolver(schema) });
  const loadExistingData = React.useCallback(async () => {
    setShowLoading(true);
    if (user) {
      try {
        const result = await pb.collection(COL_USER_METAS).getOne(user.id);
        reset({ ...defaultValues, ...result });
        console.log({ result });
        if (result.avatar) {
          // TODO: remove me
          // const fetchResult = await fetch(
          //   `http://127.0.0.1:8090/api/files/${result.collectionId}/${result.id}/${result.avatar}`
          // );
          const fetchResult = await fetch(getImageUrlFromFile(result.collectionId, result.id, result.avatar));
          const blob = await fetchResult.blob();
          const url = await fileToBase64(blob);
          setValue('avatar', url);
        }
      } catch (error) {
        logger.error(error);
        // TODO: add i18n here
        toast.error('Failed to load customer data');
        setShowError({ show: true, detail: JSON.stringify(error, null, 2) });
      } finally {
        setShowLoading(false);
      }
    }
  }, [user, reset, setValue]);
  React.useEffect(() => {
    void loadExistingData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  if (showLoading) return <FormLoading />;
  if (!user) return <>loading</>;
  if (showError.show)
    return (
      <ErrorDisplay
        message={t('error.unable-to-process-request')}
        code="500"
        details={showError.detail}
      />
    );
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Card>
        <CardHeader
          avatar={
            <Avatar>
              <UserIcon fontSize="var(--Icon-fontSize)" />
            </Avatar>
          }
          title="Basic details"
        />
        <CardContent>
          <Stack spacing={3}>
            <Stack
              direction="row"
              spacing={2}
              sx={{ alignItems: 'center' }}
            >
              <Box
                sx={{
                  border: '1px dashed var(--mui-palette-divider)',
                  borderRadius: '50%',
                  display: 'inline-flex',
                  p: '4px',
                }}
              >
                <Box sx={{ borderRadius: 'inherit', position: 'relative' }}>
                  <Box
                    sx={{
                      alignItems: 'center',
                      bgcolor: 'rgba(0, 0, 0, 0.5)',
                      borderRadius: 'inherit',
                      bottom: 0,
                      color: 'var(--mui-palette-common-white)',
                      cursor: 'pointer',
                      display: 'flex',
                      justifyContent: 'center',
                      left: 0,
                      opacity: 0,
                      position: 'absolute',
                      right: 0,
                      top: 0,
                      zIndex: 1,
                      '&:hover': { opacity: 1 },
                    }}
                  >
                    <Stack
                      direction="row"
                      spacing={1}
                      sx={{ alignItems: 'center' }}
                    >
                      <CameraIcon fontSize="var(--icon-fontSize-md)" />
                      <Typography
                        color="inherit"
                        variant="subtitle2"
                      >
                        {t('select')}
                      </Typography>
                    </Stack>
                  </Box>
                  <Avatar
                    src={getImageUrlFromFile(user.collectionId, user.id, user.avatar)}
                    sx={{ '--Avatar-size': '100px' }}
                  />
                </Box>
              </Box>
              <Button
                color="secondary"
                size="small"
              >
                {t('remove')}
              </Button>
            </Stack>
            <Stack spacing={2}>
              <Controller
                control={control}
                name="name"
                render={({ field }) => (
                  <FormControl
                    error={Boolean(errors.name)}
                    fullWidth
                  >
                    <InputLabel required>Name</InputLabel>
                    <OutlinedInput {...field} />
                    {errors.name ? <FormHelperText>{errors.name.message}</FormHelperText> : null}
                  </FormControl>
                )}
              />
              <Controller
                disabled
                control={control}
                name="email"
                render={({ field }) => (
                  <FormControl
                    error={Boolean(errors.email)}
                    fullWidth
                  >
                    <InputLabel required>Email</InputLabel>
                    <OutlinedInput
                      {...field}
                      type="email"
                    />
                    {errors.email ? <FormHelperText>{errors.email.message}</FormHelperText> : null}
                  </FormControl>
                )}
              />
              <Stack
                direction="row"
                spacing={2}
              >
                <Controller
                  control={control}
                  name="phone"
                  render={({ field }) => (
                    <FormControl
                      error={Boolean(errors.phone)}
                      fullWidth
                    >
                      <InputLabel required>Phone</InputLabel>
                      <OutlinedInput {...field} />
                      {errors.phone ? <FormHelperText>{errors.phone.message}</FormHelperText> : null}
                    </FormControl>
                  )}
                />
              </Stack>
              <FormControl>
                <InputLabel>Title</InputLabel>
                <OutlinedInput
                  name="title"
                  placeholder="e.g Golang Developer"
                />
              </FormControl>
              <FormControl>
                <InputLabel>Biography (optional)</InputLabel>
                <OutlinedInput
                  name="bio"
                  placeholder="Describe yourself..."
                />
                <FormHelperText>0/200 characters</FormHelperText>
              </FormControl>
            </Stack>
          </Stack>
        </CardContent>
        <CardActions sx={{ justifyContent: 'flex-end' }}>
          <Button
            color="secondary"
            component={RouterLink}
            href={paths.dashboard.overview}
          >
            {t('edit.cancelButton')}
          </Button>
          {/* <Button variant="contained">Save changes</Button> */}
          <LoadingButton
            disabled={isUpdating}
            loading={isUpdating}
            type="submit"
            variant="contained"
          >
            {t('edit.updateButton')}
          </LoadingButton>
        </CardActions>
      </Card>
    </form>
  );
 }
--- a/002_source/cms/src/components/dashboard/settings/delete-account.tsx
+++ b/002_source/cms/src/components/dashboard/settings/delete-account.tsx
@@ -20,11 +20,17 @@ export function DeleteAccount(): React.JSX.Element {
        title="Delete account"
      />
      <CardContent>
-        <Stack spacing={3} sx={{ alignItems: 'flex-start' }}>
+        <Stack
          spacing={3}
          sx={{ alignItems: 'flex-start' }}
        >
          <Typography variant="subtitle1">
            Delete your account and all of your source data. This is irreversible.
          </Typography>
-          <Button color="error" variant="outlined">
+          <Button
            color="error"
            variant="outlined"
          >
            Delete account
          </Button>
        </Stack>
--- a/002_source/cms/src/components/dashboard/settings/side-nav/index.tsx
+++ b/002_source/cms/src/components/dashboard/settings/side-nav/index.tsx
@@ -0,0 +1,116 @@
 'use client';
 import * as React from 'react';
 import RouterLink from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
 import { COL_USER_METAS } from '@/constants';
 import { LoadingButton } from '@mui/lab';
 import Avatar from '@mui/material/Avatar';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 import { paths } from '@/paths';
 import { logger } from '@/lib/default-logger';
 import { fileToBase64 } from '@/lib/file-to-base64';
 import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
 import { pb } from '@/lib/pb';
 import { useUser } from '@/hooks/use-user';
 import { toast } from '@/components/core/toaster';
 import FormLoading from '@/components/loading';
 import ErrorDisplay from '../../error';
 import { NavItem } from './nav-item';
 import { navItems } from './navItems';
 export function SideNav(): React.JSX.Element {
  const router = useRouter();
  const { t } = useTranslation();
  const { user, isLoading } = useUser();
  const pathname = usePathname();
  const [isUpdating, setIsUpdating] = React.useState<boolean>(false);
  const [showLoading, setShowLoading] = React.useState<boolean>(false);
  const [showError, setShowError] = React.useState({ show: false, detail: '' });
  if (showLoading) return <FormLoading />;
  if (!user) return <>loading</>;
  if (showError.show)
    return (
      <ErrorDisplay
        message={t('error.unable-to-process-request')}
        code="500"
        details={showError.detail}
      />
    );
  return (
    <div>
      <Stack
        spacing={3}
        sx={{
          flex: '0 0 auto',
          flexDirection: { xs: 'column-reverse', md: 'column' },
          position: { md: 'sticky' },
          top: '64px',
          width: { xs: '100%', md: '240px' },
        }}
      >
        <Stack
          component="ul"
          spacing={3}
          sx={{ listStyle: 'none', m: 0, p: 0 }}
        >
          {navItems.map((group) => (
            <Stack
              component="li"
              key={group.key}
              spacing={2}
            >
              {group.title ? (
                <div>
                  <Typography
                    color="text.secondary"
                    variant="caption"
                  >
                    {group.title}
                  </Typography>
                </div>
              ) : null}
              <Stack
                component="ul"
                spacing={1}
                sx={{ listStyle: 'none', m: 0, p: 0 }}
              >
                {group.items.map((item) => (
                  <NavItem
                    {...item}
                    key={item.key}
                    pathname={pathname}
                  />
                ))}
              </Stack>
            </Stack>
          ))}
        </Stack>
        <Stack
          direction="row"
          spacing={2}
          sx={{ alignItems: 'center' }}
        >
          <Avatar src={getImageUrlFromFile(user.collectionId, user.id, user.avatar)}>{user.name}</Avatar>
          <div>
            <Typography variant="subtitle1">{user.name}</Typography>
            <Typography
              color="text.secondary"
              variant="caption"
            >
              {user.email}
            </Typography>
          </div>
        </Stack>
      </Stack>
    </div>
  );
 }
--- a/002_source/cms/src/components/dashboard/settings/side-nav/nav-item.tsx
+++ b/002_source/cms/src/components/dashboard/settings/side-nav/nav-item.tsx
@@ -16,36 +16,9 @@ import { UserCircle as UserCircleIcon } from '@phosphor-icons/react/dist/ssr/Use
 import { UsersThree as UsersThreeIcon } from '@phosphor-icons/react/dist/ssr/UsersThree';
 import type { NavItemConfig } from '@/types/nav';
 import { paths } from '@/paths';
 import { isNavItemActive } from '@/lib/is-nav-item-active';
-// NOTE: First level elements are groups.
+import { navItems } from './navItems';
 const navItems = [
  {
    key: 'personal',
    title: 'Personal',
    items: [
      { key: 'account', title: 'Account', href: paths.dashboard.settings.account, icon: 'user-circle' },
      { key: 'notifications', title: 'Notifications', href: paths.dashboard.settings.notifications, icon: 'bell' },
      { key: 'security', title: 'Security', href: paths.dashboard.settings.security, icon: 'lock-key' },
    ],
  },
  {
    key: 'organization',
    title: 'Organization',
    items: [
      { key: 'billing', title: 'Billing & plans', href: paths.dashboard.settings.billing, icon: 'credit-card' },
      { key: 'team', title: 'Team', href: paths.dashboard.settings.team, icon: 'users-three' },
      {
        key: 'integrations',
        title: 'Integrations',
        href: paths.dashboard.settings.integrations,
        icon: 'plugs-connected',
      },
    ],
  },
 ] satisfies NavItemConfig[];
 const icons = {
  'credit-card': CreditCardIcon,
@@ -56,84 +29,11 @@ const icons = {
  bell: BellIcon,
 } as Record<string, Icon>;
 export function SideNav(): React.JSX.Element {
  const pathname = usePathname();
  return (
    <div>
      <Stack
        spacing={3}
        sx={{
          flex: '0 0 auto',
          flexDirection: { xs: 'column-reverse', md: 'column' },
          position: { md: 'sticky' },
          top: '64px',
          width: { xs: '100%', md: '240px' },
        }}
      >
        <Stack
          component="ul"
          spacing={3}
          sx={{ listStyle: 'none', m: 0, p: 0 }}
        >
          {navItems.map((group) => (
            <Stack
              component="li"
              key={group.key}
              spacing={2}
            >
              {group.title ? (
                <div>
                  <Typography
                    color="text.secondary"
                    variant="caption"
                  >
                    {group.title}
                  </Typography>
                </div>
              ) : null}
              <Stack
                component="ul"
                spacing={1}
                sx={{ listStyle: 'none', m: 0, p: 0 }}
              >
                {group.items.map((item) => (
                  <NavItem
                    {...item}
                    key={item.key}
                    pathname={pathname}
                  />
                ))}
              </Stack>
            </Stack>
          ))}
        </Stack>
        <Stack
          direction="row"
          spacing={2}
          sx={{ alignItems: 'center' }}
        >
          <Avatar src="/assets/avatar.png">AV</Avatar>
          <div>
            <Typography variant="subtitle1">Sofia Rivers</Typography>
            <Typography
              color="text.secondary"
              variant="caption"
            >
              sofia@devias.io
            </Typography>
          </div>
        </Stack>
      </Stack>
    </div>
  );
 }
 interface NavItemProps extends NavItemConfig {
  pathname: string;
 }
-function NavItem({ disabled, external, href, icon, pathname, title }: NavItemProps): React.JSX.Element {
+export function NavItem({ disabled, external, href, icon, pathname, title }: NavItemProps): React.JSX.Element {
  const active = isNavItemActive({ disabled, external, href, pathname });
  const Icon = icon ? icons[icon] : null;
--- a/002_source/cms/src/components/dashboard/settings/side-nav/navItems.tsx
+++ b/002_source/cms/src/components/dashboard/settings/side-nav/navItems.tsx
@@ -0,0 +1,33 @@
 'use client';
 import type { NavItemConfig } from '@/types/nav';
 import { paths } from '@/paths';
 // NOTE: First level elements are groups.
 const navItems = [
  {
    key: 'personal',
    title: 'Personal',
    items: [
      { key: 'account', title: 'Account', href: paths.dashboard.settings.account, icon: 'user-circle' },
      { key: 'notifications', title: 'Notifications', href: paths.dashboard.settings.notifications, icon: 'bell' },
      { key: 'security', title: 'Security', href: paths.dashboard.settings.security, icon: 'lock-key' },
    ],
  },
  {
    key: 'organization',
    title: 'Organization',
    items: [
      { key: 'billing', title: 'Billing & plans', href: paths.dashboard.settings.billing, icon: 'credit-card' },
      { key: 'team', title: 'Team', href: paths.dashboard.settings.team, icon: 'users-three' },
      {
        key: 'integrations',
        title: 'Integrations',
        href: paths.dashboard.settings.integrations,
        icon: 'plugs-connected',
      },
    ],
  },
 ] satisfies NavItemConfig[];
 export { navItems };
--- a/002_source/cms/src/components/dashboard/student/student-edit-form.tsx
+++ b/002_source/cms/src/components/dashboard/student/student-edit-form.tsx
@@ -32,6 +32,7 @@ import { useTranslation } from 'react-i18next';
 import { z as zod } from 'zod';
 import { paths } from '@/paths';
 import isDevelopment from '@/lib/check-is-development';
 import { logger } from '@/lib/default-logger';
 import { base64ToFile, fileToBase64 } from '@/lib/file-to-base64';
 import { pb } from '@/lib/pb';
@@ -40,9 +41,8 @@ import FormLoading from '@/components/loading';
 // import ErrorDisplay from '../../error';
 import ErrorDisplay from '../error';
 import isDevelopment from '@/lib/check-is-development';
-// TODO: review this
+// TODO: review schema
 const schema = zod.object({
  name: zod.string().min(1, 'Name is required').max(255),
  email: zod.string().email('Must be a valid email').min(1, 'Email is required').max(255),
--- a/002_source/cms/src/types/user.ts
+++ b/002_source/cms/src/types/user.ts
@@ -1,8 +1,10 @@
 export interface User {
  id: string;
  name?: string;
-  avatar?: string;
+  avatar: string;
  email?: string;
  collectionId: string;
  [key: string]: unknown;
 }
--- a/002_source/cms/tsconfig.json
+++ b/002_source/cms/tsconfig.json
@@ -40,16 +40,15 @@
    "node_modules",
    ".next",
    //
    "**/*del",
    "**/*plan",
    "**/*.bak",
    "*.bak",
    "*.log",
    "*.tmp",
    "*.bug",
    "*.del",
    "*.draft",
    "**/* copy *.tsx",
-    "**/* copy.tsx"
+    "**/* copy.tsx",
    "**/*.bak",
    "**/*.bak",
    "**/*.bug",
    "**/*.del",
    "**/*.draft",
    "**/*.log",
    "**/*.tmp",
    "**/*del",
  ]
 }
Author	SHA1	Message	Date
louiscklaw	a4cdb4b1cc	``` add phone field to User model and update notification relations ```	2025-05-11 16:59:02 +08:00
louiscklaw	b35b77557e	``` enable prettier-plugin-sort-imports for consistent import ordering ```	2025-05-11 16:32:27 +08:00
louiscklaw	6842459499	``` remove deprecated repomix.md file used for AI analysis ```	2025-05-11 16:32:01 +08:00
louiscklaw	ba7682e7cb	"update tsconfig.json exclusion patterns for build optimization"	2025-05-11 16:31:50 +08:00
louiscklaw	1003fa699c	"refactor settings pages, add translation support and implement side navigation component"	2025-05-11 16:31:32 +08:00
louiscklaw	ec12ca3bdf	"make avatar mandatory and add collectionId to User interface"	2025-05-11 16:30:50 +08:00
louiscklaw	7ece1c814b	update order of import,	2025-05-11 16:07:06 +08:00
louiscklaw	39a7d32fcd	update,	2025-05-11 15:47:49 +08:00
louiscklaw	85d1ecdc90	update,	2025-05-11 15:44:18 +08:00
louiscklaw	b26e1ff167	update user-button,	2025-05-11 13:47:14 +08:00
louiscklaw	de415a37bc	update main-nav and side-nav,	2025-05-11 13:39:33 +08:00