Merge pull request #44 from Arjuna-Ragil/feat/40-project-dash-design

Arjuna-Ragil · web-flow · commit 39bc5290c65f · 2026-02-04T19:04:47.000+07:00
feat: Project internal dashboard added with data fetch
diff --git a/Internal/adapters/repository/projectRepo.go b/Internal/adapters/repository/projectRepo.go
@@ -25,3 +25,11 @@ func (pr *ProjectRepo) FetchProjects(projects []domain.Project) ([]domain.Projec
 	}
 	return projects, nil
 }
+
+func (pr *ProjectRepo) ProjectById(id string) (*domain.Project, error) {
+	var project domain.Project
+	if err := pr.DB.Gorm.First(&project, id).Error; err != nil {
+		return nil, err
+	}
+	return &project, nil
+}
diff --git a/Internal/api/Routes/routev1.go b/Internal/api/Routes/routev1.go
@@ -51,6 +51,7 @@ func SetupRouterV1(r *gin.Engine, deps Deps) {
 			project := protected.Group("/project")
 			{
 				project.GET("/projects", deps.Project.GetAllProjectHandler)
+				project.GET("/:projectid", deps.Project.GetProjectHandler)
 			}
 		}
 	}
diff --git a/Internal/api/handlers/projectHandler.go b/Internal/api/handlers/projectHandler.go
@@ -61,3 +61,19 @@ func (ph *ProjectHandler) GetAllProjectHandler(c *gin.Context) {
 		"data":    projects,
 	})
 }
+
+func (ph *ProjectHandler) GetProjectHandler(c *gin.Context) {
+	projectId := c.Param("projectid")
+	project, err := ph.ProjectService.GetProjectById(projectId)
+	if err != nil {
+		c.JSON(500, gin.H{
+			"message": "failed to get project",
+			"data":    err.Error(),
+		})
+		return
+	}
+	c.JSON(200, gin.H{
+		"message": "success in fetching project",
+		"data":    project,
+	})
+}
diff --git a/Internal/api/middleware/auth.go b/Internal/api/middleware/auth.go
@@ -27,6 +27,7 @@ func AuthMiddleware(userRepo *repository.UserRepository, cfg *config.Config) gin
 					"message": "Authorization header not found",
 					"data":    err.Error(),
 				})
+				c.Abort()
 				return
 			}
 			parts := strings.Split(authHeader, " ")
diff --git a/Internal/core/services/projectService.go b/Internal/core/services/projectService.go
@@ -45,3 +45,11 @@ func (ps *ProjectService) GetProjects(Role string) ([]domain.Project, error) {
 	}
 	return project, nil
 }
+
+func (ps *ProjectService) GetProjectById(id string) (*domain.Project, error) {
+	project, err := ps.ProjectRepo.ProjectById(id)
+	if err != nil {
+		return nil, err
+	}
+	return project, nil
+}
diff --git a/Lb-web/src/features/project/components/CreateProjectModal.tsx b/Lb-web/src/features/project/components/CreateProjectModal.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
+import { Textarea } from "../../../components/ui/textarea";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { useAuth } from "@/features/Login/context/AuthContext";
diff --git a/Lb-web/src/features/project/pages/ProjectDashboard.tsx b/Lb-web/src/features/project/pages/ProjectDashboard.tsx
@@ -0,0 +1,113 @@
+import { useEffect, useState } from "react";
+import { useParams, Link } from "react-router";
+import { projectService } from "../services/projectService";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft, LayoutDashboard, Settings } from "lucide-react";
+
+
+export default function ProjectDashboard() {
+    const { id } = useParams<{ id: string }>();
+    const [project, setProject] = useState<{ id: number; name: string; desc: string; created_at: string } | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        const fetchProject = async () => {
+            if (!id) return;
+            setIsLoading(true);
+            try {
+                const data = await projectService.getProjectById(id);
+                setProject(data);
+            } catch (err: any) { // eslint-disable-line @typescript-eslint/no-explicit-any
+                setError("Failed to load project details.");
+                console.error(err);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchProject();
+    }, [id]);
+
+    if (isLoading) {
+        return (
+            <div className="flex items-center justify-center h-screen bg-slate-50">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-sky-600"></div>
+            </div>
+        );
+    }
+
+    if (error || !project) {
+        return (
+            <div className="flex flex-col items-center justify-center h-screen bg-slate-50">
+                <h2 className="text-2xl font-bold text-sky-900 mb-4">{error || "Project not found"}</h2>
+                <Link to="/">
+                    <Button variant="outline">
+                        <ArrowLeft className="mr-2 h-4 w-4" />
+                        Back to Home
+                    </Button>
+                </Link>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex flex-col h-screen bg-slate-50 relative overflow-hidden">
+            {/* Subtle Background */}
+            <div className="absolute inset-0 bg-[linear-gradient(to_right,#e0f2fe_1px,transparent_1px),linear-gradient(to_bottom,#e0f2fe_1px,transparent_1px)] bg-size-[24px_24px] mask-[radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] opacity-90 pointer-events-none"></div>
+
+            {/* Sidebar (Mockup for now, or just a simple header) */}
+            {/* Let's stick to a clean layout similar to Home but focused on the project */}
+
+            <header className="flex items-center justify-between px-6 py-4 bg-white/50 backdrop-blur-md border-b border-sky-100 z-20">
+                <div className="flex items-center space-x-4">
+                    <Link to="/">
+                        <Button variant="ghost" size="icon" className="text-sky-700 hover:text-sky-900 hover:bg-sky-100">
+                            <ArrowLeft className="h-5 w-5" />
+                        </Button>
+                    </Link>
+                    <div>
+                        <h1 className="text-xl font-bold text-sky-900 tracking-tight">{project.name}</h1>
+                        <p className="text-xs text-sky-500 font-medium">Project Dashboard</p>
+                    </div>
+                </div>
+                <div className="flex items-center space-x-2">
+                    <Button variant="ghost" size="icon" className="text-sky-700 hover:text-sky-900 hover:bg-sky-100">
+                        <LayoutDashboard className="h-5 w-5" />
+                    </Button>
+                    <Button variant="ghost" size="icon" className="text-sky-700 hover:text-sky-900 hover:bg-sky-100">
+                        <Settings className="h-5 w-5" />
+                    </Button>
+                </div>
+            </header>
+
+            <main className="flex-1 p-8 z-10 overflow-y-auto">
+                <div className="max-w-5xl mx-auto">
+                    <div className="bg-white/60 backdrop-blur-sm p-8 rounded-2xl shadow-sm border border-sky-100 mb-8">
+                        <h2 className="text-2xl font-semibold text-sky-900 mb-4">Welcome to {project.name}</h2>
+                        <p className="text-sky-700/80 leading-relaxed mb-6">
+                            {project.desc || "No description provided for this project."}
+                        </p>
+                        <div className="flex items-center space-x-4 text-sm text-sky-500">
+                            <span>Created on {new Date(project.created_at).toLocaleDateString()}</span>
+                            {/* Potential place for more stats like '3 Members', '5 Tasks', etc. */}
+                        </div>
+                    </div>
+
+                    {/* Placeholder for future dashboard widgets */}
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                        <div className="bg-white/40 backdrop-blur-sm p-6 rounded-xl border border-sky-100 h-48 flex items-center justify-center text-sky-300">
+                            Widget Placeholder
+                        </div>
+                        <div className="bg-white/40 backdrop-blur-sm p-6 rounded-xl border border-sky-100 h-48 flex items-center justify-center text-sky-300">
+                            Widget Placeholder
+                        </div>
+                        <div className="bg-white/40 backdrop-blur-sm p-6 rounded-xl border border-sky-100 h-48 flex items-center justify-center text-sky-300">
+                            Widget Placeholder
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+    );
+}
diff --git a/Lb-web/src/features/project/services/projectService.ts b/Lb-web/src/features/project/services/projectService.ts
@@ -23,5 +23,9 @@ export const projectService = {
     getProjects: async (): Promise<Project[]> => {
         const response = await api.get('/protected/project/projects');
         return response.data.data;
+    },
+    getProjectById: async (id: string): Promise<Project> => {
+        const response = await api.get(`/protected/project/${id}`);
+        return response.data.data;
     }
 };
diff --git a/Lb-web/src/main.tsx b/Lb-web/src/main.tsx
@@ -11,6 +11,7 @@ import { ProtectedRoute, PublicRoute, AdminRoute } from './features/Login/compon
 import SettingsLayout from './features/admin-setting/layout/SettingsLayout.tsx'
 import UserManagement from './features/admin-setting/pages/UserManagement.tsx'
 import Appearance from './features/admin-setting/pages/Appearance.tsx'
+import ProjectDashboard from './features/project/pages/ProjectDashboard.tsx'
 
 const router = createBrowserRouter([
   {
@@ -60,6 +61,10 @@ const router = createBrowserRouter([
             element: <Navigate to="appearance" replace />
           }
         ]
+      },
+      {
+        path: 'project/:id',
+        element: <ProjectDashboard />
       }
     ]
   }
diff --git a/Lb-web/src/pages/Home.tsx b/Lb-web/src/pages/Home.tsx
@@ -121,20 +121,22 @@ export default function Home() {
                         </div>
                         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                             {projects.map((project: { id: number; name: string; desc: string; created_at: string }) => (
-                                <div key={project.id} className="bg-white/60 backdrop-blur-sm p-6 rounded-2xl shadow-sm border border-sky-100 hover:shadow-md transition-all cursor-pointer group">
-                                    <div className="h-12 w-12 bg-sky-100 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-200">
-                                        <div className="text-sky-600 font-bold text-xl">
-                                            {project.name.charAt(0).toUpperCase()}
+                                <Link to={`/project/${project.id}`} key={project.id}>
+                                    <div className="bg-white/60 backdrop-blur-sm p-6 rounded-2xl shadow-sm border border-sky-100 hover:shadow-md transition-all cursor-pointer group h-full">
+                                        <div className="h-12 w-12 bg-sky-100 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-200">
+                                            <div className="text-sky-600 font-bold text-xl">
+                                                {project.name.charAt(0).toUpperCase()}
+                                            </div>
+                                        </div>
+                                        <h3 className="text-xl font-semibold text-sky-900 mb-2 truncate">{project.name}</h3>
+                                        <p className="text-sky-600/80 mb-4 line-clamp-2 h-12 text-sm">
+                                            {project.desc || "No description provided."}
+                                        </p>
+                                        <div className="text-xs text-sky-400 font-medium">
+                                            Created {new Date(project.created_at).toLocaleDateString()}
                                         </div>
                                     </div>
-                                    <h3 className="text-xl font-semibold text-sky-900 mb-2 truncate">{project.name}</h3>
-                                    <p className="text-sky-600/80 mb-4 line-clamp-2 h-12 text-sm">
-                                        {project.desc || "No description provided."}
-                                    </p>
-                                    <div className="text-xs text-sky-400 font-medium">
-                                        Created {new Date(project.created_at).toLocaleDateString()}
-                                    </div>
-                                </div>
+                                </Link>
                             ))}
                         </div>
                     </div>

Original file line number	Diff line number	Diff line change
`@@ -25,3 +25,11 @@ func (pr *ProjectRepo) FetchProjects(projects []domain.Project) ([]domain.Projec`
`25`	`25`	`}`
`26`	`26`	`return projects, nil`
`27`	`27`	`}`
	`28`	`+`
	`29`	`+func (pr ProjectRepo) ProjectById(id string) (domain.Project, error) {`
	`30`	`+ var project domain.Project`
	`31`	`+ if err := pr.DB.Gorm.First(&project, id).Error; err != nil {`
	`32`	`+ return nil, err`
	`33`	`+ }`
	`34`	`+ return &project, nil`
	`35`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -51,6 +51,7 @@ func SetupRouterV1(r *gin.Engine, deps Deps) {`
`51`	`51`	`project := protected.Group("/project")`
`52`	`52`	`{`
`53`	`53`	`project.GET("/projects", deps.Project.GetAllProjectHandler)`
	`54`	`+ project.GET("/:projectid", deps.Project.GetProjectHandler)`
`54`	`55`	`}`
`55`	`56`	`}`
`56`	`57`	`}`
Original file line number	Diff line number	Diff line change
`@@ -27,6 +27,7 @@ func AuthMiddleware(userRepo repository.UserRepository, cfg config.Config) gin`
`27`	`27`	`"message": "Authorization header not found",`
`28`	`28`	`"data": err.Error(),`
`29`	`29`	`})`
	`30`	`+ c.Abort()`
`30`	`31`	`return`
`31`	`32`	`}`
`32`	`33`	`parts := strings.Split(authHeader, " ")`
Original file line number	Diff line number	Diff line change
`@@ -45,3 +45,11 @@ func (ps *ProjectService) GetProjects(Role string) ([]domain.Project, error) {`
`45`	`45`	`}`
`46`	`46`	`return project, nil`
`47`	`47`	`}`
	`48`	`+`
	`49`	`+func (ps ProjectService) GetProjectById(id string) (domain.Project, error) {`
	`50`	`+ project, err := ps.ProjectRepo.ProjectById(id)`
	`51`	`+ if err != nil {`
	`52`	`+ return nil, err`
	`53`	`+ }`
	`54`	`+ return project, nil`
	`55`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,7 @@ import { ProtectedRoute, PublicRoute, AdminRoute } from './features/Login/compon`
`11`	`11`	`import SettingsLayout from './features/admin-setting/layout/SettingsLayout.tsx'`
`12`	`12`	`import UserManagement from './features/admin-setting/pages/UserManagement.tsx'`
`13`	`13`	`import Appearance from './features/admin-setting/pages/Appearance.tsx'`
	`14`	`+import ProjectDashboard from './features/project/pages/ProjectDashboard.tsx'`
`14`	`15`
`15`	`16`	`const router = createBrowserRouter([`
`16`	`17`	`{`
`@@ -60,6 +61,10 @@ const router = createBrowserRouter([`
`60`	`61`	`element: <Navigate to="appearance" replace />`
`61`	`62`	`}`
`62`	`63`	`]`
	`64`	`+ },`
	`65`	`+ {`
	`66`	`+ path: 'project/:id',`
	`67`	`+ element: <ProjectDashboard />`
`63`	`68`	`}`
`64`	`69`	`]`
`65`	`70`	`}`