```

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