From c5eb7100ea31201ea7b254d8ed2586949986871a Mon Sep 17 00:00:00 2001
From: louiscklaw <louiscklaw@123.com>
Date: Fri, 16 May 2025 11:02:27 +0800
Subject: [PATCH] ```refactor Standardize status/state naming across students,
 teachers, and user metas pages, update filters and tabs to use 'state'
 parameter consistently ```

---
 .../src/app/dashboard/students/list/page.tsx  | 26 +++++++--------
 .../src/app/dashboard/teachers/list/page.tsx  | 28 ++++++++--------
 .../app/dashboard/user_metas/list/page.tsx    | 12 +++----
 .../dashboard/student/students-filters.tsx    | 26 +++++++--------
 .../components/dashboard/student/type.d.ts    |  4 +--
 .../dashboard/teacher/teachers-filters.tsx    | 32 +++++++++----------
 .../dashboard/teacher/teachers-table.tsx      |  5 +--
 .../components/dashboard/teacher/type.d.tsx   |  2 +-
 .../components/dashboard/user_meta/type.d.ts  |  2 +-
 .../user_meta/user-metas-filters.tsx          | 16 +++++-----
 10 files changed, 75 insertions(+), 78 deletions(-)

diff --git a/002_source/cms/src/app/dashboard/students/list/page.tsx b/002_source/cms/src/app/dashboard/students/list/page.tsx
index 9797d60..e1fd324 100644
--- a/002_source/cms/src/app/dashboard/students/list/page.tsx
+++ b/002_source/cms/src/app/dashboard/students/list/page.tsx
@@ -1,6 +1,7 @@
-// src/app/dashboard/students/list/page.tsx
 'use client';
 
+// src/app/dashboard/students/list/page.tsx
+//
 // RULES:
 // contains list page for students (Students)
 //
@@ -15,12 +16,6 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
 import type { ListResult, RecordModel } from 'pocketbase';
-
-import { StudentsFilters } from '@/components/dashboard/student/students-filters';
-import { StudentsPagination } from '@/components/dashboard/student/students-pagination';
-import { StudentsSelectionProvider } from '@/components/dashboard/student/students-selection-context';
-import { StudentsTable } from '@/components/dashboard/student/students-table';
-import type { Student } from '@/components/dashboard/student/type.d';
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
@@ -29,13 +24,18 @@ import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
 import ErrorDisplay from '@/components/dashboard/error';
 import { defaultStudent } from '@/components/dashboard/student/_constants';
+import { StudentsFilters } from '@/components/dashboard/student/students-filters';
+import { StudentsPagination } from '@/components/dashboard/student/students-pagination';
+import { StudentsSelectionProvider } from '@/components/dashboard/student/students-selection-context';
+import { StudentsTable } from '@/components/dashboard/student/students-table';
+import type { Student } from '@/components/dashboard/student/type.d';
 import FormLoading from '@/components/loading';
 
 export default function Page({ searchParams }: PageProps): React.JSX.Element {
   const { t } = useTranslation(['students']);
   const router = useRouter();
 
-  const { email, phone, sortDir, status } = searchParams;
+  const { email, phone, sortDir, state } = searchParams;
 
   const [studentsData, setStudentsData] = React.useState<Student[]>([]);
 
@@ -104,8 +104,8 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
     const tempFilter = [];
     let tempSortDir = '';
 
-    if (status) {
-      tempFilter.push(`status = "${status}"`);
+    if (state) {
+      tempFilter.push(`state = "${state}"`);
     }
 
     if (sortDir) {
@@ -128,7 +128,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       preFinalListOption = { ...preFinalListOption, sort: tempSortDir };
     }
     setListOption(preFinalListOption);
-  }, [sortDir, email, phone, status]);
+  }, [sortDir, email, phone, state]);
 
   if (showLoading) return <FormLoading />;
 
@@ -176,7 +176,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
         <StudentsSelectionProvider students={f}>
           <Card>
             <StudentsFilters
-              filters={{ email, phone, status }}
+              filters={{ email, phone, status: state }}
               fullData={studentsData}
               sortDir={sortDir}
             />
@@ -210,7 +210,7 @@ interface PageProps {
     email?: string;
     phone?: string;
     sortDir?: 'asc' | 'desc';
-    status?: string;
+    state?: string;
     //
   };
 }
diff --git a/002_source/cms/src/app/dashboard/teachers/list/page.tsx b/002_source/cms/src/app/dashboard/teachers/list/page.tsx
index c16289d..a78fa80 100644
--- a/002_source/cms/src/app/dashboard/teachers/list/page.tsx
+++ b/002_source/cms/src/app/dashboard/teachers/list/page.tsx
@@ -1,6 +1,7 @@
-// src/app/dashboard/teachers/list/page.tsx
 'use client';
 
+// src/app/dashboard/teachers/list/page.tsx
+//
 // RULES:
 // contains list page for teachers (Teachers)
 //
@@ -15,12 +16,6 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
 import type { ListResult, RecordModel } from 'pocketbase';
-
-import { TeachersFilters } from '@/components/dashboard/teacher/teachers-filters';
-import { TeachersPagination } from '@/components/dashboard/teacher/teachers-pagination';
-import { TeachersSelectionProvider } from '@/components/dashboard/teacher/teachers-selection-context';
-import { TeachersTable } from '@/components/dashboard/teacher/teachers-table';
-import type { Teacher } from '@/components/dashboard/teacher/type.d';
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
@@ -29,13 +24,18 @@ import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
 import ErrorDisplay from '@/components/dashboard/error';
 import { defaultTeacher } from '@/components/dashboard/teacher/_constants';
+import { TeachersFilters } from '@/components/dashboard/teacher/teachers-filters';
+import { TeachersPagination } from '@/components/dashboard/teacher/teachers-pagination';
+import { TeachersSelectionProvider } from '@/components/dashboard/teacher/teachers-selection-context';
+import { TeachersTable } from '@/components/dashboard/teacher/teachers-table';
+import type { Teacher } from '@/components/dashboard/teacher/type.d';
 import FormLoading from '@/components/loading';
 
 export default function Page({ searchParams }: PageProps): React.JSX.Element {
   const { t } = useTranslation(['teachers']);
   const router = useRouter();
 
-  const { email, phone, sortDir, status } = searchParams;
+  const { email, phone, sortDir, state } = searchParams;
 
   const [teacherData, setTeacherData] = React.useState<Teacher[]>([]);
 
@@ -103,11 +103,11 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   }, [currentPage, rowsPerPage, listOption]);
 
   React.useEffect(() => {
-    let tempFilter = [];
+    const tempFilter = [];
     let tempSortDir = '';
 
-    if (status) {
-      tempFilter.push(`status = "${status}"`);
+    if (state) {
+      tempFilter.push(`state = "${state}"`);
     }
 
     if (sortDir) {
@@ -130,7 +130,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       preFinalListOption = { ...preFinalListOption, sort: tempSortDir };
     }
     setListOption(preFinalListOption);
-  }, [sortDir, email, phone, status]);
+  }, [sortDir, email, phone, state]);
 
   if (showLoading) return <FormLoading />;
 
@@ -178,7 +178,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
         <TeachersSelectionProvider teachers={f}>
           <Card>
             <TeachersFilters
-              filters={{ email, phone, status }}
+              filters={{ email, phone, state }}
               fullData={teacherData}
               sortDir={sortDir}
             />
@@ -212,7 +212,7 @@ interface PageProps {
     email?: string;
     phone?: string;
     sortDir?: 'asc' | 'desc';
-    status?: string;
+    state?: string;
     //
   };
 }
diff --git a/002_source/cms/src/app/dashboard/user_metas/list/page.tsx b/002_source/cms/src/app/dashboard/user_metas/list/page.tsx
index f7f7e34..c0d1c07 100644
--- a/002_source/cms/src/app/dashboard/user_metas/list/page.tsx
+++ b/002_source/cms/src/app/dashboard/user_metas/list/page.tsx
@@ -34,7 +34,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
   const { t } = useTranslation(['user_metas']);
   const router = useRouter();
 
-  const { email, phone, sortDir, status } = searchParams;
+  const { email, phone, sortDir, state } = searchParams;
 
   const [userMetaData, setUserMetaData] = React.useState<UserMeta[]>([]);
 
@@ -99,8 +99,8 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
     let tempFilter = [];
     let tempSortDir = '';
 
-    if (status) {
-      tempFilter.push(`status = "${status}"`);
+    if (state) {
+      tempFilter.push(`state = "${state}"`);
     }
 
     if (sortDir) {
@@ -123,7 +123,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
       preFinalListOption = { ...preFinalListOption, sort: tempSortDir };
     }
     setListOption(preFinalListOption);
-  }, [sortDir, email, phone, status]);
+  }, [sortDir, email, phone, state]);
 
   if (showLoading) return <FormLoading />;
 
@@ -171,7 +171,7 @@ export default function Page({ searchParams }: PageProps): React.JSX.Element {
         <UserMetasSelectionProvider userMetas={f}>
           <Card>
             <UserMetasFilters
-              filters={{ email, phone, status }}
+              filters={{ email, phone, state }}
               fullData={userMetaData}
               sortDir={sortDir}
             />
@@ -205,7 +205,7 @@ interface PageProps {
     email?: string;
     phone?: string;
     sortDir?: 'asc' | 'desc';
-    status?: string;
+    state?: string;
     //
   };
 }
diff --git a/002_source/cms/src/components/dashboard/student/students-filters.tsx b/002_source/cms/src/components/dashboard/student/students-filters.tsx
index 50e6ad5..e7e29ba 100644
--- a/002_source/cms/src/components/dashboard/student/students-filters.tsx
+++ b/002_source/cms/src/components/dashboard/student/students-filters.tsx
@@ -1,11 +1,14 @@
 'use client';
+
 // RULES:
 // T.B.A.
 //
 import * as React from 'react';
 import { useRouter } from 'next/navigation';
+import GetActiveCount from '@/db/Students/GetActiveCount';
 import { getAllStudentsCount } from '@/db/Students/GetAllCount';
-
+import GetBlockedCount from '@/db/Students/GetBlockedCount';
+import GetPendingCount from '@/db/Students/GetPendingCount';
 import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
 import Divider from '@mui/material/Divider';
@@ -21,13 +24,10 @@ import { paths } from '@/paths';
 import { FilterButton } from '@/components/core/filter-button';
 import { Option } from '@/components/core/option';
 
-import { useStudentsSelection } from './students-selection-context';
-import GetBlockedCount from '@/db/Students/GetBlockedCount';
-import GetPendingCount from '@/db/Students/GetPendingCount';
-import GetActiveCount from '@/db/Students/GetActiveCount';
-import PhoneFilterPopover from './phone-filter-popover';
 import EmailFilterPopover from './email-filter-popover';
-import type { StudentFiltersProps, Filters, SortDir } from './type.d';
+import PhoneFilterPopover from './phone-filter-popover';
+import { useStudentsSelection } from './students-selection-context';
+import type { Filters, SortDir, StudentFiltersProps } from './type.d';
 
 export function StudentsFilters({
   filters = {},
@@ -37,7 +37,7 @@ export function StudentsFilters({
 }: StudentFiltersProps): React.JSX.Element {
   const { t } = useTranslation();
 
-  const { email, phone, status } = filters;
+  const { email, phone, state } = filters;
 
   const [totalCount, setTotalCount] = React.useState<number>(0);
   const [activeCount, setActiveCount] = React.useState<number>(0);
@@ -76,8 +76,8 @@ export function StudentsFilters({
         searchParams.set('sortDir', newSortDir);
       }
 
-      if (newFilters.status) {
-        searchParams.set('status', newFilters.status);
+      if (newFilters.state) {
+        searchParams.set('state', newFilters.state);
       }
 
       if (newFilters.email) {
@@ -99,7 +99,7 @@ export function StudentsFilters({
 
   const handleStatusChange = React.useCallback(
     (_: React.SyntheticEvent, value: string) => {
-      updateSearchParams({ ...filters, status: value }, sortDir);
+      updateSearchParams({ ...filters, state: value }, sortDir);
     },
     [updateSearchParams, filters, sortDir]
   );
@@ -125,7 +125,7 @@ export function StudentsFilters({
     [updateSearchParams, filters]
   );
 
-  const hasFilters = status || email || phone;
+  const hasFilters = state || email || phone;
 
   React.useEffect(() => {
     const fetchCount = async (): Promise<void> => {
@@ -151,7 +151,7 @@ export function StudentsFilters({
       <Tabs
         onChange={handleStatusChange}
         sx={{ px: 3 }}
-        value={status ?? ''}
+        value={state ?? ''}
         variant="scrollable"
         //
       >
diff --git a/002_source/cms/src/components/dashboard/student/type.d.ts b/002_source/cms/src/components/dashboard/student/type.d.ts
index a9a2295..e85a327 100644
--- a/002_source/cms/src/components/dashboard/student/type.d.ts
+++ b/002_source/cms/src/components/dashboard/student/type.d.ts
@@ -115,7 +115,7 @@ export interface EditFormProps {
 }
 
 // RULES: filter props for student search and filtering
-export interface CustomersFiltersProps {
+export interface StudentFiltersProps {
   filters?: Filters;
   sortDir?: SortDir;
   fullData: Student[];
@@ -125,5 +125,5 @@ export interface CustomersFiltersProps {
 export interface Filters {
   email?: string;
   phone?: string;
-  status?: string;
+  state?: string;
 }
diff --git a/002_source/cms/src/components/dashboard/teacher/teachers-filters.tsx b/002_source/cms/src/components/dashboard/teacher/teachers-filters.tsx
index 28bdce4..1288682 100644
--- a/002_source/cms/src/components/dashboard/teacher/teachers-filters.tsx
+++ b/002_source/cms/src/components/dashboard/teacher/teachers-filters.tsx
@@ -1,11 +1,14 @@
 'use client';
+
 // RULES:
 // T.B.A.
 //
 import * as React from 'react';
 import { useRouter } from 'next/navigation';
+import GetActiveCount from '@/db/Customers/GetActiveCount';
+import GetBlockedCount from '@/db/Customers/GetBlockedCount';
+import GetPendingCount from '@/db/Customers/GetPendingCount';
 import { getAllTeachersCount } from '@/db/Teachers/GetAllCount';
-
 import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
 import Divider from '@mui/material/Divider';
@@ -18,17 +21,14 @@ import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
+import { logger } from '@/lib/default-logger';
 import { FilterButton } from '@/components/core/filter-button';
 import { Option } from '@/components/core/option';
 
-import { useTeachersSelection } from './teachers-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 { TeachersFiltersProps, Filters, SortDir } from './type.d';
-import { logger } from '@/lib/default-logger';
+import PhoneFilterPopover from './phone-filter-popover';
+import { useTeachersSelection } from './teachers-selection-context';
+import type { Filters, SortDir, TeachersFiltersProps } from './type.d';
 
 export function TeachersFilters({
   filters = {},
@@ -38,7 +38,7 @@ export function TeachersFilters({
 }: TeachersFiltersProps): React.JSX.Element {
   const { t } = useTranslation();
 
-  const { email, phone, status } = filters;
+  const { email, phone, state } = filters;
 
   const [totalCount, setTotalCount] = React.useState<number>(0);
   const [activeCount, setActiveCount] = React.useState<number>(0);
@@ -77,8 +77,8 @@ export function TeachersFilters({
         searchParams.set('sortDir', newSortDir);
       }
 
-      if (newFilters.status) {
-        searchParams.set('status', newFilters.status);
+      if (newFilters.state) {
+        searchParams.set('state', newFilters.state);
       }
 
       if (newFilters.email) {
@@ -100,7 +100,7 @@ export function TeachersFilters({
 
   const handleStatusChange = React.useCallback(
     (_: React.SyntheticEvent, value: string) => {
-      updateSearchParams({ ...filters, status: value }, sortDir);
+      updateSearchParams({ ...filters, state: value }, sortDir);
     },
     [updateSearchParams, filters, sortDir]
   );
@@ -126,7 +126,7 @@ export function TeachersFilters({
     [updateSearchParams, filters]
   );
 
-  const hasFilters = status || email || phone;
+  const hasFilters = state || email || phone;
 
   React.useEffect(() => {
     const fetchCount = async (): Promise<void> => {
@@ -153,7 +153,7 @@ export function TeachersFilters({
       <Tabs
         onChange={handleStatusChange}
         sx={{ px: 3 }}
-        value={status ?? ''}
+        value={state ?? ''}
         variant="scrollable"
         //
       >
@@ -240,8 +240,8 @@ export function TeachersFilters({
           sx={{ maxWidth: '100%', width: '120px' }}
           value={sortDir}
         >
-          <Option value="desc">Newest</Option>
-          <Option value="asc">Oldest</Option>
+          <Option value="desc">{t('newest')}</Option>
+          <Option value="asc">{t('oldest')}</Option>
         </Select>
       </Stack>
     </div>
diff --git a/002_source/cms/src/components/dashboard/teacher/teachers-table.tsx b/002_source/cms/src/components/dashboard/teacher/teachers-table.tsx
index a3eec1f..2790360 100644
--- a/002_source/cms/src/components/dashboard/teacher/teachers-table.tsx
+++ b/002_source/cms/src/components/dashboard/teacher/teachers-table.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 // src/components/dashboard/teacher/teachers-table.tsx
+//
 // PURPOSE:
 // handle change details for teachers collection
 //
@@ -9,21 +10,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';
diff --git a/002_source/cms/src/components/dashboard/teacher/type.d.tsx b/002_source/cms/src/components/dashboard/teacher/type.d.tsx
index 188cd91..f651322 100644
--- a/002_source/cms/src/components/dashboard/teacher/type.d.tsx
+++ b/002_source/cms/src/components/dashboard/teacher/type.d.tsx
@@ -84,5 +84,5 @@ export interface TeachersFiltersProps {
 export interface Filters {
   email?: string;
   phone?: string;
-  status?: string;
+  state?: string;
 }
diff --git a/002_source/cms/src/components/dashboard/user_meta/type.d.ts b/002_source/cms/src/components/dashboard/user_meta/type.d.ts
index b21dd22..16cf98b 100644
--- a/002_source/cms/src/components/dashboard/user_meta/type.d.ts
+++ b/002_source/cms/src/components/dashboard/user_meta/type.d.ts
@@ -123,5 +123,5 @@ export interface UserMetasFiltersProps {
 export interface Filters {
   email?: string;
   phone?: string;
-  status?: string;
+  state?: string;
 }
diff --git a/002_source/cms/src/components/dashboard/user_meta/user-metas-filters.tsx b/002_source/cms/src/components/dashboard/user_meta/user-metas-filters.tsx
index 2844402..cefff38 100644
--- a/002_source/cms/src/components/dashboard/user_meta/user-metas-filters.tsx
+++ b/002_source/cms/src/components/dashboard/user_meta/user-metas-filters.tsx
@@ -39,7 +39,7 @@ export function UserMetasFilters({
 }: UserMetasFiltersProps): React.JSX.Element {
   const { t } = useTranslation();
 
-  const { email, phone, status } = filters;
+  const { email, phone, state } = filters;
 
   const [totalCount, setTotalCount] = React.useState<number>(0);
   const [activeCount, setActiveCount] = React.useState<number>(0);
@@ -78,8 +78,8 @@ export function UserMetasFilters({
         searchParams.set('sortDir', newSortDir);
       }
 
-      if (newFilters.status) {
-        searchParams.set('status', newFilters.status);
+      if (newFilters.state) {
+        searchParams.set('state', newFilters.state);
       }
 
       if (newFilters.email) {
@@ -101,7 +101,7 @@ export function UserMetasFilters({
 
   const handleStatusChange = React.useCallback(
     (_: React.SyntheticEvent, value: string) => {
-      updateSearchParams({ ...filters, status: value }, sortDir);
+      updateSearchParams({ ...filters, state: value }, sortDir);
     },
     [updateSearchParams, filters, sortDir]
   );
@@ -127,7 +127,7 @@ export function UserMetasFilters({
     [updateSearchParams, filters]
   );
 
-  const hasFilters = status || email || phone;
+  const hasFilters = state || email || phone;
 
   React.useEffect(() => {
     const fetchCount = async (): Promise<void> => {
@@ -154,7 +154,7 @@ export function UserMetasFilters({
       <Tabs
         onChange={handleStatusChange}
         sx={{ px: 3 }}
-        value={status ?? ''}
+        value={state ?? ''}
         variant="scrollable"
         //
       >
@@ -241,8 +241,8 @@ export function UserMetasFilters({
           sx={{ maxWidth: '100%', width: '120px' }}
           value={sortDir}
         >
-          <Option value="desc">Newest</Option>
-          <Option value="asc">Oldest</Option>
+          <Option value="desc">{t('newest')}</Option>
+          <Option value="asc">{t('oldest')}</Option>
         </Select>
       </Stack>
     </div>