fixing

app/[locale]/(admin)/admin/categories/page.tsx

@@ -34,10 +34,10 @@ import { createCategories } from "@/service/categories/categories";
 
 const FormSchema = z.object({
   title: z.string().min(1, "Nama kategori wajib diisi"),
-  slug: z.string().min(1, "Slug wajib diisi"),
+  slug: z.string().optional(), 
   description: z.string().min(1, "Deskripsi wajib diisi"),
-  statusId: z.coerce.number().default(1), // biar default aktif
-  tags: z.string().optional(), // opsional aja kalau belum wajib
+  statusId: z.coerce.number().default(1), 
+  tags: z.string().optional(), 
 });
 
 // helper untuk bikin slug otomatis
@@ -64,22 +64,30 @@ const ReactTableImagePage = () => {
     },
   });
 
+  // const handleTitleChange = (value: string) => {
+  //   form.setValue("title", value);
+  //   const autoSlug = slugify(value);
+  //   if (
+  //     !form.getValues("slug") ||
+  //     form.getValues("slug") ===
+  //       slugify(form.formState.defaultValues?.title || "")
+  //   ) {
+  //     form.setValue("slug", autoSlug);
+  //   }
+  // };
   const handleTitleChange = (value: string) => {
     form.setValue("title", value);
-    const autoSlug = slugify(value);
-    if (
-      !form.getValues("slug") ||
-      form.getValues("slug") ===
-        slugify(form.formState.defaultValues?.title || "")
-    ) {
-      form.setValue("slug", autoSlug);
-    }
+    form.setValue("slug", slugify(value));
   };
 
   const onSubmit = async (data: z.infer<typeof FormSchema>) => {
     loading();
     try {
-      const response = await createCategories(data);
+      const payload = {
+        ...data,
+        slug: slugify(data.title),
+      };
+      const response = await createCategories(payload);
       MySwal.close();
 
       if (response?.error) {
@@ -128,7 +136,7 @@ const ReactTableImagePage = () => {
 
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-default-50">
-      {/* <SiteBreadcrumb /> */}
+      <SiteBreadcrumb />
       <div className="p-6">
         <div className="max-w-7xl mx-auto">
           <Card className="shadow-sm border-0">
@@ -184,7 +192,7 @@ const ReactTableImagePage = () => {
                             />
 
                             {/* Slug */}
-                            <FormField
+                            {/* <FormField
                               control={form.control}
                               name="slug"
                               render={({ field }) => (
@@ -199,7 +207,7 @@ const ReactTableImagePage = () => {
                                   <FormMessage />
                                 </FormItem>
                               )}
-                            />
+                            /> */}
 
                             {/* Deskripsi */}
                             <FormField

app/[locale]/globals.css

@@ -1,6 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import "swiper/css";
+@import "swiper/css/navigation";
 
 /* ================================
    GLOBAL CSS VARIABLE (LIGHT MODE)

components/form/categories/categories-detail-form.tsx

@@ -161,12 +161,12 @@ export default function CategoriesDetailForm() {
                   {formatDateToIndonesian(new Date(detail.createdAt))}
                 </p>
               </div>
-              <div>
+              {/* <div>
                 <Label>Updated At</Label>
                 <p className="text-sm">
                   {formatDateToIndonesian(new Date(detail.updatedAt))}
                 </p>
-              </div>
+              </div> */}
 
               {/* Back Button */}
               <Button

global.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

tsconfig.json

@@ -22,6 +22,6 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "global.d.ts"],
   "exclude": ["node_modules"]
 }