```

refactor Student and Teacher create/edit forms to implement i18n support, update UI components, and standardize API calls
```

002_source/cms/src/app/dashboard/students/create/page.tsx

@@ -1,19 +1,25 @@
+'use client';
+
+// src/app/dashboard/students/create/page.tsx
+// PURPOSE
+// T.B.A.
+//
 import * as React from 'react';
-import type { Metadata } from 'next';
 import RouterLink from 'next/link';
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
+import { useTranslation } from 'react-i18next';
 
 import { config } from '@/config';
 import { paths } from '@/paths';
 import { StudentCreateForm } from '@/components/dashboard/student/student-create-form';
 
-export const metadata = { title: `Create | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
-
 export default function Page(): React.JSX.Element {
+  const { t } = useTranslation(['students']);
+
   return (
     <Box
       sx={{
@@ -29,16 +35,19 @@ export default function Page(): React.JSX.Element {
             <Link
               color="text.primary"
               component={RouterLink}
-              href={paths.dashboard.customers.list}
+              href={paths.dashboard.students.list}
               sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
               variant="subtitle2"
             >
               <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
-              Customers
+              {t('students')}
             </Link>
           </div>
           <div>
-            <Typography variant="h4">Create customer</Typography>
+            <Typography variant="h4">
+              {t('create-student')}
+              {/*  */}
+            </Typography>
           </div>
         </Stack>
         <StudentCreateForm />

002_source/cms/src/app/dashboard/students/edit/[id]/page.tsx

@@ -1,6 +1,9 @@
 'use client';
 
-// src/app/dashboard/students/edit/[customerId]/page.tsx
+// src/app/dashboard/students/edit/[id]/page.tsx
+// PURPOSE
+// T.B.A.
+//
 import * as React from 'react';
 import RouterLink from 'next/link';
 import Box from '@mui/material/Box';

002_source/cms/src/app/dashboard/teachers/create/page.tsx

@@ -1,4 +1,9 @@
 'use client';
+
+// src/app/dashboard/teachers/create/page.tsx
+// PURPOSE
+// T.B.A.
+//
 import * as React from 'react';
 import RouterLink from 'next/link';
 import Box from '@mui/material/Box';
@@ -6,12 +11,15 @@ import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/ArrowLeft';
+import { useTranslation } from 'react-i18next';
 
 import { config } from '@/config';
 import { paths } from '@/paths';
 import { TeacherCreateForm } from '@/components/dashboard/teacher/teacher-create-form';
 
 export default function Page(): React.JSX.Element {
+  const { t } = useTranslation(['teachers']);
+
   return (
     <Box
       sx={{
@@ -32,11 +40,14 @@ export default function Page(): React.JSX.Element {
               variant="subtitle2"
             >
               <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
-              Teachers
+              {t('teachers')}
             </Link>
           </div>
           <div>
-            <Typography variant="h4">Create teacher</Typography>
+            <Typography variant="h4">
+              {t('create-teacher')}
+              {/*  */}
+            </Typography>
           </div>
         </Stack>
         <TeacherCreateForm />

002_source/cms/src/app/dashboard/teachers/edit/[id]/page.tsx

@@ -1,5 +1,9 @@
 'use client';
 
+// src/app/dashboard/teachers/edit/[id]/page.tsx
+// PURPOSE
+// T.B.A.
+//
 import * as React from 'react';
 import RouterLink from 'next/link';
 import Box from '@mui/material/Box';
@@ -10,7 +14,8 @@ import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/Arrow
 import { useTranslation } from 'react-i18next';
 
 import { paths } from '@/paths';
-import { CrCategoryEditForm } from '@/components/dashboard/cr/categories/cr-category-edit-form';
+// TODO: remove me
+// import { CrCategoryEditForm } from '@/components/dashboard/cr/categories/cr-category-edit-form';
 import { TeacherEditForm } from '@/components/dashboard/teacher/teacher-edit-form';
 
 export default function Page(): React.JSX.Element {

002_source/cms/src/app/dashboard/user_metas/view/[id]/BasicDetailCard.tsx

@@ -14,7 +14,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 { UserMeta } from '@/components/dashboard/user_meta/type.d';
+import type { UserMeta } from '@/components/dashboard/user_meta/type_move.d';
 
 export default function BasicDetailCard({
   userMeta,

002_source/cms/src/app/dashboard/user_metas/view/[id]/page.tsx

@@ -1,5 +1,9 @@
 'use client';
 
+// src/app/dashboard/user_metas/view/[id]/page.tsx
+// PURPOSE
+// T.B.A.
+//
 import * as React from 'react';
 import RouterLink from 'next/link';
 import { useParams, useRouter } from 'next/navigation';
@@ -7,7 +11,7 @@ import SampleAddressCard from '@/app/dashboard/Sample/AddressCard';
 import { SampleNotifications } from '@/app/dashboard/Sample/Notifications';
 import SamplePaymentCard from '@/app/dashboard/Sample/PaymentCard';
 import SampleSecurityCard from '@/app/dashboard/Sample/SecurityCard';
-
+import { COL_USER_METAS } from '@/constants';
 import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
@@ -21,16 +25,14 @@ import { paths } from '@/paths';
 import { logger } from '@/lib/default-logger';
 import { pb } from '@/lib/pb';
 import { toast } from '@/components/core/toaster';
-
 import ErrorDisplay from '@/components/dashboard/error';
-
+import { defaultUserMeta } from '@/components/dashboard/user_meta/_constants';
 import { Notifications } from '@/components/dashboard/user_meta/notifications';
+import type { UserMeta } from '@/components/dashboard/user_meta/type_move.d';
 import FormLoading from '@/components/loading';
+
 import BasicDetailCard from './BasicDetailCard';
 import TitleCard from './TitleCard';
-import { defaultUserMeta } from '@/components/dashboard/user_meta/_constants';
-import type { UserMeta } from '@/components/dashboard/user_meta/type.d';
-import { COL_USER_METAS } from '@/constants';
 
 export default function Page(): React.JSX.Element {
   const { t } = useTranslation();