Seed: saas template (34 files)

2026-07-23 22:08:33 +00:00
parent ef77807598
commit 459dcf10a3
1 changed files with 120 additions and 0 deletions
@@ -0,0 +1,120 @@
+import { useState } from "react";
+import Sidebar from "@/components/Sidebar";
+import DashboardHeader from "@/components/DashboardHeader";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Search } from "lucide-react";
+
+const filters = ["All", "Active", "Trial", "Churned"];
+
+const customers = [
+  { name: "Sarah Chen", email: "sarah@acme.co", plan: "Enterprise", mrr: "\$299", joined: "Jan 12, 2024", status: "active", initials: "SC" },
+  { name: "Marcus Johnson", email: "marcus@startup.io", plan: "Pro", mrr: "\$49", joined: "Feb 8, 2024", status: "active", initials: "MJ" },
+  { name: "Emily Rivera", email: "emily@design.co", plan: "Pro", mrr: "\$49", joined: "Mar 15, 2024", status: "trial", initials: "ER" },
+  { name: "David Kim", email: "david@tech.dev", plan: "Enterprise", mrr: "\$299", joined: "Apr 3, 2024", status: "active", initials: "DK" },
+  { name: "Anna Petrov", email: "anna@agency.com", plan: "Free", mrr: "\$0", joined: "May 20, 2024", status: "churned", initials: "AP" },
+  { name: "James Wright", email: "james@corp.biz", plan: "Pro", mrr: "\$49", joined: "Jun 1, 2024", status: "active", initials: "JW" },
+  { name: "Lisa Nguyen", email: "lisa@creative.co", plan: "Enterprise", mrr: "\$299", joined: "Jul 14, 2024", status: "active", initials: "LN" },
+  { name: "Tom Bradley", email: "tom@labs.io", plan: "Free", mrr: "\$0", joined: "Aug 22, 2024", status: "trial", initials: "TB" },
+];
+
+export default function CustomersPage() {
+  const [activeFilter, setActiveFilter] = useState("All");
+  const [search, setSearch] = useState("");
+
+  const filtered = customers.filter((c) => {
+    if (activeFilter !== "All" && c.status !== activeFilter.toLowerCase()) return false;
+    if (search && !c.name.toLowerCase().includes(search.toLowerCase()) && !c.email.toLowerCase().includes(search.toLowerCase())) return false;
+    return true;
+  });
+
+  return (
+    <div className="flex min-h-screen bg-slate-50">
+      <Sidebar activePath="/customers" />
+      <div className="flex-1 lg:ml-64">
+        <DashboardHeader />
+        <main className="p-6 space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Customers</CardTitle>
+            </CardHeader>
+            <CardContent>
+              {/* Search & Filters */}
+              <div className="flex flex-col sm:flex-row gap-4 mb-6">
+                <div className="relative flex-1">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
+                  <Input
+                    placeholder="Search customers..."
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                    className="pl-9"
+                  />
+                </div>
+                <div className="flex gap-2">
+                  {filters.map((f) => (
+                    <Button
+                      key={f}
+                      variant={activeFilter === f ? "default" : "outline"}
+                      size="sm"
+                      onClick={() => setActiveFilter(f)}
+                    >
+                      {f}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Table */}
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Name</TableHead>
+                    <TableHead>Plan</TableHead>
+                    <TableHead>MRR</TableHead>
+                    <TableHead>Joined</TableHead>
+                    <TableHead>Status</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filtered.map((c, i) => (
+                    <TableRow key={i}>
+                      <TableCell>
+                        <div className="flex items-center gap-3">
+                          <Avatar className="h-8 w-8">
+                            <AvatarFallback className="bg-indigo-100 text-indigo-600 text-xs">{c.initials}</AvatarFallback>
+                          </Avatar>
+                          <div>
+                            <p className="font-medium">{c.name}</p>
+                            <p className="text-xs text-slate-400">{c.email}</p>
+                          </div>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant={c.plan === "Enterprise" ? "default" : c.plan === "Pro" ? "secondary" : "outline"}>
+                          {c.plan}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="font-medium">{c.mrr}</TableCell>
+                      <TableCell className="text-slate-500">{c.joined}</TableCell>
+                      <TableCell>
+                        <Badge variant={c.status === "active" ? "default" : c.status === "trial" ? "secondary" : "destructive"}>
+                          {c.status}
+                        </Badge>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+
+              <p className="text-sm text-slate-400 mt-4">Showing {filtered.length} of {customers.length} customers</p>
+            </CardContent>
+          </Card>
+        </main>
+      </div>
+    </div>
+  );
+}