update fix eslint,

002_source/cms/.eslintrc.js

@@ -82,7 +82,13 @@ module.exports = {
     'eslintreact/jsx-sort-props': 'off',
     'react/jsx-sort-props': 'off',
   },
-  ignorePatterns: ['**/*del', '**/*bak', '**/*copy.*', '**/*copy*.*'],
+  ignorePatterns: [
+    '**/*.del',
+    '**/*.bak',
+    '**/*copy.*',
+    '**/*copy*.*',
+    //
+  ],
   overrides: [
     {
       // override to ignore no-def for `describe`, `it`, and `expect`

002_source/cms/package.json

@@ -117,4 +117,4 @@
       "protobufjs"
     ]
   }
-}
+}

002_source/cms/src/__tests__/app/_helloworld/page.test.tsx

@@ -1,21 +0,0 @@
-/// <reference types="jest" />
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
-import Page from '@/app/_helloworld/page';
-
-// Mock the translation hook
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}));
-
-describe('Page', () => {
-  it('renders a heading', () => {
-    render(<Page hello={'world'} />);
-
-    const heading = screen.getByRole('heading', { level: 1 });
-
-    expect(heading).toBeInTheDocument();
-  });
-});

002_source/cms/src/__tests__/snapshot.js

@@ -1,9 +0,0 @@
-import { render } from '@testing-library/react';
-
-// CUT = Component Under Test
-import CUT from '../components/_helloworld';
-
-it('renders homepage unchanged', () => {
-  const { container } = render(<CUT />);
-  expect(container).toMatchSnapshot();
-});

002_source/cms/src/app/dashboard/connectives/lesson-categories-sample-data.tsx

@@ -1,5 +1,5 @@
 import { dayjs } from '@/lib/dayjs';
-import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/type';
 
 // import type { LessonCategory } from '@/components/dashboard/lp_categories/type';
 

002_source/cms/src/app/dashboard/connectives/view/[cat_id]/page.tsx

@@ -28,7 +28,7 @@ import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr
 import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
 import { ShieldWarning as ShieldWarningIcon } from '@phosphor-icons/react/dist/ssr/ShieldWarning';
 import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
-import { RecordModel } from 'pocketbase';
+import type { RecordModel } from 'pocketbase';
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
@@ -46,7 +46,7 @@ import { Notifications } from '@/components/dashboard/lesson_category/notificati
 import { Payments } from '@/components/dashboard/lesson_category/payments';
 import type { Address } from '@/components/dashboard/lesson_category/shipping-address';
 import { ShippingAddress } from '@/components/dashboard/lesson_category/shipping-address';
-import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/type';
 // import type { LessonCategory } from '@/components/dashboard/lp_categories/type';
 import FormLoading from '@/components/loading';
 

002_source/cms/src/app/dashboard/cr/categories/list/page.tsx

@@ -90,8 +90,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   React.useEffect(() => {
     if (!isFirstRun.current) {
       isFirstRun.current = true;
-    } else {
-      if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
+    } else if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
         // reset page number as tab changes
         setLastListOption(listOption);
         setCurrentPage(0);
@@ -99,7 +98,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       } else {
         void reloadRows();
       }
-    }
   }, [currentPage, rowsPerPage, listOption]);
 
   React.useEffect(() => {

002_source/cms/src/app/dashboard/cr/categories/lp-categories-sample-data.tsx

@@ -1,5 +1,5 @@
 import { dayjs } from '@/lib/dayjs';
-import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/type';
 
 export const LpCategoriesSampleData = [
   {

002_source/cms/src/app/dashboard/cr/categories/view/[cat_id]/BasicDetailCard.tsx

@@ -13,7 +13,7 @@ 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 { CrCategory } from '@/components/dashboard/cr/categories/type';
 
 export default function BasicDetailCard({
   lpModel: model,

002_source/cms/src/app/dashboard/cr/questions/[cat_id]/BasicDetailCard.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next';
 
 import { PropertyItem } from '@/components/core/property-item';
 import { PropertyList } from '@/components/core/property-list';
-import { LpCategory } from '@/components/dashboard/lp/categories/type';
+import type { LpCategory } from '@/components/dashboard/lp/categories/type';
 
 export default function BasicDetailCard({
   lpModel: model,

002_source/cms/src/app/dashboard/cr/questions/[cat_id]/TitleCard.tsx

@@ -11,7 +11,7 @@ import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/C
 import { useTranslation } from 'react-i18next';
 
 import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
-import { LpCategory } from '@/components/dashboard/lp/categories/type';
+import type { LpCategory } from '@/components/dashboard/lp/categories/type';
 
 export default function SampleTitleCard({ lpModel }: { lpModel: LpCategory }): React.JSX.Element {
   const { t } = useTranslation();

002_source/cms/src/app/dashboard/cr/questions/cr-categories-sample-data.tsx

@@ -1,5 +1,5 @@
 import { dayjs } from '@/lib/dayjs';
-import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/type';
 
 export const CrCategoriesSampleData = [
   {

002_source/cms/src/app/dashboard/lesson_categories/lesson-categories-sample-data.tsx

@@ -1,5 +1,5 @@
 import { dayjs } from '@/lib/dayjs';
-import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/type';
 
 // import type { LessonCategory } from '@/components/dashboard/lp_categories/type';
 

002_source/cms/src/app/dashboard/lesson_types/lesson-types-data.tsx

@@ -1,5 +1,5 @@
 import { dayjs } from '@/lib/dayjs';
-import { LessonType } from '@/components/dashboard/lesson_type/lesson-type';
+import type { LessonType } from '@/components/dashboard/lesson_type/lesson-type';
 
 // import type { LessonType } from '@/components/dashboard/lesson_type/ILessonType';
 

002_source/cms/src/app/dashboard/lesson_types/lesson-types-sample-data.tsx

@@ -1,5 +1,5 @@
 import { dayjs } from '@/lib/dayjs';
-import { LessonType } from '@/components/dashboard/lesson_type/lesson-type';
+import type { LessonType } from '@/components/dashboard/lesson_type/lesson-type';
 
 // import type { LessonType } from '@/components/dashboard/lesson_type/ILessonType';
 

002_source/cms/src/app/dashboard/lp/categories/list/page.tsx

@@ -88,8 +88,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   React.useEffect(() => {
     if (!isFirstRun.current) {
       isFirstRun.current = true;
-    } else {
-      if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
+    } else if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
         // reset page number as tab changes
         setLastListOption(listOption);
         setCurrentPage(0);
@@ -97,7 +96,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       } else {
         void reloadRows();
       }
-    }
   }, [currentPage, rowsPerPage, listOption]);
 
   React.useEffect(() => {

002_source/cms/src/app/dashboard/lp/categories/lp-categories-sample-data.tsx

@@ -1,5 +1,5 @@
 import { dayjs } from '@/lib/dayjs';
-import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/type';
 
 export const LpCategoriesSampleData = [
   {

002_source/cms/src/app/dashboard/lp/categories/view/[cat_id]/BasicDetailCard.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next';
 
 import { PropertyItem } from '@/components/core/property-item';
 import { PropertyList } from '@/components/core/property-list';
-import { LpCategory } from '@/components/dashboard/lp/categories/type';
+import type { LpCategory } from '@/components/dashboard/lp/categories/type';
 
 export default function BasicDetailCard({
   lpModel: model,

002_source/cms/src/app/dashboard/lp/questions/list/page.tsx

@@ -88,8 +88,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   React.useEffect(() => {
     if (!isFirstRun.current) {
       isFirstRun.current = true;
-    } else {
-      if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
+    } else if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
         // reset page number as tab changes
         setLastListOption(listOption);
         setCurrentPage(0);
@@ -97,7 +96,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       } else {
         void reloadRows();
       }
-    }
   }, [currentPage, rowsPerPage, listOption]);
 
   React.useEffect(() => {

002_source/cms/src/app/dashboard/lp/questions/lp-categories-sample-data.tsx

@@ -1,5 +1,5 @@
 import { dayjs } from '@/lib/dayjs';
-import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/type';
 
 export const LpCategoriesSampleData = [
   {

002_source/cms/src/app/dashboard/lp/questions/view/[cat_id]/BasicDetailCard.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next';
 
 import { PropertyItem } from '@/components/core/property-item';
 import { PropertyList } from '@/components/core/property-list';
-import { LpCategory } from '@/components/dashboard/lp/categories/type';
+import type { LpCategory } from '@/components/dashboard/lp/categories/type';
 
 export default function BasicDetailCard({
   lpModel: model,

002_source/cms/src/app/dashboard/lp/questions/view/[cat_id]/TitleCard.tsx

@@ -11,7 +11,7 @@ import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/C
 import { useTranslation } from 'react-i18next';
 
 import getImageUrlFromFile from '@/lib/get-image-url-from-file.ts';
-import { LpCategory } from '@/components/dashboard/lp/categories/type';
+import type { LpCategory } from '@/components/dashboard/lp/categories/type';
 
 export default function SampleTitleCard({ lpModel }: { lpModel: LpCategory }): React.JSX.Element {
   const { t } = useTranslation();

002_source/cms/src/app/dashboard/mf/categories/list/page.tsx

@@ -86,8 +86,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   React.useEffect(() => {
     if (!isFirstRun.current) {
       isFirstRun.current = true;
-    } else {
-      if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
+    } else if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
         // reset page number as tab changes
         setLastListOption(listOption);
         setCurrentPage(0);
@@ -95,7 +94,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       } else {
         void reloadRows();
       }
-    }
   }, [currentPage, rowsPerPage, listOption]);
 
   React.useEffect(() => {

002_source/cms/src/app/dashboard/mf/categories/lp-categories-sample-data.tsx

@@ -1,5 +1,5 @@
 import { dayjs } from '@/lib/dayjs';
-import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/type';
 
 export const LpCategoriesSampleData = [
   {

002_source/cms/src/app/dashboard/mf/questions/list/page.tsx

@@ -86,8 +86,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   React.useEffect(() => {
     if (!isFirstRun.current) {
       isFirstRun.current = true;
-    } else {
-      if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
+    } else if (JSON.stringify(listOption) !== JSON.stringify(lastListOption)) {
         // reset page number as tab changes
         setLastListOption(listOption);
         setCurrentPage(0);
@@ -95,7 +94,6 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       } else {
         void reloadRows();
       }
-    }
   }, [currentPage, rowsPerPage, listOption]);
 
   React.useEffect(() => {

002_source/cms/src/app/dashboard/mf/questions/lp-categories-sample-data.tsx

@@ -1,5 +1,5 @@
 import { dayjs } from '@/lib/dayjs';
-import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/type';
 
 export const LpCategoriesSampleData = [
   {

002_source/cms/src/app/dashboard/mf/questions/view/[cat_id]/BasicDetailCard.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next';
 
 import { PropertyItem } from '@/components/core/property-item';
 import { PropertyList } from '@/components/core/property-list';
-import { MfCategory } from '@/components/dashboard/mf/categories/type';
+import type { MfCategory } from '@/components/dashboard/mf/categories/type';
 
 export default function BasicDetailCard({
   lpModel: model,

002_source/cms/src/app/dashboard/user_metas/list/page.tsx

@@ -96,7 +96,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   }, [currentPage, rowsPerPage, listOption]);
 
   React.useEffect(() => {
-    let tempFilter = [];
+    const tempFilter = [];
     let tempSortDir = '';
 
     if (state) {

002_source/cms/src/app/dashboard/vocabularies/lesson-categories-sample-data.tsx

@@ -1,5 +1,5 @@
 import { dayjs } from '@/lib/dayjs';
-import { LessonCategory } from '@/components/dashboard/lesson_category/type';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/type';
 
 // import type { LessonCategory } from '@/components/dashboard/lp_categories/type';
 

002_source/cms/src/components/auth/custom/sign-in-form/index.tsx

@@ -31,7 +31,7 @@ import { useUser } from '@/hooks/use-user';
 import { DynamicLogo } from '@/components/core/logo';
 import { toast } from '@/components/core/toaster';
 
-import { OAuthProvider } from '../OAuthProvider';
+import type { OAuthProvider } from '../OAuthProvider';
 import { oAuthProviders } from '../oAuthProviders';
 
 // interface OAuthProvider {
@@ -146,7 +146,7 @@ export function SignInForm(): React.JSX.Element {
       <Stack spacing={3}>
         <Stack
           spacing={2}
-          direction={'row'}
+          direction="row"
         >
           {oAuthProviders.map(
             (provider): React.JSX.Element => (

002_source/cms/src/components/auth/custom/sign-up-form/index.tsx

@@ -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}
                   />

002_source/cms/src/components/dashboard/connective/_constants.ts

@@ -1,6 +1,6 @@
 import { dayjs } from '@/lib/dayjs';
 
-import { CreateForm, LessonCategory } from './type';
+import type { CreateForm, LessonCategory } from './type';
 
 // import type { CreateForm, LessonCategory } from '../lp_categories/type';
 

002_source/cms/src/components/dashboard/connective/lesson-categories-filters.tsx

@@ -26,7 +26,7 @@ import { Option } from '@/components/core/option';
 
 // import { LessonCategory } from '../lp_categories/type';
 import { useLessonCategoriesSelection } from './lesson-categories-selection-context';
-import { LessonCategory } from './type';
+import type { LessonCategory } from './type';
 
 export interface Filters {
   email?: string;

002_source/cms/src/components/dashboard/connective/lesson-categories-selection-context.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { useSelection } from '@/hooks/use-selection';
 import type { Selection } from '@/hooks/use-selection';
 
-import { LessonCategory } from './type';
+import type { LessonCategory } from './type';
 
 // import type { LessonCategory } from '../lp_categories/type';
 

002_source/cms/src/components/dashboard/connective/lesson-categories-table.tsx

@@ -99,7 +99,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LessonC
     },
     {
       formatter: (row): React.JSX.Element => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+         
 
         const mapping = {
           active: {

002_source/cms/src/components/dashboard/cr/categories/_constants.ts

@@ -1,6 +1,7 @@
 import { dayjs } from '@/lib/dayjs';
 
-import { CrCategory, CreateFormProps } from './type';
+import type { CrCategory} from './type';
+import { CreateFormProps } from './type';
 
 export const defaultCrCategory: CrCategory = {
   isEmpty: false,

002_source/cms/src/components/dashboard/cr/categories/cr-categories-selection-context.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { useSelection } from '@/hooks/use-selection';
 import type { Selection } from '@/hooks/use-selection';
 
-import { CrCategory } from './type';
+import type { CrCategory } from './type';
 
 function noop(): void {
   return undefined;

002_source/cms/src/components/dashboard/cr/categories/cr-categories-table.tsx

@@ -97,7 +97,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<CrCateg
     },
     {
       formatter: (row): React.JSX.Element => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+         
 
         const mapping = {
           active: {

002_source/cms/src/components/dashboard/cr/questions/_constants.ts

@@ -1,6 +1,7 @@
 import { dayjs } from '@/lib/dayjs';
 
-import { CreateFormProps, CrQuestion } from './type';
+import type { CrQuestion } from './type';
+import { CreateFormProps } from './type';
 
 export const defaultCrQuestion: CrQuestion = {
   isEmpty: false,

002_source/cms/src/components/dashboard/cr/questions/cr-questions-filters.tsx

@@ -24,7 +24,7 @@ import { FilterButton, FilterPopover, useFilterContext } from '@/components/core
 import { Option } from '@/components/core/option';
 
 import { useCrQuestionsSelection } from './cr-questions-selection-context';
-import { CrQuestion } from './type';
+import type { CrQuestion } from './type';
 
 export interface Filters {
   email?: string;

002_source/cms/src/components/dashboard/cr/questions/cr-questions-table.tsx

@@ -97,7 +97,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<CrQuest
     },
     {
       formatter: (row): React.JSX.Element => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+         
 
         const mapping = {
           active: {

002_source/cms/src/components/dashboard/customer/customers-table.tsx

@@ -89,7 +89,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<Custome
 
     {
       formatter: (row): React.JSX.Element => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+         
 
         const mapping = {
           active: {

002_source/cms/src/components/dashboard/error/index.tsx

@@ -81,7 +81,7 @@ function ErrorDisplay({ message, code, details, severity = 'error' }: PropsError
           {formattedMessage}
         </Typography>
 
-        {details && <ErrorDetails details={details} />}
+        {details ? <ErrorDetails details={details} /> : null}
       </Alert>
     </Box>
   );

002_source/cms/src/components/dashboard/layout/notifications-popover/index.tsx

@@ -133,7 +133,7 @@ export function NotificationsPopover({
 
           <Typography
             color="lightgray"
-            variant={'subtitle2'}
+            variant="subtitle2"
           >
             {t('list-is-empty')}
           </Typography>

002_source/cms/src/components/dashboard/layout/notifications-popover/sample-notifications.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { Notification } from '@/db/Notifications/type';
+import type { Notification } from '@/db/Notifications/type';
 import { dayjs } from '@/lib/dayjs';
 // import type { Notification } from './type.d.tsx';
 

002_source/cms/src/components/dashboard/layout/vertical/main-nav/notifications-button.tsx

@@ -14,7 +14,7 @@ import { logger } from '@/lib/default-logger';
 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 type { Notification } from '@/db/Notifications/type';
 import { useUser } from '@/hooks/use-user';
 
 export function NotificationsButton(): React.JSX.Element {

002_source/cms/src/components/dashboard/lesson_category/_constants.ts

@@ -1,6 +1,6 @@
 import { dayjs } from '@/lib/dayjs';
 
-import { CreateForm, LessonCategory } from './type';
+import type { CreateForm, LessonCategory } from './type';
 
 // import type { CreateForm, LessonCategory } from '../lp_categories/type';
 

002_source/cms/src/components/dashboard/lesson_category/lesson-categories-filters.tsx

@@ -26,7 +26,7 @@ import { Option } from '@/components/core/option';
 
 // import { LessonCategory } from '../lp_categories/type';
 import { useLessonCategoriesSelection } from './lesson-categories-selection-context';
-import { LessonCategory } from './type';
+import type { LessonCategory } from './type';
 
 export interface Filters {
   email?: string;

002_source/cms/src/components/dashboard/lesson_category/lesson-categories-selection-context.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { useSelection } from '@/hooks/use-selection';
 import type { Selection } from '@/hooks/use-selection';
 
-import { LessonCategory } from './type';
+import type { LessonCategory } from './type';
 
 // import type { LessonCategory } from '../lp_categories/type';
 

002_source/cms/src/components/dashboard/lesson_category/lesson-categories-table.tsx

@@ -99,7 +99,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LessonC
     },
     {
       formatter: (row): React.JSX.Element => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+         
 
         const mapping = {
           active: {

002_source/cms/src/components/dashboard/lesson_type/lesson-type-create-form.tsx

@@ -37,7 +37,7 @@ import { pb } from '@/lib/pb';
 import { toast } from '@/components/core/toaster';
 
 import { LessonTypeCreateFormDefault } from './_constants';
-import { CreateForm } from './lesson-type';
+import type { CreateForm } from './lesson-type';
 
 const schema = zod.object({
   name: zod.string().min(1, 'Name is required').max(255),

002_source/cms/src/components/dashboard/lesson_type/lesson-types-selection-context.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { useSelection } from '@/hooks/use-selection';
 import type { Selection } from '@/hooks/use-selection';
 
-import { LessonType } from './lesson-type';
+import type { LessonType } from './lesson-type';
 
 // import { LessonType } from './ILessonType';
 

002_source/cms/src/components/dashboard/lp/categories/_constants.ts

@@ -1,6 +1,7 @@
 import { dayjs } from '@/lib/dayjs';
 
-import { CreateFormProps, LpCategory } from './type';
+import type { LpCategory } from './type';
+import { CreateFormProps } from './type';
 
 export const defaultLpCategory: LpCategory = {
   isEmpty: false,

002_source/cms/src/components/dashboard/lp/categories/lp-categories-filters.tsx

@@ -24,7 +24,7 @@ import { FilterButton, FilterPopover, useFilterContext } from '@/components/core
 import { Option } from '@/components/core/option';
 
 import { useLpCategoriesSelection } from './lp-categories-selection-context';
-import { LpCategory } from './type';
+import type { LpCategory } from './type';
 
 export interface Filters {
   email?: string;

002_source/cms/src/components/dashboard/lp/categories/lp-categories-selection-context.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { useSelection } from '@/hooks/use-selection';
 import type { Selection } from '@/hooks/use-selection';
 
-import { LpCategory } from './type';
+import type { LpCategory } from './type';
 
 function noop(): void {
   return undefined;

002_source/cms/src/components/dashboard/lp/categories/lp-categories-table.tsx

@@ -97,7 +97,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LpCateg
     },
     {
       formatter: (row): React.JSX.Element => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+         
 
         const mapping = {
           active: {

002_source/cms/src/components/dashboard/lp/categories/mf-categories-filters.tsx

@@ -24,7 +24,7 @@ import { FilterButton, FilterPopover, useFilterContext } from '@/components/core
 import { Option } from '@/components/core/option';
 
 import { useLpCategoriesSelection } from './lp-categories-selection-context';
-import { LpCategory } from './type';
+import type { LpCategory } from './type';
 
 export interface Filters {
   email?: string;

002_source/cms/src/components/dashboard/lp/categories/mf-categories-selection-context.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { useSelection } from '@/hooks/use-selection';
 import type { Selection } from '@/hooks/use-selection';
 
-import { LpCategory } from './type';
+import type { LpCategory } from './type';
 
 function noop(): void {
   return undefined;

002_source/cms/src/components/dashboard/lp/categories/mf-categories-table.tsx

@@ -97,7 +97,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LpCateg
     },
     {
       formatter: (row): React.JSX.Element => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+         
 
         const mapping = {
           active: {

002_source/cms/src/components/dashboard/lp/questions/_constants.ts

@@ -1,6 +1,7 @@
 import { dayjs } from '@/lib/dayjs';
 
-import { CreateFormProps, LpQuestion } from './type';
+import type { LpQuestion } from './type';
+import { CreateFormProps } from './type';
 
 export const defaultLpQuestion: LpQuestion = {
   isEmpty: false,

002_source/cms/src/components/dashboard/lp/questions/lp-questions-filters.tsx

@@ -24,7 +24,7 @@ import { FilterButton, FilterPopover, useFilterContext } from '@/components/core
 import { Option } from '@/components/core/option';
 
 import { useLpQuestionsSelection } from './lp-questions-selection-context';
-import { LpQuestion } from './type';
+import type { LpQuestion } from './type';
 
 export interface Filters {
   email?: string;

002_source/cms/src/components/dashboard/lp/questions/lp-questions-table.tsx

@@ -97,7 +97,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LpQuest
     },
     {
       formatter: (row): React.JSX.Element => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+         
 
         const mapping = {
           active: {

002_source/cms/src/components/dashboard/mf/categories/_constants.ts

@@ -1,6 +1,7 @@
 import { dayjs } from '@/lib/dayjs';
 
-import { CreateFormProps, MfCategory } from './type';
+import type { MfCategory } from './type';
+import { CreateFormProps } from './type';
 
 export const defaultMfCategory: MfCategory = {
   isEmpty: false,

002_source/cms/src/components/dashboard/mf/categories/mf-categories-filters.tsx

@@ -24,7 +24,7 @@ import { FilterButton, FilterPopover, useFilterContext } from '@/components/core
 import { Option } from '@/components/core/option';
 
 import { useMfCategoriesSelection } from './mf-categories-selection-context';
-import { MfCategory } from './type';
+import type { MfCategory } from './type';
 
 export interface Filters {
   email?: string;

002_source/cms/src/components/dashboard/mf/categories/mf-categories-selection-context.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { useSelection } from '@/hooks/use-selection';
 import type { Selection } from '@/hooks/use-selection';
 
-import { MfCategory } from './type';
+import type { MfCategory } from './type';
 
 function noop(): void {
   return undefined;

002_source/cms/src/components/dashboard/mf/categories/mf-categories-table.tsx

@@ -97,7 +97,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<MfCateg
     },
     {
       formatter: (row): React.JSX.Element => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+         
 
         const mapping = {
           active: {

002_source/cms/src/components/dashboard/mf/questions/_constants.ts

@@ -1,6 +1,7 @@
 import { dayjs } from '@/lib/dayjs';
 
-import { CreateFormProps, MfQuestion } from './type';
+import type { MfQuestion } from './type';
+import { CreateFormProps } from './type';
 
 export const defaultMfQuestion: MfQuestion = {
   isEmpty: false,

002_source/cms/src/components/dashboard/mf/questions/mf-questions-filters.tsx

@@ -24,7 +24,7 @@ import { FilterButton, FilterPopover, useFilterContext } from '@/components/core
 import { Option } from '@/components/core/option';
 
 import { useMfQuestionsSelection } from './mf-questions-selection-context';
-import { MfQuestion } from './type';
+import type { MfQuestion } from './type';
 
 export interface Filters {
   email?: string;

002_source/cms/src/components/dashboard/mf/questions/mf-questions-table.tsx

@@ -97,7 +97,7 @@ function columns(handleDeleteClick: (testId: string) => void): ColumnDef<MfQuest
     },
     {
       formatter: (row): React.JSX.Element => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+         
 
         const mapping = {
           active: {

002_source/cms/src/components/dashboard/student/student-create-form.tsx

@@ -43,7 +43,7 @@ import { base64ToFile, fileToBase64 } from '@/lib/file-to-base64';
 import { toast } from '@/components/core/toaster';
 
 // import ErrorDisplay from '../../error';
-import { CreateFormProps } from './type.d';
+import type { CreateFormProps } from './type.d';
 
 // TODO: review schema
 const schema = zod.object({

002_source/cms/src/components/dashboard/student/students-pagination.tsx

@@ -3,9 +3,10 @@
 import * as React from 'react';
 import TablePagination from '@mui/material/TablePagination';
 
-function noop(): void {
-  return undefined;
-}
+// TODO: remove noop
+// function noop(): void {
+//   return undefined;
+// }
 
 interface StudentsPaginationProps {
   count: number;
@@ -30,7 +31,7 @@ export function StudentsPagination({
     setPage(newPage);
   };
 
-  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>): void => {
     setRowsPerPage(parseInt(event.target.value));
     // console.log(parseInt(event.target.value));
   };

002_source/cms/src/components/dashboard/student/students-table.tsx

@@ -5,21 +5,17 @@ import RouterLink from 'next/link';
 import { LoadingButton } from '@mui/lab';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
-import IconButton from '@mui/material/IconButton';
 import LinearProgress from '@mui/material/LinearProgress';
 import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
 import { Clock as ClockIcon } from '@phosphor-icons/react/dist/ssr/Clock';
-import { Images as ImagesIcon } from '@phosphor-icons/react/dist/ssr/Images';
 import { Minus as MinusIcon } from '@phosphor-icons/react/dist/ssr/Minus';
 import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
 import { TrashSimple as TrashSimpleIcon } from '@phosphor-icons/react/dist/ssr/TrashSimple';
 import { useTranslation } from 'react-i18next';
-import { toast } from 'sonner';
 
 import { paths } from '@/paths';
 import { dayjs } from '@/lib/dayjs';

002_source/cms/src/components/dashboard/teacher/confirm-delete-modal.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import { deleteTeacher } from '@/db/Teachers/Delete';
 import { LoadingButton } from '@mui/lab';
 import { Button, Container, Modal, Paper } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
@@ -12,7 +13,6 @@ import { useTranslation } from 'react-i18next';
 
 import { logger } from '@/lib/default-logger';
 import { toast } from '@/components/core/toaster';
-import { deleteTeacher } from '@/db/Teachers/Delete';
 
 export default function ConfirmDeleteModal({
   open,
@@ -105,7 +105,7 @@ export default function ConfirmDeleteModal({
                     <LoadingButton
                       color="error"
                       variant="contained"
-                      onClick={(e) => {
+                      onClick={() => {
                         handleUserConfirmDelete();
                       }}
                       loading={isDeleteing}

002_source/cms/src/components/dashboard/teacher/teacher-create-form.tsx

@@ -50,7 +50,7 @@ import FormLoading from '@/components/loading';
 
 // import ErrorDisplay from '../../error';
 import ErrorDisplay from '../error';
-import { CreateFormProps } from './type.d';
+import type { CreateFormProps } from './type.d';
 
 // TODO: review schema
 const schema = zod.object({

002_source/cms/src/components/dashboard/teacher/teacher-edit-form.tsx

@@ -148,7 +148,7 @@ export function TeacherEditForm(): React.JSX.Element {
         setIsUpdating(false);
       }
     },
-    [teacherId, router]
+    [teacherId, router, t]
   );
 
   const avatarInputRef = React.useRef<HTMLInputElement>(null);
@@ -197,7 +197,8 @@ export function TeacherEditForm(): React.JSX.Element {
         setShowLoading(false);
       }
     },
-    [reset, setValue]
+
+    [reset, setValue, t]
   );
 
   React.useEffect(() => {

002_source/cms/src/components/dashboard/teacher/teachers-filters.tsx

@@ -33,6 +33,8 @@ import type { Filters, SortDir, TeachersFiltersProps } from './type.d';
 export function TeachersFilters({
   filters = {},
   sortDir = 'desc',
+  // TODO: remove fullData
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
   fullData,
   //
 }: TeachersFiltersProps): React.JSX.Element {

002_source/cms/src/components/dashboard/teacher/teachers-pagination.tsx

@@ -3,9 +3,10 @@
 import * as React from 'react';
 import TablePagination from '@mui/material/TablePagination';
 
-function noop(): void {
-  return undefined;
-}
+// TODO: remove noop
+// function noop(): void {
+//   return undefined;
+// }
 
 interface CustomersPaginationProps {
   count: number;
@@ -30,7 +31,7 @@ export function TeachersPagination({
     setPage(newPage);
   };
 
-  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>): void => {
     setRowsPerPage(parseInt(event.target.value));
     // console.log(parseInt(event.target.value));
   };

002_source/cms/src/components/dashboard/user.de/_GUIDELINES.md

@@ -1,25 +0,0 @@
-# GUIDELINES & KEY COMPONENTS
-
-- `_constants.ts` contains the constant for
-
-  - default value (defaultValue)
-  - empty value (emptyValue)
-
-- `users-table.tsx`
-
-- `confirm-delete-modal.tsx` - delete modal component when click delete button on list
-
-  - `users-filters.tsx`
-  - `users-pagination.tsx`
-  - `email-filter-popover.tsx`
-  - `phone-filter-popover.tsx`
-  - `users-selection-context.tsx`
-
-- `user-create-form.tsx` - form to create a new user
-- `user-edit-form.tsx` - form to edit a existing user
-
-- `type.d.tsx` - contains type definition
-
-- `notifications.tsx` - constants used for demonstration
-- `payments.tsx` - constants used for demonstration
-- `shipping-address.tsx` - constants used for demonstration

002_source/cms/src/components/dashboard/user.de/_constants.ts

@@ -1,21 +0,0 @@
-// RULES:
-// default variable value for customer
-// empty valur for customer
-
-import { dayjs } from '@/lib/dayjs';
-import type { User } from './type.d';
-
-export const defaultUser: User = {
-  id: '',
-  name: '',
-  avatar: undefined,
-  email: '',
-  phone: undefined,
-  quota: 0,
-  status: 'pending',
-  createdAt: dayjs().toDate(),
-};
-
-export const emptyLpCategory: User = {
-  ...defaultUser,
-};

002_source/cms/src/components/dashboard/user.de/confirm-delete-modal.tsx

@@ -1,124 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { LoadingButton } from '@mui/lab';
-import { Button, Container, Modal, Paper } from '@mui/material';
-import Avatar from '@mui/material/Avatar';
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import { Note as NoteIcon } from '@phosphor-icons/react/dist/ssr/Note';
-import { useTranslation } from 'react-i18next';
-
-import { logger } from '@/lib/default-logger';
-import { toast } from '@/components/core/toaster';
-import { deleteUser } from '@/db/Users/Delete';
-
-export default function ConfirmDeleteModal({
-  open,
-  setOpen,
-  idToDelete,
-  reloadRows,
-}: {
-  open: boolean;
-  setOpen: (b: boolean) => void;
-  idToDelete: string;
-  reloadRows: () => void;
-}): React.JSX.Element {
-  const { t } = useTranslation();
-
-  // const handleClose = () => setOpen(false);
-  function handleClose(): void {
-    setOpen(false);
-  }
-
-  const [isDeleteing, setIsDeleteing] = React.useState(false);
-  const style = {
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
-  };
-
-  function handleUserConfirmDelete(): void {
-    if (idToDelete) {
-      setIsDeleteing(true);
-
-      // RULES: delete<CollectionName>
-      deleteUser(idToDelete)
-        .then(() => {
-          reloadRows();
-          handleClose();
-          toast(t('delete.success'));
-        })
-        .catch((err) => {
-          // console.error(err)
-          logger.error(err);
-          toast(t('delete.error'));
-        })
-        .finally(() => {
-          setIsDeleteing(false);
-        });
-    }
-  }
-
-  return (
-    <div>
-      <Modal
-        open={open}
-        onClose={handleClose}
-        aria-labelledby="modal-modal-title"
-        aria-describedby="modal-modal-description"
-      >
-        <Box sx={style}>
-          <Container maxWidth="sm">
-            <Paper sx={{ border: '1px solid var(--mui-palette-divider)', boxShadow: 'var(--mui-shadows-16)' }}>
-              <Stack
-                direction="row"
-                spacing={2}
-                sx={{ display: 'flex', p: 3 }}
-              >
-                <Avatar sx={{ bgcolor: 'var(--mui-palette-error-50)', color: 'var(--mui-palette-error-main)' }}>
-                  <NoteIcon fontSize="var(--Icon-fontSize)" />
-                </Avatar>
-                <Stack spacing={3}>
-                  <Stack spacing={1}>
-                    <Typography variant="h5">{t('Delete User ?')}</Typography>
-                    <Typography
-                      color="text.secondary"
-                      variant="body2"
-                    >
-                      {t('Are you sure you want to delete this user ?')}
-                    </Typography>
-                  </Stack>
-                  <Stack
-                    direction="row"
-                    spacing={2}
-                    sx={{ justifyContent: 'flex-end' }}
-                  >
-                    <Button
-                      color="secondary"
-                      onClick={handleClose}
-                    >
-                      {t('Cancel')}
-                    </Button>
-                    <LoadingButton
-                      color="error"
-                      variant="contained"
-                      onClick={(e) => {
-                        handleUserConfirmDelete();
-                      }}
-                      loading={isDeleteing}
-                    >
-                      {t('Delete')}
-                    </LoadingButton>
-                  </Stack>
-                </Stack>
-              </Stack>
-            </Paper>
-          </Container>
-        </Box>
-      </Modal>
-    </div>
-  );
-}

002_source/cms/src/components/dashboard/user.de/email-filter-popover.tsx

@@ -1,50 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-import Button from '@mui/material/Button';
-import FormControl from '@mui/material/FormControl';
-import OutlinedInput from '@mui/material/OutlinedInput';
-
-import { FilterPopover, useFilterContext } from '@/components/core/filter-button';
-
-// EmailFilterPopover -> email-filter-popover.tsx
-export default function EmailFilterPopover(): React.JSX.Element {
-  const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
-  const [value, setValue] = React.useState<string>('');
-
-  React.useEffect(() => {
-    setValue((initialValue as string | undefined) ?? '');
-  }, [initialValue]);
-
-  return (
-    <FilterPopover
-      anchorEl={anchorEl}
-      onClose={onClose}
-      open={open}
-      title="Filter by email"
-    >
-      <FormControl>
-        <OutlinedInput
-          onChange={(event) => {
-            setValue(event.target.value);
-          }}
-          onKeyUp={(event) => {
-            if (event.key === 'Enter') {
-              onApply(value);
-            }
-          }}
-          value={value}
-        />
-      </FormControl>
-      <Button
-        onClick={() => {
-          onApply(value);
-        }}
-        variant="contained"
-      >
-        Apply
-      </Button>
-    </FilterPopover>
-  );
-}

002_source/cms/src/components/dashboard/user.de/helloworld.tsx

@@ -1,3 +0,0 @@
-const helloworld = 'helloworld';
-
-export { helloworld };

002_source/cms/src/components/dashboard/user.de/notifications.tsx

@@ -1,101 +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 CardContent from '@mui/material/CardContent';
-import CardHeader from '@mui/material/CardHeader';
-import Chip from '@mui/material/Chip';
-import Select from '@mui/material/Select';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import { EnvelopeSimple as EnvelopeSimpleIcon } from '@phosphor-icons/react/dist/ssr/EnvelopeSimple';
-
-import { dayjs } from '@/lib/dayjs';
-import { DataTable } from '@/components/core/data-table';
-import type { ColumnDef } from '@/components/core/data-table';
-import { Option } from '@/components/core/option';
-
-export interface Notification {
-  id: string;
-  type: string;
-  status: 'delivered' | 'pending' | 'failed';
-  createdAt: Date;
-}
-
-const columns = [
-  {
-    formatter: (row): React.JSX.Element => (
-      <Typography sx={{ whiteSpace: 'nowrap' }} variant="inherit">
-        {row.type}
-      </Typography>
-    ),
-    name: 'Type',
-    width: '300px',
-  },
-  {
-    formatter: (row): React.JSX.Element => {
-      const mapping = {
-        delivered: { label: 'Delivered', color: 'success' },
-        pending: { label: 'Pending', color: 'warning' },
-        failed: { label: 'Failed', color: 'error' },
-      } as const;
-      const { label, color } = mapping[row.status] ?? { label: 'Unknown', color: 'secondary' };
-
-      return <Chip color={color} label={label} size="small" variant="soft" />;
-    },
-    name: 'Status',
-    width: '200px',
-  },
-  {
-    formatter: (row): React.JSX.Element => (
-      <Typography sx={{ whiteSpace: 'nowrap' }} variant="inherit">
-        {dayjs(row.createdAt).format('MMM D, YYYY hh:mm A')}
-      </Typography>
-    ),
-    name: 'Date',
-    align: 'right',
-  },
-] satisfies ColumnDef<Notification>[];
-
-export interface NotificationsProps {
-  notifications: Notification[];
-}
-
-export function Notifications({ notifications }: NotificationsProps): React.JSX.Element {
-  return (
-    <Card>
-      <CardHeader
-        avatar={
-          <Avatar>
-            <EnvelopeSimpleIcon fontSize="var(--Icon-fontSize)" />
-          </Avatar>
-        }
-        title="Notifications"
-      />
-      <CardContent>
-        <Stack spacing={3}>
-          <Stack spacing={2}>
-            <Select defaultValue="last_invoice" name="type" sx={{ maxWidth: '100%', width: '320px' }}>
-              <Option value="last_invoice">Resend last invoice</Option>
-              <Option value="password_reset">Send password reset</Option>
-              <Option value="verification">Send verification</Option>
-            </Select>
-            <div>
-              <Button startIcon={<EnvelopeSimpleIcon />} variant="contained">
-                Send email
-              </Button>
-            </div>
-          </Stack>
-          <Card sx={{ borderRadius: 1 }} variant="outlined">
-            <Box sx={{ overflowX: 'auto' }}>
-              <DataTable<Notification> columns={columns} rows={notifications} />
-            </Box>
-          </Card>
-        </Stack>
-      </CardContent>
-    </Card>
-  );
-}

002_source/cms/src/components/dashboard/user.de/payments.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 CardContent from '@mui/material/CardContent';
-import CardHeader from '@mui/material/CardHeader';
-import Chip from '@mui/material/Chip';
-import Divider from '@mui/material/Divider';
-import Link from '@mui/material/Link';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
-import { ShoppingCartSimple as ShoppingCartSimpleIcon } from '@phosphor-icons/react/dist/ssr/ShoppingCartSimple';
-
-import { dayjs } from '@/lib/dayjs';
-import type { ColumnDef } from '@/components/core/data-table';
-import { DataTable } from '@/components/core/data-table';
-
-export interface Payment {
-  currency: string;
-  amount: number;
-  invoiceId: string;
-  status: 'pending' | 'completed' | 'canceled' | 'refunded';
-  createdAt: Date;
-}
-
-const columns = [
-  {
-    formatter: (row): React.JSX.Element => (
-      <Typography sx={{ whiteSpace: 'nowrap' }} variant="subtitle2">
-        {new Intl.NumberFormat('en-US', { style: 'currency', currency: row.currency }).format(row.amount)}
-      </Typography>
-    ),
-    name: 'Amount',
-    width: '200px',
-  },
-  {
-    formatter: (row): React.JSX.Element => {
-      const mapping = {
-        pending: { label: 'Pending', color: 'warning' },
-        completed: { label: 'Completed', color: 'success' },
-        canceled: { label: 'Canceled', color: 'error' },
-        refunded: { label: 'Refunded', color: 'error' },
-      } as const;
-      const { label, color } = mapping[row.status] ?? { label: 'Unknown', color: 'secondary' };
-
-      return <Chip color={color} label={label} size="small" variant="soft" />;
-    },
-    name: 'Status',
-    width: '200px',
-  },
-  {
-    formatter: (row): React.JSX.Element => {
-      return <Link variant="inherit">{row.invoiceId}</Link>;
-    },
-    name: 'Invoice ID',
-    width: '150px',
-  },
-  {
-    formatter: (row): React.JSX.Element => (
-      <Typography sx={{ whiteSpace: 'nowrap' }} variant="inherit">
-        {dayjs(row.createdAt).format('MMM D, YYYY hh:mm A')}
-      </Typography>
-    ),
-    name: 'Date',
-    align: 'right',
-  },
-] satisfies ColumnDef<Payment>[];
-
-export interface PaymentsProps {
-  ordersValue: number;
-  payments: Payment[];
-  refundsValue: number;
-  totalOrders: number;
-}
-
-export function Payments({ ordersValue, payments = [], refundsValue, totalOrders }: PaymentsProps): React.JSX.Element {
-  return (
-    <Card>
-      <CardHeader
-        action={
-          <Button color="secondary" startIcon={<PlusIcon />}>
-            Create Payment
-          </Button>
-        }
-        avatar={
-          <Avatar>
-            <ShoppingCartSimpleIcon fontSize="var(--Icon-fontSize)" />
-          </Avatar>
-        }
-        title="Payments"
-      />
-      <CardContent>
-        <Stack spacing={3}>
-          <Card sx={{ borderRadius: 1 }} variant="outlined">
-            <Stack
-              direction="row"
-              divider={<Divider flexItem orientation="vertical" />}
-              spacing={3}
-              sx={{ justifyContent: 'space-between', p: 2 }}
-            >
-              <div>
-                <Typography color="text.secondary" variant="overline">
-                  Total orders
-                </Typography>
-                <Typography variant="h6">{new Intl.NumberFormat('en-US').format(totalOrders)}</Typography>
-              </div>
-              <div>
-                <Typography color="text.secondary" variant="overline">
-                  Orders value
-                </Typography>
-                <Typography variant="h6">
-                  {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(ordersValue)}
-                </Typography>
-              </div>
-              <div>
-                <Typography color="text.secondary" variant="overline">
-                  Refunds
-                </Typography>
-                <Typography variant="h6">
-                  {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(refundsValue)}
-                </Typography>
-              </div>
-            </Stack>
-          </Card>
-          <Card sx={{ borderRadius: 1 }} variant="outlined">
-            <Box sx={{ overflowX: 'auto' }}>
-              <DataTable<Payment> columns={columns} rows={payments} />
-            </Box>
-          </Card>
-        </Stack>
-      </CardContent>
-    </Card>
-  );
-}

002_source/cms/src/components/dashboard/user.de/phone-filter-popover.tsx

@@ -1,50 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-import Button from '@mui/material/Button';
-import FormControl from '@mui/material/FormControl';
-import OutlinedInput from '@mui/material/OutlinedInput';
-
-import { FilterPopover, useFilterContext } from '@/components/core/filter-button';
-
-// phone-filter-popover.tsx
-export default function PhoneFilterPopover(): React.JSX.Element {
-  const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
-  const [value, setValue] = React.useState<string>('');
-
-  React.useEffect(() => {
-    setValue((initialValue as string | undefined) ?? '');
-  }, [initialValue]);
-
-  return (
-    <FilterPopover
-      anchorEl={anchorEl}
-      onClose={onClose}
-      open={open}
-      title="Filter by phone number"
-    >
-      <FormControl>
-        <OutlinedInput
-          onChange={(event) => {
-            setValue(event.target.value);
-          }}
-          onKeyUp={(event) => {
-            if (event.key === 'Enter') {
-              onApply(value);
-            }
-          }}
-          value={value}
-        />
-      </FormControl>
-      <Button
-        onClick={() => {
-          onApply(value);
-        }}
-        variant="contained"
-      >
-        Apply
-      </Button>
-    </FilterPopover>
-  );
-}

002_source/cms/src/components/dashboard/user.de/shipping-address.tsx

@@ -1,46 +0,0 @@
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
-
-export interface Address {
-  id: string;
-  country: string;
-  state: string;
-  city: string;
-  zipCode: string;
-  street: string;
-  primary?: boolean;
-}
-
-export interface ShippingAddressProps {
-  address: Address;
-}
-
-export function ShippingAddress({ address }: ShippingAddressProps): React.ReactElement {
-  return (
-    <Card sx={{ borderRadius: 1, height: '100%' }} variant="outlined">
-      <CardContent>
-        <Stack spacing={2}>
-          <Typography>
-            {address.street},
-            <br />
-            {address.city}, {address.state}, {address.country},
-            <br />
-            {address.zipCode}
-          </Typography>
-          <Stack direction="row" spacing={2} sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
-            {address.primary ? <Chip color="warning" label="Primary" variant="soft" /> : <span />}
-            <Button color="secondary" size="small" startIcon={<PencilSimpleIcon />}>
-              Edit
-            </Button>
-          </Stack>
-        </Stack>
-      </CardContent>
-    </Card>
-  );
-}

002_source/cms/src/components/dashboard/user.de/type.d.tsx

@@ -1,69 +0,0 @@
-'use client';
-
-export type SortDir = 'asc' | 'desc';
-
-export interface User {
-  id: string;
-  name: string;
-  avatar?: string;
-  email: string;
-  phone?: string;
-  quota: number;
-  status: 'pending' | 'active' | 'blocked';
-  createdAt: Date;
-  updatedAt?: Date;
-}
-
-export interface CreateFormProps {
-  name: string;
-  email: string;
-  phone?: string;
-  company?: string;
-  billingAddress?: {
-    country: string;
-    state: string;
-    city: string;
-    zipCode: string;
-    line1: string;
-    line2?: string;
-  };
-  taxId?: string;
-  timezone: string;
-  language: string;
-  currency: string;
-  avatar?: string;
-  // quota?: number;
-  // status?: 'pending' | 'active' | 'blocked';
-}
-
-export interface EditFormProps {
-  name: string;
-  email: string;
-  phone?: string;
-  company?: string;
-  billingAddress?: {
-    country: string;
-    state: string;
-    city: string;
-    zipCode: string;
-    line1: string;
-    line2?: string;
-  };
-  taxId?: string;
-  timezone: string;
-  language: string;
-  currency: string;
-  avatar?: string;
-  // quota?: number;
-  // status?: 'pending' | 'active' | 'blocked';
-}
-export interface CustomersFiltersProps {
-  filters?: Filters;
-  sortDir?: SortDir;
-  fullData: User[];
-}
-export interface Filters {
-  email?: string;
-  phone?: string;
-  status?: string;
-}

002_source/cms/src/components/dashboard/user.de/user-create-form.tsx

@@ -1,529 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import RouterLink from 'next/link';
-import { useRouter } from 'next/navigation';
-import { zodResolver } from '@hookform/resolvers/zod';
-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 Checkbox from '@mui/material/Checkbox';
-import Divider from '@mui/material/Divider';
-import FormControl from '@mui/material/FormControl';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormHelperText from '@mui/material/FormHelperText';
-import InputLabel from '@mui/material/InputLabel';
-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 Grid from '@mui/material/Unstable_Grid2';
-import { Camera as CameraIcon } from '@phosphor-icons/react/dist/ssr/Camera';
-import { Controller, useForm } from 'react-hook-form';
-import { z as zod } from 'zod';
-
-import { paths } from '@/paths';
-import { logger } from '@/lib/default-logger';
-import { Option } from '@/components/core/option';
-import { toast } from '@/components/core/toaster';
-import { createCustomer as createUser } from '@/db/Customers/Create';
-import isDevelopment from '@/lib/check-is-development';
-
-function fileToBase64(file: Blob): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onload = () => {
-      resolve(reader.result as string);
-    };
-    reader.onerror = () => {
-      reject(new Error('Error converting file to base64'));
-    };
-  });
-}
-
-const schema = zod.object({
-  avatar: zod.string().optional(),
-  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(15),
-  company: zod.string().max(255),
-  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),
-});
-
-type Values = zod.infer<typeof schema>;
-
-const defaultValues = {
-  avatar: '',
-  name: 'new name',
-  email: '123@123.com',
-  phone: '91234567',
-  company: '',
-  billingAddress: {
-    country: 'US',
-    state: '00000',
-    city: 'NY',
-    zipCode: '00000',
-    line1: 'test line 1',
-    line2: 'test line 2',
-  },
-  taxId: '12345',
-  timezone: 'new_york',
-  language: 'en',
-  currency: 'USD',
-} satisfies Values;
-
-export function UserCreateForm(): React.JSX.Element {
-  const router = useRouter();
-
-  const {
-    control,
-    handleSubmit,
-    formState: { errors },
-    setValue,
-    watch,
-  } = useForm<Values>({ defaultValues, resolver: zodResolver(schema) });
-
-  const onSubmit = React.useCallback(
-    async (values: Values): Promise<void> => {
-      try {
-        // Use standard create method from db/Customers/Create
-        const record = await createUser(values);
-        toast.success('User created successfully');
-        router.push(paths.dashboard.user_metas.details(record.id));
-      } catch (err) {
-        logger.error(err);
-        toast.error('Failed to create user. Please try again.');
-      }
-    },
-    [router]
-  );
-
-  const avatarInputRef = React.useRef<HTMLInputElement>(null);
-  const avatar = watch('avatar');
-
-  const handleAvatarChange = React.useCallback(
-    async (event: React.ChangeEvent<HTMLInputElement>) => {
-      const file = event.target.files?.[0];
-
-      if (file) {
-        const url = await fileToBase64(file);
-        setValue('avatar', url);
-      }
-    },
-    [setValue]
-  );
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Card>
-        <CardContent>
-          <Stack
-            divider={<Divider />}
-            spacing={4}
-          >
-            <Stack spacing={3}>
-              <Typography variant="h6">Account information</Typography>
-              <Grid
-                container
-                spacing={3}
-              >
-                <Grid xs={12}>
-                  <Stack
-                    direction="row"
-                    spacing={3}
-                    sx={{ alignItems: 'center' }}
-                  >
-                    <Box
-                      sx={{
-                        border: '1px dashed var(--mui-palette-divider)',
-                        borderRadius: '50%',
-                        display: 'inline-flex',
-                        p: '4px',
-                      }}
-                    >
-                      <Avatar
-                        src={avatar}
-                        sx={{
-                          '--Avatar-size': '100px',
-                          '--Icon-fontSize': 'var(--icon-fontSize-lg)',
-                          alignItems: 'center',
-                          bgcolor: 'var(--mui-palette-background-level1)',
-                          color: 'var(--mui-palette-text-primary)',
-                          display: 'flex',
-                          justifyContent: 'center',
-                        }}
-                      >
-                        <CameraIcon fontSize="var(--Icon-fontSize)" />
-                      </Avatar>
-                    </Box>
-                    <Stack
-                      spacing={1}
-                      sx={{ alignItems: 'flex-start' }}
-                    >
-                      <Typography variant="subtitle1">Avatar</Typography>
-                      <Typography variant="caption">Min 400x400px, PNG or JPEG</Typography>
-                      <Button
-                        color="secondary"
-                        onClick={() => {
-                          avatarInputRef.current?.click();
-                        }}
-                        variant="outlined"
-                      >
-                        Select
-                      </Button>
-                      <input
-                        hidden
-                        onChange={handleAvatarChange}
-                        ref={avatarInputRef}
-                        type="file"
-                      />
-                    </Stack>
-                  </Stack>
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <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>
-                    )}
-                  />
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    control={control}
-                    name="email"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.email)}
-                        fullWidth
-                      >
-                        <InputLabel required>Email address</InputLabel>
-                        <OutlinedInput
-                          {...field}
-                          type="email"
-                        />
-                        {errors.email ? <FormHelperText>{errors.email.message}</FormHelperText> : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    control={control}
-                    name="phone"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.phone)}
-                        fullWidth
-                      >
-                        <InputLabel required>Phone number</InputLabel>
-                        <OutlinedInput {...field} />
-                        {errors.phone ? <FormHelperText>{errors.phone.message}</FormHelperText> : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    control={control}
-                    name="company"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.company)}
-                        fullWidth
-                      >
-                        <InputLabel>Company</InputLabel>
-                        <OutlinedInput {...field} />
-                        {errors.company ? <FormHelperText>{errors.company.message}</FormHelperText> : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-              </Grid>
-            </Stack>
-            <Stack spacing={3}>
-              <Typography variant="h6">Billing information</Typography>
-              <Grid
-                container
-                spacing={3}
-              >
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    control={control}
-                    name="billingAddress.country"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.billingAddress?.country)}
-                        fullWidth
-                      >
-                        <InputLabel required>Country</InputLabel>
-                        <Select {...field}>
-                          <Option value="">Choose a country</Option>
-                          <Option value="us">United States</Option>
-                          <Option value="de">Germany</Option>
-                          <Option value="es">Spain</Option>
-                        </Select>
-                        {errors.billingAddress?.country ? (
-                          <FormHelperText>{errors.billingAddress?.country?.message}</FormHelperText>
-                        ) : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    control={control}
-                    name="billingAddress.state"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.billingAddress?.state)}
-                        fullWidth
-                      >
-                        <InputLabel required>State</InputLabel>
-                        <OutlinedInput {...field} />
-                        {errors.billingAddress?.state ? (
-                          <FormHelperText>{errors.billingAddress?.state?.message}</FormHelperText>
-                        ) : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    control={control}
-                    name="billingAddress.city"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.billingAddress?.city)}
-                        fullWidth
-                      >
-                        <InputLabel required>City</InputLabel>
-                        <OutlinedInput {...field} />
-                        {errors.billingAddress?.city ? (
-                          <FormHelperText>{errors.billingAddress?.city?.message}</FormHelperText>
-                        ) : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    control={control}
-                    name="billingAddress.zipCode"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.billingAddress?.zipCode)}
-                        fullWidth
-                      >
-                        <InputLabel required>Zip code</InputLabel>
-                        <OutlinedInput {...field} />
-                        {errors.billingAddress?.zipCode ? (
-                          <FormHelperText>{errors.billingAddress?.zipCode?.message}</FormHelperText>
-                        ) : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    control={control}
-                    name="billingAddress.line1"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.billingAddress?.line1)}
-                        fullWidth
-                      >
-                        <InputLabel required>Address</InputLabel>
-                        <OutlinedInput {...field} />
-                        {errors.billingAddress?.line1 ? (
-                          <FormHelperText>{errors.billingAddress?.line1?.message}</FormHelperText>
-                        ) : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    control={control}
-                    name="taxId"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.taxId)}
-                        fullWidth
-                      >
-                        <InputLabel>Tax ID</InputLabel>
-                        <OutlinedInput
-                          {...field}
-                          placeholder="e.g EU372054390"
-                        />
-                        {errors.taxId ? <FormHelperText>{errors.taxId.message}</FormHelperText> : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-              </Grid>
-            </Stack>
-            <Stack spacing={3}>
-              <Typography variant="h6">Shipping information</Typography>
-              <FormControlLabel
-                control={<Checkbox defaultChecked />}
-                label="Same as billing address"
-              />
-            </Stack>
-            <Stack spacing={3}>
-              <Typography variant="h6">Additional information</Typography>
-              <Grid
-                container
-                spacing={3}
-              >
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    control={control}
-                    name="timezone"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.timezone)}
-                        fullWidth
-                      >
-                        <InputLabel required>Timezone</InputLabel>
-                        <Select {...field}>
-                          <Option value="">Select a timezone</Option>
-                          <Option value="new_york">US - New York</Option>
-                          <Option value="california">US - California</Option>
-                          <Option value="london">UK - London</Option>
-                        </Select>
-                        {errors.timezone ? <FormHelperText>{errors.timezone.message}</FormHelperText> : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    control={control}
-                    name="language"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.language)}
-                        fullWidth
-                      >
-                        <InputLabel required>Language</InputLabel>
-                        <Select {...field}>
-                          <Option value="">Select a language</Option>
-                          <Option value="en">English</Option>
-                          <Option value="es">Spanish</Option>
-                          <Option value="de">German</Option>
-                        </Select>
-                        {errors.language ? <FormHelperText>{errors.language.message}</FormHelperText> : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    control={control}
-                    name="currency"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.currency)}
-                        fullWidth
-                      >
-                        <InputLabel>Currency</InputLabel>
-                        <Select {...field}>
-                          <Option value="">Select a currency</Option>
-                          <Option value="USD">USD</Option>
-                          <Option value="EUR">EUR</Option>
-                          <Option value="RON">RON</Option>
-                        </Select>
-                        {errors.currency ? <FormHelperText>{errors.currency.message}</FormHelperText> : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-              </Grid>
-            </Stack>
-          </Stack>
-        </CardContent>
-        <CardActions sx={{ justifyContent: 'flex-end' }}>
-          <Button
-            color="secondary"
-            component={RouterLink}
-            href={paths.dashboard.user_metas.list}
-          >
-            Cancel
-          </Button>
-          <Button
-            type="submit"
-            variant="contained"
-          >
-            Create user
-          </Button>
-        </CardActions>
-      </Card>
-      <Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
-        <pre>{JSON.stringify({ errors }, null, 2)}</pre>
-      </Box>
-    </form>
-  );
-}

002_source/cms/src/components/dashboard/user.de/user-edit-form.tsx

@@ -1,604 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import RouterLink from 'next/link';
-import { useParams, useRouter } from 'next/navigation';
-//
-import { COL_USERS } 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 Divider from '@mui/material/Divider';
-import FormControl from '@mui/material/FormControl';
-import FormHelperText from '@mui/material/FormHelperText';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-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 Grid from '@mui/material/Unstable_Grid2';
-//
-import { Camera as CameraIcon } from '@phosphor-icons/react/dist/ssr/Camera';
-//
-import { Controller, useForm } from 'react-hook-form';
-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';
-import { toast } from '@/components/core/toaster';
-import FormLoading from '@/components/loading';
-
-// import ErrorDisplay from '../../error';
-import ErrorDisplay from '../error';
-
-// TODO: review this
-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 UserEditForm(): React.JSX.Element {
-  const router = useRouter();
-  const { t } = useTranslation(['lp_categories']);
-
-  const { id: userId } = useParams<{ userId: string }>();
-  //
-  const [isUpdating, setIsUpdating] = React.useState<boolean>(false);
-  const [showLoading, setShowLoading] = React.useState<boolean>(false);
-  //
-  const [showError, setShowError] = React.useState({ show: false, detail: '' });
-
-  const {
-    control,
-    handleSubmit,
-    formState: { errors },
-    setValue,
-    reset,
-    watch,
-  } = useForm<Values>({ defaultValues, resolver: zodResolver(schema) });
-
-  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_USERS).update(userId, updateData);
-        toast.success('User updated successfully');
-        router.push(paths.dashboard.user_metas.list);
-      } catch (error) {
-        logger.error(error);
-        toast.error('Failed to update user');
-      } finally {
-        setIsUpdating(false);
-      }
-    },
-    [userId, router]
-  );
-
-  const avatarInputRef = React.useRef<HTMLInputElement>(null);
-  const avatar = watch('avatar');
-
-  const handleAvatarChange = React.useCallback(
-    async (event: React.ChangeEvent<HTMLInputElement>) => {
-      const file = event.target.files?.[0];
-
-      if (file) {
-        const url = await fileToBase64(file);
-        setValue('avatar', url);
-      }
-    },
-    [setValue]
-  );
-
-  // TODO: need to align with save form
-  // use trycatch
-  const [textDescription, setTextDescription] = React.useState<string>('');
-  const [textRemarks, setTextRemarks] = React.useState<string>('');
-
-  // load existing data when user arrive
-  const loadExistingData = React.useCallback(
-    async (id: string) => {
-      setShowLoading(true);
-
-      try {
-        const result = await pb.collection(COL_USERS).getOne(id);
-        reset({ ...defaultValues, ...result });
-        console.log({ result });
-
-        if (result.avatar_file) {
-          const fetchResult = await fetch(
-            `http://127.0.0.1:8090/api/files/${result.collectionId}/${result.id}/${result.avatar_file}`
-          );
-          const blob = await fetchResult.blob();
-          const url = await fileToBase64(blob);
-          setValue('avatar', url);
-        }
-      } catch (error) {
-        logger.error(error);
-        toast.error('Failed to load user data');
-        setShowError({ show: true, detail: JSON.stringify(error, null, 2) });
-      } finally {
-        setShowLoading(false);
-      }
-    },
-    [reset, setValue]
-  );
-
-  React.useEffect(() => {
-    void loadExistingData(userId);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [userId]);
-
-  if (showLoading) return <FormLoading />;
-  if (showError.show)
-    return (
-      <ErrorDisplay
-        message={t('error.unable-to-process-request')}
-        code="500"
-        details={showError.detail}
-      />
-    );
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Card>
-        <CardContent>
-          <Stack
-            divider={<Divider />}
-            spacing={4}
-          >
-            <Stack spacing={3}>
-              <Typography variant="h6">{t('edit.basic-info')}</Typography>
-              <Grid
-                container
-                spacing={3}
-              >
-                <Grid xs={12}>
-                  <Stack
-                    direction="row"
-                    spacing={3}
-                    sx={{ alignItems: 'center' }}
-                  >
-                    <Box
-                      sx={{
-                        border: '1px dashed var(--mui-palette-divider)',
-                        borderRadius: '5%',
-                        display: 'inline-flex',
-                        p: '4px',
-                      }}
-                    >
-                      <Avatar
-                        variant="rounded"
-                        src={avatar}
-                        sx={{
-                          '--Avatar-size': '100px',
-                          '--Icon-fontSize': 'var(--icon-fontSize-lg)',
-                          alignItems: 'center',
-                          bgcolor: 'var(--mui-palette-background-level1)',
-                          color: 'var(--mui-palette-text-primary)',
-                          display: 'flex',
-                          justifyContent: 'center',
-                        }}
-                      >
-                        <CameraIcon fontSize="var(--Icon-fontSize)" />
-                      </Avatar>
-                    </Box>
-                    <Stack
-                      spacing={1}
-                      sx={{ alignItems: 'flex-start' }}
-                    >
-                      <Typography variant="subtitle1">{t('edit.avatar')}</Typography>
-                      <Typography variant="caption">{t('edit.avatarRequirements')}</Typography>
-                      <Button
-                        color="secondary"
-                        onClick={() => {
-                          avatarInputRef.current?.click();
-                        }}
-                        variant="outlined"
-                      >
-                        {t('edit.avatar_select')}
-                      </Button>
-                      <input
-                        hidden
-                        onChange={handleAvatarChange}
-                        ref={avatarInputRef}
-                        type="file"
-                      />
-                    </Stack>
-                  </Stack>
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <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>
-                    )}
-                  />
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    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>
-                    )}
-                  />
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <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>
-                    )}
-                  />
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    control={control}
-                    name="company"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.company)}
-                        fullWidth
-                      >
-                        <InputLabel>Company</InputLabel>
-                        <OutlinedInput
-                          {...field}
-                          placeholder="no company name"
-                        />
-                        {errors.company ? <FormHelperText>{errors.company.message}</FormHelperText> : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-              </Grid>
-            </Stack>
-            {/*  */}
-            <Stack spacing={3}>
-              <Typography variant="h6">Billing Information</Typography>
-              <Grid
-                container
-                spacing={3}
-              >
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    control={control}
-                    name="billingAddress.country"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.billingAddress?.country)}
-                        fullWidth
-                      >
-                        <InputLabel required>Country</InputLabel>
-                        <Select {...field}>
-                          <MenuItem value="US">United States</MenuItem>
-                          <MenuItem value="UK">United Kingdom</MenuItem>
-                          <MenuItem value="CA">Canada</MenuItem>
-                        </Select>
-                        {errors.billingAddress?.country ? (
-                          <FormHelperText>{errors.billingAddress.country.message}</FormHelperText>
-                        ) : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    control={control}
-                    name="billingAddress.state"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.billingAddress?.state)}
-                        fullWidth
-                      >
-                        <InputLabel required>State</InputLabel>
-                        <OutlinedInput {...field} />
-                        {errors.billingAddress?.state ? (
-                          <FormHelperText>{errors.billingAddress.state.message}</FormHelperText>
-                        ) : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    control={control}
-                    name="billingAddress.city"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.billingAddress?.city)}
-                        fullWidth
-                      >
-                        <InputLabel required>City</InputLabel>
-                        <OutlinedInput {...field} />
-                        {errors.billingAddress?.city ? (
-                          <FormHelperText>{errors.billingAddress.city.message}</FormHelperText>
-                        ) : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    control={control}
-                    name="billingAddress.zipCode"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.billingAddress?.zipCode)}
-                        fullWidth
-                      >
-                        <InputLabel required>Zip Code</InputLabel>
-                        <OutlinedInput {...field} />
-                        {errors.billingAddress?.zipCode ? (
-                          <FormHelperText>{errors.billingAddress.zipCode.message}</FormHelperText>
-                        ) : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    control={control}
-                    name="billingAddress.line1"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.billingAddress?.line1)}
-                        fullWidth
-                      >
-                        <InputLabel required>Address Line 1</InputLabel>
-                        <OutlinedInput {...field} />
-                        {errors.billingAddress?.line1 ? (
-                          <FormHelperText>{errors.billingAddress.line1.message}</FormHelperText>
-                        ) : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    control={control}
-                    name="taxId"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.taxId)}
-                        fullWidth
-                      >
-                        <InputLabel>Tax ID</InputLabel>
-                        <OutlinedInput
-                          {...field}
-                          placeholder="no tax id..."
-                        />
-                        {errors.taxId ? <FormHelperText>{errors.taxId.message}</FormHelperText> : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-              </Grid>
-            </Stack>
-
-            <Stack spacing={3}>
-              <Typography variant="h6">Additional Information</Typography>
-              <Grid
-                container
-                spacing={3}
-              >
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    control={control}
-                    name="timezone"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.timezone)}
-                        fullWidth
-                      >
-                        <InputLabel required>Timezone</InputLabel>
-                        <Select {...field}>
-                          <MenuItem value="America/New_York">New York</MenuItem>
-                          <MenuItem value="Europe/London">London</MenuItem>
-                          <MenuItem value="Asia/Tokyo">Tokyo</MenuItem>
-                          <MenuItem value="America/Boa_Vista">Boa Vista</MenuItem>
-                          <MenuItem value="America/Grand_Turk">Grand Turk</MenuItem>
-                          <MenuItem value="Asia/Manila">Manila</MenuItem>
-                          <MenuItem value="Asia/Urumqi">Urumqi</MenuItem>
-                          <MenuItem value="Africa/Tunis">Tunis</MenuItem>
-                        </Select>
-                        {errors.timezone ? <FormHelperText>{errors.timezone.message}</FormHelperText> : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    control={control}
-                    name="language"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.language)}
-                        fullWidth
-                      >
-                        <InputLabel required>Language</InputLabel>
-                        <Select {...field}>
-                          <MenuItem value="en">English</MenuItem>
-                          <MenuItem value="es">Spanish</MenuItem>
-                          <MenuItem value="fr">French</MenuItem>
-                        </Select>
-                        {errors.language ? <FormHelperText>{errors.language.message}</FormHelperText> : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-                <Grid
-                  md={6}
-                  xs={12}
-                >
-                  <Controller
-                    control={control}
-                    name="currency"
-                    render={({ field }) => (
-                      <FormControl
-                        error={Boolean(errors.currency)}
-                        fullWidth
-                      >
-                        <InputLabel required>Currency</InputLabel>
-                        <Select {...field}>
-                          <MenuItem value="USD">USD</MenuItem>
-                          <MenuItem value="EUR">EUR</MenuItem>
-                          <MenuItem value="GBP">GBP</MenuItem>
-                        </Select>
-                        {errors.currency ? <FormHelperText>{errors.currency.message}</FormHelperText> : null}
-                      </FormControl>
-                    )}
-                  />
-                </Grid>
-              </Grid>
-            </Stack>
-          </Stack>
-        </CardContent>
-        <CardActions sx={{ justifyContent: 'flex-end' }}>
-          <Button
-            color="secondary"
-            component={RouterLink}
-            href={paths.dashboard.user_metas.list}
-          >
-            {t('edit.cancelButton')}
-          </Button>
-
-          <LoadingButton
-            disabled={isUpdating}
-            loading={isUpdating}
-            type="submit"
-            variant="contained"
-          >
-            {t('edit.updateButton')}
-          </LoadingButton>
-        </CardActions>
-      </Card>
-      <Box sx={{ display: isDevelopment ? 'block' : 'none' }}>
-        <pre>{JSON.stringify({ errors }, null, 2)}</pre>
-      </Box>
-    </form>
-  );
-}

002_source/cms/src/components/dashboard/user.de/users-filters.tsx

@@ -1,242 +0,0 @@
-'use client';
-// RULES:
-// T.B.A.
-//
-import * as React from 'react';
-import { useRouter } from 'next/navigation';
-import { getAllCustomersCount } from '@/db/Customers/GetAllCount';
-
-import Button from '@mui/material/Button';
-import Chip from '@mui/material/Chip';
-import Divider from '@mui/material/Divider';
-import Select from '@mui/material/Select';
-import type { SelectChangeEvent } from '@mui/material/Select';
-import Stack from '@mui/material/Stack';
-import Tab from '@mui/material/Tab';
-import Tabs from '@mui/material/Tabs';
-import Typography from '@mui/material/Typography';
-import { useTranslation } from 'react-i18next';
-
-import { paths } from '@/paths';
-import { FilterButton } from '@/components/core/filter-button';
-import { Option } from '@/components/core/option';
-
-import { useCustomersSelection } from './users-selection-context';
-import GetBlockedCount from '@/db/Customers/GetBlockedCount';
-import GetPendingCount from '@/db/Customers/GetPendingCount';
-import GetActiveCount from '@/db/Customers/GetActiveCount';
-import PhoneFilterPopover from './phone-filter-popover';
-import EmailFilterPopover from './email-filter-popover';
-import type { CustomersFiltersProps, Filters, SortDir } from './type.d';
-
-export function UsersFilters({ filters = {}, sortDir = 'desc', fullData }: CustomersFiltersProps): React.JSX.Element {
-  const { t } = useTranslation();
-
-  const { email, phone, status } = filters;
-
-  const [totalCount, setTotalCount] = React.useState<number>(0);
-  const [activeCount, setActiveCount] = React.useState<number>(0);
-  const [pendingCount, setPendingCount] = React.useState<number>(0);
-  const [blockedCount, setBlockedCount] = React.useState<number>(0);
-
-  const router = useRouter();
-
-  const selection = useCustomersSelection();
-
-  // function getVisible(): number {
-  //   return fullData.reduce((count, item: CrQuestion) => {
-  //     return item.visible === 'visible' ? count + 1 : count;
-  //   }, 0);
-  // }
-
-  // function getHidden(): number {
-  //   return fullData.reduce((count, item: CrQuestion) => {
-  //     return item.visible === 'hidden' ? count + 1 : count;
-  //   }, 0);
-  // }
-
-  // The tabs should be generated using API data.
-  const tabs = [
-    { label: 'All', value: '', count: totalCount },
-    { label: 'Active', value: 'active', count: activeCount },
-    { label: 'Pending', value: 'pending', count: pendingCount },
-    { label: 'Blocked', value: 'blocked', count: blockedCount },
-  ] as const;
-
-  const updateSearchParams = React.useCallback(
-    (newFilters: Filters, newSortDir: SortDir): void => {
-      const searchParams = new URLSearchParams();
-
-      if (newSortDir === 'asc') {
-        searchParams.set('sortDir', newSortDir);
-      }
-
-      if (newFilters.status) {
-        searchParams.set('status', newFilters.status);
-      }
-
-      if (newFilters.email) {
-        searchParams.set('email', newFilters.email);
-      }
-
-      if (newFilters.phone) {
-        searchParams.set('phone', newFilters.phone);
-      }
-
-      router.push(`${paths.dashboard.customers.list}?${searchParams.toString()}`);
-    },
-    [router]
-  );
-
-  const handleClearFilters = React.useCallback(() => {
-    updateSearchParams({}, sortDir);
-  }, [updateSearchParams, sortDir]);
-
-  const handleStatusChange = React.useCallback(
-    (_: React.SyntheticEvent, value: string) => {
-      updateSearchParams({ ...filters, status: value }, sortDir);
-    },
-    [updateSearchParams, filters, sortDir]
-  );
-
-  const handleEmailChange = React.useCallback(
-    (value?: string) => {
-      updateSearchParams({ ...filters, email: value }, sortDir);
-    },
-    [updateSearchParams, filters, sortDir]
-  );
-
-  const handlePhoneChange = React.useCallback(
-    (value?: string) => {
-      updateSearchParams({ ...filters, phone: value }, sortDir);
-    },
-    [updateSearchParams, filters, sortDir]
-  );
-
-  const handleSortChange = React.useCallback(
-    (event: SelectChangeEvent) => {
-      updateSearchParams(filters, event.target.value as SortDir);
-    },
-    [updateSearchParams, filters]
-  );
-
-  const hasFilters = status || email || phone;
-
-  React.useEffect(() => {
-    const fetchCount = async (): Promise<void> => {
-      try {
-        const tc = await getAllCustomersCount();
-        setTotalCount(tc);
-
-        const bc = await GetBlockedCount();
-        setBlockedCount(bc);
-        const pc = await GetPendingCount();
-        setPendingCount(pc);
-        const ac = await GetActiveCount();
-        setActiveCount(ac);
-      } catch (error) {
-        //
-      }
-    };
-    void fetchCount();
-  }, []);
-
-  return (
-    <div>
-      <Tabs
-        onChange={handleStatusChange}
-        sx={{ px: 3 }}
-        value={status ?? ''}
-        variant="scrollable"
-        //
-      >
-        {tabs.map((tab) => (
-          <Tab
-            icon={
-              <Chip
-                label={tab.count}
-                size="small"
-                variant="soft"
-              />
-            }
-            iconPosition="end"
-            key={tab.value}
-            label={tab.label}
-            sx={{ minHeight: 'auto' }}
-            tabIndex={0}
-            value={tab.value}
-          />
-        ))}
-      </Tabs>
-      <Divider />
-      <Stack
-        direction="row"
-        spacing={2}
-        sx={{ alignItems: 'center', flexWrap: 'wrap', px: 3, py: 2 }}
-      >
-        <Stack
-          direction="row"
-          spacing={2}
-          sx={{ alignItems: 'center', flex: '1 1 auto', flexWrap: 'wrap' }}
-        >
-          <FilterButton
-            displayValue={email}
-            label="Email"
-            onFilterApply={(value) => {
-              handleEmailChange(value as string);
-            }}
-            onFilterDelete={() => {
-              handleEmailChange();
-            }}
-            popover={<EmailFilterPopover />}
-            value={email}
-          />
-
-          <FilterButton
-            displayValue={phone}
-            label="Phone number"
-            onFilterApply={(value) => {
-              handlePhoneChange(value as string);
-            }}
-            onFilterDelete={() => {
-              handlePhoneChange();
-            }}
-            popover={<PhoneFilterPopover />}
-            value={phone}
-          />
-
-          {hasFilters ? <Button onClick={handleClearFilters}>Clear filters</Button> : null}
-        </Stack>
-        {selection.selectedAny ? (
-          <Stack
-            direction="row"
-            spacing={2}
-            sx={{ alignItems: 'center' }}
-          >
-            <Typography
-              color="text.secondary"
-              variant="body2"
-            >
-              {selection.selected.size} selected
-            </Typography>
-            <Button
-              color="error"
-              variant="contained"
-            >
-              Delete
-            </Button>
-          </Stack>
-        ) : null}
-        <Select
-          name="sort"
-          onChange={handleSortChange}
-          sx={{ maxWidth: '100%', width: '120px' }}
-          value={sortDir}
-        >
-          <Option value="desc">Newest</Option>
-          <Option value="asc">Oldest</Option>
-        </Select>
-      </Stack>
-    </div>
-  );
-}

002_source/cms/src/components/dashboard/user.de/users-pagination.tsx

@@ -1,50 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import TablePagination from '@mui/material/TablePagination';
-
-function noop(): void {
-  return undefined;
-}
-
-interface UsersPaginationProps {
-  count: number;
-  page: number;
-  //
-  setPage: (page: number) => void;
-  setRowsPerPage: (page: number) => void;
-  rowsPerPage: number;
-}
-
-export function UsersPagination({
-  count,
-  page,
-  //
-  setPage,
-  setRowsPerPage,
-  rowsPerPage,
-}: UsersPaginationProps): React.JSX.Element {
-  // You should implement the pagination using a similar logic as the filters.
-  // Note that when page change, you should keep the filter search params.
-  const handleChangePage = (event: unknown, newPage: number) => {
-    setPage(newPage);
-  };
-
-  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setRowsPerPage(parseInt(event.target.value));
-    // console.log(parseInt(event.target.value));
-  };
-
-  return (
-    <TablePagination
-      component="div"
-      count={count}
-      onPageChange={handleChangePage}
-      onRowsPerPageChange={handleChangeRowsPerPage}
-      page={page}
-      rowsPerPage={rowsPerPage}
-      rowsPerPageOptions={[5, 10, 25]}
-      //
-    />
-  );
-}

002_source/cms/src/components/dashboard/user.de/users-selection-context.tsx

@@ -1,40 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-import { useSelection } from '@/hooks/use-selection';
-import type { Selection } from '@/hooks/use-selection';
-
-import type { User } from './type.d';
-
-function noop(): void {
-  return undefined;
-}
-
-export interface CustomersSelectionContextValue extends Selection {}
-
-export const CustomersSelectionContext = React.createContext<CustomersSelectionContextValue>({
-  deselectAll: noop,
-  deselectOne: noop,
-  selectAll: noop,
-  selectOne: noop,
-  selected: new Set(),
-  selectedAny: false,
-  selectedAll: false,
-});
-
-interface UsersSelectionProviderProps {
-  children: React.ReactNode;
-  users: User[];
-}
-
-export function UsersSelectionProvider({ children, users = [] }: UsersSelectionProviderProps): React.JSX.Element {
-  const customerIds = React.useMemo(() => users.map((customer) => customer.id), [users]);
-  const selection = useSelection(customerIds);
-
-  return <CustomersSelectionContext.Provider value={{ ...selection }}>{children}</CustomersSelectionContext.Provider>;
-}
-
-export function useCustomersSelection(): CustomersSelectionContextValue {
-  return React.useContext(CustomersSelectionContext);
-}

002_source/cms/src/components/dashboard/user.de/users-table.tsx

@@ -1,222 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import RouterLink from 'next/link';
-import { LoadingButton } from '@mui/lab';
-import Avatar from '@mui/material/Avatar';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Chip from '@mui/material/Chip';
-import IconButton from '@mui/material/IconButton';
-import LinearProgress from '@mui/material/LinearProgress';
-import Link from '@mui/material/Link';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
-import { Clock as ClockIcon } from '@phosphor-icons/react/dist/ssr/Clock';
-import { Images as ImagesIcon } from '@phosphor-icons/react/dist/ssr/Images';
-import { Minus as MinusIcon } from '@phosphor-icons/react/dist/ssr/Minus';
-import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
-import { TrashSimple as TrashSimpleIcon } from '@phosphor-icons/react/dist/ssr/TrashSimple';
-import { useTranslation } from 'react-i18next';
-import { toast } from 'sonner';
-
-import { paths } from '@/paths';
-import { dayjs } from '@/lib/dayjs';
-import { DataTable } from '@/components/core/data-table';
-import type { ColumnDef } from '@/components/core/data-table';
-
-import ConfirmDeleteModal from './confirm-delete-modal';
-import { useCustomersSelection } from './users-selection-context';
-import type { User } from './type.d';
-
-function columns(handleDeleteClick: (testId: string) => void): ColumnDef<User>[] {
-  return [
-    {
-      formatter: (row): React.JSX.Element => (
-        <Stack
-          direction="row"
-          spacing={1}
-          sx={{ alignItems: 'center' }}
-        >
-          <Avatar src={row.avatar} />{' '}
-          <div>
-            <Link
-              color="inherit"
-              component={RouterLink}
-              href={paths.dashboard.user_metas.view(row.id)}
-              sx={{ whiteSpace: 'nowrap' }}
-              variant="subtitle2"
-            >
-              {row.name}
-            </Link>
-            <Typography
-              color="text.secondary"
-              variant="body2"
-            >
-              {row.email}
-            </Typography>
-          </div>
-        </Stack>
-      ),
-      name: 'Name',
-      width: '250px',
-    },
-    {
-      formatter: (row): React.JSX.Element => (
-        <Stack
-          direction="row"
-          spacing={2}
-          sx={{ alignItems: 'center' }}
-        >
-          <LinearProgress
-            sx={{ flex: '1 1 auto' }}
-            value={row.quota}
-            variant="determinate"
-          />
-          <Typography
-            color="text.secondary"
-            variant="body2"
-          >
-            {new Intl.NumberFormat('en-US', { style: 'percent', maximumFractionDigits: 2 }).format(row.quota / 100)}
-          </Typography>
-        </Stack>
-      ),
-      name: 'Quota',
-      width: '150px',
-    },
-    { field: 'phone', name: 'Phone number', width: '150px' },
-
-    {
-      formatter: (row): React.JSX.Element => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-
-        const mapping = {
-          active: {
-            label: 'Active',
-            icon: (
-              <CheckCircleIcon
-                color="var(--mui-palette-success-main)"
-                weight="fill"
-              />
-            ),
-          },
-          blocked: { label: 'Blocked', icon: <MinusIcon color="var(--mui-palette-error-main)" /> },
-          pending: {
-            label: 'Pending',
-            icon: (
-              <ClockIcon
-                color="var(--mui-palette-warning-main)"
-                weight="fill"
-              />
-            ),
-          },
-        } as const;
-        const { label, icon } = mapping[row.status] ?? { label: 'Unknown', icon: null };
-
-        return (
-          <Chip
-            icon={icon}
-            label={label}
-            size="small"
-            variant="outlined"
-          />
-        );
-      },
-      name: 'Status',
-      width: '150px',
-    },
-    {
-      formatter(row) {
-        return dayjs(row.createdAt).format('MMM D, YYYY');
-      },
-      name: 'Created at',
-      width: '150px',
-    },
-    {
-      formatter: (row): React.JSX.Element => (
-        <Stack
-          direction="row"
-          spacing={1}
-        >
-          <LoadingButton
-            //
-            color="secondary"
-            component={RouterLink}
-            href={paths.dashboard.user_metas.view(row.id)}
-          >
-            <PencilSimpleIcon size={24} />
-          </LoadingButton>
-          <LoadingButton
-            color="error"
-            // TODO: originally it is row.isEmpty
-            disabled={false}
-            onClick={() => {
-              handleDeleteClick(row.id);
-            }}
-          >
-            <TrashSimpleIcon size={24} />
-          </LoadingButton>
-        </Stack>
-      ),
-      name: 'Actions',
-      hideName: true,
-      align: 'right',
-    },
-  ];
-}
-
-export interface UsersTableProps {
-  rows: User[];
-  reloadRows: () => void;
-}
-
-export function UsersTable({ rows, reloadRows }: UsersTableProps): React.JSX.Element {
-  const { t } = useTranslation(['customers']);
-  const { deselectAll, deselectOne, selectAll, selectOne, selected } = useCustomersSelection();
-
-  const [idToDelete, setIdToDelete] = React.useState('');
-  const [open, setOpen] = React.useState(false);
-
-  function handleDeleteClick(testId: string): void {
-    setOpen(true);
-    setIdToDelete(testId);
-  }
-
-  return (
-    <React.Fragment>
-      <ConfirmDeleteModal
-        idToDelete={idToDelete}
-        open={open}
-        reloadRows={reloadRows}
-        setOpen={setOpen}
-      />
-      <DataTable<User>
-        columns={columns(handleDeleteClick)}
-        onDeselectAll={deselectAll}
-        onDeselectOne={(_, row) => {
-          deselectOne(row.id);
-        }}
-        onSelectAll={selectAll}
-        onSelectOne={(_, row) => {
-          selectOne(row.id);
-        }}
-        rows={rows}
-        selectable
-        selected={selected}
-      />
-      {!rows.length ? (
-        <Box sx={{ p: 3 }}>
-          <Typography
-            color="text.secondary"
-            sx={{ textAlign: 'center' }}
-            variant="body2"
-          >
-            {/* TODO: update this */}
-            {t('no-record-found')}
-          </Typography>
-        </Box>
-      ) : null}
-    </React.Fragment>
-  );
-}

002_source/cms/src/components/dashboard/user_meta/confirm-delete-modal.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import { deleteUserMeta } from '@/db/UserMetas/Delete';
 import { LoadingButton } from '@mui/lab';
 import { Button, Container, Modal, Paper } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
@@ -12,7 +13,6 @@ import { useTranslation } from 'react-i18next';
 
 import { logger } from '@/lib/default-logger';
 import { toast } from '@/components/core/toaster';
-import { deleteUserMeta } from '@/db/UserMetas/Delete';
 
 export default function ConfirmDeleteModal({
   open,
@@ -105,7 +105,7 @@ export default function ConfirmDeleteModal({
                     <LoadingButton
                       color="error"
                       variant="contained"
-                      onClick={(e) => {
+                      onClick={() => {
                         handleUserConfirmDelete();
                       }}
                       loading={isDeleteing}

002_source/cms/src/components/dashboard/user_meta/user-metas-filters.tsx

@@ -34,8 +34,9 @@ import { useUserMetasSelection } from './user-metas-selection-context';
 export function UserMetasFilters({
   filters = {},
   sortDir = 'desc',
+  // TODO: remove fullData
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
   fullData,
-  //
 }: UserMetasFiltersProps): React.JSX.Element {
   const { t } = useTranslation();
 

002_source/cms/src/components/dashboard/user_meta/user-metas-pagination.tsx

@@ -3,9 +3,10 @@
 import * as React from 'react';
 import TablePagination from '@mui/material/TablePagination';
 
-function noop(): void {
-  return undefined;
-}
+// TODO remove noop
+// function noop(): void {
+//   return undefined;
+// }
 
 interface UserMetasPaginationProps {
   count: number;
@@ -30,7 +31,7 @@ export function UserMetasPagination({
     setPage(newPage);
   };
 
-  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>): void => {
     setRowsPerPage(parseInt(event.target.value));
     // console.log(parseInt(event.target.value));
   };

002_source/cms/src/components/dashboard/user_meta/user-metas-table.tsx

@@ -9,16 +9,13 @@ import RouterLink from 'next/link';
 import { LoadingButton } from '@mui/lab';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
-import IconButton from '@mui/material/IconButton';
 import LinearProgress from '@mui/material/LinearProgress';
 import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
 import { Clock as ClockIcon } from '@phosphor-icons/react/dist/ssr/Clock';
-import { Images as ImagesIcon } from '@phosphor-icons/react/dist/ssr/Images';
 import { Minus as MinusIcon } from '@phosphor-icons/react/dist/ssr/Minus';
 import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
 import { TrashSimple as TrashSimpleIcon } from '@phosphor-icons/react/dist/ssr/TrashSimple';

002_source/cms/src/components/dashboard/vocabulary/_constants.ts

@@ -1,5 +1,4 @@
-import { dayjs } from '@/lib/dayjs';
-import { Vocabulary, CreateForm } from './type';
+import type { CreateForm, Vocabulary } from './type';
 
 export const defaultVocabulary: Vocabulary = {
   id: 'default-vocabulary-id',

002_source/cms/src/components/dashboard/vocabulary/confirm-delete-modal.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useRouter } from 'next/navigation';
-import { COL_LESSON_TYPES } from '@/constants';
+import deleteVocabulary from '@/db/Vocabularies/Delete';
 import { LoadingButton } from '@mui/lab';
 import { Button, Container, Modal, Paper } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
@@ -10,14 +9,15 @@ import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { Note as NoteIcon } from '@phosphor-icons/react/dist/ssr/Note';
-import PocketBase from 'pocketbase';
+// TODO: remove import
+// import PocketBase from 'pocketbase';
 import { useTranslation } from 'react-i18next';
 
 import { logger } from '@/lib/default-logger';
 import { toast } from '@/components/core/toaster';
-import deleteVocabulary from '@/db/Vocabularies/Delete';
 
-const pb = new PocketBase(process.env.NEXT_PUBLIC_POCKETBASE_URL);
+// TODO: remove pb
+// const pb = new PocketBase(process.env.NEXT_PUBLIC_POCKETBASE_URL);
 
 export default function ConfirmDeleteModal({
   open,
@@ -110,7 +110,7 @@ export default function ConfirmDeleteModal({
                     <LoadingButton
                       color="error"
                       variant="contained"
-                      onClick={(e) => {
+                      onClick={() => {
                         handleUserConfirmDelete();
                       }}
                       loading={isDeleteing}

002_source/cms/src/components/dashboard/vocabulary/vocabularies-filters.tsx

@@ -2,9 +2,12 @@
 
 import * as React from 'react';
 import { useRouter } from 'next/navigation';
+import { listLessonCategories } from '@/db/LessonCategories/ListLessonCategories';
 import GetAllCount from '@/db/Vocabularies/GetAllCount';
 import GetHiddenCount from '@/db/Vocabularies/GetHiddenCount';
 import GetVisibleCount from '@/db/Vocabularies/GetVisibleCount';
+// import { listLessonCategories } from '@/db/LessonCategories/ListLessonCategories';
+import { MenuItem } from '@mui/material';
 import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
 import Divider from '@mui/material/Divider';
@@ -19,14 +22,12 @@ import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
+import { logger } from '@/lib/default-logger';
 import { FilterButton, FilterPopover, useFilterContext } from '@/components/core/filter-button';
 import { Option } from '@/components/core/option';
 
-import { useVocabulariesSelection } from './vocabularies-selection-context';
 import type { Vocabulary } from './type';
-import { listLessonCategories } from '@/db/LessonCategories/listLessonCategories';
-import { MenuItem } from '@mui/material';
-import { logger } from '@/lib/default-logger';
+import { useVocabulariesSelection } from './vocabularies-selection-context';
 
 export interface Filters {
   email?: string;
@@ -50,6 +51,7 @@ export interface VocabulariesFiltersProps {
 export function VocabulariesFilters({
   filters = {},
   sortDir = 'desc',
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
   fullData,
 }: VocabulariesFiltersProps): React.JSX.Element {
   const { t } = useTranslation();
@@ -119,12 +121,13 @@ export function VocabulariesFilters({
     updateSearchParams({}, sortDir);
   }, [updateSearchParams, sortDir]);
 
-  const handleStatusChange = React.useCallback(
-    (_: React.SyntheticEvent, value: string) => {
-      updateSearchParams({ ...filters, status: value }, sortDir);
-    },
-    [updateSearchParams, filters, sortDir]
-  );
+  // TODO: remove me
+  // const handleStatusChange = React.useCallback(
+  //   (_: React.SyntheticEvent, value: string) => {
+  //     updateSearchParams({ ...filters, status: value }, sortDir);
+  //   },
+  //   [updateSearchParams, filters, sortDir]
+  // );
 
   const handleVisibleChange = React.useCallback(
     (_: React.SyntheticEvent, value: string) => {
@@ -161,19 +164,19 @@ export function VocabulariesFilters({
     [updateSearchParams, filters, sortDir]
   );
 
-  const handleEmailChange = React.useCallback(
-    (value?: string) => {
-      updateSearchParams({ ...filters, email: value }, sortDir);
-    },
-    [updateSearchParams, filters, sortDir]
-  );
+  // const handleEmailChange = React.useCallback(
+  //   (value?: string) => {
+  //     updateSearchParams({ ...filters, email: value }, sortDir);
+  //   },
+  //   [updateSearchParams, filters, sortDir]
+  // );
 
-  const handlePhoneChange = React.useCallback(
-    (value?: string) => {
-      updateSearchParams({ ...filters, phone: value }, sortDir);
-    },
-    [updateSearchParams, filters, sortDir]
-  );
+  // const handlePhoneChange = React.useCallback(
+  //   (value?: string) => {
+  //     updateSearchParams({ ...filters, phone: value }, sortDir);
+  //   },
+  //   [updateSearchParams, filters, sortDir]
+  // );
 
   const handleSortChange = React.useCallback(
     (event: SelectChangeEvent) => {
@@ -185,7 +188,7 @@ export function VocabulariesFilters({
   const [allCategories, setAllCategories] = React.useState<{ value: string; label: string }[]>([]);
   async function listAllCategories() {
     try {
-      let result = await listLessonCategories();
+      const result = await listLessonCategories();
       const tempAllCategories = result.map((c) => {
         return {
           value: c.id,
@@ -568,42 +571,43 @@ function EmailFilterPopover(): React.JSX.Element {
   );
 }
 
-function PhoneFilterPopover(): React.JSX.Element {
-  const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
-  const [value, setValue] = React.useState<string>('');
+// remove PhoneFilterPopover
+// function PhoneFilterPopover(): React.JSX.Element {
+//   const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
+//   const [value, setValue] = React.useState<string>('');
 
-  React.useEffect(() => {
-    setValue((initialValue as string | undefined) ?? '');
-  }, [initialValue]);
+//   React.useEffect(() => {
+//     setValue((initialValue as string | undefined) ?? '');
+//   }, [initialValue]);
 
-  return (
-    <FilterPopover
-      anchorEl={anchorEl}
-      onClose={onClose}
-      open={open}
-      title="Filter by phone number"
-    >
-      <FormControl>
-        <OutlinedInput
-          onChange={(event) => {
-            setValue(event.target.value);
-          }}
-          onKeyUp={(event) => {
-            if (event.key === 'Enter') {
-              onApply(value);
-            }
-          }}
-          value={value}
-        />
-      </FormControl>
-      <Button
-        onClick={() => {
-          onApply(value);
-        }}
-        variant="contained"
-      >
-        Apply
-      </Button>
-    </FilterPopover>
-  );
-}
+//   return (
+//     <FilterPopover
+//       anchorEl={anchorEl}
+//       onClose={onClose}
+//       open={open}
+//       title="Filter by phone number"
+//     >
+//       <FormControl>
+//         <OutlinedInput
+//           onChange={(event) => {
+//             setValue(event.target.value);
+//           }}
+//           onKeyUp={(event) => {
+//             if (event.key === 'Enter') {
+//               onApply(value);
+//             }
+//           }}
+//           value={value}
+//         />
+//       </FormControl>
+//       <Button
+//         onClick={() => {
+//           onApply(value);
+//         }}
+//         variant="contained"
+//       >
+//         Apply
+//       </Button>
+//     </FilterPopover>
+//   );
+// }