Phase 2
Base app architecture:
Route groups for customer, staff and owner.
* Reusable design system with around 20 UI components.
* Complete Prisma schema.
* Authentication with email/password and Google.
* Role and permission model.
* Protected routes.
* Clean separation between features, services, components and shared utilities.
This commit is contained in:
201 files changed
+31984
No files matched your search
@@ -0,0 +1,103 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { BottomSheet } from "@/components/ui/bottom-sheet";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { ErrorState } from "@/components/feedback/error-state";
|
||||
import { Modal } from "@/components/ui/modal";
|
||||
import { MonthCalendar } from "@/components/ui/month-calendar";
|
||||
import { ProfileCard } from "@/components/ui/profile-card";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
|
||||
/**
|
||||
* Client-only demo for components that need interaction state — kept
|
||||
* separate so the style guide page itself stays a Server Component. This
|
||||
* is also the reason `ProfileCard`'s `onEdit` and `ErrorState`'s
|
||||
* `onRetry` are demonstrated here rather than in page.tsx: a Server
|
||||
* Component can't pass a live event-handler closure as a prop to a
|
||||
* Client Component (Next.js build error "Event handlers cannot be passed
|
||||
* to Client Component props") — the handler has to originate from
|
||||
* somewhere already client-side, which this component is.
|
||||
*/
|
||||
export function StyleGuideInteractive() {
|
||||
const [switchOn, setSwitchOn] = useState(true);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [sheetOpen, setSheetOpen] = useState(false);
|
||||
const [month, setMonth] = useState(() => new Date());
|
||||
const [selectedDate, setSelectedDate] = useState<Date | undefined>();
|
||||
const [editCount, setEditCount] = useState(0);
|
||||
const [retryCount, setRetryCount] = useState(0);
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<Card className="space-y-4 p-6">
|
||||
<Switch
|
||||
checked={switchOn}
|
||||
onCheckedChange={setSwitchOn}
|
||||
label="Booking confirmations"
|
||||
description="Email when a booking is confirmed"
|
||||
/>
|
||||
<Switch defaultChecked={false} label="Require staff approval" />
|
||||
</Card>
|
||||
|
||||
<Tabs defaultValue="upcoming">
|
||||
<TabsList>
|
||||
<TabsTrigger value="upcoming">Upcoming</TabsTrigger>
|
||||
<TabsTrigger value="past">Past</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="upcoming">
|
||||
<p className="text-sm text-muted">Upcoming appointments render here.</p>
|
||||
</TabsContent>
|
||||
<TabsContent value="past">
|
||||
<p className="text-sm text-muted">Past appointments render here.</p>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button variant="secondary" onClick={() => setModalOpen(true)}>
|
||||
Open Modal
|
||||
</Button>
|
||||
<Button variant="secondary" onClick={() => setSheetOpen(true)}>
|
||||
Open Bottom Sheet
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Modal open={modalOpen} onClose={() => setModalOpen(false)} title="Cancel Appointment?">
|
||||
<p className="mb-6 text-sm text-muted">
|
||||
This is within the free cancellation window. Are you sure you want to cancel?
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<Button variant="secondary" className="flex-1" onClick={() => setModalOpen(false)}>
|
||||
Keep it
|
||||
</Button>
|
||||
<Button variant="destructive" className="flex-1" onClick={() => setModalOpen(false)}>
|
||||
Cancel it
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<BottomSheet open={sheetOpen} onClose={() => setSheetOpen(false)} title="Add a Note">
|
||||
<Textarea placeholder="e.g. skin sensitivity, specific style requests…" />
|
||||
<Button className="mt-4 w-full" onClick={() => setSheetOpen(false)}>
|
||||
Save Note
|
||||
</Button>
|
||||
</BottomSheet>
|
||||
|
||||
<MonthCalendar month={month} onMonthChange={setMonth} selectedDate={selectedDate} onSelectDate={setSelectedDate} />
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<ProfileCard
|
||||
name="Alex Chen"
|
||||
meta={`Edited ${editCount}×`}
|
||||
onEdit={() => setEditCount((c) => c + 1)}
|
||||
/>
|
||||
</div>
|
||||
<ErrorState onRetry={() => setRetryCount((c) => c + 1)} description={`Retried ${retryCount}×`} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,211 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Calendar, House, Scissors, Users, Settings } from "lucide-react";
|
||||
import { AppointmentCard } from "@/components/ui/appointment-card";
|
||||
import { BarberCard } from "@/components/ui/barber-card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { EmptyState } from "@/components/feedback/empty-state";
|
||||
import { ErrorState } from "@/components/feedback/error-state";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { CardSkeleton } from "@/components/feedback/skeleton";
|
||||
import { LoyaltyCard } from "@/components/ui/loyalty-card";
|
||||
import { ProfileCard } from "@/components/ui/profile-card";
|
||||
import { Select } from "@/components/ui/select";
|
||||
import { ServiceCard } from "@/components/ui/service-card";
|
||||
import { StatusPill } from "@/components/ui/status-pill";
|
||||
import { StyleGuideInteractive } from "./interactive";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Style Guide",
|
||||
};
|
||||
|
||||
const SECTION_TITLE = "mb-4 text-xs font-bold uppercase tracking-widest text-muted";
|
||||
|
||||
export default function StyleGuidePage() {
|
||||
return (
|
||||
<div className="mx-auto max-w-2xl space-y-12 px-6 py-12">
|
||||
<header>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Design System</h1>
|
||||
<p className="mt-2 text-muted">
|
||||
Reusable components, built from the visual language in <code>/templates</code>. See{" "}
|
||||
<code>docs/implementation-plan.md</code> §7–8 for the source analysis. Reference only —
|
||||
not a route real users will see.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<h2 className={SECTION_TITLE}>Buttons</h2>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Button variant="primary">Primary</Button>
|
||||
<Button variant="accent">Save</Button>
|
||||
<Button variant="secondary">Secondary</Button>
|
||||
<Button variant="ghost">Ghost</Button>
|
||||
<Button variant="destructive">Cancel Appointment</Button>
|
||||
<Button variant="primary" isLoading>
|
||||
Loading
|
||||
</Button>
|
||||
<Button variant="primary" disabled>
|
||||
Disabled
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className={SECTION_TITLE}>Status Pills</h2>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<StatusPill status="confirmed" />
|
||||
<StatusPill status="pending_approval" />
|
||||
<StatusPill status="in_progress" />
|
||||
<StatusPill status="completed" />
|
||||
<StatusPill status="cancelled" />
|
||||
<StatusPill status="no_show" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className={SECTION_TITLE}>Forms</h2>
|
||||
<Card className="space-y-4 p-6">
|
||||
<Input label="Email Address" placeholder="name@example.com" type="email" />
|
||||
<Input label="With an error" defaultValue="not-an-email" error="Enter a valid email address" />
|
||||
<Select label="Time Zone" defaultValue="europe-london">
|
||||
<option value="europe-london">Europe/London (GMT+0)</option>
|
||||
<option value="america-new_york">America/New_York (GMT-5)</option>
|
||||
</Select>
|
||||
<Checkbox label="Create an account" description="Track this booking and start earning loyalty stamps." />
|
||||
</Card>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className={SECTION_TITLE}>Switch & Tabs</h2>
|
||||
<StyleGuideInteractive />
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className={SECTION_TITLE}>Profile & Barber Cards</h2>
|
||||
<div className="space-y-4">
|
||||
{/* onEdit needs a real client-side closure — it lives in
|
||||
StyleGuideInteractive, not here (see "Switch & Tabs" section
|
||||
above), so this Server Component page never passes an event
|
||||
handler directly to a Client Component. */}
|
||||
<ProfileCard
|
||||
name="Marcus Reed"
|
||||
meta="Master Barber · Active"
|
||||
avatarUrl="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg"
|
||||
/>
|
||||
<div className="flex gap-5">
|
||||
<BarberCard
|
||||
staff={{
|
||||
id: "1",
|
||||
name: "Marcus",
|
||||
avatarUrl: "https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg",
|
||||
}}
|
||||
selected
|
||||
/>
|
||||
<BarberCard
|
||||
staff={{
|
||||
id: "2",
|
||||
name: "Leo",
|
||||
avatarUrl: "https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg",
|
||||
}}
|
||||
isPreferred
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className={SECTION_TITLE}>Appointment & Service Cards</h2>
|
||||
<div className="space-y-4">
|
||||
<AppointmentCard
|
||||
status="confirmed"
|
||||
serviceName="Standard Cut"
|
||||
staff={{
|
||||
id: "1",
|
||||
name: "Marcus Reed",
|
||||
avatarUrl: "https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg",
|
||||
}}
|
||||
formattedDate="Sat, Oct 12"
|
||||
formattedTime="2:00 PM"
|
||||
actions={
|
||||
<>
|
||||
<Button variant="secondary" size="sm" className="flex-1">
|
||||
Reschedule
|
||||
</Button>
|
||||
<Button variant="destructive" size="sm" className="flex-1">
|
||||
Cancel
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<Card className="divide-y divide-line px-5">
|
||||
<ServiceCard
|
||||
service={{ id: "1", name: "Haircut & Style", durationMinutes: 30, formattedPrice: "£22.00" }}
|
||||
action={<Button size="sm">Book</Button>}
|
||||
/>
|
||||
<ServiceCard
|
||||
service={{ id: "2", name: "Skinfade / Taper & Style", durationMinutes: 30, formattedPrice: "£25.00" }}
|
||||
action={<Button size="sm">Book</Button>}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className={SECTION_TITLE}>Loyalty Card</h2>
|
||||
<LoyaltyCard
|
||||
businessName="TrimTime"
|
||||
memberNumber="8421"
|
||||
stampsRequired={10}
|
||||
stampsEarned={7}
|
||||
rewardLabel="50% OFF"
|
||||
termsLine="Valid for 12 months. One reward per visit."
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className={SECTION_TITLE}>Feedback & Status States</h2>
|
||||
<div className="grid gap-4 sm:grid-cols-3">
|
||||
<CardSkeleton />
|
||||
<EmptyState icon={Calendar} title="No upcoming appointments" description="Book your next visit." />
|
||||
<ErrorState />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className={SECTION_TITLE}>Bottom Navigation (reference only)</h2>
|
||||
<p className="mb-3 text-sm text-muted">
|
||||
Rendered inline here (not fixed) so both variants are visible at once — see{" "}
|
||||
<code>components/navigation/bottom-nav.tsx</code>.
|
||||
</p>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between rounded-xl border border-line bg-white px-5 py-2">
|
||||
{[
|
||||
{ icon: House, label: "Home" },
|
||||
{ icon: Calendar, label: "Bookings" },
|
||||
{ icon: Users, label: "Settings" },
|
||||
].map(({ icon: Icon, label }, i) => (
|
||||
<div key={label} className={`flex flex-col items-center gap-1 ${i === 0 ? "text-ink" : "text-muted"}`}>
|
||||
<Icon className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest">{label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center justify-between rounded-xl bg-[#0c0c0c] px-5 py-2 text-gray-400">
|
||||
{[
|
||||
{ icon: Calendar, label: "Calendar" },
|
||||
{ icon: Scissors, label: "Current" },
|
||||
{ icon: Users, label: "Clients" },
|
||||
{ icon: Settings, label: "Settings" },
|
||||
].map(({ icon: Icon, label }, i) => (
|
||||
<div key={label} className={`flex flex-col items-center gap-1 ${i === 3 ? "text-white" : ""}`}>
|
||||
<Icon className="h-5 w-5" aria-hidden="true" />
|
||||
<span className="text-[10px] font-medium">{label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user