From 9d89b18544f679c2afeaaf16b0c70f5840bb9ede Mon Sep 17 00:00:00 2001
From: jyswee <jyswee@gmail.com>
Date: Thu, 23 Jul 2026 22:14:35 +0000
Subject: [PATCH] Seed: project-management template (23 files)

---
 src/pages/Projects.tsx | 188 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 188 insertions(+)
 create mode 100644 src/pages/Projects.tsx

diff --git a/src/pages/Projects.tsx b/src/pages/Projects.tsx
new file mode 100644
index 0000000..550dcf7
--- /dev/null
+++ b/src/pages/Projects.tsx
@@ -0,0 +1,188 @@
+import { useState } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Progress } from "@/components/ui/progress";
+import {
+  Plus, LayoutGrid, List, Calendar, MoreHorizontal, FolderKanban
+} from "lucide-react";
+import { toast } from "sonner";
+import Sidebar from "@/components/Sidebar";
+import Header from "@/components/Header";
+
+const projects = [
+  {
+    id: 1,
+    title: "Website Redesign",
+    description: "Complete redesign of the main website with modern UI components and improved UX flows.",
+    progress: 72,
+    tasks: 34,
+    completedTasks: 24,
+    team: ["AK", "MR", "JL"],
+    teamColors: ["bg-violet-500", "bg-indigo-500", "bg-emerald-500"],
+    due: "Apr 28, 2026",
+    status: "Active",
+    statusColor: "bg-emerald-100 text-emerald-700",
+  },
+  {
+    id: 2,
+    title: "Mobile App Launch",
+    description: "Build and launch the native mobile application for iOS and Android platforms.",
+    progress: 35,
+    tasks: 48,
+    completedTasks: 17,
+    team: ["SC", "TP", "AK"],
+    teamColors: ["bg-amber-500", "bg-sky-500", "bg-violet-500"],
+    due: "Jun 15, 2026",
+    status: "Active",
+    statusColor: "bg-emerald-100 text-emerald-700",
+  },
+  {
+    id: 3,
+    title: "API Migration",
+    description: "Migrate legacy REST endpoints to GraphQL and improve API documentation.",
+    progress: 100,
+    tasks: 22,
+    completedTasks: 22,
+    team: ["MR", "JL"],
+    teamColors: ["bg-indigo-500", "bg-emerald-500"],
+    due: "Mar 30, 2026",
+    status: "Completed",
+    statusColor: "bg-slate-100 text-slate-700",
+  },
+  {
+    id: 4,
+    title: "Design System",
+    description: "Establish a unified design system with reusable tokens, components, and guidelines.",
+    progress: 15,
+    tasks: 28,
+    completedTasks: 4,
+    team: ["AK", "SC", "TP"],
+    teamColors: ["bg-violet-500", "bg-amber-500", "bg-sky-500"],
+    due: "Jul 10, 2026",
+    status: "Planning",
+    statusColor: "bg-blue-100 text-blue-700",
+  },
+  {
+    id: 5,
+    title: "QA Automation",
+    description: "Implement end-to-end automated testing pipeline with CI/CD integration.",
+    progress: 58,
+    tasks: 19,
+    completedTasks: 11,
+    team: ["JL", "MR"],
+    teamColors: ["bg-emerald-500", "bg-indigo-500"],
+    due: "May 5, 2026",
+    status: "Active",
+    statusColor: "bg-emerald-100 text-emerald-700",
+  },
+  {
+    id: 6,
+    title: "Security Audit",
+    description: "SOC 2 compliance audit preparation and security hardening across all services.",
+    progress: 42,
+    tasks: 31,
+    completedTasks: 13,
+    team: ["TP", "SC", "AK"],
+    teamColors: ["bg-sky-500", "bg-amber-500", "bg-violet-500"],
+    due: "May 20, 2026",
+    status: "Active",
+    statusColor: "bg-emerald-100 text-emerald-700",
+  },
+];
+
+export default function ProjectsPage() {
+  const [view, setView] = useState<"grid" | "list">("grid");
+
+  return (
+    <div className="flex min-h-screen bg-slate-50">
+      <Sidebar activePath="/projects" />
+      <div className="flex-1 lg:ml-64">
+        <Header />
+        <main className="p-6 space-y-6">
+          {/* ── Header ── */}
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+            <div>
+              <h1 className="text-2xl font-bold text-slate-900 animate-fade-up">Projects</h1>
+              <p className="text-slate-500 mt-1">{projects.length} projects across your workspace</p>
+            </div>
+            <div className="flex items-center gap-3">
+              <div className="flex items-center border rounded-lg overflow-hidden">
+                <Button
+                  variant={view === "grid" ? "default" : "ghost"}
+                  size="sm"
+                  onClick={() => setView("grid")}
+                  className={`rounded-none \${view === "grid" ? "bg-violet-600 hover:bg-violet-700 text-white" : ""}`}
+                >
+                  <LayoutGrid className="h-4 w-4" />
+                </Button>
+                <Button
+                  variant={view === "list" ? "default" : "ghost"}
+                  size="sm"
+                  onClick={() => setView("list")}
+                  className={`rounded-none \${view === "list" ? "bg-violet-600 hover:bg-violet-700 text-white" : ""}`}
+                >
+                  <List className="h-4 w-4" />
+                </Button>
+              </div>
+              <Button className="bg-violet-600 hover:bg-violet-700 text-white" onClick={() => toast("New project created!")}>
+                <Plus className="mr-2 h-4 w-4" /> New Project
+              </Button>
+            </div>
+          </div>
+
+          {/* ── Project Grid ── */}
+          <div className={`grid gap-6 stagger \${view === "grid" ? "grid-cols-1 md:grid-cols-2 xl:grid-cols-3" : "grid-cols-1"}`}>
+            {projects.map((project) => (
+              <Card key={project.id} className="border-0 shadow-sm backdrop-blur-sm bg-card/80 border-border/50 hover:-translate-y-1 hover:shadow-lg transition-all duration-300 cursor-pointer group animate-fade-up">
+                <CardContent className="p-6">
+                  <div className="flex items-start justify-between mb-3">
+                    <div className="flex items-center gap-3">
+                      <div className="h-10 w-10 rounded-lg bg-violet-100 flex items-center justify-center">
+                        <FolderKanban className="h-5 w-5 text-violet-600" />
+                      </div>
+                      <div>
+                        <h3 className="font-semibold text-slate-900 group-hover:text-violet-600 transition-colors">{project.title}</h3>
+                        <Badge className={`\${project.statusColor} text-xs font-medium border-0 mt-1`}>{project.status}</Badge>
+                      </div>
+                    </div>
+                    <Button variant="ghost" size="sm" className="h-8 w-8 p-0 text-slate-400 opacity-0 group-hover:opacity-100 transition-opacity">
+                      <MoreHorizontal className="h-4 w-4" />
+                    </Button>
+                  </div>
+
+                  <p className="text-sm text-slate-500 mb-4 line-clamp-2">{project.description}</p>
+
+                  {/* Progress */}
+                  <div className="mb-4">
+                    <div className="flex items-center justify-between text-sm mb-1.5">
+                      <span className="text-slate-500">Progress</span>
+                      <span className="font-medium text-slate-700">{project.progress}%</span>
+                    </div>
+                    <Progress value={project.progress} className="h-2 bg-slate-100" />
+                  </div>
+
+                  {/* Footer */}
+                  <div className="flex items-center justify-between pt-2 border-t border-slate-100">
+                    <div className="flex -space-x-2">
+                      {project.team.map((member, i) => (
+                        <Avatar key={i} className="h-7 w-7 border-2 border-white">
+                          <AvatarFallback className={`text-[10px] text-white \${project.teamColors[i]}`}>{member}</AvatarFallback>
+                        </Avatar>
+                      ))}
+                    </div>
+                    <div className="flex items-center gap-3 text-xs text-slate-400">
+                      <span>{project.completedTasks}/{project.tasks} tasks</span>
+                      <span className="flex items-center gap-1"><Calendar className="h-3 w-3" />{project.due}</span>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}