``update dc_dev.sh to remove commented logs command and adjust startup sequence for pocketbase and api_ts``

``update Notifications table schema by removing 'author' text field, adding 'author' relation, 'content', 'company', and 'link' fields, and sync changes in schema.dbml, schema.json, and pb_hooks/seed/schema.json``
``remove obsolete UserMetas migrations and related user collection modifications``
2025-05-12 14:03:52 +08:00 · 2025-05-12 14:03:35 +08:00 · 2025-05-12 14:01:52 +08:00 · 2025-05-12 13:49:11 +08:00 · 2025-05-12 13:48:32 +08:00 · 2025-05-12 13:29:40 +08:00
56 changed files with 1342 additions and 7841 deletions
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,10 @@
 {
  "endOfLine": "lf",
  "printWidth": 120,
  "quoteProps": "consistent",
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "plugins": []
 }
--- a/000_AI_WORKSPACE/software-engineer/greetings/001_greetings.md
+++ b/000_AI_WORKSPACE/software-engineer/greetings/001_greetings.md
@@ -1,11 +1,14 @@
 ```markdown
 # Greetings
 Hi,
-Imaging you are a software engineer and i will send you the guideline.
+
 Imagine you are a software engineer and i will send you the guideline.
 plesae read it, prepare yourself and i will tell you the task afterwards
 please read and understand the markdown files in directory
-`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/000_AI_WORKSPACE/software_engineer/greetings`,
+`/home/logic/_wsl_workspace/001_github_ws/lettersoup-online-ws/lettersoup-online/project/000_AI_WORKSPACE/software-engineer/greetings`,
 it provides background information of project i want you to help.
 thanks
 ```
--- 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-12T06:02:53.613Z
 // 
@@ -32,6 +32,7 @@ Table users {
  created datetime
  updated datetime
  visible text
  phone text
 }
 // 
@@ -113,12 +114,17 @@ Table Notifications {
  id text [pk, not null]
  read boolean
  type text
  author text
  job text
  description text
  NOTI_ID text
  created datetime
  updated datetime
  to_user_id integer [ref: > UserMetas.id] // relation704048736
  from_user_id integer [ref: > UserMetas.id] // relation556806202
  author integer [ref: > UserMetas.id] // relation3182418120
  content text
  company text
  link varchar
 }
 // 
@@ -346,7 +352,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": [
@@ -1043,16 +1057,6 @@
        "system": false,
        "type": "text"
      },
      {
        "hidden": false,
        "id": "json3182418120",
        "maxSize": 0,
        "name": "author",
        "presentable": false,
        "required": false,
        "system": false,
        "type": "json"
      },
      {
        "hidden": false,
        "id": "json4225294584",
@@ -1110,6 +1114,77 @@
        "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"
      },
      {
        "cascadeDelete": false,
        "collectionId": "pbc_1305841361",
        "hidden": false,
        "id": "relation3182418120",
        "maxSelect": 1,
        "minSelect": 0,
        "name": "author",
        "presentable": false,
        "required": false,
        "system": false,
        "type": "relation"
      },
      {
        "convertURLs": false,
        "hidden": false,
        "id": "editor4274335913",
        "maxSize": 0,
        "name": "content",
        "presentable": false,
        "required": false,
        "system": false,
        "type": "editor"
      },
      {
        "hidden": false,
        "id": "json1337919823",
        "maxSize": 0,
        "name": "company",
        "presentable": false,
        "required": false,
        "system": false,
        "type": "json"
      },
      {
        "exceptDomains": null,
        "hidden": false,
        "id": "url917281265",
        "name": "link",
        "onlyDomains": null,
        "presentable": false,
        "required": false,
        "system": false,
        "type": "url"
      }
    ],
    "indexes": [],
@@ -2903,18 +2978,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 +3001,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/_helloworld/index.tsx
+++ b/002_source/cms/src/components/_helloworld/index.tsx
@@ -6,6 +6,9 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import { Box } from '@mui/system';
 import { Trash as TrashIcon } from '@phosphor-icons/react/dist/ssr/Trash';
 import { logger } from '@/lib/default-logger';
 import { toast } from '@/components/core/toaster';
 interface PropsHelloworld {
  message: string;
 }
@@ -33,11 +36,21 @@ function InnerComponent(): React.JSX.Element {
 // RULES: sample of main component
 function MainComponent(): React.JSX.Element {
  const [state, setState] = React.useState<string>('');
  const [loading, setLoading] = React.useState(true);
  const [showError, setShowError] = React.useState<boolean>(false);
  React.useEffect(() => {
-    setState(funcHelloworld('hello'));
+    try {
      setState(funcHelloworld('hello'));
    } catch (error) {
      setShowError(true);
    }
    setLoading(false);
  }, []);
  if (loading) return <>Loading</>;
  if (showError) return <>Error</>;
  // you should obey react/jsx-no-useless-fragment
  return (
    <Box>
--- 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
@@ -189,7 +189,15 @@ function NotificationsButton(): React.JSX.Element {
      <Tooltip title="Notifications">
        <Badge
          color="error"
-          sx={{ '& .MuiBadge-dot': { borderRadius: '50%', height: '10px', right: '6px', top: '6px', width: '10px' } }}
+          sx={{
            '& .MuiBadge-dot': {
              borderRadius: '50%',
              right: '6px',
              top: '6px',
              height: '10px',
              width: '10px',
            },
          }}
          variant="dot"
        >
          <IconButton
--- a/002_source/cms/src/components/dashboard/layout/notifications-popover/index.tsx
+++ b/002_source/cms/src/components/dashboard/layout/notifications-popover/index.tsx
@@ -1,38 +1,42 @@
 'use client';
 import * as React from 'react';
-import Avatar from '@mui/material/Avatar';
+import { getNotificationsByUserId } from '@/db/Notifications/GetNotificationByUserId';
 import type { Notification } from '@/db/Notifications/type';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import Link from '@mui/material/Link';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import Popover from '@mui/material/Popover';
 import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { ChatText as ChatTextIcon } from '@phosphor-icons/react/dist/ssr/ChatText';
 import { EnvelopeSimple as EnvelopeSimpleIcon } from '@phosphor-icons/react/dist/ssr/EnvelopeSimple';
 import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
 import { X as XIcon } from '@phosphor-icons/react/dist/ssr/X';
 import { useTranslation } from 'react-i18next';
-import { dayjs } from '@/lib/dayjs';
+import { User } from '@/types/user';
 import { useHelloworld } from '@/hooks/use-helloworld';
 import { useUser } from '@/hooks/use-user';
 import { NotificationItem } from './notification-item';
 // import type { Notification } from './type.d.tsx.del';
 import { SampleNotifications } from './sample-notifications';
-import { useHelloworld } from '@/hooks/use-helloworld';
+import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
-import { getAllNotifications } from '@/db/Notifications/GetAll';
+import { getUnreadNotificationsByUserId } from '@/db/Notifications/GetUnreadNotificationsByUserId';
-import { ListResult, RecordModel } from 'pocketbase';
+import { logger } from '@/lib/default-logger';
-import { defaultNotification } from '@/db/Notifications/constants';
+import { toast } from '@/components/core/toaster';
-import { getNotificationsByUserId } from '@/db/Notifications/GetNotificationByUserId';
+
-import { Notification } from '@/db/Notifications/type';
+import { NoteBlank as NoteBlankIcon } from '@phosphor-icons/react/dist/ssr/NoteBlank';
 import { Sun as SunIcon } from '@phosphor-icons/react/dist/ssr/Sun';
 import { MarkAllAsReadButton } from './mark-all-as-read-button';
 import { Button } from '@mui/material';
 export interface NotificationsPopoverProps {
  anchorEl: null | Element;
  onClose?: () => void;
  onMarkAllAsRead?: () => void;
-  onRemoveOne?: (id: string) => void;
+  onRemoveOne?: (id: string, reload: () => Promise<void>) => void;
  open?: boolean;
  setListLength: React.Dispatch<React.SetStateAction<number>>;
 }
 export function NotificationsPopover({
@@ -41,37 +45,101 @@ export function NotificationsPopover({
  onMarkAllAsRead,
  onRemoveOne,
  open = false,
  setListLength,
 }: NotificationsPopoverProps): React.JSX.Element {
  const { t } = useTranslation();
  const [notiList, setNotiList] = React.useState<Notification[]>([]);
  const { user } = useUser();
-  const [loading, setLoading] = React.useState(false);
+  const [loading, setLoading] = React.useState(true);
-  const [error, setError] = React.useState<string | null>(null);
+  const [showError, setShowError] = React.useState<boolean>(false);
-  const { data, handleClose, handleOpen, open: testOpen } = useHelloworld<string>();
+  async function loadUnreadNotifications(): Promise<void> {
  React.useEffect(() => {
    setLoading(true);
-    async function LoadAllNotifications() {
+    try {
-      const notiList: Notification[] = await getNotificationsByUserId('1');
+      if (user?.id) {
-      setNotiList(notiList);
+        const tempNotiList: Notification[] = await getUnreadNotificationsByUserId(user.id);
        setNotiList(tempNotiList);
        setListLength(tempNotiList.length);
      }
    } catch (loadNotiError) {
      logger.error(loadNotiError);
      toast.error('error during loading noti list');
    }
    setLoading(false);
    void LoadAllNotifications();
  }, []);
-  if (loading) return <>Loading</>;
+    setLoading(false);
-  if (error) return <>Error</>;
+  }
-  if (notiList.length == 0)
+
  React.useEffect(() => {
    if (user?.id) {
      void loadUnreadNotifications();
    }
  }, [user]);
  // if (loading) return <>Loading</>;
  // if (showError) return <>Error</>;
  if (notiList.length === 0)
    return (
      <Popover
        anchorEl={anchorEl}
        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
        onClose={onClose}
        open={open}
-        slotProps={{ paper: { sx: { width: '380px' } } }}
+        slotProps={{ paper: { sx: { width: 'unset' } } }}
        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
      >
-        list is empty
+        <Stack
          direction="row"
          spacing={2}
          sx={{ alignItems: 'center', justifyContent: 'space-between', px: 3, py: 2 }}
        >
          <Stack
            direction="row"
            spacing={2}
            sx={{ alignItems: 'left' }}
          >
            <Typography variant="h6">
              {t('Notifications')} ({notiList.length})
            </Typography>
            {loading ? (
              <Typography
                color="gray"
                variant="subtitle2"
              >
                ({t('loading')})
              </Typography>
            ) : (
              <></>
            )}
          </Stack>
          {/* MarkAllAsReadButton(onMarkAllAsRead, notiList.length <= 0) */}
          <MarkAllAsReadButton
            onMarkAllAsRead={onMarkAllAsRead}
            disabled={notiList.length <= 0}
          />
        </Stack>
        <Stack
          direction="column"
          spacing={2}
          sx={{ alignItems: 'center', padding: '50px' }}
        >
          <SunIcon
            size={48}
            color="lightgray"
          />
          <Typography
            color="lightgray"
            variant={'subtitle2'}
          >
            {t('list-is-empty')}
          </Typography>
          <Button variant="outlined">{t('refresh')}</Button>
        </Stack>
      </Popover>
    );
@@ -80,6 +148,7 @@ export function NotificationsPopover({
      anchorEl={anchorEl}
      anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
      onClose={onClose}
      // todo: should not use 'true', fallback to 'open'
      open={open}
      slotProps={{ paper: { sx: { width: '380px' } } }}
      transformOrigin={{ horizontal: 'right', vertical: 'top' }}
@@ -89,16 +158,32 @@ export function NotificationsPopover({
        spacing={2}
        sx={{ alignItems: 'center', justifyContent: 'space-between', px: 3, py: 2 }}
      >
-        <Typography variant="h6">{t('Notifications')}</Typography>
+        <Stack
-        <Tooltip title={t('Mark all as read')}>
+          direction="row"
-          <IconButton
+          spacing={2}
-            edge="end"
+          sx={{ alignItems: 'left' }}
-            onClick={onMarkAllAsRead}
+        >
-          >
+          <Typography variant="h6">
-            <EnvelopeSimpleIcon />
+            {t('Notifications')} ({notiList.length})
-          </IconButton>
+          </Typography>
-        </Tooltip>
+
          {loading ? (
            <Typography
              color="gray"
              variant="subtitle2"
            >
              ({t('loading')})
            </Typography>
          ) : (
            <></>
          )}
        </Stack>
        <MarkAllAsReadButton
          onMarkAllAsRead={onMarkAllAsRead}
          disabled={notiList.length <= 0}
        />
      </Stack>
      {notiList.length === 0 ? (
        <Box sx={{ p: 2 }}>
          <Typography variant="subtitle2">{t('There are no notifications')}</Typography>
@@ -108,11 +193,11 @@ export function NotificationsPopover({
          <List disablePadding>
            {notiList.map((notification, index) => (
              <NotificationItem
-                divider={index < SampleNotifications.length - 1}
+                divider={index < notiList.length - 1}
                key={notification.id}
                notification={notification}
                onRemove={() => {
-                  onRemoveOne?.(notification.id);
+                  onRemoveOne?.(notification.id, () => loadUnreadNotifications());
                }}
              />
            ))}
@@ -123,135 +208,25 @@ export function NotificationsPopover({
  );
 }
-interface NotificationItemProps {
+// TODO: remove me
-  divider?: boolean;
+// function MarkAllAsReadButton({
-  notification: Notification;
+//   onMarkAllAsRead,
-  onRemove?: () => void;
+//   disabled,
-}
+// }: {
 //   onMarkAllAsRead: (() => void) | undefined;
 //   disabled: boolean;
 // }): React.JSX.Element {
 //   const { t } = useTranslation();
-function NotificationItem({ divider, notification, onRemove }: NotificationItemProps): React.JSX.Element {
+//   return (
-  return (
+//     <Tooltip title={t('mark-all-as-read')}>
-    <ListItem
+//       <IconButton
-      divider={divider}
+//         edge="end"
-      sx={{ alignItems: 'flex-start', justifyContent: 'space-between' }}
+//         onClick={onMarkAllAsRead}
-    >
+//         disabled={disabled}
-      <NotificationContent notification={notification} />
+//       >
-      <Tooltip title="Remove">
+//         <EnvelopeSimpleIcon color={disabled ? 'lightgray' : 'black'} />
-        <IconButton
+//       </IconButton>
-          edge="end"
+//     </Tooltip>
-          onClick={onRemove}
+//   );
-          size="small"
+// }
        >
          <XIcon />
        </IconButton>
      </Tooltip>
    </ListItem>
  );
 }
 interface NotificationContentProps {
  notification: Notification;
 }
 function NotificationContent({ notification }: NotificationContentProps): React.JSX.Element {
  if (notification.type === 'new_feature') {
    return (
      <Stack
        direction="row"
        spacing={2}
        sx={{ alignItems: 'flex-start' }}
      >
        <Avatar>
          <ChatTextIcon fontSize="var(--Icon-fontSize)" />
        </Avatar>
        <div>
          <Typography variant="subtitle2">New feature!</Typography>
          <Typography variant="body2">{notification.description}</Typography>
          <Typography
            color="text.secondary"
            variant="caption"
          >
            {dayjs(notification.createdAt).format('MMM D, hh:mm A')}
          </Typography>
        </div>
      </Stack>
    );
  }
  if (notification.type === 'new_company') {
    return (
      <Stack
        direction="row"
        spacing={2}
        sx={{ alignItems: 'flex-start' }}
      >
        <Avatar src={notification.author.avatar}>
          <UserIcon />
        </Avatar>
        <div>
          <Typography variant="body2">
            <Typography
              component="span"
              variant="subtitle2"
            >
              {notification.author.name}
            </Typography>{' '}
            created{' '}
            <Link
              underline="always"
              variant="body2"
            >
              {notification.company.name}
            </Link>{' '}
            company
          </Typography>
          <Typography
            color="text.secondary"
            variant="caption"
          >
            {dayjs(notification.createdAt).format('MMM D, hh:mm A')}
          </Typography>
        </div>
      </Stack>
    );
  }
  if (notification.type === 'new_job') {
    return (
      <Stack
        direction="row"
        spacing={2}
        sx={{ alignItems: 'flex-start' }}
      >
        <Avatar src={notification.author.avatar}>
          <UserIcon />
        </Avatar>
        <div>
          <Typography variant="body2">
            <Typography
              component="span"
              variant="subtitle2"
            >
              {notification.author.name}
            </Typography>{' '}
            added a new job{' '}
            <Link
              underline="always"
              variant="body2"
            >
              {notification.job.title}
            </Link>
          </Typography>
          <Typography
            color="text.secondary"
            variant="caption"
          >
            {dayjs(notification.createdAt).format('MMM D, hh:mm A')}
          </Typography>
        </div>
      </Stack>
    );
  }
  return <div />;
 }
--- a/002_source/cms/src/components/dashboard/layout/notifications-popover/mark-all-as-read-button.tsx
+++ b/002_source/cms/src/components/dashboard/layout/notifications-popover/mark-all-as-read-button.tsx
@@ -0,0 +1,29 @@
 'use client';
 import * as React from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { EnvelopeSimple as EnvelopeSimpleIcon } from '@phosphor-icons/react/dist/ssr/EnvelopeSimple';
 import { useTranslation } from 'react-i18next';
 export function MarkAllAsReadButton({
  onMarkAllAsRead,
  disabled,
 }: {
  onMarkAllAsRead: (() => void) | undefined;
  disabled: boolean;
 }): React.JSX.Element {
  const { t } = useTranslation();
  return (
    <Tooltip title={t('mark-all-as-read')}>
      <IconButton
        edge="end"
        onClick={onMarkAllAsRead}
        disabled={disabled}
      >
        <EnvelopeSimpleIcon color={disabled ? 'lightgray' : 'black'} />
      </IconButton>
    </Tooltip>
  );
 }
--- a/002_source/cms/src/components/dashboard/layout/notifications-popover/notification-content.tsx
+++ b/002_source/cms/src/components/dashboard/layout/notifications-popover/notification-content.tsx
@@ -0,0 +1,139 @@
 'use client';
 import * as React from 'react';
 import type { Notification } from '@/db/Notifications/type';
 import Avatar from '@mui/material/Avatar';
 import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { ChatText as ChatTextIcon } from '@phosphor-icons/react/dist/ssr/ChatText';
 import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
 import { dayjs } from '@/lib/dayjs';
 import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
 import { useRouter } from 'next/navigation';
 import { toast } from '@/components/core/toaster';
 interface NotificationContentProps {
  notification: Notification;
 }
 export function NotificationContent({ notification }: NotificationContentProps): React.JSX.Element {
  const router = useRouter();
  if (notification.type === 'new_feature') {
    return (
      <Stack
        direction="row"
        spacing={2}
        sx={{ alignItems: 'flex-start' }}
      >
        <Avatar>
          <ChatTextIcon fontSize="var(--Icon-fontSize)" />
        </Avatar>
        <div>
          <Typography variant="subtitle2">New feature!</Typography>
          <Typography variant="body2">{notification.description}</Typography>
          <Typography
            color="text.secondary"
            variant="caption"
          >
            {dayjs(notification.createdAt).format('MMM D, hh:mm A')}
          </Typography>
        </div>
      </Stack>
    );
  }
  if (notification.type === 'new_company') {
    return (
      <Stack
        direction="row"
        spacing={2}
        sx={{ alignItems: 'flex-start' }}
      >
        <Avatar src={notification?.author?.avatar || ''}>
          <UserIcon size={24} />
        </Avatar>
        <div>
          <Typography variant="body2">
            <Typography
              component="span"
              variant="subtitle2"
            >
              {notification?.author?.name}
            </Typography>{' '}
            created{' '}
            <Link
              underline="always"
              variant="body2"
            >
              {notification?.company?.name}
            </Link>{' '}
            company
          </Typography>
          <Typography
            color="text.secondary"
            variant="caption"
          >
            {dayjs(notification.created).format('MMM D, hh:mm A')}
          </Typography>
        </div>
      </Stack>
    );
  }
  if (notification.type === 'new_job') {
    const handleClick = (): void => {
      try {
        if (notification.link) {
          router.push(notification.link);
        }
      } catch (error) {
        toast.error((error as { message: string }).message);
      }
    };
    return (
      <Stack
        direction="row"
        spacing={2}
        sx={{
          alignItems: 'flex-start',
          cursor: notification.link ? 'pointer' : '',
        }}
        //
        onClick={handleClick}
      >
        <Avatar src={notification?.author?.avatar}>
          <UserIcon />
        </Avatar>
        <div>
          <Typography variant="body2">
            <Typography
              component="span"
              variant="subtitle2"
            >
              {notification?.author?.name}
            </Typography>{' '}
            added a new job{' '}
            <Link
              underline="always"
              variant="body2"
            >
              {notification?.job?.title}
            </Link>
          </Typography>
          <Typography
            color="text.secondary"
            variant="caption"
          >
            {dayjs(notification.created).format('MMM D, hh:mm A')}
          </Typography>
        </div>
      </Stack>
    );
  }
  return <div />;
 }
--- a/002_source/cms/src/components/dashboard/layout/notifications-popover/notification-item.tsx
+++ b/002_source/cms/src/components/dashboard/layout/notifications-popover/notification-item.tsx
@@ -0,0 +1,36 @@
 'use client';
 import * as React from 'react';
 import type { Notification } from '@/db/Notifications/type';
 import IconButton from '@mui/material/IconButton';
 import ListItem from '@mui/material/ListItem';
 import Tooltip from '@mui/material/Tooltip';
 import { X as XIcon } from '@phosphor-icons/react/dist/ssr/X';
 import { NotificationContent } from './notification-content';
 interface NotificationItemProps {
  divider?: boolean;
  notification: Notification;
  onRemove?: () => void;
 }
 export function NotificationItem({ divider, notification, onRemove }: NotificationItemProps): React.JSX.Element {
  return (
    <ListItem
      divider={divider}
      sx={{ alignItems: 'flex-start', justifyContent: 'space-between' }}
    >
      <NotificationContent notification={notification} />
      <Tooltip title="Remove">
        <IconButton
          edge="end"
          onClick={onRemove}
          size="small"
        >
          <XIcon />
        </IconButton>
      </Tooltip>
    </ListItem>
  );
 }
--- a/002_source/cms/src/components/dashboard/layout/notifications-popover/sample-notifications.tsx
+++ b/002_source/cms/src/components/dashboard/layout/notifications-popover/sample-notifications.tsx
@@ -1,6 +1,7 @@
 'use client';
 import { Notification } from '@/db/Notifications/type';
 import { dayjs } from '@/lib/dayjs';
-import type { Notification } from './type.d.tsx.del';
+// import type { Notification } from './type.d.tsx';
 export const SampleNotifications = [
  {
@@ -8,7 +9,7 @@ export const SampleNotifications = [
    createdAt: dayjs().subtract(7, 'minute').subtract(5, 'hour').subtract(1, 'day').toDate(),
    read: false,
    type: 'new_job',
-    author: { name: 'Jie Yan', avatar: '/assets/avatar-8.png' },
+    author: { id: '0001', collectionId: '0001', name: 'Jie Yan', avatar: '/assets/avatar-8.png' },
    job: { title: 'Remote React / React Native Developer' },
  },
  {
@@ -16,7 +17,7 @@ export const SampleNotifications = [
    createdAt: dayjs().subtract(18, 'minute').subtract(3, 'hour').subtract(5, 'day').toDate(),
    read: true,
    type: 'new_job',
-    author: { name: 'Fran Perez', avatar: '/assets/avatar-5.png' },
+    author: { id: '0001', collectionId: '0001', name: 'Fran Perez', avatar: '/assets/avatar-5.png' },
    job: { title: 'Senior Golang Backend Engineer' },
  },
  {
@@ -24,6 +25,7 @@ export const SampleNotifications = [
    createdAt: dayjs().subtract(4, 'minute').subtract(5, 'hour').subtract(7, 'day').toDate(),
    read: true,
    type: 'new_feature',
    author: { id: '0001', collectionId: '0001', name: 'Fran Perez', avatar: '/assets/avatar-5.png' },
    description: 'Logistics management is now available',
  },
  {
@@ -31,7 +33,7 @@ export const SampleNotifications = [
    createdAt: dayjs().subtract(7, 'minute').subtract(8, 'hour').subtract(7, 'day').toDate(),
    read: true,
    type: 'new_company',
-    author: { name: 'Jie Yan', avatar: '/assets/avatar-8.png' },
+    author: { id: '0001', collectionId: '002', name: 'Jie Yan', avatar: '/assets/avatar-8.png' },
    company: { name: 'Stripe' },
  },
 ] satisfies Notification[];
--- a/002_source/cms/src/components/dashboard/layout/vertical/main-nav/notifications-button.tsx
+++ b/002_source/cms/src/components/dashboard/layout/vertical/main-nav/notifications-button.tsx
@@ -9,18 +9,60 @@ import { Bell as BellIcon } from '@phosphor-icons/react/dist/ssr/Bell';
 import { usePopover } from '@/hooks/use-popover';
 import { NotificationsPopover } from '../../notifications-popover';
 import { logger } from '@/lib/default-logger';
 // import { NotificationsButton } from './notifications-button';
 import { toast } from '@/components/core/toaster';
 import { MarkOneAsRead } from '@/db/Notifications/mark-one-as-read';
 import { getUnreadNotificationsByUserId } from '@/db/Notifications/GetUnreadNotificationsByUserId';
 import { Notification } from '@/db/Notifications/type';
 import { useUser } from '@/hooks/use-user';
 export function NotificationsButton(): React.JSX.Element {
  const popover = usePopover<HTMLButtonElement>();
  const { user } = useUser();
  const [loading, setLoading] = React.useState(true);
  const [showError, setShowError] = React.useState<boolean>(false);
  const [listLength, setListLength] = React.useState<number>(0);
  const [notiList, setNotiList] = React.useState<Notification[]>([]);
  function handleMarkAllAsRead(): void {
    // try {
    //   await MarkOneAsRead(id);
    //   toast.success('Notification marked as read');
    // } catch (error) {
    //   logger.debug(error);
    //   toast.error('Something went wrong');
    // }
  }
  function handleRemoveOne(id: string, cb: () => void): void {
    MarkOneAsRead(id)
      .then(() => {
        toast.success('Notification marked as read');
        cb();
      })
      .catch((error) => {
        logger.debug(error);
        toast.error('Something went wrong');
      });
  }
  return (
    <React.Fragment>
      <Tooltip title="Notifications">
        <Badge
          color="error"
-          sx={{ '& .MuiBadge-dot': { borderRadius: '50%', height: '10px', right: '6px', top: '6px', width: '10px' } }}
+          sx={{
-          variant="dot"
+            '& .MuiBadge-badge': {
              height: '20px',
              width: '20px',
              right: '6px',
              top: '6px',
            },
          }}
          badgeContent={listLength}
        >
          <IconButton
            onClick={popover.handleOpen}
@@ -30,10 +72,14 @@ export function NotificationsButton(): React.JSX.Element {
          </IconButton>
        </Badge>
      </Tooltip>
      {/*  */}
      <NotificationsPopover
        anchorEl={popover.anchorRef.current}
        onClose={popover.handleClose}
        open={popover.open}
        onMarkAllAsRead={handleMarkAllAsRead}
        onRemoveOne={handleRemoveOne}
        setListLength={setListLength}
      />
    </React.Fragment>
  );
--- 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/db/Notifications/GetNotificationByUserId.tsx
+++ b/002_source/cms/src/db/Notifications/GetNotificationByUserId.tsx
@@ -1,14 +1,18 @@
 //
 // RULES:
 // api method for get notifications by user id
 import { pb } from '@/lib/pb';
 import { COL_NOTIFICATIONS } from '@/constants';
 import { pb } from '@/lib/pb';
 import type { Notification } from './type.d';
 export async function getNotificationsByUserId(userId: string): Promise<Notification[]> {
  const records = await pb.collection(COL_NOTIFICATIONS).getFullList({
-    filter: `author.id = "000000000000001"`,
+    expand: 'author, to_user_id',
    filter: `to_user_id.id = "${userId}"`,
    sort: '-created',
  });
  return records as unknown as Notification[];
 }
--- a/002_source/cms/src/db/Notifications/GetUnreadNotificationsByUserId.tsx
+++ b/002_source/cms/src/db/Notifications/GetUnreadNotificationsByUserId.tsx
@@ -0,0 +1,20 @@
 //
 // RULES:
 // api method for get notifications by user id
 import { COL_NOTIFICATIONS } from '@/constants';
 import { pb } from '@/lib/pb';
 import type { Notification } from './type.d';
 export async function getUnreadNotificationsByUserId(userId: string): Promise<Notification[]> {
  const records = await pb.collection(COL_NOTIFICATIONS).getFullList({
    expand: 'author, to_user_id',
    filter: `to_user_id.id = "${userId}" && read = false`,
    sort: '-created',
    cache: 'no-cache',
    requestKey: null,
  });
  return records as unknown as Notification[];
 }
--- a/002_source/cms/src/db/Notifications/mark-one-as-read.tsx
+++ b/002_source/cms/src/db/Notifications/mark-one-as-read.tsx
@@ -0,0 +1,11 @@
 // api method for update notification record
 // RULES:
 // TBA
 import { pb } from '@/lib/pb';
 import { COL_NOTIFICATIONS } from '@/constants';
 import type { RecordModel } from 'pocketbase';
 import type { NotificationFormProps } from '@/components/dashboard/notification/type.d';
 export async function MarkOneAsRead(id: string): Promise<RecordModel> {
  return pb.collection(COL_NOTIFICATIONS).update(id, { read: true });
 }
--- a/002_source/cms/src/db/Notifications/type.d.ts
+++ b/002_source/cms/src/db/Notifications/type.d.ts
@@ -1,17 +1,21 @@
 'use client';
 import type { User } from '@/types/user';
 export type SortDir = 'asc' | 'desc';
 export interface Notification {
  id: string;
  created: string;
  createdAt: Date;
  read: boolean;
  type: string;
-  author: Record<string, unknown>;
+  author?: User;
-  job: Record<string, unknown>;
+  job?: { title: string };
-  description: string;
+  description?: string;
-  NOTI_ID: string;
+  company?: { name: string };
-  created: string;
+  to_user_id?: User;
-  updated: string;
+  link: string;
 }
 export interface CreateFormProps {
--- 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",
  ]
 }
--- a/002_source/ionic_mobile/.prettierrc
+++ b/002_source/ionic_mobile/.prettierrc
@@ -1,9 +1,10 @@
 {
  "endOfLine": "lf",
  "printWidth": 120,
  "quoteProps": "consistent",
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
-  "trailingComma": "all",
+  "trailingComma": "es5",
-  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-unused-imports-configurable"]
+  "plugins": []
 }
--- a/002_source/ionic_mobile/cypress.config.ts
+++ b/002_source/ionic_mobile/cypress.config.ts
@@ -1,8 +1,8 @@
-import { defineConfig } from "cypress";
+import { defineConfig } from 'cypress';
 export default defineConfig({
  e2e: {
-    baseUrl: "http://localhost:5173",
+    baseUrl: 'http://localhost:5173',
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
--- a/002_source/ionic_mobile/default.code-workspace
+++ b/002_source/ionic_mobile/default.code-workspace
@@ -0,0 +1,17 @@
 {
  "folders": [
    {
      "path": ".",
    },
    {
      "path": "./../../001_documentation",
    },
    {
      "path": "../../000_AI_WORKSPACE",
    },
  ],
  "settings": {
    "git.ignoreLimitWarning": true,
    "remote.autoForwardPortsFallback": 0,
  },
 }
--- a/002_source/ionic_mobile/package-lock.json
+++ b/002_source/ionic_mobile/package-lock.json
@@ -21,11 +21,14 @@
        "@ionic/react-router": "^8.0.0",
        "@ionic/storage": "^4.0.0",
        "@lifeomic/attempt": "^3.1.0",
        "@tanstack/react-query": "^5.74.4",
        "@tanstack/react-query-devtools": "^5.74.6",
        "@types/react-router": "^5.1.20",
        "@types/react-router-dom": "^5.3.3",
        "axios": "^1.8.1",
        "i18next": "^24.2.2",
        "ionicons": "^7.0.0",
        "pocketbase": "^0.26.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-i18next": "^15.4.1",
@@ -2836,6 +2839,59 @@
        "npm": ">=7.10.0"
      }
    },
    "node_modules/@tanstack/query-core": {
      "version": "5.74.7",
      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.74.7.tgz",
      "integrity": "sha512-X3StkN/Y6KGHndTjJf8H8th7AX4bKfbRpiVhVqevf0QWlxl6DhyJ0TYG3R0LARa/+xqDwzU9mA4pbJxzPCI29A==",
      "license": "MIT",
      "funding": {
        "type": "github",
        "url": "https://github.com/sponsors/tannerlinsley"
      }
    },
    "node_modules/@tanstack/query-devtools": {
      "version": "5.74.7",
      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.74.7.tgz",
      "integrity": "sha512-nSNlfuGdnHf4yB0S+BoNYOE1o3oAH093weAYZolIHfS2stulyA/gWfSk/9H4ZFk5mAAHb5vNqAeJOmbdcGPEQw==",
      "license": "MIT",
      "funding": {
        "type": "github",
        "url": "https://github.com/sponsors/tannerlinsley"
      }
    },
    "node_modules/@tanstack/react-query": {
      "version": "5.74.7",
      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.74.7.tgz",
      "integrity": "sha512-u4o/RIWnnrq26orGZu2NDPwmVof1vtAiiV6KYUXd49GuK+8HX+gyxoAYqIaZogvCE1cqOuZAhQKcrKGYGkrLxg==",
      "license": "MIT",
      "dependencies": {
        "@tanstack/query-core": "5.74.7"
      },
      "funding": {
        "type": "github",
        "url": "https://github.com/sponsors/tannerlinsley"
      },
      "peerDependencies": {
        "react": "^18 || ^19"
      }
    },
    "node_modules/@tanstack/react-query-devtools": {
      "version": "5.74.7",
      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.74.7.tgz",
      "integrity": "sha512-j60esTQF+ES0x52kQUYOX0Z8AJUcqCGANj6GaOf8J3YQz2bZPB1imLSw4SFeM3Ozv8uO/X/Dmh3IT1z+y57ZLQ==",
      "license": "MIT",
      "dependencies": {
        "@tanstack/query-devtools": "5.74.7"
      },
      "funding": {
        "type": "github",
        "url": "https://github.com/sponsors/tannerlinsley"
      },
      "peerDependencies": {
        "@tanstack/react-query": "^5.74.7",
        "react": "^18 || ^19"
      }
    },
    "node_modules/@testing-library/dom": {
      "version": "10.4.0",
      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
@@ -12281,6 +12337,12 @@
        "node": ">=10.4.0"
      }
    },
    "node_modules/pocketbase": {
      "version": "0.26.0",
      "resolved": "https://registry.npmjs.org/pocketbase/-/pocketbase-0.26.0.tgz",
      "integrity": "sha512-WBBeOgz4Jnrd7a1KEzSBUJqpTortKKCcp16j5KoF+4tNIyQHsmynj+qRSvS56/RVacVMbAqO8Qkfj3N84fpzEw==",
      "license": "MIT"
    },
    "node_modules/possible-typed-array-names": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
--- a/002_source/ionic_mobile/package.json
+++ b/002_source/ionic_mobile/package.json
@@ -49,7 +49,10 @@
    "react-router-dom": "^5.3.4",
    "react-use": "^17.6.0",
    "react-use-audio-player": "^2.3.0-alpha.1",
-    "remark-gfm": "^4.0.0"
+    "remark-gfm": "^4.0.0",
    "@tanstack/react-query": "^5.74.4",
    "@tanstack/react-query-devtools": "^5.74.6",
    "pocketbase": "^0.26.0"
  },
  "devDependencies": {
    "@capacitor/assets": "^3.0.5",
@@ -79,4 +82,4 @@
  "engines": {
    "node": "==18"
  }
-}
+}
--- a/002_source/ionic_mobile/src/RouteConfig.tsx
+++ b/002_source/ionic_mobile/src/RouteConfig.tsx
@@ -88,6 +88,7 @@ function RouteConfig() {
        <ListeningPractice />
      </Route>
      {/* http://localhost:5173/connective_revision/r/000000000000001 */}
      <Route exact path={`${CONNECTIVE_REVISION_LINK}/r/:p_route`}>
        <ConnectiveRevisionQuizRun />
      </Route>
@@ -96,6 +97,7 @@ function RouteConfig() {
        <ConnectiveRevisionQuizResult />
      </Route>
      {/* http://localhost:5173/connective_revision */}
      <Route exact path={CONNECTIVE_REVISION_LINK}>
        <ConnectiveRevisionSelectCategory />
      </Route>
--- a/002_source/ionic_mobile/src/hooks/_GUIDELINES.md
+++ b/002_source/ionic_mobile/src/hooks/_GUIDELINES.md
@@ -2,5 +2,8 @@
 - single file contains single function only
 - please refer to the `tsx` files already exist in this directory for
  - styling
  - naming convention
 - `useListQuizListeningPracticeContent.tsx` is a sample for listing question in listening practice.
--- a/002_source/ionic_mobile/src/types/_GUIDELINES.md
+++ b/002_source/ionic_mobile/src/types/_GUIDELINES.md
@@ -1,3 +1,7 @@
 # GUIDELINES
 - please follow to the `schema.dbml` when you draft types related to db
 ## highlighted samples
 - `QuizLPQuestion.d.ts`
--- a/002_source/pocketbase/.gitignore
+++ b/002_source/pocketbase/.gitignore
@@ -1,2 +1,3 @@
 #
 volumes
 pb_migrations
--- a/002_source/pocketbase/pb_hooks/seed/.gitignore
+++ b/002_source/pocketbase/pb_hooks/seed/.gitignore
@@ -0,0 +1 @@
 _archive
--- a/002_source/pocketbase/pb_hooks/seed/007_Users_admin.js
+++ b/002_source/pocketbase/pb_hooks/seed/007_Users_admin.js
@@ -2,9 +2,9 @@ const config = require("/pb_hooks/seed/config.js");
 const utils = require("/pb_hooks/seed/utils.js");
 module.exports = ($app) => {
-  const { CR_cat_id_news, CR_cat_id_technology } = config;
+  const { CR_cat_id_news, CR_cat_id_technology, user_id_admin } = config;
  const { getId, getAsset } = utils;
-  const ADMIN_USER_ID = getId("999");
+  const ADMIN_USER_ID = user_id_admin;
  let row_array = [[ADMIN_USER_ID, "admin@123.com", "admin@123.com", "admin@123.com", true, true, "test_admin_1"]];
--- a/002_source/pocketbase/pb_hooks/seed/060_Notifications.js
+++ b/002_source/pocketbase/pb_hooks/seed/060_Notifications.js
@@ -5,7 +5,7 @@ const config = require("/pb_hooks/seed/config.js");
 const utils = require("/pb_hooks/seed/utils.js");
 //
 module.exports = ($app) => {
-  const { CR_cat_id_news, CR_cat_id_technology } = config;
+  const { CR_cat_id_news, CR_cat_id_technology, user_id_admin, user_id_test_teacher_1 } = config;
  const { getId, getAsset, dirtyTruncateTable } = utils;
  // const ASSETS_DIR = "/pb_hooks/assets";
@@ -15,29 +15,34 @@ module.exports = ($app) => {
  // const getId = (id) => id.padStart(15, 0);
  // generate from `./project/001_documentation/Requirements/REQ0006/gen_customer/gen_customer.mjs`
-  const SAMPLE_CUSTOMER_ARRAY = [
+  const SAMPLE_NOTI_ARRAY = [
-    [getId("1"), "EV-004", false, "new_job", { id: getId("1"), name: "Jie Yan", avatar: "/assets/avatar-8.png" }, { title: "Remote React / React Native Developer" }, ""],
+    [getId("1"), "EV-004", "2025-05-01", false, "new_job", user_id_admin, { title: "Remote React / React Native Developer" }, "", {}, user_id_admin, "https://www.google.com"],
-    [getId("2"), "EV-003", true, "new_job", { id: getId("2"), name: "Fran Perez", avatar: "/assets/avatar-5.png" }, { title: "Senior Golang Backend Engineer" }, ""],
+    [getId("2"), "EV-003", "2025-05-01", false, "new_job", user_id_admin, { title: "Senior Golang Backend Engineer" }, "", {}, user_id_admin, "https://www.google.com"],
-    [getId("3"), "EV-002", true, "new_feature", "", "", "Logistics management is now available"],
+    [getId("3"), "EV-002", "2025-05-01", false, "new_feature", user_id_admin, {}, "Logistics management is now available", {}, user_id_admin, "https://www.google.com"],
-    [getId("4"), "EV-001", true, "new_company", { id: getId("3"), name: "Jie Yan", avatar: "/assets/avatar-8.png" }, { name: "Stripe" }, ""],
+    [getId("4"), "EV-001", "2025-05-01", false, "new_company", user_id_admin, {}, "", { name: "Stripe" }, user_id_admin, "https://www.google.com"],
    [getId("5"), "EV-005", "2025-05-01", false, "new_company", user_id_admin, {}, "", { name: "Stripe (without link test)" }, user_id_admin, null],
  ];
-  let row_array = SAMPLE_CUSTOMER_ARRAY;
+  let row_array = SAMPLE_NOTI_ARRAY;
  dirtyTruncateTable("Notifications");
  let lt_collection = $app.findCollectionByNameOrId("Notifications");
  for (let i = 0; i < row_array.length; i++) {
-    let customer = row_array[i];
+    let noti = row_array[i];
    let record = new Record(lt_collection);
-    record.set("id", customer[0]);
+    record.set("id", noti[0]);
-    record.set("NOTI_ID", customer[1]);
+    record.set("NOTI_ID", noti[1]);
-    record.set("read", customer[2]);
+    record.set("created_at", noti[2]);
-    record.set("type", customer[3]);
+    record.set("read", noti[3]);
-    record.set("author", customer[4]);
+    record.set("type", noti[4]);
-    record.set("job", customer[5]);
+    record.set("author", noti[5]);
-    record.set("description", customer[6]);
+    record.set("job", noti[6]);
    record.set("description", noti[7]);
    record.set("company", noti[8]);
    record.set("to_user_id", noti[9]);
    record.set("link", noti[10]);
    $app.save(record);
  }
--- a/002_source/pocketbase/pb_hooks/seed/config.js
+++ b/002_source/pocketbase/pb_hooks/seed/config.js
@@ -24,4 +24,7 @@ module.exports = {
  CR_cat_id_news: "1".padStart(15, 0),
  CR_cat_id_sports: "2".padStart(15, 0),
  CR_cat_id_technology: "3".padStart(15, 0),
  //
  user_id_admin: "999".padStart(15, 0),
  user_id_test_teacher_1: "11".padStart(15, 0),
 };
--- a/002_source/pocketbase/pb_hooks/seed/schema.json
+++ b/002_source/pocketbase/pb_hooks/seed/schema.json
@@ -1057,16 +1057,6 @@
        "system": false,
        "type": "text"
      },
      {
        "hidden": false,
        "id": "json3182418120",
        "maxSize": 0,
        "name": "author",
        "presentable": false,
        "required": false,
        "system": false,
        "type": "json"
      },
      {
        "hidden": false,
        "id": "json4225294584",
@@ -1124,6 +1114,77 @@
        "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"
      },
      {
        "cascadeDelete": false,
        "collectionId": "pbc_1305841361",
        "hidden": false,
        "id": "relation3182418120",
        "maxSelect": 1,
        "minSelect": 0,
        "name": "author",
        "presentable": false,
        "required": false,
        "system": false,
        "type": "relation"
      },
      {
        "convertURLs": false,
        "hidden": false,
        "id": "editor4274335913",
        "maxSize": 0,
        "name": "content",
        "presentable": false,
        "required": false,
        "system": false,
        "type": "editor"
      },
      {
        "hidden": false,
        "id": "json1337919823",
        "maxSize": 0,
        "name": "company",
        "presentable": false,
        "required": false,
        "system": false,
        "type": "json"
      },
      {
        "exceptDomains": null,
        "hidden": false,
        "id": "url917281265",
        "name": "link",
        "onlyDomains": null,
        "presentable": false,
        "required": false,
        "system": false,
        "type": "url"
      }
    ],
    "indexes": [],
--- a/002_source/pocketbase/pb_migrations/1746681012_deleted_UserMetas.js
+++ b/002_source/pocketbase/pb_migrations/1746681012_deleted_UserMetas.js
@@ -1,136 +0,0 @@
 /// <reference path="../pb_data/types.d.ts" />
 migrate((app) => {
  const collection = app.findCollectionByNameOrId("pbc_1305841361");
  return app.delete(collection);
 }, (app) => {
  const collection = new Collection({
    "createRule": "",
    "deleteRule": "",
    "fields": [
      {
        "autogeneratePattern": "[a-z0-9]{15}",
        "hidden": false,
        "id": "text3208210256",
        "max": 15,
        "min": 15,
        "name": "id",
        "pattern": "^[a-z0-9]+$",
        "presentable": false,
        "primaryKey": true,
        "required": true,
        "system": true,
        "type": "text"
      },
      {
        "autogeneratePattern": "",
        "hidden": false,
        "id": "text4192936109",
        "max": 0,
        "min": 0,
        "name": "helloworld",
        "pattern": "",
        "presentable": false,
        "primaryKey": false,
        "required": false,
        "system": false,
        "type": "text"
      },
      {
        "hidden": false,
        "id": "json3622966325",
        "maxSize": 0,
        "name": "meta",
        "presentable": false,
        "required": false,
        "system": false,
        "type": "json"
      },
      {
        "cascadeDelete": false,
        "collectionId": "_pb_users_auth_",
        "hidden": false,
        "id": "relation2809058197",
        "maxSelect": 1,
        "minSelect": 0,
        "name": "user_id",
        "presentable": false,
        "required": false,
        "system": false,
        "type": "relation"
      },
      {
        "hidden": false,
        "id": "autodate2990389176",
        "name": "created",
        "onCreate": true,
        "onUpdate": false,
        "presentable": false,
        "system": false,
        "type": "autodate"
      },
      {
        "hidden": false,
        "id": "autodate3332085495",
        "name": "updated",
        "onCreate": true,
        "onUpdate": true,
        "presentable": false,
        "system": false,
        "type": "autodate"
      },
      {
        "autogeneratePattern": "",
        "hidden": false,
        "id": "text2744374011",
        "max": 0,
        "min": 0,
        "name": "state",
        "pattern": "",
        "presentable": false,
        "primaryKey": false,
        "required": false,
        "system": false,
        "type": "text"
      },
      {
        "hidden": false,
        "id": "file376926767",
        "maxSelect": 1,
        "maxSize": 0,
        "mimeTypes": [],
        "name": "avatar",
        "presentable": false,
        "protected": false,
        "required": false,
        "system": false,
        "thumbs": [],
        "type": "file"
      },
      {
        "autogeneratePattern": "",
        "hidden": false,
        "id": "text1466534506",
        "max": 0,
        "min": 0,
        "name": "role",
        "pattern": "",
        "presentable": false,
        "primaryKey": false,
        "required": false,
        "system": false,
        "type": "text"
      }
    ],
    "id": "pbc_1305841361",
    "indexes": [],
    "listRule": "",
    "name": "UserMetas",
    "system": false,
    "type": "base",
    "updateRule": "",
    "viewRule": ""
  });
  return app.save(collection);
 })
--- a/002_source/pocketbase/pb_migrations/1746681213_updated_UserMetas.js
+++ b/002_source/pocketbase/pb_migrations/1746681213_updated_UserMetas.js
@@ -1,45 +0,0 @@
 /// <reference path="../pb_data/types.d.ts" />
 migrate((app) => {
  const collection = app.findCollectionByNameOrId("pbc_1305841361")
  // add field
  collection.fields.addAt(9, new Field({
    "autogeneratePattern": "",
    "hidden": false,
    "id": "text1579384326",
    "max": 0,
    "min": 0,
    "name": "name",
    "pattern": "",
    "presentable": false,
    "primaryKey": false,
    "required": false,
    "system": false,
    "type": "text"
  }))
  // add field
  collection.fields.addAt(10, new Field({
    "exceptDomains": null,
    "hidden": false,
    "id": "email3885137012",
    "name": "email",
    "onlyDomains": null,
    "presentable": false,
    "required": false,
    "system": false,
    "type": "email"
  }))
  return app.save(collection)
 }, (app) => {
  const collection = app.findCollectionByNameOrId("pbc_1305841361")
  // remove field
  collection.fields.removeById("text1579384326")
  // remove field
  collection.fields.removeById("email3885137012")
  return app.save(collection)
 })
--- a/002_source/pocketbase/pb_migrations/1746681267_updated_users.js
+++ b/002_source/pocketbase/pb_migrations/1746681267_updated_users.js
@@ -1,29 +0,0 @@
 /// <reference path="../pb_data/types.d.ts" />
 migrate((app) => {
  const collection = app.findCollectionByNameOrId("_pb_users_auth_")
  // add field
  collection.fields.addAt(11, new Field({
    "autogeneratePattern": "",
    "hidden": false,
    "id": "text1146066909",
    "max": 0,
    "min": 0,
    "name": "phone",
    "pattern": "",
    "presentable": false,
    "primaryKey": false,
    "required": false,
    "system": false,
    "type": "text"
  }))
  return app.save(collection)
 }, (app) => {
  const collection = app.findCollectionByNameOrId("_pb_users_auth_")
  // remove field
  collection.fields.removeById("text1146066909")
  return app.save(collection)
 })
--- a/002_source/pocketbase/pb_migrations/1746681302_updated_UserMetas.js
+++ b/002_source/pocketbase/pb_migrations/1746681302_updated_UserMetas.js
@@ -1,29 +0,0 @@
 /// <reference path="../pb_data/types.d.ts" />
 migrate((app) => {
  const collection = app.findCollectionByNameOrId("pbc_1305841361")
  // add field
  collection.fields.addAt(11, new Field({
    "autogeneratePattern": "",
    "hidden": false,
    "id": "text1146066909",
    "max": 0,
    "min": 0,
    "name": "phone",
    "pattern": "",
    "presentable": false,
    "primaryKey": false,
    "required": false,
    "system": false,
    "type": "text"
  }))
  return app.save(collection)
 }, (app) => {
  const collection = app.findCollectionByNameOrId("pbc_1305841361")
  // remove field
  collection.fields.removeById("text1146066909")
  return app.save(collection)
 })
--- a/002_source/pocketbase/pb_migrations/1746683304_updated_Teachers.js
+++ b/002_source/pocketbase/pb_migrations/1746683304_updated_Teachers.js
@@ -1,20 +0,0 @@
 /// <reference path="../pb_data/types.d.ts" />
 migrate((app) => {
  const collection = app.findCollectionByNameOrId("pbc_1413424569")
  // update collection data
  unmarshal({
    "name": "Teachers_xxx"
  }, collection)
  return app.save(collection)
 }, (app) => {
  const collection = app.findCollectionByNameOrId("pbc_1413424569")
  // update collection data
  unmarshal({
    "name": "Teachers"
  }, collection)
  return app.save(collection)
 })
--- a/002_source/scripts/dc_dev.sh
+++ b/002_source/scripts/dc_dev.sh
@@ -6,11 +6,10 @@ docker compose kill
 docker compose down
 docker compose -f docker-compose.yml -f docker-compose.dev.yml up -d pocketbase api_ts --remove-orphans
-# docker compose logs -f pocketbase api_ts
+docker compose logs pocketbase
 echo "done"
 echo "please run yourself !!!!"
 echo "nodemon -w /pb_hooks --exec "pocketbase seed""
 echo ""
Author	SHA1	Message	Date
louiscklaw	2c7316786c	```update dc_dev.sh to remove commented logs command and adjust startup sequence for pocketbase and api_ts```	2025-05-12 14:03:52 +08:00
louiscklaw	89f91ec2a0	```update Notifications table schema by removing 'author' text field, adding 'author' relation, 'content', 'company', and 'link' fields, and sync changes in schema.dbml, schema.json, and pb_hooks/seed/schema.json```	2025-05-12 14:03:35 +08:00
louiscklaw	1441863dcd	```remove obsolete UserMetas migrations and related user collection modifications```	2025-05-12 14:01:52 +08:00
louiscklaw	1835caee68	```update prettier config with printWidth and quoteProps, add new routes for connective revision, and update guidelines for hooks and types```	2025-05-12 13:49:11 +08:00
louiscklaw	bac8c70d4b	```fix typos and update base URL quotes in code files```	2025-05-12 13:48:32 +08:00
louiscklaw	975a528b49	`` `update prettier config to enforce LF line endings and ES5 trailing commas` ``	2025-05-12 13:29:40 +08:00
louiscklaw	749fef7e28	`` `update prettier config for Ionic mobile with new endOfLine and trailingComma settings` ``	2025-05-12 13:26:39 +08:00
louiscklaw	cf34833d42	init project-wise prettier config,	2025-05-12 13:22:43 +08:00
louiscklaw	7bb45316af	update dependencies,	2025-05-12 13:21:28 +08:00
louiscklaw	02771185af	``` add ionic mobile workspace configuration with linked folders and git/port settings ```	2025-05-12 13:20:37 +08:00
louiscklaw	cf70e2af21	``` refactor notifications popover to include unread count, mark all as read button, and loading state ```	2025-05-12 13:10:19 +08:00
louiscklaw	1a77c3a5e8	update helloworld template for component,	2025-05-12 11:34:06 +08:00
louiscklaw	af446aed59	update seed file,	2025-05-12 11:33:13 +08:00
louiscklaw	c7f1f544ec	``` refactor notifications popover to use new hooks and improve functionality ```	2025-05-12 11:32:53 +08:00
louiscklaw	99ee2f9fc3	``` add admin user ID to seed config and update notification relations ```	2025-05-11 17:29:19 +08:00
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