Perbaikan UI & API Menu Ekonomi Pasar Desa

src/app/admin/(dashboard)/_state/ekonomi/pasar-desa/pasar-desa.ts

@@ -53,11 +53,18 @@ const pasarDesa = proxy({
     },
   },
   findMany: {
-    data: null as
-      | Prisma.PasarDesaGetPayload<{
-          include: { kategori: true; image: true };
-        }>[]
-      | null,
+    data: null as Array<
+      Prisma.PasarDesaGetPayload<{
+        include: {
+          image: true;
+          KategoriToPasar: {
+            include: {
+              kategori: true;
+            };
+          };
+        };
+      }>
+    > | null,
     async load() {
       const res = await ApiFetch.api.ekonomi.pasardesa["find-many"].get();
       if (res.status === 200) {
@@ -67,7 +74,14 @@ const pasarDesa = proxy({
   },
   findUnique: {
     data: null as Prisma.PasarDesaGetPayload<{
-      include: { kategori: true; image: true };
+      include: {
+        image: true;
+        KategoriToPasar: {
+          include: {
+            kategori: true;
+          };
+        };
+      };
     }> | null,
     async load(id: string) {
       try {

src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/[id]/edit/page.tsx

@@ -43,7 +43,8 @@ function EditPasarDesa() {
             alamatUsaha: data.alamatUsaha || "",
             imageId: data.imageId || "",
             rating: data.rating || 0,
-            kategoriId: data.kategori?.map((k: any) => k.nama) || [],
+            // Use the IDs from KategoriToPasar relationship
+            kategoriId: data.KategoriToPasar?.map((k: any) => k.kategoriId) || [],
           });
           // Tampilkan preview gambar
           if (data.image?.link) {
@@ -198,17 +199,19 @@ function EditPasarDesa() {
           />
           <MultiSelect
             value={formData.kategoriId}
-            onChange={(val) => {
-              setFormData({ ...formData, kategoriId: val });
-            }}
+            onChange={(val) => setFormData({ ...formData, kategoriId: val })}
             label={<Text fw={"bold"} fz={"sm"}>Kategori Produk</Text>}
             placeholder='Pilih kategori produk'
             data={
               pasarState.kategoriProduk.findMany.data?.map((v) => ({
-                value: v.id,
+                value: v.id,  // Make sure this is using the ID
                 label: v.nama
               })) || []
             }
+            clearable
+            searchable
+            required
+            error={!formData.kategoriId.length ? "Pilih minimal satu kategori" : undefined}
           />
 
           <Group>

src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/[id]/page.tsx

@@ -17,7 +17,6 @@ function DetailPasarDesa() {
   const router = useRouter();
 
   useShallowEffect(() => {
-    statePasar.kategoriProduk.findUnique.load(params?.id as string)
     statePasar.pasarDesa.findUnique.load(params?.id as string)
   }, [])
 
@@ -73,12 +72,17 @@ function DetailPasarDesa() {
               <Box>
                 <Text fz={"lg"} fw={"bold"}>Kategori</Text>
                 <Stack gap={4}>
-                  {statePasar.pasarDesa.findUnique.data?.kategori?.length > 0 ? (
-                    statePasar.pasarDesa.findUnique.data.kategori.map((kat) => (
-                      <Text fz={"lg"} key={kat.id}>• {kat.nama}</Text>
+                  {statePasar.pasarDesa.findUnique.data?.KategoriToPasar &&
+                    statePasar.pasarDesa.findUnique.data.KategoriToPasar.length > 0 ? (
+                    statePasar.pasarDesa.findUnique.data.KategoriToPasar.map((kategori) => (
+                      <Text fz={"lg"} key={kategori.id}>
+                        • {kategori.kategori.nama}
+                      </Text>
                     ))
                   ) : (
-                    <Text fz={"lg"} c="dimmed">Tidak ada kategori</Text>
+                    <Text fz={"lg"} c="dimmed">
+                      Tidak ada kategori
+                    </Text>
                   )}
                 </Stack>
               </Box>