update init teacher ,

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

@@ -1,5 +1,5 @@
+'use client';
 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';
@@ -9,9 +9,7 @@ import { ArrowLeft as ArrowLeftIcon } from '@phosphor-icons/react/dist/ssr/Arrow
 
 import { config } from '@/config';
 import { paths } from '@/paths';
-import { CustomerCreateForm } from '@/components/dashboard/customer/customer-create-form';
-
-export const metadata = { title: `Create | Customers | Dashboard | ${config.site.name}` } satisfies Metadata;
+import { TeacherCreateForm } from '@/components/dashboard/teacher/teacher-create-form';
 
 export default function Page(): React.JSX.Element {
   return (
@@ -29,19 +27,19 @@ export default function Page(): React.JSX.Element {
             <Link
               color="text.primary"
               component={RouterLink}
-              href={paths.dashboard.customers.list}
+              href={paths.dashboard.teachers.list}
               sx={{ alignItems: 'center', display: 'inline-flex', gap: 1 }}
               variant="subtitle2"
             >
               <ArrowLeftIcon fontSize="var(--icon-fontSize-md)" />
-              Customers
+              Teachers
             </Link>
           </div>
           <div>
-            <Typography variant="h4">Create customer</Typography>
+            <Typography variant="h4">Create teacher</Typography>
           </div>
         </Stack>
-        <CustomerCreateForm />
+        <TeacherCreateForm />
       </Stack>
     </Box>
   );