Initial commit

2026-05-19 22:20:29 +02:00
commit 0fbe856dce
173 changed files with 38316 additions and 0 deletions
@@ -0,0 +1,96 @@
+"use client";
+
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ProjectCard } from "@/components/projects/ProjectCard";
+import { NewProjectDialog } from "@/components/projects/NewProjectDialog";
+import { Plus, Search, Loader2 } from "lucide-react";
+
+export default function ProjectsPage() {
+  const [search, setSearch] = useState("");
+  const [showNew, setShowNew] = useState(false);
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["projects", search],
+    queryFn: async () => {
+      const res = await fetch(`/api/projects?q=${encodeURIComponent(search)}`);
+      if (!res.ok) throw new Error("Failed to fetch projects");
+      return res.json() as Promise<{ projects: any[] }>;
+    },
+    staleTime: 30_000,
+  });
+
+  const { data: clientsData } = useQuery({
+    queryKey: ["clients"],
+    queryFn: async () => {
+      const res = await fetch("/api/clients");
+      if (!res.ok) return { clients: [] };
+      return res.json() as Promise<{ clients: { id: string; company: string }[] }>;
+    },
+    staleTime: 60_000,
+  });
+
+  const projects = data?.projects ?? [];
+  const clients = clientsData?.clients ?? [];
+
+  return (
+    <div className="p-8 space-y-6 max-w-[1600px] mx-auto">
+      <div className="flex items-center justify-between gap-4 mb-8">
+        <div>
+          <h1 className="text-3xl font-bold text-white">Projects</h1>
+          <p className="text-zinc-400 mt-1">
+            {projects.length} project{projects.length !== 1 ? "s" : ""}
+          </p>
+        </div>
+        <Button onClick={() => setShowNew(true)} className="gap-2">
+          <Plus className="h-4 w-4" />
+          New Project
+        </Button>
+      </div>
+
+      {/* Search */}
+      <div className="relative max-w-sm">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        <Input
+          placeholder="Search projects..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="pl-9"
+        />
+      </div>
+
+      {/* Grid */}
+      {isLoading ? (
+        <div className="flex justify-center py-12">
+          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        </div>
+      ) : projects.length === 0 ? (
+        <div className="text-center py-12 text-muted-foreground">
+          <p>No projects found.</p>
+          <Button
+            variant="outline"
+            size="sm"
+            className="mt-4"
+            onClick={() => setShowNew(true)}
+          >
+            Create your first project
+          </Button>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+          {projects.map((project) => (
+            <ProjectCard key={project.id} project={project} />
+          ))}
+        </div>
+      )}
+
+      <NewProjectDialog
+        open={showNew}
+        onClose={() => setShowNew(false)}
+        clients={clients}
+      />
+    </div>
+  );
+}