build cms ok,

2025-05-23 17:16:47 +08:00
parent 50fc385c2b
commit a94ead44ba
41 changed files with 395 additions and 83 deletions
--- a/002_source/cms/.eslintrc.js
+++ b/002_source/cms/.eslintrc.js
@@ -87,6 +87,7 @@ module.exports = {
    '**/*.bak',
    '**/*copy.*',
    '**/*copy*.*',
+    '**/*draft*/**',
    //
  ],
  overrides: [
--- a/002_source/cms/Dockerfile
+++ b/002_source/cms/Dockerfile
@@ -0,0 +1,5 @@
+FROM 192.168.10.61:5000/nvm_ubuntu:latest
+
+WORKDIR /app
+
+RUN nvm install 22
--- a/002_source/cms/scripts/003_build_w.sh
+++ b/002_source/cms/scripts/003_build_w.sh
@@ -3,5 +3,10 @@
 set -ex

 reset
+
 rm -rf .next
+
+# pnpm run typecheck
+# pnpm run lint:w
+
 pnpm run build
--- a/002_source/cms/scripts/docker/entrypoint.sh
+++ b/002_source/cms/scripts/docker/entrypoint.sh
@@ -3,13 +3,16 @@
 # set -x

 # nvm use 20
+nvm install 18
 nvm alias default 18
 nvm use default
 node -v

-npm i -D
+sleep infinity

-npm run dev
+# pnpm i -D
+
+# pnpm run start

 # while true; do
 #     if [ "$NODE_ENV" = "development" ]; then
--- a/002_source/cms/src/app/dashboard/students/SampleStudents.tsx
+++ b/002_source/cms/src/app/dashboard/students/SampleStudents.tsx
@@ -1,8 +1,26 @@
 // src/app/dashboard/students/page.tsx
+
 'use client';
+
 import type { Student } from '@/db/Students/type.d';
+
 import { dayjs } from '@/lib/dayjs';

+const sampleBillingAddress = {
+  city: 'string',
+  country: 'string',
+  line1: 'string',
+  line2: 'string',
+  state: 'string',
+  zipCode: 'string',
+  //
+  id: 'string',
+  collectionId: 'string',
+  collectionName: 'string',
+  updated: 'string',
+  created: 'string',
+};
+
 export const SampleStudents = [
  {
    id: 'STU-005',
@@ -13,6 +31,12 @@ export const SampleStudents = [
    quota: 50,
    status: 'active',
    createdAt: dayjs().subtract(1, 'hour').toDate(),
+    billingAddress: sampleBillingAddress,
+    state: 'active',
+    timezone: '',
+    language: '',
+    currency: '',
+    collectionId: '',
  },
  {
    id: 'STU-004',
@@ -23,6 +47,12 @@ export const SampleStudents = [
    quota: 100,
    status: 'active',
    createdAt: dayjs().subtract(3, 'hour').toDate(),
+    billingAddress: sampleBillingAddress,
+    state: 'active',
+    timezone: '',
+    language: '',
+    currency: '',
+    collectionId: '',
  },
  {
    id: 'STU-003',
@@ -33,6 +63,12 @@ export const SampleStudents = [
    quota: 10,
    status: 'blocked',
    createdAt: dayjs().subtract(1, 'hour').subtract(1, 'day').toDate(),
+    billingAddress: sampleBillingAddress,
+    state: 'active',
+    timezone: '',
+    language: '',
+    currency: '',
+    collectionId: '',
  },
  {
    id: 'STU-002',
@@ -43,6 +79,12 @@ export const SampleStudents = [
    quota: 0,
    status: 'pending',
    createdAt: dayjs().subtract(7, 'hour').subtract(1, 'day').toDate(),
+    billingAddress: sampleBillingAddress,
+    state: 'active',
+    timezone: '',
+    language: '',
+    currency: '',
+    collectionId: '',
  },
  {
    id: 'STU-001',
@@ -53,5 +95,11 @@ export const SampleStudents = [
    quota: 50,
    status: 'active',
    createdAt: dayjs().subtract(2, 'hour').subtract(2, 'day').toDate(),
+    billingAddress: sampleBillingAddress,
+    state: 'active',
+    timezone: '',
+    language: '',
+    currency: '',
+    collectionId: '',
  },
 ] satisfies Student[];
--- a/002_source/cms/src/app/dashboard/students/list/page.tsx
+++ b/002_source/cms/src/app/dashboard/students/list/page.tsx
@@ -120,12 +120,12 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
      tempFilter.push(`phone ~ "%${phone}%"`);
    }

-    let preFinalListOption = { filter: '' };
+    let preFinalListOption = { filter: '', sort: '' };
    if (tempFilter.length > 0) {
-      preFinalListOption = { filter: tempFilter.join(' && ') };
+      preFinalListOption.filter = tempFilter.join(' && ');
    }
    if (tempSortDir.length > 0) {
-      preFinalListOption = { ...preFinalListOption, sort: tempSortDir };
+      preFinalListOption.sort = tempSortDir;
    }
    setListOption(preFinalListOption);
  }, [sortDir, email, phone, state]);
--- a/002_source/cms/src/app/dashboard/teachers/list/page.tsx
+++ b/002_source/cms/src/app/dashboard/teachers/list/page.tsx
@@ -122,12 +122,12 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
      tempFilter.push(`phone ~ "%${phone}%"`);
    }

-    let preFinalListOption = { filter: '' };
+    const preFinalListOption = { filter: '', sort: '' };
    if (tempFilter.length > 0) {
-      preFinalListOption = { filter: tempFilter.join(' && ') };
+      preFinalListOption.filter = tempFilter.join(' && ');
    }
    if (tempSortDir.length > 0) {
-      preFinalListOption = { ...preFinalListOption, sort: tempSortDir };
+      preFinalListOption.sort = tempSortDir;
    }
    setListOption(preFinalListOption);
  }, [sortDir, email, phone, state]);
--- a/002_source/cms/src/app/dashboard/user_metas/list/page.tsx
+++ b/002_source/cms/src/app/dashboard/user_metas/list/page.tsx
@@ -22,7 +22,7 @@ import isDevelopment from '@/lib/check-is-development';
 import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
 import ErrorDisplay from '@/components/dashboard/error';
-import { defaultUserMeta } from '@/components/dashboard/user_meta/_constants';
+import { defaultDBUserMeta, defaultUserMeta } from '@/components/dashboard/user_meta/_constants';
 import type { UserMeta } from '@/components/dashboard/user_meta/type.d';
 import { UserMetasFilters } from '@/components/dashboard/user_meta/user-metas-filters';
 import { UserMetasPagination } from '@/components/dashboard/user_meta/user-metas-pagination';
@@ -62,7 +62,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
        .getList(currentPage + 1, rowsPerPage, listOption);
      const { items, totalItems } = models;
      const tempUserMeta: UserMeta[] = items.map((lt) => {
-        return { ...defaultUserMeta, ...lt };
+        return lt as unknown as UserMeta;
      });

      setUserMetaData(tempUserMeta);
@@ -115,12 +115,12 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
      tempFilter.push(`phone ~ "%${phone}%"`);
    }

-    let preFinalListOption = { filter: '' };
+    const preFinalListOption = { filter: '', sort: '' };
    if (tempFilter.length > 0) {
-      preFinalListOption = { filter: tempFilter.join(' && ') };
+      preFinalListOption.filter = tempFilter.join(' && ');
    }
    if (tempSortDir.length > 0) {
-      preFinalListOption = { ...preFinalListOption, sort: tempSortDir };
+      preFinalListOption.sort = tempSortDir;
    }
    setListOption(preFinalListOption);
  }, [sortDir, email, phone, state]);
--- a/002_source/cms/src/app/dashboard/user_metas/view/[id]/BasicDetailCard.tsx
+++ b/002_source/cms/src/app/dashboard/user_metas/view/[id]/BasicDetailCard.tsx
@@ -1,6 +1,7 @@
 'use client';

 import * as React from 'react';
+import type { UserMeta } from '@/db/UserMetas/type';
 import Avatar from '@mui/material/Avatar';
 import Card from '@mui/material/Card';
 import CardHeader from '@mui/material/CardHeader';
@@ -13,8 +14,9 @@ import { useTranslation } from 'react-i18next';

 import { PropertyItem } from '@/components/core/property-item';
 import { PropertyList } from '@/components/core/property-list';
+
 // import { CrCategory } from '@/components/dashboard/cr/categories/type';
-import type { UserMeta } from '@/components/dashboard/user_meta/type_move.d';
+// import type { UserMeta } from '@/components/dashboard/user_meta/type_move.d';

 export default function BasicDetailCard({
  userMeta,
--- a/002_source/cms/src/app/dashboard/user_metas/view/[id]/page.tsx
+++ b/002_source/cms/src/app/dashboard/user_metas/view/[id]/page.tsx
@@ -12,6 +12,8 @@ import { SampleNotifications } from '@/app/dashboard/Sample/Notifications';
 import SamplePaymentCard from '@/app/dashboard/Sample/PaymentCard';
 import SampleSecurityCard from '@/app/dashboard/Sample/SecurityCard';
 import { COL_USER_METAS } from '@/constants';
+import { defaultBillingAddress } from '@/db/billingAddress/constant';
+import type { UserMeta } from '@/db/UserMetas/type';
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
@@ -20,7 +22,8 @@ import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/Arrow
 import type { RecordModel } from 'pocketbase';
 import { useTranslation } from 'react-i18next';

-import { config } from '@/config';
+// TODO: remove me
+// import { config } from '@/config';
 import { paths } from '@/paths';
 import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
@@ -28,7 +31,7 @@ import { toast } from '@/components/core/toaster';
 import ErrorDisplay from '@/components/dashboard/error';
 import { defaultUserMeta } from '@/components/dashboard/user_meta/_constants';
 import { Notifications } from '@/components/dashboard/user_meta/notifications';
-import type { UserMeta } from '@/components/dashboard/user_meta/type_move.d';
+// import type { UserMeta } from '@/components/dashboard/user_meta/type_move.d';
 import FormLoading from '@/components/loading';

 import BasicDetailCard from './BasicDetailCard';
@@ -109,7 +112,7 @@ export default function Page(): React.JSX.Element {
            spacing={3}
            sx={{ alignItems: 'flex-start' }}
          >
-            <TitleCard teacherRecord={userMeta} />
+            <TitleCard teacherRecord={{ ...userMeta, billingAddress: defaultBillingAddress }} />
          </Stack>
        </Stack>
        <Grid
--- a/002_source/cms/src/app/dashboard/vocabularies/view/[cat_id]/page.tsx
+++ b/002_source/cms/src/app/dashboard/vocabularies/view/[cat_id]/page.tsx
@@ -145,7 +145,7 @@ export default function Page(): React.JSX.Element {
                  spacing={2}
                  sx={{ alignItems: 'center', flexWrap: 'wrap' }}
                >
-                  <Typography variant="h4">{showLessonCategory.name}</Typography>
+                  <Typography variant="h4">{showLessonCategory.word}</Typography>
                  <Chip
                    icon={
                      <CheckCircleIcon
@@ -221,7 +221,7 @@ export default function Page(): React.JSX.Element {
                        ),
                      },
                      { key: 'word_c', value: showLessonCategory.word_c },
-                      { key: 'Pos', value: showLessonCategory.pos },
+                      { key: 'Pos', value: showLessonCategory.id },
                      {
                        key: 'Visible',
                        value: (
--- a/002_source/cms/src/components/auth/custom/o-auth-providers.tsx
+++ b/002_source/cms/src/components/auth/custom/o-auth-providers.tsx
--- a/002_source/cms/src/components/auth/custom/sign-in-form/index.tsx
+++ b/002_source/cms/src/components/auth/custom/sign-in-form/index.tsx
@@ -31,8 +31,8 @@ import { useUser } from '@/hooks/use-user';
 import { DynamicLogo } from '@/components/core/logo';
 import { toast } from '@/components/core/toaster';

+import { oAuthProviders } from '../o-auth-providers.tsx';
 import type { OAuthProvider } from '../OAuthProvider';
-import { oAuthProviders } from '../oAuthProviders';

 // interface OAuthProvider {
 //   id: 'google' | 'discord' | 'github';
--- a/002_source/cms/src/components/auth/custom/sign-up-form/index.tsx
+++ b/002_source/cms/src/components/auth/custom/sign-up-form/index.tsx
@@ -30,8 +30,8 @@ import { useUser } from '@/hooks/use-user';
 import { DynamicLogo } from '@/components/core/logo';
 import { toast } from '@/components/core/toaster';

+import { oAuthProviders } from '../o-auth-providers.tsx';
 import type { OAuthProvider } from '../OAuthProvider';
-import { oAuthProviders } from '../oAuthProviders';

 export function SignUpForm(): React.JSX.Element {
  const router = useRouter();
@@ -195,7 +195,7 @@ export function SignUpForm(): React.JSX.Element {
                  <InputLabel>{t('email-address')}:</InputLabel>
                  <OutlinedInput
                    {...field}
-                    placeholder={`${t('e.g.')  } name@example.com`}
+                    placeholder={`${t('e.g.')} name@example.com`}
                    type="email"
                    disabled={isPending}
                  />
--- a/002_source/cms/src/components/dashboard/blog/comment-add.tsx
+++ b/002_source/cms/src/components/dashboard/blog/comment-add.tsx
@@ -16,16 +16,36 @@ const user = {
  name: 'Sofia Rivers',
  avatar: '/assets/avatar.png',
  email: 'sofia@devias.io',
+  collectionId: '123321',
 } satisfies User;

 export function CommentAdd(): React.JSX.Element {
  return (
-    <Stack direction="row" spacing={2} sx={{ alignItems: 'flex-start' }}>
+    <Stack
+      direction="row"
+      spacing={2}
+      sx={{ alignItems: 'flex-start' }}
+    >
      <Avatar src={user.avatar} />
-      <Stack spacing={3} sx={{ flex: '1 1 auto' }}>
-        <OutlinedInput multiline placeholder="Add a comment" rows={3} />
-        <Stack direction="row" spacing={3} sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
-          <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+      <Stack
+        spacing={3}
+        sx={{ flex: '1 1 auto' }}
+      >
+        <OutlinedInput
+          multiline
+          placeholder="Add a comment"
+          rows={3}
+        />
+        <Stack
+          direction="row"
+          spacing={3}
+          sx={{ alignItems: 'center', justifyContent: 'space-between' }}
+        >
+          <Stack
+            direction="row"
+            spacing={1}
+            sx={{ alignItems: 'center' }}
+          >
            <IconButton sx={{ display: { sm: 'none' } }}>
              <PlusIcon />
            </IconButton>
--- a/002_source/cms/src/components/dashboard/chat/message-add.tsx
+++ b/002_source/cms/src/components/dashboard/chat/message-add.tsx
@@ -19,6 +19,7 @@ const user = {
  name: 'Sofia Rivers',
  avatar: '/assets/avatar.png',
  email: 'sofia@devias.io',
+  collectionId: '123321',
 } satisfies User;

 export interface MessageAddProps {
@@ -57,8 +58,15 @@ export function MessageAdd({ disabled = false, onSend }: MessageAddProps): React
  );

  return (
-    <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '0 0 auto', px: 3, py: 1 }}>
-      <Avatar src={user.avatar} sx={{ display: { xs: 'none', sm: 'inline' } }} />
+    <Stack
+      direction="row"
+      spacing={2}
+      sx={{ alignItems: 'center', flex: '0 0 auto', px: 3, py: 1 }}
+    >
+      <Avatar
+        src={user.avatar}
+        sx={{ display: { xs: 'none', sm: 'inline' } }}
+      />
      <OutlinedInput
        disabled={disabled}
        onChange={handleChange}
@@ -67,7 +75,11 @@ export function MessageAdd({ disabled = false, onSend }: MessageAddProps): React
        sx={{ flex: '1 1 auto' }}
        value={content}
      />
-      <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+      <Stack
+        direction="row"
+        spacing={1}
+        sx={{ alignItems: 'center' }}
+      >
        <Tooltip title="Send">
          <span>
            <IconButton
@@ -84,24 +96,40 @@ export function MessageAdd({ disabled = false, onSend }: MessageAddProps): React
            </IconButton>
          </span>
        </Tooltip>
-        <Stack direction="row" spacing={1} sx={{ display: { xs: 'none', sm: 'flex' } }}>
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{ display: { xs: 'none', sm: 'flex' } }}
+        >
          <Tooltip title="Attach photo">
            <span>
-              <IconButton disabled={disabled} edge="end" onClick={handleAttach}>
+              <IconButton
+                disabled={disabled}
+                edge="end"
+                onClick={handleAttach}
+              >
                <CameraIcon />
              </IconButton>
            </span>
          </Tooltip>
          <Tooltip title="Attach file">
            <span>
-              <IconButton disabled={disabled} edge="end" onClick={handleAttach}>
+              <IconButton
+                disabled={disabled}
+                edge="end"
+                onClick={handleAttach}
+              >
                <PaperclipIcon />
              </IconButton>
            </span>
          </Tooltip>
        </Stack>
      </Stack>
-      <input hidden ref={fileInputRef} type="file" />
+      <input
+        hidden
+        ref={fileInputRef}
+        type="file"
+      />
    </Stack>
  );
 }
--- a/002_source/cms/src/components/dashboard/chat/message-box.tsx
+++ b/002_source/cms/src/components/dashboard/chat/message-box.tsx
@@ -17,6 +17,7 @@ const user = {
  name: 'Sofia Rivers',
  avatar: '/assets/avatar.png',
  email: 'sofia@devias.io',
+  collectionId: '123321',
 } satisfies User;

 export interface MessageBoxProps {
@@ -38,8 +39,14 @@ export function MessageBox({ message }: MessageBoxProps): React.JSX.Element {
          mr: position === 'left' ? 'auto' : 0,
        }}
      >
-        <Avatar src={message.author.avatar} sx={{ '--Avatar-size': '32px' }} />
-        <Stack spacing={1} sx={{ flex: '1 1 auto' }}>
+        <Avatar
+          src={message.author.avatar}
+          sx={{ '--Avatar-size': '32px' }}
+        />
+        <Stack
+          spacing={1}
+          sx={{ flex: '1 1 auto' }}
+        >
          <Card
            sx={{
              px: 2,
@@ -52,7 +59,11 @@ export function MessageBox({ message }: MessageBoxProps): React.JSX.Element {
          >
            <Stack spacing={1}>
              <div>
-                <Link color="inherit" sx={{ cursor: 'pointer' }} variant="subtitle2">
+                <Link
+                  color="inherit"
+                  sx={{ cursor: 'pointer' }}
+                  variant="subtitle2"
+                >
                  {message.author.name}
                </Link>
              </div>
@@ -66,14 +77,21 @@ export function MessageBox({ message }: MessageBoxProps): React.JSX.Element {
                />
              ) : null}
              {message.type === 'text' ? (
-                <Typography color="inherit" variant="body1">
+                <Typography
+                  color="inherit"
+                  variant="body1"
+                >
                  {message.content}
                </Typography>
              ) : null}
            </Stack>
          </Card>
          <Box sx={{ display: 'flex', justifyContent: position === 'right' ? 'flex-end' : 'flex-start', px: 2 }}>
-            <Typography color="text.secondary" noWrap variant="caption">
+            <Typography
+              color="text.secondary"
+              noWrap
+              variant="caption"
+            >
              {dayjs(message.createdAt).fromNow()}
            </Typography>
          </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
@@ -3,6 +3,7 @@
 import * as React from 'react';
 import RouterLink from 'next/link';
 import { usePathname } from 'next/navigation';
+import { MarkOneAsRead } from '@/db/Notifications/mark-one-as-read';
 import Avatar from '@mui/material/Avatar';
 import Badge from '@mui/material/Badge';
 import Box from '@mui/material/Box';
@@ -25,6 +26,7 @@ import type { NavItemConfig } from '@/types/nav';
 import type { NavColor } from '@/types/settings';
 import type { User } from '@/types/user';
 import { paths } from '@/paths';
+import { logger } from '@/lib/default-logger';
 import { isNavItemActive } from '@/lib/is-nav-item-active';
 import { useDialog } from '@/hooks/use-dialog';
 import { usePopover } from '@/hooks/use-popover';
@@ -33,6 +35,7 @@ import { Dropdown } from '@/components/core/dropdown/dropdown';
 import { DropdownPopover } from '@/components/core/dropdown/dropdown-popover';
 import { DropdownTrigger } from '@/components/core/dropdown/dropdown-trigger';
 import { Logo } from '@/components/core/logo';
+import { toast } from '@/components/core/toaster';
 import { SearchDialog } from '@/components/dashboard/layout/search-dialog';
 import type { ColorScheme } from '@/styles/theme/types';

@@ -183,6 +186,29 @@ function SearchButton(): React.JSX.Element {

 function NotificationsButton(): React.JSX.Element {
  const popover = usePopover<HTMLButtonElement>();
+  const [listLength, setListLength] = React.useState<number>(0);
+
+  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>
@@ -190,15 +216,14 @@ function NotificationsButton(): React.JSX.Element {
        <Badge
          color="error"
          sx={{
-            '& .MuiBadge-dot': {
-              borderRadius: '50%',
+            '& .MuiBadge-badge': {
+              height: '20px',
+              width: '20px',
              right: '6px',
              top: '6px',
-              height: '10px',
-              width: '10px',
            },
          }}
-          variant="dot"
+          badgeContent={listLength}
        >
          <IconButton
            onClick={popover.handleOpen}
@@ -212,6 +237,9 @@ function NotificationsButton(): React.JSX.Element {
        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/layout/notifications-popover/sample-notifications.tsx
+++ b/002_source/cms/src/components/dashboard/layout/notifications-popover/sample-notifications.tsx
@@ -1,6 +1,9 @@
 'use client';
+
 import type { Notification } from '@/db/Notifications/type';
+
 import { dayjs } from '@/lib/dayjs';
+
 // import type { Notification } from './type.d.tsx';

 export const SampleNotifications = [
@@ -11,6 +14,11 @@ export const SampleNotifications = [
    type: 'new_job',
    author: { id: '0001', collectionId: '0001', name: 'Jie Yan', avatar: '/assets/avatar-8.png' },
    job: { title: 'Remote React / React Native Developer' },
+    //
+    created: '',
+    link: '',
+    NOTI_ID: '',
+    updated: '',
  },
  {
    id: 'EV-003',
@@ -19,6 +27,11 @@ export const SampleNotifications = [
    type: 'new_job',
    author: { id: '0001', collectionId: '0001', name: 'Fran Perez', avatar: '/assets/avatar-5.png' },
    job: { title: 'Senior Golang Backend Engineer' },
+    //
+    created: '',
+    link: '',
+    NOTI_ID: '',
+    updated: '',
  },
  {
    id: 'EV-002',
@@ -27,6 +40,11 @@ export const SampleNotifications = [
    type: 'new_feature',
    author: { id: '0001', collectionId: '0001', name: 'Fran Perez', avatar: '/assets/avatar-5.png' },
    description: 'Logistics management is now available',
+    //
+    created: '',
+    link: '',
+    NOTI_ID: '',
+    updated: '',
  },
  {
    id: 'EV-001',
@@ -35,5 +53,10 @@ export const SampleNotifications = [
    type: 'new_company',
    author: { id: '0001', collectionId: '002', name: 'Jie Yan', avatar: '/assets/avatar-8.png' },
    company: { name: 'Stripe' },
+    //
+    created: '',
+    link: '',
+    NOTI_ID: '',
+    updated: '',
  },
 ] satisfies Notification[];
--- a/002_source/cms/src/components/dashboard/layout/vertical/main-nav/user-button.tsx
+++ b/002_source/cms/src/components/dashboard/layout/vertical/main-nav/user-button.tsx
@@ -6,11 +6,12 @@ import Badge from '@mui/material/Badge';
 import Box from '@mui/material/Box';

 import type { User } from '@/types/user';
+import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
 import { usePopover } from '@/hooks/use-popover';
+import { useUser } from '@/hooks/use-user';

 import { UserPopover } from '../../user-popover/user-popover';
-import { useUser } from '@/hooks/use-user';
-import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
+
 // import { NotificationsButton } from './notifications-button';

 // TODO:remove me
@@ -50,7 +51,7 @@ export function UserButton(): React.JSX.Element {
          }}
          variant="dot"
        >
-          <Avatar src={getImageUrlFromFile(user.collectionId, user.id, user.avatar)} />
+          <Avatar src={getImageUrlFromFile(user.collectionId || '', user.id, user.avatar)} />
        </Badge>
      </Box>
      <UserPopover
--- a/002_source/cms/src/components/dashboard/settings/account-details/index.tsx
+++ b/002_source/cms/src/components/dashboard/settings/account-details/index.tsx
@@ -240,7 +240,7 @@ export function AccountDetails(): React.JSX.Element {
                    </Stack>
                  </Box>
                  <Avatar
-                    src={getImageUrlFromFile(user.collectionId, user.id, user.avatar)}
+                    src={getImageUrlFromFile(user.collectionId || '', user.id, user.avatar)}
                    sx={{ '--Avatar-size': '100px' }}
                  />
                </Box>
--- a/002_source/cms/src/components/dashboard/settings/side-nav/index.tsx
+++ b/002_source/cms/src/components/dashboard/settings/side-nav/index.tsx
@@ -21,7 +21,7 @@ import FormLoading from '@/components/loading';

 import ErrorDisplay from '../../error';
 import { NavItem } from './nav-item';
-import { navItems } from './navItems';
+import { navItems } from './nav-items';

 export function SideNav(): React.JSX.Element {
  const router = useRouter();
@@ -99,7 +99,7 @@ export function SideNav(): React.JSX.Element {
          spacing={2}
          sx={{ alignItems: 'center' }}
        >
-          <Avatar src={getImageUrlFromFile(user.collectionId, user.id, user.avatar)}>{user.name}</Avatar>
+          <Avatar src={getImageUrlFromFile(user.collectionId || '', user.id, user.avatar)}>{user.name}</Avatar>
          <div>
            <Typography variant="subtitle1">{user.name}</Typography>
            <Typography
--- 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
@@ -18,7 +18,7 @@ import { UsersThree as UsersThreeIcon } from '@phosphor-icons/react/dist/ssr/Use
 import type { NavItemConfig } from '@/types/nav';
 import { isNavItemActive } from '@/lib/is-nav-item-active';

-import { navItems } from './navItems';
+import { navItems } from './nav-items';

 const icons = {
  'credit-card': CreditCardIcon,
--- a/002_source/cms/src/components/dashboard/settings/side-nav/nav-items.tsx
+++ b/002_source/cms/src/components/dashboard/settings/side-nav/nav-items.tsx
--- a/002_source/cms/src/components/dashboard/student/_constants.ts
+++ b/002_source/cms/src/components/dashboard/student/_constants.ts
@@ -2,7 +2,10 @@
 // default variable value for customer
 // empty valur for customer

+import { defaultBillingAddress } from '@/db/billingAddress/constant';
+
 import { dayjs } from '@/lib/dayjs';
+
 import type { Student } from './type.d';

 export const defaultStudent: Student = {
@@ -14,6 +17,12 @@ export const defaultStudent: Student = {
  quota: 0,
  status: 'pending',
  createdAt: dayjs().toDate(),
+  billingAddress: defaultBillingAddress,
+  state: 'pending',
+  timezone: '',
+  language: '',
+  currency: '',
+  collectionId: '',
 };

 export const emptyLpCategory: Student = {
--- a/002_source/cms/src/components/dashboard/student/type.d.ts
+++ b/002_source/cms/src/components/dashboard/student/type.d.ts
@@ -119,6 +119,7 @@ export interface StudentFiltersProps {
  filters?: Filters;
  sortDir?: SortDir;
  fullData: Student[];
+  //
 }

 // RULES: available filter options for student data
@@ -126,4 +127,5 @@ export interface Filters {
  email?: string;
  phone?: string;
  state?: string;
+  status?: string;
 }
--- a/002_source/cms/src/components/dashboard/teacher/_constants.ts
+++ b/002_source/cms/src/components/dashboard/teacher/_constants.ts
@@ -2,7 +2,10 @@
 // default variable value for customer
 // empty valur for customer

+import { defaultBillingAddress } from '@/db/billingAddress/constant';
+
 import { dayjs } from '@/lib/dayjs';
+
 import type { Teacher } from './type.d';

 export const defaultTeacher: Teacher = {
@@ -14,6 +17,12 @@ export const defaultTeacher: Teacher = {
  quota: 0,
  status: 'pending',
  createdAt: dayjs().toDate(),
+  billingAddress: defaultBillingAddress,
+  state: 'pending',
+  // timezone: '',
+  // language: '',
+  // currency: '',
+  collectionId: '',
 };

 export const emptyLpCategory: Teacher = {
--- a/002_source/cms/src/components/dashboard/teacher/teacher-edit-form.tsx
+++ b/002_source/cms/src/components/dashboard/teacher/teacher-edit-form.tsx
@@ -181,7 +181,9 @@ export function TeacherEditForm(): React.JSX.Element {
        //
        reset({ ...defaultValues, ...result });

-        setBillingAddressId(result.billingAddress.id);
+        if (result?.billingAddress !== undefined) {
+          setBillingAddressId(result.billingAddress.id);
+        }

        if (result.avatar) {
          const fetchResult = await fetch(getImageUrlFromFile(result.collectionId, result.id, result.avatar));
--- a/002_source/cms/src/components/dashboard/teacher/type.d.tsx
+++ b/002_source/cms/src/components/dashboard/teacher/type.d.tsx
@@ -1,5 +1,7 @@
 'use client';

+import { BillingAddress } from '@/db/billingAddress/type';
+
 // RULES: sorting direction for teacher lists
 export type SortDir = 'asc' | 'desc';

@@ -14,7 +16,10 @@ export interface Teacher {
  email: string;
  phone?: string;
  quota: number;
-
+  //
+  // billingAddress: BillingAddress[] | [];
+  billingAddress: BillingAddress | Record<string, never>;
+  //
  // status is obsoleted, replace by state
  status: 'pending' | 'active' | 'blocked';
  state: 'pending' | 'active' | 'blocked';
@@ -44,10 +49,13 @@ export interface CreateFormProps {
  timezone: string;
  language: string;
  currency: string;
+  // NOTE: fix this to file, change outside world
  avatar?: File | null;
  // quota?: number;
  state?: 'pending' | 'active' | 'blocked';
-  meta: Record<string, null>;
+
+  // TODO: obsolete
+  meta?: Record<string, null>;
 }

 // RULES: form data structure for editing existing teacher
--- a/002_source/cms/src/components/dashboard/user_meta/_constants.ts
+++ b/002_source/cms/src/components/dashboard/user_meta/_constants.ts
@@ -1,20 +1,50 @@
 // RULES:
 // default variable value for customer
-// empty valur for customer
+// empty value for customer
+
+import { defaultBillingAddress } from '@/db/billingAddress/constant';
+import type { DBUserMeta, UserMeta } from '@/db/UserMetas/type';

 import { dayjs } from '@/lib/dayjs';

-import type { UserMeta } from './type.d';
+// import type { UserMeta } from './type.d';

 export const defaultUserMeta: UserMeta = {
  id: '',
  name: '',
-  avatar: undefined,
+  avatar: '',
  email: '',
-  phone: undefined,
+  phone: '',
  quota: 0,
  status: 'pending',
+  state: 'pending',
+  collectionId: '',
  createdAt: dayjs().toDate(),
+  //
+  // billingAddress: defaultBillingAddress,
+  // state: 'active',
+  // timezone: '',
+  // language: '',
+  // currency: '',
+  // collectionId: '',
+};
+
+export const defaultDBUserMeta: DBUserMeta = {
+  id: '',
+  name: '',
+  avatar: '',
+  email: '',
+  phone: '',
+  quota: 0,
+  status: 'pending',
+  created: '1900-01-01',
+  state: 'active',
+  timezone: '',
+  language: '',
+  currency: '',
+  collectionId: '',
+  company: '',
+  expand: {},
 };

 export const emptyLpCategory: UserMeta = {
--- a/002_source/cms/src/components/dashboard/user_meta/user-meta-create-form.tsx
+++ b/002_source/cms/src/components/dashboard/user_meta/user-meta-create-form.tsx
@@ -3,6 +3,7 @@
 import * as React from 'react';
 import RouterLink from 'next/link';
 import { useRouter } from 'next/navigation';
+import { createTeacher } from '@/db/Teachers/Create';
 import { zodResolver } from '@hookform/resolvers/zod';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
@@ -26,11 +27,12 @@ import { Controller, useForm } from 'react-hook-form';
 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 } from '@/lib/file-to-base64';
 import { Option } from '@/components/core/option';
 import { toast } from '@/components/core/toaster';
-import { createTeacher } from '@/db/Teachers/Create';
-import isDevelopment from '@/lib/check-is-development';
+import type { CreateFormProps } from '@/components/dashboard/teacher/type.d';

 function fileToBase64(file: Blob): Promise<string> {
  return new Promise((resolve, reject) => {
@@ -45,6 +47,9 @@ function fileToBase64(file: Blob): Promise<string> {
  });
 }

+// NOTE: face user side
+// avatar should be the string inside image box,
+// so avatar is string here
 const schema = zod.object({
  avatar: zod.string().optional(),
  name: zod.string().min(1, 'Name is required').max(255),
@@ -101,13 +106,25 @@ export function TeacherCreateForm(): React.JSX.Element {
  const onSubmit = React.useCallback(
    async (values: Values): Promise<void> => {
      try {
-        // Use standard create method from db/Customers/Create
-        const record = await createTeacher(values);
-        toast.success('Customer created');
+        const temp: CreateFormProps = {
+          name: values.name,
+          email: values.email,
+          timezone: values.timezone,
+          language: values.language,
+          currency: values.currency,
+          taxId: values.taxId,
+          avatar: values.avatar ? await base64ToFile(values.avatar) : null,
+          state: 'pending',
+          meta: {},
+        };
+
+        // some convert process here...
+        const record = await createTeacher(temp);
+        toast.success('Teacher created');
        router.push(paths.dashboard.teachers.details(record.id));
      } catch (err) {
        logger.error(err);
-        toast.error('Failed to create customer');
+        toast.error('Failed to create teacher');
      }
    },
    [router]
@@ -157,7 +174,7 @@ export function TeacherCreateForm(): React.JSX.Element {
                      }}
                    >
                      <Avatar
-                        src={avatar}
+                        src={''}
                        sx={{
                          '--Avatar-size': '100px',
                          '--Icon-fontSize': 'var(--icon-fontSize-lg)',
--- a/002_source/cms/src/components/dashboard/vocabulary/_constants.ts
+++ b/002_source/cms/src/components/dashboard/vocabulary/_constants.ts
@@ -1,7 +1,6 @@
 import type { CreateForm, Vocabulary } from './type';

 export const defaultVocabulary: Vocabulary = {
-  id: 'default-vocabulary-id',
  image: undefined,
  sound: undefined,
  word: '',
@@ -11,11 +10,15 @@ export const defaultVocabulary: Vocabulary = {
  cat_id: 'default-category-id',
  category: 'default-category',
  lesson_type_id: 'default-lesson-type-id',
+  visible: 'visible',
+  //
+  id: 'default-vocabulary-id',
+  collectionId: '',
 };

 export const VocabularyCreateFormDefault: CreateForm = {
-  image: undefined,
-  sound: undefined,
+  image: null,
+  sound: '',
  word: '',
  word_c: '',
  sample_e: '',
@@ -23,6 +26,7 @@ export const VocabularyCreateFormDefault: CreateForm = {
  cat_id: '',
  category: '',
  lesson_type_id: '',
+  visible: 'visible',
 };

 export const emptyVocabulary: Vocabulary = {
--- a/002_source/cms/src/components/dashboard/vocabulary/type.d.ts
+++ b/002_source/cms/src/components/dashboard/vocabulary/type.d.ts
@@ -3,7 +3,7 @@
 export interface Vocabulary {
  created?: string;
  updated?: string;
-  image: string;
+  image: string | undefined;
  sound?: string;
  word?: string;
  word_c?: string;
@@ -22,6 +22,7 @@ export interface Vocabulary {
      //
    };
  };
+  isEmpty?: boolean;
  //
  id: string;
  collectionId: string;
@@ -62,3 +63,18 @@ export interface EditFormProps {
 export interface Helloworld {
  helloworld: string;
 }
+
+// RULES: for use with vocabulary-create-form.tsx
+// when you update, please take a look into `vocabulary-create-form.tsx`
+export interface CreateForm {
+  image: File[] | null;
+  sound: string;
+  word: string;
+  word_c: string;
+  sample_e: string;
+  sample_c: string;
+  cat_id: string;
+  category: string;
+  lesson_type_id: string;
+  visible: string;
+}
--- a/002_source/cms/src/db/Notifications/constants.ts
+++ b/002_source/cms/src/db/Notifications/constants.ts
@@ -6,12 +6,16 @@ export const defaultNotification: Notification = {
  id: '',
  read: false,
  type: '',
-  author: {},
-  job: {},
+  //
+  // TODO: troubleshoot
+  // author: {},
+  job: { title: '' },
  description: '',
  NOTI_ID: '',
  created: '',
  updated: '',
+  link: '',
+  createdAt: new Date(),
 };

 export const emptyNotification: Notification = {
--- a/002_source/cms/src/db/Notifications/type.d.ts
+++ b/002_source/cms/src/db/Notifications/type.d.ts
@@ -16,6 +16,11 @@ export interface Notification {
  company?: { name: string };
  to_user_id?: User;
  link: string;
+  //
+  NOTI_ID: string;
+  //
+  created: string;
+  updated: string;
 }

 export interface CreateFormProps {
--- a/002_source/cms/src/db/UserMetas/type.d.ts
+++ b/002_source/cms/src/db/UserMetas/type.d.ts
@@ -7,7 +7,7 @@ import type { BillingAddress } from '@/components/dashboard/user_meta/type.d';
 export interface DBUserMeta {
  name: string;
  //
-  // NOTE: obslete "avatar" and use "avatar_file"
+  // NOTE: obsolete "avatar" and use "avatar_file"
  avatar?: string;
  avatar_file?: string;
  //
@@ -35,20 +35,24 @@ export interface DBUserMeta {

 // UserMeta type definitions
 export interface UserMeta {
-  id: string;
  name: string;
  avatar: string;
  email: string;
  phone: string;
  quota: number;
+  state: 'active' | 'blocked' | 'pending';
+  // TODO: obsolete "status" field
  status: 'active' | 'blocked' | 'pending';
+  //
+  id: string;
+  collectionId: string;
  createdAt: Date;
 }

 export interface UpdateUserMeta {
  name?: string;
  //
-  // NOTE: obslete "avatar" and use "avatar_file"
+  // NOTE: obsolete "avatar" and use "avatar_file"
  // avatar_file?: string;
  avatar: File | null;
  //
@@ -57,7 +61,7 @@ export interface UpdateUserMeta {
  quota?: number;
  company?: string;
  //
-  // relation handle seperately
+  // relation handle separately
  // billingAddress: BillingAddress | Record<string, never>;

  // status is obsoleted, replace by state
--- a/002_source/cms/src/db/Users/Create.tsx
+++ b/002_source/cms/src/db/Users/Create.tsx
@@ -8,9 +8,10 @@
 // - Must handle errors gracefully and provide user feedback
 // - Should integrate with the authentication system
 //
-import { pb } from '@/lib/pb';
 import { COL_USERS } from '@/constants';
+
 import type { User } from '@/types/user';
+import { pb } from '@/lib/pb';

 export async function createUser(userData: Partial<User>): Promise<{
  data?: User;
@@ -18,7 +19,7 @@ export async function createUser(userData: Partial<User>): Promise<{
 }> {
  try {
    const data = await pb.collection(COL_USERS).create(userData);
-    return { data };
+    return { data: data as unknown as User };
  } catch (error) {
    return { error: error as Error };
  }
--- a/002_source/cms/src/db/Vocabularies/Create.tsx
+++ b/002_source/cms/src/db/Vocabularies/Create.tsx
@@ -11,8 +11,8 @@ import { COL_VOCABULARIES } from '@/constants';

 import { pb } from '@/lib/pb';

-import type { Vocabulary, VocabularyCreate } from './type';
+import type { CreateForm, Vocabulary } from './type';

-export default function createVocabulary(data: VocabularyCreate): Promise<Vocabulary> {
+export default function createVocabulary(data: CreateForm): Promise<Vocabulary> {
  return pb.collection(COL_VOCABULARIES).create(data);
 }
--- a/002_source/cms/src/db/Vocabularies/GetAll.tsx
+++ b/002_source/cms/src/db/Vocabularies/GetAll.tsx
@@ -11,8 +11,8 @@ import { COL_VOCABULARIES } from '@/constants';

 import { pb } from '@/lib/pb';

-import type { Vocabularies } from './type';
+import type { Vocabulary } from './type';

-export default function getAllVocabularies(): Promise<Vocabularies> {
+export default function getAllVocabularies(): Promise<Vocabulary[]> {
  return pb.collection(COL_VOCABULARIES).getFullList();
 }
--- a/002_source/cms/src/db/billingAddress/constant.ts
+++ b/002_source/cms/src/db/billingAddress/constant.ts
@@ -0,0 +1,14 @@
+export const defaultBillingAddress = {
+  city: '',
+  country: '',
+  line1: '',
+  line2: '',
+  state: '',
+  zipCode: '',
+  //
+  id: '',
+  collectionId: '',
+  collectionName: '',
+  updated: '',
+  created: '',
+};
--- a/002_source/cms/src/types/user.ts
+++ b/002_source/cms/src/types/user.ts
@@ -1,10 +1,12 @@
 export interface User {
  id: string;
  name?: string;
-  avatar: string;
+
+  // comply original superbase example
+  avatar?: string | undefined;
  email?: string;

-  collectionId: string;
+  collectionId?: string;

  [key: string]: unknown;
 }