ship-create 1.0.0

package/templates/starter-kit/README.md

@@ -0,0 +1,64 @@
+# SHIP Starter Kit
+
+This is the code foundation for **The SHIP Method OS** — a Next.js 14 (App
+Router) + TypeScript + Tailwind CSS starter that gives every downstream agent
+a consistent, working UI shell to build on top of.
+
+It is currently **mock-data only**. There is no backend wired up — no
+Supabase, no auth, no payments. Every list, table, and metric you see is
+sourced from `lib/mock-data.ts`. That's intentional: the goal of this layer
+is a correct, consistent shared foundation (design tokens, primitives,
+layout) that other agents can build real features on without re-deciding
+button styles or color values per screen.
+
+## Running it
+
+```bash
+npm install
+npm run dev
+```
+
+Then open `http://localhost:3000`. The root page (`app/page.tsx`) is a
+"pick your area" index linking to the three route groups below.
+
+## Route groups (built by other agents on top of this foundation)
+
+- **`/sale`** — the public-facing offer/sale page (headline, pitch, pricing,
+  CTA).
+- **`/member`** — the logged-in member area (course access, progress,
+  account).
+- **`/backoffice`** — the internal admin console (member management,
+  metrics, ops tools).
+
+None of these route directories exist yet in this scaffold — they'll be
+added as `app/(sale)/`, `app/(member)/`, `app/(backoffice)/` (or similar)
+route groups by the agents responsible for each area. They should reuse the
+shared primitives in `components/ui/` and the `cn()` helper in
+`lib/utils.ts` rather than introducing new component patterns.
+
+## What's already here
+
+- `app/` — root layout, global styles (Tailwind + shadcn-style CSS
+  variables for light/dark themes), and the index page.
+- `components/ui/` — Button, Card, Input, Badge, Table, Avatar, Tabs —
+  shadcn/ui-pattern primitives built on Radix UI + class-variance-authority.
+- `lib/utils.ts` — the standard `cn()` class-merging helper.
+- `lib/mock-data.ts` — typed mock `users`, `members` (course/content), and
+  `metrics` arrays shared across all three route groups.
+- Design tokens (colors, radius) in `app/globals.css` and
+  `tailwind.config.ts` are pulled from
+  `../12-DESIGN-SYSTEM/DESIGN_SYSTEM.md` Section 4 (Color System).
+
+## Next step: real data
+
+When it's time to move off mock data, replace the contents of
+`lib/mock-data.ts` (or the call sites that import from it) with real
+Supabase queries. Before doing that, read:
+
+- `../13-TECH-STACK/TECH_STACK.md` — the chosen stack and why.
+- `../03-INSTRUCTION/DATABASE_SPEC.md` — the database schema this app
+  should query against.
+
+Keep the typed interfaces (`MockUser`, `MockMemberContent`, `MockMetric`)
+as the contract — swap the data source, not the shape, unless the database
+spec requires otherwise.

package/templates/starter-kit/app/backoffice/content/page.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { Plus, Pencil, Trash2 } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { members } from "@/lib/mock-data";
+
+// Fabricated publish status, hardcoded per-row for visual variety (not in mock-data.ts).
+const contentStatus: Record<string, "Published" | "Draft"> = {
+  crs_001: "Published",
+  crs_002: "Published",
+  crs_003: "Draft",
+  crs_004: "Draft",
+  crs_005: "Published",
+};
+
+export default function BackofficeContentPage() {
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between gap-4">
+        <div>
+          <p className="label-mono text-primary">Library</p>
+          <h1 className="font-display text-2xl font-medium tracking-tight text-foreground">
+            Content
+          </h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Manage courses and modules available to members.
+          </p>
+        </div>
+        <Button onClick={() => {}}>
+          <Plus className="h-4 w-4" />
+          New Content
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>All Content</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Title</TableHead>
+                <TableHead>Tier</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead className="text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {members.map((item) => {
+                const status = contentStatus[item.id] ?? "Draft";
+                return (
+                  <TableRow key={item.id}>
+                    <TableCell className="py-3 font-medium text-foreground">{item.title}</TableCell>
+                    <TableCell className="py-3">
+                      <Badge variant="outline">{item.tier}</Badge>
+                    </TableCell>
+                    <TableCell className="py-3">
+                      <Badge variant={status === "Published" ? "default" : "secondary"}>
+                        {status}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="flex justify-end gap-2 py-3">
+                      <Button variant="outline" size="sm" onClick={() => {}}>
+                        <Pencil className="h-3.5 w-3.5" />
+                        Edit
+                      </Button>
+                      <Button variant="destructive" size="sm" onClick={() => {}}>
+                        <Trash2 className="h-3.5 w-3.5" />
+                        Delete
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/templates/starter-kit/app/backoffice/layout.tsx

@@ -0,0 +1,105 @@
+import Link from "next/link";
+import {
+  LayoutDashboard,
+  Users,
+  FileText,
+  Settings,
+  Search,
+  ShieldCheck,
+} from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Input } from "@/components/ui/input";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+
+const navItems = [
+  { label: "Overview", href: "/backoffice", icon: LayoutDashboard },
+  { label: "Users", href: "/backoffice/users", icon: Users },
+  { label: "Content", href: "/backoffice/content", icon: FileText },
+  { label: "Settings", href: "/backoffice/settings", icon: Settings },
+];
+
+export default function BackofficeLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex min-h-screen bg-background">
+      {/* Sidebar — deeper-than-base ink with a faint grid texture, kept
+          visually distinct from the member sidebar (bg-card) while staying
+          in the same warm-ink palette. */}
+      <aside className="relative flex w-64 flex-col overflow-hidden border-r border-border/80 bg-[hsl(27_20%_5%)]">
+        <div className="bg-grid pointer-events-none absolute inset-0 opacity-[0.06]" />
+
+        <div className="relative z-10 flex items-center gap-3 border-b border-white/5 px-6 py-5">
+          <ShieldCheck className="h-5 w-5 text-primary" />
+          <div>
+            <p className="font-display text-base font-medium leading-none text-foreground">
+              SHIP Admin
+            </p>
+            <p className="label-mono mt-1 text-muted-foreground/70">Admin</p>
+          </div>
+        </div>
+
+        <nav className="relative z-10 flex-1 space-y-1 px-3 py-4">
+          {navItems.map((item) => {
+            const Icon = item.icon;
+            const active = item.href === "/backoffice";
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  "group relative flex items-center gap-3 rounded-full px-3 py-2 text-sm font-medium transition-colors",
+                  active
+                    ? "bg-primary/15 text-primary"
+                    : "text-muted-foreground hover:bg-white/5 hover:text-foreground"
+                )}
+              >
+                {active && (
+                  <span className="absolute -left-3 top-1/2 h-4 w-1 -translate-y-1/2 rounded-full bg-primary" />
+                )}
+                <Icon className="h-4 w-4" />
+                {item.label}
+              </Link>
+            );
+          })}
+        </nav>
+
+        <div className="label-mono relative z-10 border-t border-white/5 px-4 py-4 text-muted-foreground/60">
+          Mock-data UI shell — no backend wired up.
+        </div>
+      </aside>
+
+      {/* Main column */}
+      <div className="flex flex-1 flex-col">
+        {/* Top bar */}
+        <header className="flex items-center justify-between gap-4 border-b border-border bg-background px-6 py-3.5">
+          <div className="relative w-full max-w-sm">
+            <Search className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              placeholder="Search users, content..."
+              className="h-10 pl-10"
+              readOnly
+            />
+          </div>
+
+          <div className="flex items-center gap-3">
+            <div className="text-right">
+              <p className="text-sm font-medium leading-none text-foreground">
+                Nuttadech J.
+              </p>
+              <p className="label-mono mt-1 text-muted-foreground/70">Admin</p>
+            </div>
+            <Avatar>
+              <AvatarFallback>NJ</AvatarFallback>
+            </Avatar>
+          </div>
+        </header>
+
+        <main className="flex-1 p-6">{children}</main>
+      </div>
+    </div>
+  );
+}

package/templates/starter-kit/app/backoffice/page.tsx

@@ -0,0 +1,165 @@
+import { Users as UsersIcon, DollarSign, Activity, TrendingDown, TrendingUp } from "lucide-react";
+
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { users, metrics } from "@/lib/mock-data";
+
+const statusVariant: Record<string, "default" | "secondary" | "outline" | "destructive"> = {
+  active: "default",
+  trialing: "secondary",
+  past_due: "destructive",
+  canceled: "outline",
+};
+
+function initials(name: string) {
+  return name
+    .split(" ")
+    .map((part) => part[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+}
+
+const kpis = [
+  {
+    label: "Total Users",
+    value: String(users.length),
+    icon: UsersIcon,
+    change: undefined as number | undefined,
+  },
+  {
+    label: metrics[0].label === "Monthly Recurring Revenue" ? "MRR" : metrics[0].label,
+    value: metrics[0].value,
+    icon: DollarSign,
+    change: metrics[0].change,
+  },
+  {
+    label: "Active Members",
+    value: metrics[1].value,
+    icon: Activity,
+    change: metrics[1].change,
+  },
+  {
+    label: "Churn Rate",
+    value: metrics[3].value,
+    icon: TrendingDown,
+    change: metrics[3].change,
+  },
+];
+
+const recentUsers = [...users]
+  .sort((a, b) => new Date(b.joinedAt).getTime() - new Date(a.joinedAt).getTime())
+  .slice(0, 5);
+
+export default function BackofficeOverviewPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <p className="label-mono text-primary">Admin</p>
+        <h1 className="font-display text-2xl font-medium tracking-tight text-foreground">
+          Overview
+        </h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Admin-level snapshot of accounts and revenue.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {kpis.map((kpi, i) => {
+          const Icon = kpi.icon;
+          const isPositive = (kpi.change ?? 0) >= 0;
+          return (
+            <Card
+              key={kpi.label}
+              className="animate-fade-up"
+              style={{ animationDelay: `${i * 80}ms` }}
+            >
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <span className="label-mono text-muted-foreground">{kpi.label}</span>
+                <Icon className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent className="flex items-end justify-between gap-2">
+                <span className="font-display text-3xl font-medium tracking-tight text-foreground">
+                  {kpi.value}
+                </span>
+                {kpi.change !== undefined && (
+                  <Badge
+                    variant={isPositive ? "default" : "destructive"}
+                    className="mb-0.5 gap-1"
+                  >
+                    {isPositive ? (
+                      <TrendingUp className="h-3 w-3" />
+                    ) : (
+                      <TrendingDown className="h-3 w-3" />
+                    )}
+                    {isPositive ? "+" : ""}
+                    {kpi.change}%
+                  </Badge>
+                )}
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+
+      <Card>
+        <CardHeader>
+          <span className="font-display text-xl font-medium leading-tight tracking-tight text-foreground">
+            Recent Signups
+          </span>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Name</TableHead>
+                <TableHead>Email</TableHead>
+                <TableHead>Plan</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Joined</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {recentUsers.map((user) => (
+                <TableRow key={user.id} className="group relative">
+                  <TableCell className="font-medium">
+                    <span className="absolute -left-2 top-0 h-full w-0.5 origin-top scale-y-0 bg-primary transition-transform duration-200 group-hover:scale-y-100" />
+                    <div className="flex items-center gap-3">
+                      <Avatar className="h-8 w-8">
+                        <AvatarFallback className="text-xs">
+                          {initials(user.name)}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className="text-foreground">{user.name}</span>
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-muted-foreground">{user.email}</TableCell>
+                  <TableCell>
+                    <Badge variant="outline">{user.plan}</Badge>
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant={statusVariant[user.status] ?? "outline"}>
+                      {user.status.replace("_", " ")}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="text-muted-foreground">
+                    {new Date(user.joinedAt).toLocaleDateString()}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/templates/starter-kit/app/backoffice/settings/page.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+// Fabricated team roster for the Team tab (not in mock-data.ts).
+const team = [
+  { id: "tm_001", name: "Nuttadech J.", email: "nuttadechnd@gmail.com", role: "Owner" },
+  { id: "tm_002", name: "Pim Anantasak", email: "pim@shipmethod.dev", role: "Admin" },
+  { id: "tm_003", name: "Tum Charoensuk", email: "tum@shipmethod.dev", role: "Support" },
+];
+
+const roleVariant: Record<string, "default" | "secondary" | "outline"> = {
+  Owner: "default",
+  Admin: "secondary",
+  Support: "outline",
+};
+
+export default function BackofficeSettingsPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <p className="label-mono text-primary">Workspace</p>
+        <h1 className="font-display text-2xl font-medium tracking-tight text-foreground">
+          Settings
+        </h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Manage organization, team access, and billing.
+        </p>
+      </div>
+
+      <Tabs defaultValue="general">
+        <TabsList>
+          <TabsTrigger value="general">General</TabsTrigger>
+          <TabsTrigger value="team">Team</TabsTrigger>
+          <TabsTrigger value="billing">Billing</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="general" className="mt-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Organization</CardTitle>
+              <CardDescription>
+                Basic details about your workspace.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="max-w-sm space-y-2">
+              <label className="label-mono text-muted-foreground" htmlFor="org-name">
+                Organization name
+              </label>
+              <Input id="org-name" defaultValue="The SHIP Method OS" />
+            </CardContent>
+            <CardFooter>
+              <Button onClick={() => {}}>Save</Button>
+            </CardFooter>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="team" className="mt-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Team Members</CardTitle>
+              <CardDescription>People with access to the backoffice.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Name</TableHead>
+                    <TableHead>Email</TableHead>
+                    <TableHead>Role</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {team.map((member) => (
+                    <TableRow key={member.id}>
+                      <TableCell className="py-3 font-medium text-foreground">
+                        {member.name}
+                      </TableCell>
+                      <TableCell className="py-3 text-muted-foreground">
+                        {member.email}
+                      </TableCell>
+                      <TableCell className="py-3">
+                        <Badge variant={roleVariant[member.role] ?? "outline"}>
+                          {member.role}
+                        </Badge>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="billing" className="mt-4">
+          <Card className="glow-primary border-primary/30">
+            <CardHeader>
+              <CardTitle>Current Plan</CardTitle>
+              <CardDescription>
+                Your organization is on the Pro plan, billed monthly.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-center justify-between rounded-xl border border-primary/20 bg-primary/[0.06] p-4">
+                <div>
+                  <p className="font-display text-lg font-medium text-foreground">
+                    Pro Plan
+                  </p>
+                  <p className="text-sm text-muted-foreground">
+                    $99/month &middot; renews on the 1st
+                  </p>
+                </div>
+                <Badge>Active</Badge>
+              </div>
+            </CardContent>
+            <CardFooter>
+              <Button onClick={() => {}}>Upgrade Plan</Button>
+            </CardFooter>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}