Merge pull request #16 from internship-humic/feat/project-color

feat(project): menambahkan background_color untuk icon project

prisma/migrations/20260625140149_add_project_background_color/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE `project` ADD COLUMN `background_color` VARCHAR(20) NOT NULL DEFAULT '#BA1A1A';

prisma/schema.prisma

@@ -207,6 +207,7 @@ model Project {
     id_admin     Int //mentor project
     slug         String        @unique @db.VarChar(255)
     project_icon ProjectIcon   @default(code)
+    background_color String        @default("#BA1A1A") @db.VarChar(20)
     project_name String        @db.VarChar(255)
     description  String        @db.Text
     start_date   DateTime      @db.Date

prisma/seed.js

@@ -1,6 +1,7 @@
 const bcrypt = require('bcrypt');
 const { PrismaClient } = require('../src/generated/prisma');
 const prisma = new PrismaClient();
+const { getProjectBackgroundColor } = require('../src/helpers/utils/projectTheme');
 
 // Diperlukan ketika isi databasenya masih kosong dan ingin menambahkan dummy data sebagai testing development [Rafi 08/06/2026 16:34]
 async function main() {
@@ -175,19 +176,19 @@ async function main() {
 
   // 10. Project
   const proj1 = await prisma.project.create({
-    data: { id_admin: admin1.id, project_icon: 'code', project_name: 'Internify Platform Dev', slug: slugify('Internify Platform Dev', 'Project 1 slug'), description: 'Upgrading the core Internify platform backend and web client.', start_date: new Date('2026-07-15'), end_date: new Date('2026-10-15'), status: 'active' }
+    data: { id_admin: admin1.id, project_icon: 'code', background_color: getProjectBackgroundColor('code'), project_name: 'Internify Platform Dev', slug: slugify('Internify Platform Dev', 'Project 1 slug'), description: 'Upgrading the core Internify platform backend and web client.', start_date: new Date('2026-07-15'), end_date: new Date('2026-10-15'), status: 'active' }
   });
   const proj2 = await prisma.project.create({
-    data: { id_admin: admin2.id, project_icon: 'shield', project_name: 'Auth Gateway Module', slug: slugify('Auth Gateway Module', 'Project 2 slug'), description: 'Securing API gateway with unified OAuth2 authentication.', start_date: new Date('2026-07-15'), end_date: new Date('2026-10-15'), status: 'active' }
+    data: { id_admin: admin2.id, project_icon: 'shield', background_color: getProjectBackgroundColor('shield'), project_name: 'Auth Gateway Module', slug: slugify('Auth Gateway Module', 'Project 2 slug'), description: 'Securing API gateway with unified OAuth2 authentication.', start_date: new Date('2026-07-15'), end_date: new Date('2026-10-15'), status: 'active' }
   });
   const proj3 = await prisma.project.create({
-    data: { id_admin: admin1.id, project_icon: 'chart', project_name: 'Recruitment Analytics Dashboard', slug: slugify('Recruitment Analytics Dashboard', 'Project 3 slug'), description: 'Developing analytical charts for recruitment metrics.', start_date: new Date('2026-07-15'), end_date: new Date('2026-10-15'), status: 'active' }
+    data: { id_admin: admin1.id, project_icon: 'chart', background_color: getProjectBackgroundColor('chart'), project_name: 'Recruitment Analytics Dashboard', slug: slugify('Recruitment Analytics Dashboard', 'Project 3 slug'), description: 'Developing analytical charts for recruitment metrics.', start_date: new Date('2026-07-15'), end_date: new Date('2026-10-15'), status: 'active' }
   });
   const proj4 = await prisma.project.create({
-    data: { id_admin: mentor1.id, project_icon: 'gear', project_name: 'Mentor Backend Task Management Project', slug: slugify('Mentor Backend Project', 'Project 4 slug'), description: 'Project owned by mentor for backend project and task management.', start_date: new Date('2026-07-20'), end_date: new Date('2026-10-15'), status: 'active' }
+    data: { id_admin: mentor1.id, project_icon: 'gear', background_color: getProjectBackgroundColor('gear'), project_name: 'Mentor Backend Task Management Project', slug: slugify('Mentor Backend Project', 'Project 4 slug'), description: 'Project owned by mentor for backend project and task management.', start_date: new Date('2026-07-20'), end_date: new Date('2026-10-15'), status: 'active' }
   });
   const proj5 = await prisma.project.create({
-    data: { id_admin: mentor2.id, project_icon: 'clipboard', project_name: 'Mentor UI UX Evaluation Project', slug: slugify('Mentor UI UX Evaluation Project', 'Project 5 slug'), description: 'Project owned by mentor for testing UI/UX mentoring workflow.', start_date: new Date('2026-07-18'), end_date: new Date('2026-10-15'), status: 'active' }
+    data: { id_admin: mentor2.id, project_icon: 'clipboard', background_color: getProjectBackgroundColor('clipboard'), project_name: 'Mentor UI UX Evaluation Project', slug: slugify('Mentor UI UX Evaluation Project', 'Project 5 slug'), description: 'Project owned by mentor for testing UI/UX mentoring workflow.', start_date: new Date('2026-07-18'), end_date: new Date('2026-10-15'), status: 'active' }
   });
 
   // 11. LamaranMagang

src/helpers/utils/projectTheme.js

@@ -0,0 +1,21 @@
+const PROJECT_ICON_BACKGROUND_COLORS = {
+  code: '#BA1A1A', //red
+  chart: '#0088FF', //blue
+  cloud: '#6155F5', //indigo
+  mobile: '#008000', //green
+  gear: '#800080', //purple
+  users: '#FFC0CB', //pink
+  clipboard: '#000000', //black
+  speedometer: '#AC7F5E', //brown
+  lightbulb: '#FF8D28', //orange
+  shield: '#00C0E8', //cyan
+};
+
+function getProjectBackgroundColor(projectIcon) {
+  return PROJECT_ICON_BACKGROUND_COLORS[projectIcon] || '#EEF2FF';
+}
+
+module.exports = {
+  PROJECT_ICON_BACKGROUND_COLORS,
+  getProjectBackgroundColor,
+};

src/modules/project/services/project.service.js

@@ -8,6 +8,7 @@ const {
   ConflictError,
 } = require("../../../helpers/error");
 const { slugify } = require("../../../helpers/utils/slug");
+const { getProjectBackgroundColor } = require("../../../helpers/utils/projectTheme");
 
 class ProjectService {
   async createProject(projectPayload, actor) {
@@ -79,6 +80,7 @@ class ProjectService {
         id_admin: parseInt(actor.id),
         slug: projectSlug,
         project_icon: projectData.project_icon,
+        background_color: getProjectBackgroundColor(projectData.project_icon),
         project_name: projectData.project_name,
         description: projectData.description || "",
         start_date: projectData.start_date,
@@ -116,6 +118,7 @@ class ProjectService {
         id: project.id,
         slug: project.slug,
         project_icon: project.project_icon,
+        background_color: project.background_color,
         project_name: project.project_name,
         description: project.description,
         start_date: project.start_date,
@@ -208,6 +211,10 @@ class ProjectService {
         );
       }
 
+      if (updateData.project_icon !== undefined) {
+        updateData.background_color = getProjectBackgroundColor(updateData.project_icon);
+      }
+
       const updatedProject = await projectRepository.updateById(existingProject.id, updateData);
 
       return data(this.mapProjectDetail(updatedProject));
@@ -300,6 +307,7 @@ class ProjectService {
       id: project.id,
       slug: project.slug,
       project_icon: project.project_icon,
+      background_color: project.background_color,
       project_name: project.project_name,
       description: project.description,
       certificate_template: project.certificate_template,
@@ -370,6 +378,7 @@ class ProjectService {
         id: project.id,
         slug: project.slug,
         project_icon: project.project_icon,
+        background_color: project.background_color,
         project_name: project.project_name,
         description: project.description,
         start_date: project.start_date,
@@ -452,6 +461,7 @@ class ProjectService {
         id: project.id,
         slug: project.slug,
         project_icon: project.project_icon,
+        background_color: project.background_color,
         project_name: project.project_name,
         description: project.description,
         start_date: project.start_date,

src/routes/project.routes.js

@@ -137,6 +137,9 @@ const router = express.Router();
  *         project_icon:
  *           type: string
  *           example: code
+ *         background_color:
+ *           type: string
+ *           example: '#BA1A1A'
  *         project_name:
  *           type: string
  *           example: Internify Platform Dev