Fix Compres Gambar && seed gambar profile - landing page

package.json

@@ -80,9 +80,11 @@
     "react-transition-group": "^4.4.5",
     "readdirp": "^4.1.1",
     "recharts": "^2.15.3",
+    "sharp": "^0.34.3",
     "swr": "^2.3.2",
     "uuid": "^11.1.0",
     "valtio": "^2.1.3",
+    "zlib": "^1.0.5",
     "zod": "^3.24.3"
   },
   "devDependencies": {

prisma/data/file-storage.json

@@ -0,0 +1,137 @@
+[
+  {
+    "id": "cmff0rr4z0002vn0twp333m2",
+    "name": "S6RIjFaPvdQm3oq4rM4X9-desktop.webp",
+    "realName": "bares.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/S6RIjFaPvdQm3oq4rM4X9-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff0tnf00003vn0t3kgzi0u0",
+    "name": "_pVNEmThU5ICGa8gv3gh_-desktop.webp",
+    "realName": "bicara-darma.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/_pVNEmThU5ICGa8gv3gh_-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff0uykf0004vn0trmmxpgfh",
+    "name": "bv6rdKvjxkkjUSGLQ0lvB-desktop.webp",
+    "realName": "daves.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/bv6rdKvjxkkjUSGLQ0lvB-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff0z34f0005vn0tjtvq519p",
+    "name": "Z4hWaV04CvoE20MjccQsV-desktop.webp",
+    "realName": "mangan.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/Z4hWaV04CvoE20MjccQsV-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff38cyq000bvn0t9f01cz3f",
+    "name": "LvLAtOqWojx4sn6NjJWB9-desktop.webp",
+    "realName": "gelah-melah.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/LvLAtOqWojx4sn6NjJWB9-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff0zqvd0007vn0tv6o5hjcq",
+    "name": "gR2mcvAQVgJ2-rM5coYJj-desktop.webp",
+    "realName": "inovasi-desa-darmasaba.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/gR2mcvAQVgJ2-rM5coYJj-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff1013m0008vn0th7t0d64d",
+    "name": "JpL-9F8-IGztMn8E2ce02-desktop.webp",
+    "realName": "pdkt.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/JpL-9F8-IGztMn8E2ce02-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff10cwq0009vn0tse8dzu3j",
+    "name": "bxAk4AsGbJTC705_IVdes-desktop.webp",
+    "realName": "sajjiana-dharma-raksaka.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/bxAk4AsGbJTC705_IVdes-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff2w5ly000avn0telhct71k",
+    "name": "Vbj_osnMJUkGEQGDTLwV--desktop.webp",
+    "realName": "perbekel.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/Vbj_osnMJUkGEQGDTLwV--desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff3joae0000vn6h8sgs0ilg",
+    "name": "7hox9spUxj56hY_EBYLnj-desktop.webp",
+    "realName": "youtube.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/7hox9spUxj56hY_EBYLnj-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff3ll130001vn6hkhls3f5y",
+    "name": "ChihV7_1eS-AGtSg9UwMv-desktop.webp",
+    "realName": "gmail.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/ChihV7_1eS-AGtSg9UwMv-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff3mtat0002vn6hs8vyyhdd",
+    "name": "z8v9ZREwOJHKGIRYauROt-desktop.webp",
+    "realName": "facebook.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/z8v9ZREwOJHKGIRYauROt-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff3nv180003vn6h5jvedidq",
+    "name": "BLjMxTKoCNE31uOURR3IU-desktop.webp",
+    "realName": "telephone-call.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/BLjMxTKoCNE31uOURR3IU-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff3oouh0004vn6hd94brzv9",
+    "name": "hkJYAeTNWK_vYaYS20w3I-desktop.webp",
+    "realName": "instagram.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/hkJYAeTNWK_vYaYS20w3I-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff3q12g0005vn6h5ojov2qa",
+    "name": "6XEoZ9SFu59COpil03Gya-desktop.webp",
+    "realName": "tiktok.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/6XEoZ9SFu59COpil03Gya-desktop.webp",
+    "category": "image"
+  }
+]

prisma/data/landing-page/profile/mediaSosial.json

@@ -2,31 +2,37 @@
   {
     "id": "cmds8w2q60002vnbe6i8qhkuo",
     "name": "Telephone Desa Darmasaba",
-    "iconUrl": "081239580000"
+    "iconUrl": "081239580000",
+    "imageId": "cmff3nv180003vn6h5jvedidq"
   },
   {
     "id": "cmds8z7u20005vnbegyyvnbk0",
     "name": "Email Desa Darmasaba",
-    "iconUrl": "desadarmasaba@badungkab.go.id"
+    "iconUrl": "desadarmasaba@badungkab.go.id",
+    "imageId": "cmff3ll130001vn6hkhls3f5y"
   },
   {
     "id": "cmds9023u0008vnbe3oxmhwyf",
     "name": "Desa Darmasaba",
-    "iconUrl": "https://www.youtube.com/channel/UCtPw9WOQO7d2HIKzKgel4Xg"
+    "iconUrl": "https://www.youtube.com/channel/UCtPw9WOQO7d2HIKzKgel4Xg",
+    "imageId": "cmff3joae0000vn6h8sgs0ilg"
   },
   {
     "id": "cmds90oul000bvnbe2bqkptoi",
     "name": "Pemerintah Desa Darmasaba",
-    "iconUrl": "https://www.facebook.com/DarmasabaDesaku"
+    "iconUrl": "https://www.facebook.com/DarmasabaDesaku",
+    "imageId": "cmff3mtat0002vn6hs8vyyhdd"
   },
   {
     "id": "cmds91i4e000evnbe8gtf1gub",
     "name": "ddarmasaba",
-    "iconUrl": "https://www.instagram.com/ddarmasaba/"
+    "iconUrl": "https://www.instagram.com/ddarmasaba/",
+    "imageId": "cmff3oouh0004vn6hd94brzv9"
   },
   {
     "id": "cmds92de5000hvnbemlu6sq5x",
     "name": "desa.darmasaba",
-    "iconUrl": "https://www.tiktok.com/@desa.darmasaba?is_from_webapp=1&sender_device=pc"
+    "iconUrl": "https://www.tiktok.com/@desa.darmasaba?is_from_webapp=1&sender_device=pc",
+    "imageId": "cmff3q12g0005vn6h5ojov2qa"
   }
 ]

prisma/data/landing-page/profile/profile.json

@@ -2,6 +2,7 @@
   {
     "id": "edit",
     "name": "I.B Surya Prabhawa Manuaba, S.H., M.H.",
-    "position": "Perbekel Darmasaba periode 2021-2027"
+    "position": "Perbekel Darmasaba periode 2021-2027",
+    "imageId": "cmff2w5ly000avn0telhct71k"
   }
 ]

prisma/data/landing-page/profile/programInovasi.json

@@ -1,50 +1,51 @@
 [
-  {
-    "id": "cmdr7039z0002vn5rttctt9hn",
-    "name": "Davest",
-    "description": "Darmasaba Village Festval",
-    "link": "https://darmasaba.desa.id/berita/55862-rakor-davest-2024"
-  },
   {
     "id": "cmdr755pf0005vn5rp8tyuubw",
     "name": "Dmangan",
     "description": "Darmasaba Aman Pangan",
-    "link": "https://darmasaba.desa.id/berita/61452-kader-d-mangan-berhasil-meraih-prestasi-dalam-ajang-lomba-banjar-bali-quis-bbq-tahun-2024"
+    "link": "https://darmasaba.desa.id/berita/61452-kader-d-mangan-berhasil-meraih-prestasi-dalam-ajang-lomba-banjar-bali-quis-bbq-tahun-2024",
+    "imageId" : "cmff0z34f0005vn0tjtvq519p"
   },
   {
     "id": "cmdr76nqk0008vn5rdddvcxnr",
     "name": "Bicara Darmasaba",
     "description": "Bicara Darmasaba",
-    "link": "https://darmasaba.desa.id/berita/42506-bicara-darmasaba"
+    "link": "https://darmasaba.desa.id/berita/42506-bicara-darmasaba",
+    "imageId" : "cmff0tnf00003vn0t3kgzi0u0"
   },
   {
     "id": "cmdr77vbw000bvn5rvpmoq31s",
     "name": "Bares",
     "description": "Darmasaba Recycling Stock/Exchange",
-    "link": "http://darmasaba.desa.id/berita/56722-bares"
+    "link": "http://darmasaba.desa.id/berita/56722-bares",
+    "imageId" : "cmff0rr4z0002vn0twp333m2"
   },
   {
     "id": "cmdr7bxtp000evn5rmy85wihx",
     "name": "Sajjana Dharma Raksaka",
     "description": "Sajjana Dharma Raksaka",
-    "link": "https://ppid.badungkab.go.id/storage/dokumen/5RS9dldGkrgzMQq6bKdZsqsVRHI8gffWv4PGfb3r.pdf"
+    "link": "https://ppid.badungkab.go.id/storage/dokumen/5RS9dldGkrgzMQq6bKdZsqsVRHI8gffWv4PGfb3r.pdf",
+    "imageId" : "cmff10cwq0009vn0tse8dzu3j"
   },
   {
     "id": "cmdr7dlnk000hvn5r9lur3z35",
     "name": "PDKT",
     "description": "Perangkat Desa Kuat Teknologi",
-    "link": "https://darmasaba.desa.id/berita/53752-p-d-k-t"
+    "link": "https://darmasaba.desa.id/berita/53752-p-d-k-t",
+    "imageId" : "cmff1013m0008vn0th7t0d64d"
   },
   {
     "id": "cmdr7ftob000mvn5rfhgdtg8v",
     "name": "GM",
     "description": "Galah Melah",
-    "link": "https://darmasaba.desa.id/berita/52880-galah-melah"
+    "link": "https://darmasaba.desa.id/berita/52880-galah-melah",
+    "imageId" : "cmff38cyq000bvn0t9f01cz3f"
   },
   {
     "id": "cmdr7glue000pvn5r6onzslju",
     "name": "Inovasi Desa Darmasaba",
     "description": "Inovasi Desa Darmasaba",
-    "link": "https://darmasaba.desa.id/produk-lokal-desa"
+    "link": "https://darmasaba.desa.id/produk-lokal-desa",
+    "imageId" : "cmff0zqvd0007vn0tv6o5hjcq"
   }
 ]

prisma/schema.prisma

@@ -92,7 +92,7 @@ model FileStorage {
   PejabatDesa                    PejabatDesa[]
   MediaSosial                    MediaSosial[]
   DesaAntiKorupsi                DesaAntiKorupsi[]
-  SDGSDesa                       SDGSDesa[]
+  SDGSDesa                       SdgsDesa[]
   APBDesImage                    APBDes[]                   @relation("APBDesImage")
   APBDesFile                     APBDes[]                   @relation("APBDesFile")
   PrestasiDesa                   PrestasiDesa[]
@@ -168,7 +168,7 @@ model KategoriDesaAntiKorupsi {
 }
 
 //========================================= SDGS Desa ========================================= //
-model SDGSDesa {
+model SdgsDesa {
   id        String       @id @default(cuid())
   name      String       @unique
   jumlah    String

prisma/seed.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import prisma from "@/lib/prisma";
 import profilePejabatDesa from "./data/landing-page/profile/profile.json";
 import programInovasi from "./data/landing-page/profile/programInovasi.json";
@@ -15,7 +16,7 @@ import posisiOrganisasiPPID from "./data/ppid/struktur-ppid/posisi-organisasi-PP
 import visiMisiPPID from "./data/ppid/visi-misi-ppid/visimisiPPID.json";
 import dasarHukumPPID from "./data/ppid/dasar-hukum-ppid/dasarhukumPPID.json";
 import jenisKelamin from "./data/ppid/ikm/jenis-kelamin/jenis-kelamin.json";
-import daftarInformasiPublik from "./data/ppid/daftar-informasi-publik-desa-darmasaba/daftarInformasi.json"
+import daftarInformasiPublik from "./data/ppid/daftar-informasi-publik-desa-darmasaba/daftarInformasi.json";
 import pilihanRatingResponden from "./data/ppid/ikm/pilihan-rating-responden/rating-responden.json";
 import umurResponden from "./data/ppid/ikm/umur-responden/umur-responden.json";
 import categoryPengumuman from "./data/category-pengumuman.json";
@@ -54,63 +55,90 @@ import programUnggulan from "./data/pendidikan/program-pendidikan-anak/program-u
 import tujuanProgram from "./data/pendidikan/program-pendidikan-anak/tujuan-program.json";
 import roles from "./data/user/roles.json";
 import users from "./data/user/users.json";
+import fileStorage from "./data/file-storage.json";
 
 (async () => {
   // =========== USER & ROLE ===========
   // In your seed.ts
-// =========== ROLES ===========
-console.log("🔄 Seeding roles...");
-for (const r of roles) {
-  await prisma.role.upsert({
-    where: { id: r.id },
-    update: {
-      name: r.name,
-      description: r.description,
-      permissions: r.permissions,
-      isActive: r.isActive,
-    },
-    create: {
-      id: r.id,
-      name: r.name,
-      description: r.description,
-      permissions: r.permissions,
-      isActive: r.isActive,
-    },
-  });
-}
-console.log("✅ Roles seeded");
-
-// =========== USERS ===========
-console.log("🔄 Seeding users...");
-for (const u of users) {
-  // First verify the role exists
-  const roleExists = await prisma.role.findUnique({
-    where: { id: u.roleId }
-  });
-  
-  if (!roleExists) {
-    console.error(`❌ Role with id ${u.roleId} not found for user ${u.nama}`);
-    continue;
+  // =========== ROLES ===========
+  console.log("🔄 Seeding roles...");
+  for (const r of roles) {
+    await prisma.role.upsert({
+      where: { id: r.id },
+      update: {
+        name: r.name,
+        description: r.description,
+        permissions: r.permissions,
+        isActive: r.isActive,
+      },
+      create: {
+        id: r.id,
+        name: r.name,
+        description: r.description,
+        permissions: r.permissions,
+        isActive: r.isActive,
+      },
+    });
   }
+  console.log("✅ Roles seeded");
 
-  await prisma.user.upsert({
-    where: { id: u.id },
-    update: {
-      username: u.nama,
-      nomor: u.nomor,
-      roleId: u.roleId,
-      isActive: u.isActive,
-    },
-    create: {
-      id: u.id,
-      username: u.nama,
-      nomor: u.nomor,
-      roleId: u.roleId,
-      isActive: u.isActive,
-    },
-  });
-}
-console.log("✅ Users seeded");
+  // =========== USERS ===========
+  console.log("🔄 Seeding users...");
+  for (const u of users) {
+    // First verify the role exists
+    const roleExists = await prisma.role.findUnique({
+      where: { id: u.roleId },
+    });
+
+    if (!roleExists) {
+      console.error(`❌ Role with id ${u.roleId} not found for user ${u.nama}`);
+      continue;
+    }
+
+    await prisma.user.upsert({
+      where: { id: u.id },
+      update: {
+        username: u.nama,
+        nomor: u.nomor,
+        roleId: u.roleId,
+        isActive: u.isActive,
+      },
+      create: {
+        id: u.id,
+        username: u.nama,
+        nomor: u.nomor,
+        roleId: u.roleId,
+        isActive: u.isActive,
+      },
+    });
+  }
+  console.log("✅ Users seeded");
+
+  // =========== FILE STORAGE ===========
+  console.log("🔄 Seeding file storage...");
+  for (const f of fileStorage) {
+    await prisma.fileStorage.upsert({
+      where: { id: f.id },
+      update: {
+        name: f.name,
+        realName: f.realName,
+        path: f.path,
+        mimeType: f.mimeType,
+        link: f.link,
+        category: f.category,
+      },
+      create: {
+        id: f.id,
+        name: f.name,
+        realName: f.realName,
+        path: f.path,
+        mimeType: f.mimeType,
+        link: f.link,
+        category: f.category,
+      },
+    });
+  }
+  console.log("✅ File storage seeded");
   // =========== LANDING PAGE ===========
   // =========== SUBMENU PROFILE ===========
   // =========== PROFILE PEJABAT DESA ===========
@@ -120,11 +148,13 @@ console.log("✅ Users seeded");
       update: {
         name: p.name,
         position: p.position,
+        imageId: p.imageId,
       },
       create: {
         id: p.id,
         name: p.name,
         position: p.position,
+        imageId: p.imageId,
       },
     });
   }
@@ -134,18 +164,35 @@ console.log("✅ Users seeded");
 
   // =========== PROGRAM INOVASI ===========
   for (const p of programInovasi) {
+    let imageId: string | null = null;
+
+    if (p.imageId) {
+      const imageExists = await prisma.fileStorage.findUnique({
+        where: { id: p.imageId },
+      });
+
+      if (imageExists) {
+        imageId = p.imageId;
+      } else {
+        console.warn(
+          `⚠️ imageId ${p.imageId} tidak ditemukan untuk ProgramInovasi ${p.name}`
+        );
+      }
+    }
     await prisma.programInovasi.upsert({
       where: { id: p.id },
       update: {
         name: p.name,
         description: p.description,
         link: p.link,
+        imageId: p.imageId,
       },
       create: {
         id: p.id,
         name: p.name,
         description: p.description,
         link: p.link,
+        imageId: p.imageId,
       },
     });
   }
@@ -158,11 +205,13 @@ console.log("✅ Users seeded");
       update: {
         name: p.name,
         iconUrl: p.iconUrl,
+        imageId: p.imageId,
       },
       create: {
         id: p.id,
         name: p.name,
         iconUrl: p.iconUrl,
+        imageId: p.imageId,
       },
     });
   }
@@ -308,11 +357,8 @@ console.log("✅ Users seeded");
 
   // =========== SDGSDesa ===========
   for (const l of sdgsDesa) {
-    await prisma.sDGSDesa.upsert({
-      where: {
-        name: l.name,
-        jumlah: l.jumlah,
-      },
+    await prisma.sdgsDesa.upsert({
+      where: { id: l.id },
       update: {
         name: l.name,
         jumlah: l.jumlah,
@@ -558,29 +604,29 @@ console.log("✅ Users seeded");
   }
   console.log("dasar hukum PPID success ...");
 
-    // =========== SUBMENU DAFTAR INFORMASI PUBLIK PPID ===========
-    for (const v of daftarInformasiPublik) {
-      // Convert string date to Date object
-      const tanggal = new Date(v.tanggal);
-      
-      await prisma.daftarInformasiPublik.upsert({
-        where: {
-          id: v.id,
-        },
-        update: {
-          jenisInformasi: v.jenisInformasi,
-          deskripsi: v.deskripsi,
-          tanggal: tanggal,
-        },
-        create: {
-          id: v.id,
-          jenisInformasi: v.jenisInformasi,
-          deskripsi: v.deskripsi,
-          tanggal: tanggal,
-        },
-      });
-    }
-    console.log("daftar informasi publik PPID success ...");
+  // =========== SUBMENU DAFTAR INFORMASI PUBLIK PPID ===========
+  for (const v of daftarInformasiPublik) {
+    // Convert string date to Date object
+    const tanggal = new Date(v.tanggal);
+
+    await prisma.daftarInformasiPublik.upsert({
+      where: {
+        id: v.id,
+      },
+      update: {
+        jenisInformasi: v.jenisInformasi,
+        deskripsi: v.deskripsi,
+        tanggal: tanggal,
+      },
+      create: {
+        id: v.id,
+        jenisInformasi: v.jenisInformasi,
+        deskripsi: v.deskripsi,
+        tanggal: tanggal,
+      },
+    });
+  }
+  console.log("daftar informasi publik PPID success ...");
 
   for (const l of pelayananPerizinanBerusaha) {
     await prisma.pelayananPerizinanBerusaha.upsert({

src/app/_com/SpashScreen.tsx

@@ -23,6 +23,7 @@ export default function SpashScreen() {
       <Paper p={"md"} miw={320}>
         <Flex>
           <Image
+            loading="lazy"
             src={images["darmasaba-icon"]}
             alt="darmasaba"
             w={100}

src/app/admin/(dashboard)/_state/landing-page/profile.ts

@@ -23,7 +23,12 @@ type ProgramInovasiForm = Prisma.ProgramInovasiGetPayload<{
 
 const programInovasi = proxy({
   create: {
-    form: {} as ProgramInovasiForm,
+    form: {
+      name: "",
+      description: "",
+      imageId: "",
+      link: ""
+    } as ProgramInovasiForm,
     loading: false,
     async create() {
       // Ensure all required fields are non-null

src/app/admin/(dashboard)/_state/landing-page/sdgs-desa.ts

@@ -72,7 +72,7 @@ const sdgsDesa = proxy({
         ].get({
           query,
         });
-  
+        
         if (res.status === 200 && res.data?.success) {
           sdgsDesa.findMany.data = res.data.data || [];
           sdgsDesa.findMany.total = res.data.total || 0;
@@ -94,7 +94,7 @@ const sdgsDesa = proxy({
     },
   },
   findUnique: {
-    data: null as Prisma.SDGSDesaGetPayload<{
+    data: null as Prisma.SdgsDesaGetPayload<{
       include: {
         image: true;
       };

src/app/admin/(dashboard)/landing-page/sdgs-desa/[id]/edit/page.tsx

@@ -91,7 +91,7 @@ function EditKolaborasiInovasi() {
 
       await sdgsState.edit.update();
       toast.success("sdgs desa berhasil diperbarui!");
-      router.push("/admin/landing-page/sdgs");
+      router.push("/admin/landing-page/sdgs-desa");
     } catch (error) {
       console.error("Error updating sdgs desa:", error);
       toast.error("Terjadi kesalahan saat memperbarui sdgs desa");
@@ -107,7 +107,7 @@ function EditKolaborasiInovasi() {
           </Button>
         </Tooltip>
         <Title order={4} ml="sm" c="dark">
-          Edit SDGs Desa
+          Edit Sdgs Desa
         </Title>
       </Group>
 
@@ -122,7 +122,7 @@ function EditKolaborasiInovasi() {
         <Stack gap="md">
           <Box>
             <Text fw="bold" fz="sm" mb={6}>
-              Gambar SDGs Desa
+              Gambar Sdgs Desa
             </Text>
             <Dropzone
               onDrop={(files) => {
@@ -172,8 +172,8 @@ function EditKolaborasiInovasi() {
           </Box>
 
           <TextInput
-            label="Nama SDGs Desa"
-            placeholder="Masukkan nama SDGs Desa"
+            label="Nama Sdgs Desa"
+            placeholder="Masukkan nama Sdgs Desa"
             value={formData.name}
             onChange={(e) => setFormData({ ...formData, name: e.target.value })}
             required

src/app/admin/(dashboard)/landing-page/sdgs-desa/[id]/page.tsx

@@ -27,7 +27,7 @@ function DetailSDGSDesa() {
       sdgsState.delete.byId(selectedId)
       setModalHapus(false)
       setSelectedId(null)
-      router.push("/admin/landing-page/sdgs")
+      router.push("/admin/landing-page/sdgs-desa")
     }
   }
 
@@ -62,13 +62,13 @@ function DetailSDGSDesa() {
       >
         <Stack gap="md">
           <Text fz="2xl" fw="bold" c={colors['blue-button']}>
-            Detail SDGs Desa
+            Detail Sdgs Desa
           </Text>
 
           <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
             <Stack gap="md">
               <Box>
-                <Text fz="lg" fw="bold" mb={4}>Nama SDGs Desa</Text>
+                <Text fz="lg" fw="bold" mb={4}>Nama Sdgs Desa</Text>
                 <Text fz="md" c="dimmed">{data.name || '-'}</Text>
               </Box>
 
@@ -82,7 +82,7 @@ function DetailSDGSDesa() {
                 {data.image?.link ? (
                   <Image
                     src={data.image.link}
-                    alt={data.name || 'Gambar SDGs Desa'}
+                    alt={data.name || 'Gambar Sdgs Desa'}
                     w={200}
                     h={200}
                     radius="md"
@@ -94,7 +94,7 @@ function DetailSDGSDesa() {
               </Box>
 
               <Group gap="sm" mt="md">
-                <Tooltip label="Hapus SDGs Desa" withArrow position="top">
+                <Tooltip label="Hapus Sdgs Desa" withArrow position="top">
                   <Button
                     color="red"
                     onClick={() => {
@@ -110,10 +110,10 @@ function DetailSDGSDesa() {
                   </Button>
                 </Tooltip>
 
-                <Tooltip label="Edit SDGs Desa" withArrow position="top">
+                <Tooltip label="Edit Sdgs Desa" withArrow position="top">
                   <Button
                     color="green"
-                    onClick={() => router.push(`/admin/landing-page/sdgs/${data.id}/edit`)}
+                    onClick={() => router.push(`/admin/landing-page/sdgs-desa/${data.id}/edit`)}
                     variant="light"
                     radius="md"
                     size="md"
@@ -131,7 +131,7 @@ function DetailSDGSDesa() {
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text="Apakah Anda yakin ingin menghapus SDGs Desa ini?"
+        text="Apakah Anda yakin ingin menghapus Sdgs Desa ini?"
       />
     </Box>
   );

src/app/admin/(dashboard)/landing-page/sdgs-desa/create/page.tsx

@@ -53,7 +53,7 @@ function CreateSDGsDesa() {
     await stateSDGSDesa.create.create();
 
     resetForm();
-    router.push("/admin/landing-page/sdgs")
+    router.push("/admin/landing-page/sdgs-desa")
   }
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
@@ -64,7 +64,7 @@ function CreateSDGsDesa() {
           </Button>
         </Tooltip>
         <Title order={4} ml="sm" c="dark">
-          Tambah SDGs Desa
+          Tambah Sdgs Desa
         </Title>
       </Group>
 
@@ -79,7 +79,7 @@ function CreateSDGsDesa() {
         <Stack gap="md">
           <Box>
             <Text fw="bold" fz="sm" mb={6}>
-              Gambar SDGs Desa
+              Gambar Sdgs Desa
             </Text>
             <Dropzone
               onDrop={(files) => {
@@ -143,10 +143,10 @@ function CreateSDGsDesa() {
           <TextInput
             label={
               <Text fw="bold" fz="sm" mb={4}>
-                Nama SDGs Desa
+                Nama Sdgs Desa
               </Text>
             }
-            placeholder="Masukkan nama SDGs Desa"
+            placeholder="Masukkan nama Sdgs Desa"
             value={stateSDGSDesa.create.form.name}
             onChange={(val) => {
               stateSDGSDesa.create.form.name = val.target.value;

src/app/admin/(dashboard)/landing-page/sdgs-desa/page.tsx

@@ -15,8 +15,8 @@ function SdgsDesa() {
   return (
     <Box>
       <HeaderSearch
-        title='SDGs Desa'
-        placeholder='Cari SDGs Desa...'
+        title='Sdgs Desa'
+        placeholder='Cari Sdgs Desa...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -58,13 +58,13 @@ function ListSdgsDesa({ search }: { search: string }) {
       <Box py={10}>
         <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
           <Group justify="space-between" mb="md">
-            <Title order={4}>Daftar SDGs Desa</Title>
-            <Tooltip label="Tambah SDGs Desa" withArrow>
+            <Title order={4}>Daftar Sdgs Desa</Title>
+            <Tooltip label="Tambah Sdgs Desa" withArrow>
               <Button 
                 leftSection={<IconPlus size={18} />} 
                 color={colors['blue-button']} 
                 variant="light"
-                onClick={() => router.push('/admin/landing-page/sdgs/create')}
+                onClick={() => router.push('/admin/landing-page/sdgs-desa/create')}
               >
                 Tambah Baru
               </Button>
@@ -74,7 +74,7 @@ function ListSdgsDesa({ search }: { search: string }) {
             <Table>
               <TableThead>
                 <TableTr>
-                  <TableTh style={{ width: '60%' }}>Nama SDGs Desa</TableTh>
+                  <TableTh style={{ width: '60%' }}>Nama Sdgs Desa</TableTh>
                   <TableTh style={{ width: '20%' }}>Jumlah</TableTh>
                   <TableTh style={{ width: '20%', textAlign: 'center' }}>Aksi</TableTh>
                 </TableTr>
@@ -82,7 +82,7 @@ function ListSdgsDesa({ search }: { search: string }) {
               <TableTbody>
                 <TableTr>
                   <TableTd colSpan={3} style={{ textAlign: 'center', padding: '2rem' }}>
-                    <Text c="dimmed">Tidak ada data SDGs Desa</Text>
+                    <Text c="dimmed">Tidak ada data Sdgs Desa</Text>
                   </TableTd>
                 </TableTr>
               </TableTbody>
@@ -97,13 +97,13 @@ function ListSdgsDesa({ search }: { search: string }) {
     <Box py={10}>
       <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
         <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar SDGs Desa</Title>
-          <Tooltip label="Tambah SDGs Desa" withArrow>
+          <Title order={4}>Daftar Sdgs Desa</Title>
+          <Tooltip label="Tambah Sdgs Desa" withArrow>
             <Button 
               leftSection={<IconPlus size={18} />} 
               color={colors['blue-button']} 
               variant="light" 
-              onClick={() => router.push('/admin/landing-page/sdgs/create')}
+              onClick={() => router.push('/admin/landing-page/sdgs-desa/create')}
             >
               Tambah Baru
             </Button>
@@ -113,7 +113,7 @@ function ListSdgsDesa({ search }: { search: string }) {
           <Table highlightOnHover>
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '60%' }}>Nama SDGs Desa</TableTh>
+                <TableTh style={{ width: '60%' }}>Nama Sdgs Desa</TableTh>
                 <TableTh style={{ width: '20%' }}>Jumlah</TableTh>
                 <TableTh style={{ width: '20%', textAlign: 'center' }}>Aksi</TableTh>
               </TableTr>
@@ -137,7 +137,7 @@ function ListSdgsDesa({ search }: { search: string }) {
                         variant="light" 
                         color="blue" 
                         size="sm"
-                        onClick={() => router.push(`/admin/landing-page/sdgs/${item.id}`)}
+                        onClick={() => router.push(`/admin/landing-page/sdgs-desa/${item.id}`)}
                       >
                         <IconDeviceImacCog size={18} />
                       </Button>

src/app/admin/_com/list_PageAdmin.tsx

@@ -21,8 +21,8 @@ export const navBar = [
       },
       {
         id: "Landing_Page_4",
-        name: "SDGs Desa",
-        path: "/admin/landing-page/sdgs"
+        name: "Sdgs Desa",
+        path: "/admin/landing-page/sdgs-desa"
       },
       {
         id: "Landing_Page_5",

src/app/api/[[...slugs]]/_lib/fileStorage/_lib/create.ts

@@ -3,6 +3,8 @@ import { Context } from "elysia";
 import fs from "fs/promises";
 import path from "path";
 import { nanoid } from "nanoid";
+import sharp from "sharp";
+import zlib from "zlib";
 
 const UPLOAD_DIR = process.env.WIBU_UPLOAD_DIR;
 
@@ -11,6 +13,7 @@ const fileStorageCreate = async (context: Context) => {
     name: string;
     file: File;
   };
+
   const file = body.file;
   const name = body.name;
 
@@ -18,7 +21,6 @@ const fileStorageCreate = async (context: Context) => {
   if (!name) return { status: 400, body: "No name provided" };
   if (!UPLOAD_DIR) return { status: 500, body: "UPLOAD_DIR is not defined" };
 
-  // Tentukan kategori berdasarkan mimeType
   const isImage = file.type.startsWith("image/");
   const category = isImage ? "image" : "document";
 
@@ -26,25 +28,54 @@ const fileStorageCreate = async (context: Context) => {
   const rootPath = path.join(UPLOAD_DIR, pathName);
   await fs.mkdir(rootPath, { recursive: true });
 
-  const ext = file.name.split(".").pop();
-  const newName = nanoid() + "." + ext;
+  // Convert File ke Buffer
+  const buffer = Buffer.from(await file.arrayBuffer());
+  let finalName = nanoid();
+  let finalMimeType = file.type;
+
+  if (isImage) {
+    // Simpan sebagai WebP untuk kompresi maksimal
+    const mobileBuffer = await sharp(buffer)
+      .resize({ width: 720 })
+      .webp({ quality: 80 })
+      .toBuffer();
+
+    const desktopBuffer = await sharp(buffer)
+      .resize({ width: 1920, withoutEnlargement: true })
+      .webp({ quality: 80 })
+      .toBuffer();
+
+    const mobileName = `${finalName}-mobile.webp`;
+    const desktopName = `${finalName}-desktop.webp`;
+
+    await fs.writeFile(path.join(rootPath, mobileName), mobileBuffer);
+    await fs.writeFile(path.join(rootPath, desktopName), desktopBuffer);
+
+    // Simpan metadata untuk versi desktop sebagai default
+    finalName = desktopName;
+    finalMimeType = "image/webp";
+  } else {
+    // Kompres dokumen (opsional pakai gzip)
+    const gzBuffer = zlib.gzipSync(buffer);
+    const docName = `${finalName}.gz`;
+
+    await fs.writeFile(path.join(rootPath, docName), gzBuffer);
+
+    finalName = docName;
+    finalMimeType = "application/gzip";
+  }
 
   const data = await prisma.fileStorage.create({
     data: {
-      name: newName,
+      name: finalName,
       realName: file.name,
       path: rootPath,
-      mimeType: file.type,
+      mimeType: finalMimeType,
       category,
-      link: `/api/fileStorage/findUnique/${newName}`,
+      link: `/api/fileStorage/findUnique/${finalName}`,
     },
   });
 
-  await fs.writeFile(
-    path.join(rootPath, newName),
-    Buffer.from(await file.arrayBuffer())
-  );
-
   return { data };
 };
 

src/app/api/[[...slugs]]/_lib/landing_page/sdgs-desa/create.ts

@@ -11,7 +11,7 @@ export default async function sdgsDesaCreate(context: Context) {
   const body = context.body as FormCreate;
 
   try {
-    const result = await prisma.sDGSDesa.create({
+    const result = await prisma.sdgsDesa.create({
       data: {
         name: body.name,
         jumlah: body.jumlah,

src/app/api/[[...slugs]]/_lib/landing_page/sdgs-desa/del.ts

@@ -9,7 +9,7 @@ export default async function sdgsDesaDelete(context: Context) {
     throw new Error("ID tidak ditemukan dalam parameter");
   }
 
-  const deleted = await prisma.sDGSDesa.delete({
+  const deleted = await prisma.sdgsDesa.delete({
     where: { id },
   });
 

src/app/api/[[...slugs]]/_lib/landing_page/sdgs-desa/findMany.ts

@@ -21,7 +21,7 @@ async function sdgsDesaFindMany(context: Context) {
 
   try {
     const [data, total] = await Promise.all([
-      prisma.sDGSDesa.findMany({
+      prisma.sdgsDesa.findMany({
         where,
         include: {
           image: true,
@@ -30,7 +30,7 @@ async function sdgsDesaFindMany(context: Context) {
         take: limit,
         orderBy: { jumlah: "desc" }, // opsional, kalau mau urut berdasarkan waktu
       }),
-      prisma.sDGSDesa.count({
+      prisma.sdgsDesa.count({
         where,
       }),
     ]);

src/app/api/[[...slugs]]/_lib/landing_page/sdgs-desa/findUnique.ts

@@ -9,7 +9,7 @@ export default async function sdgsDesaFindUnique(context: Context) {
     throw new Error("ID tidak ditemukan dalam parameter");
   }
 
-  const data = await prisma.sDGSDesa.findUnique({
+  const data = await prisma.sdgsDesa.findUnique({
     where: { id },
     include: {
       image: true,

src/app/api/[[...slugs]]/_lib/landing_page/sdgs-desa/updt.ts

@@ -21,7 +21,7 @@ export default async function sdgsDesaUpdate(context: Context) {
   }
 
   try {
-    const updated = await prisma.sDGSDesa.update({
+    const updated = await prisma.sdgsDesa.update({
       where: { id },
       data: {
         name: body.name,

src/app/darmasaba/(tambahan)/sdgs-desa/page.tsx

@@ -7,7 +7,7 @@ import BackButton from '../../(pages)/desa/layanan/_com/BackButto';
 import colors from '@/con/colors';
 
 function Page() {
-  const [sdgsDesa, setSdgsDesa] = useState<Prisma.SDGSDesaGetPayload<{ include: { image: true } }>[]>([]);
+  const [sdgsDesa, setSdgsDesa] = useState<Prisma.SdgsDesaGetPayload<{ include: { image: true } }>[]>([]);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {

src/app/darmasaba/_com/main-page/sdgs/index.tsx

@@ -9,7 +9,7 @@ import { IconMoodSad } from "@tabler/icons-react"
 export default function SDGS() {
   const theme = useMantineTheme()
   const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`)
-  const [sdgsDesa, setSdgsDesa] = useState<Prisma.SDGSDesaGetPayload<{ include: { image: true } }>[] | null>(null)
+  const [sdgsDesa, setSdgsDesa] = useState<Prisma.SdgsDesaGetPayload<{ include: { image: true } }>[] | null>(null)
 
   useEffect(() => {
     const fetchSdgsDesa = async () => {