feat: enhance project view modal and backend to support new project features

- Updated ProjectViewModal component to display new fields: tagline, key features, and gallery.
- Added parsing for key features and gallery in create and update project actions.
- Extended Project interface to include new fields: tagline, key_features, team_lead, team_members, gallery, and secondary_image.
- Created SQL scripts to check existing columns and migrate the database schema to add new fields with appropriate comments.

Author: japint

apps/codebility/app/(marketing)/services/_components/layout/ServiceDetailView.tsx

@@ -25,6 +25,9 @@ interface ProjectData {
   id: string;
   name: string;
   description?: string;
+  tagline?: string;
+  key_features?: string[];
+  gallery?: string[];
   status?: string;
   start_date?: string;
   end_date?: string;
@@ -55,6 +58,9 @@ const ServicesPage = async () => {
     id: item.id,
     name: item.name,
     description: item.description || "",
+    tagline: item.tagline || "",
+    key_features: item.key_features || [],
+    gallery: item.gallery || [],
     main_image: item.main_image || "",
     website_url: item.website_url || "",
     github_link: item.github_link || "",

apps/codebility/app/(marketing)/services/page.tsx

@@ -180,12 +180,36 @@ export async function createProject(
       }
     }
 
+    // Parse key_features and gallery if provided
+    const keyFeaturesData = formData.get("key_features");
+    let keyFeatures: string[] | null = null;
+    if (keyFeaturesData) {
+      try {
+        keyFeatures = JSON.parse(keyFeaturesData as string) as string[];
+      } catch (error) {
+        console.warn("Invalid key_features data:", error);
+      }
+    }
+
+    const galleryData = formData.get("gallery");
+    let gallery: string[] | null = null;
+    if (galleryData) {
+      try {
+        gallery = JSON.parse(galleryData as string) as string[];
+      } catch (error) {
+        console.warn("Invalid gallery data:", error);
+      }
+    }
+
     // Create project (removed project_category_id as it no longer exists)
     const { data: project, error: projectError } = await supabase
       .from("projects")
       .insert({
         name: formData.get("name"),
         description: formData.get("description"),
+        tagline: formData.get("tagline"),
+        key_features: keyFeatures,
+        gallery: gallery,
         github_link: formData.get("github_link"),
         website_url: formData.get("website_url"),
         figma_link: formData.get("figma_link"),
@@ -379,10 +403,31 @@ export async function updateProject(projectId: string, formData: FormData) {
       }
     }
 
+    // Parse key_features and gallery if provided
+    const keyFeaturesData = formData.get("key_features");
+    let keyFeatures: string[] | null = null;
+    if (keyFeaturesData) {
+      try {
+        keyFeatures = JSON.parse(keyFeaturesData as string) as string[];
+      } catch (error) {
+        console.warn("Invalid key_features data:", error);
+      }
+    }
+
+    const galleryData = formData.get("gallery");
+    let gallery: string[] | null = null;
+    if (galleryData) {
+      try {
+        gallery = JSON.parse(galleryData as string) as string[];
+      } catch (error) {
+        console.warn("Invalid gallery data:", error);
+      }
+    }
+
     // Update project details
     const updateData: any = {};
     for (const [key, value] of formData.entries()) {
-      if (key !== "project_members" && key !== "tech_stack" && key !== "category_ids") {
+      if (key !== "project_members" && key !== "tech_stack" && key !== "category_ids" && key !== "key_features" && key !== "gallery") {
         // Log the key-value pairs to debug
         console.log(`Processing form field: ${key} = ${value}`);
         updateData[key] = value;
@@ -394,6 +439,16 @@ export async function updateProject(projectId: string, formData: FormData) {
       updateData.tech_stack = techStack;
     }
 
+    // Add key_features if provided
+    if (keyFeatures) {
+      updateData.key_features = keyFeatures;
+    }
+
+    // Add gallery if provided
+    if (gallery) {
+      updateData.gallery = gallery;
+    }
+
     // Log the final update data before sending to Supabase
     console.log("Final update data:", JSON.stringify(updateData, null, 2));
 

apps/codebility/app/home/projects/_components/ProjectAddModal.tsx

@@ -113,7 +113,7 @@ export interface Codev {
   date_applied?: string;
   promote_declined?: boolean;
   date_passed?: string;
-  date_joined?: string; 
+  date_joined?: string;
 }
 
 export type ApplicantStatus =
@@ -129,7 +129,7 @@ export type InternalStatus =
   | "INACTIVE"
   | "MENTOR"
   | "ADMIN"
-  | "DEPLOYED"
+  | "DEPLOYED";
 
 export interface ProjectMember {
   id: string;
@@ -182,6 +182,13 @@ export interface Project {
   project_members?: ProjectMember[];
   kanban_display: boolean;
   public_display: boolean;
+  // new fields
+  tagline?: string;
+  key_features?: string[];
+  team_lead?: string;
+  team_members?: string[];
+  gallery?: string[];
+  secondary_image?: string;
 }
 export interface Education {
   id: string;
@@ -217,7 +224,7 @@ export interface Level {
   max_points?: number; // Optional
 }
 
-export type ActiveStatus = 'active' | 'inactive';
+export type ActiveStatus = "active" | "inactive";
 
 export interface CodevFilter {
   positions?: string[];

apps/codebility/app/home/projects/_components/ProjectEditModal.tsx

@@ -0,0 +1,10 @@
+-- Check existing columns in projects table
+SELECT 
+    column_name,
+    data_type,
+    is_nullable,
+    column_default
+FROM information_schema.columns 
+WHERE table_name = 'projects' 
+    AND table_schema = 'public'
+ORDER BY ordinal_position;

apps/codebility/app/home/projects/_components/ProjectViewModal.tsx

@@ -0,0 +1,16 @@
+-- Add new fields to projects table
+ALTER TABLE projects 
+ADD COLUMN IF NOT EXISTS tagline TEXT,
+ADD COLUMN IF NOT EXISTS key_features JSONB,
+ADD COLUMN IF NOT EXISTS gallery JSONB,
+ADD COLUMN IF NOT EXISTS team_lead TEXT,
+ADD COLUMN IF NOT EXISTS team_members JSONB,
+ADD COLUMN IF NOT EXISTS secondary_image TEXT;
+
+-- Add comments for documentation
+COMMENT ON COLUMN projects.tagline IS 'Short catchy tagline for the project';
+COMMENT ON COLUMN projects.key_features IS 'Array of key features as JSON';
+COMMENT ON COLUMN projects.gallery IS 'Array of gallery image URLs as JSON';
+COMMENT ON COLUMN projects.team_lead IS 'ID of the team leader';
+COMMENT ON COLUMN projects.team_members IS 'Array of team member IDs as JSON';
+COMMENT ON COLUMN projects.secondary_image IS 'URL of secondary project image';