From 9554674c79ea197d67fbfc585515a8523a969bdd Mon Sep 17 00:00:00 2001 From: Yolando Date: Fri, 3 Apr 2026 18:29:10 +0700 Subject: [PATCH] feat: implement project showcase section with database integration, filtering, and detail modals --- issue.md | 335 ------------------ messages/en.json | 5 +- messages/id.json | 7 +- .../migration.sql | 4 + .../migration.sql | 2 + prisma/schema.prisma | 5 + ...214382728-Screenshot_2026-03-28_205042.png | Bin 0 -> 184739 bytes ...214826581-Screenshot_2026-03-28_205042.png | Bin 0 -> 184739 bytes src/app/api/admin/projects/[id]/route.ts | 37 +- src/app/api/admin/projects/route.ts | 31 +- src/features/projects/actions.ts | 16 +- .../projects/project-detail-modal.tsx | 265 ++++++++++++++ src/features/projects/project-form.tsx | 170 +++++++-- src/features/projects/project-schema.ts | 3 + src/features/projects/projects-section.tsx | 53 ++- test-db.ts | 8 + 16 files changed, 550 insertions(+), 391 deletions(-) delete mode 100644 issue.md create mode 100644 prisma/migrations/20260403110208_add_project_details/migration.sql create mode 100644 prisma/migrations/20260403112327_add_image_urls_array/migration.sql create mode 100644 public/uploads/1775214382728-Screenshot_2026-03-28_205042.png create mode 100644 public/uploads/1775214826581-Screenshot_2026-03-28_205042.png create mode 100644 src/features/projects/project-detail-modal.tsx create mode 100644 test-db.ts diff --git a/issue.md b/issue.md deleted file mode 100644 index a30ec58..0000000 --- a/issue.md +++ /dev/null @@ -1,335 +0,0 @@ -# Issue: Peningkatan Bagian Proyek (Project Section Enhancement) - -## Deskripsi -Setiap kartu proyek perlu diperkaya dengan informasi tambahan: **tech stack**, **keterangan lengkap**, **interaksi klik untuk detail**, **tahun pengerjaan**, dan **target/pencapaian** yang berhasil tercapai. - ---- - -## Langkah-langkah Implementasi - -### Langkah 1 — Update Skema Prisma (Database) - -**File:** `prisma/schema.prisma` - -Tambahkan kolom baru pada model `Project`: - -```prisma -model Project { - // ... field yang sudah ada ... - - techStack String[] // array nama teknologi, e.g. ["Java", "Spring Boot", "PostgreSQL"] - year Int? // tahun pengerjaan, e.g. 2024 - highlights String[] // target/pencapaian, e.g. ["Reduce latency 40%", "10K daily users"] -} -``` - -Setelah edit schema, jalankan migrasi: -```bash -npx prisma migrate dev --name add_project_details -npx prisma generate -``` - ---- - -### Langkah 2 — Update Zod Schema Validasi - -**File:** `src/features/projects/project-schema.ts` - -Tambahkan field baru ke `projectSchema`: - -```ts -techStack: z.string().optional(), // dikirim sebagai string CSV dari form, e.g. "Java,Spring Boot,Docker" -year: z.coerce.number().optional(), -highlights: z.string().optional(), // dikirim sebagai string CSV, e.g. "Reduce latency 40%,10K users" -``` - -> Catatan: Field diproses sebagai CSV string di form, lalu di-parse menjadi `String[]` sebelum disimpan ke DB. - ---- - -### Langkah 3 — Update Server Action (Create & Update) - -**File:** `src/features/projects/actions.ts` - -Di fungsi `createProjectAction` dan `updateProjectAction`, tambahkan parsing: - -```ts -const rawTechStack = formData.get("techStack") as string; -const rawHighlights = formData.get("highlights") as string; - -// Di blok prisma.project.create / prisma.project.update: -techStack: rawTechStack ? rawTechStack.split(",").map(s => s.trim()) : [], -year: formData.get("year") ? Number(formData.get("year")) : null, -highlights: rawHighlights ? rawHighlights.split(",").map(s => s.trim()) : [], -``` - ---- - -### Langkah 4 — Update Form Admin (Tambah Field Baru) - -**File:** `src/features/projects/project-form.tsx` - -Tambahkan tiga input baru di dalam `
`: - -#### 4a. Tech Stack (input teks, pisahkan dengan koma) -```tsx -
- - -

Pisahkan setiap teknologi dengan koma

-
-``` - -#### 4b. Tahun Pengerjaan (input number) -```tsx -
- - -
-``` - -#### 4c. Pencapaian / Highlights (input teks, pisahkan dengan koma) -```tsx -
- -