From 9f31222d52543c22a161984682db97ba961f94ac Mon Sep 17 00:00:00 2001
From: rezadrian01 <ahmadadrian324@gmail.com>
Date: Sat, 30 May 2026 17:02:41 +0700
Subject: [PATCH 1/8] =?UTF-8?q?feat:=20Phase=201=20frontend=20foundation?=
 =?UTF-8?q?=20=E2=80=94=20deps,=20UI=20components,=20types,=20and=20API=20?=
 =?UTF-8?q?layer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Initialised shadcn/ui (Tailwind v4 CSS-variable mode); installed button, input,
  label, card, badge, form, select, textarea, dialog, sheet, dropdown-menu, table,
  skeleton, sonner, navigation-menu, separator, avatar, tabs, and pagination
- Added TanStack Query v5, react-hook-form, Zod, Stripe JS, lucide-react,
  server-only
- Updated next.config.ts: reactCompiler, remotePatterns (GCS + localhost),
  turbopack root to silence workspace-root warning
- Created TypeScript types: auth, product (with images[]), order, payment
- Created Zod validation schemas: auth (login/register), product, address
- Created lib/api/server.ts — server-only fetcher using await cookies() (Next.js 16)
- Created lib/api/client.ts — browser-side wrapper with 401 auto-refresh
- Created lib/query-keys.ts — centralised TanStack Query key factory
- Created lib/providers/query-provider.tsx — QueryClientProvider with devtools
- Updated app/layout.tsx — wrapped with QueryProvider + Toaster (sonner)
- Added app/not-found.tsx — friendly 404 page using buttonVariants
- Updated .gitignore to exclude GCP service-account JSON files

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .gitignore                                 |    3 +
 frontend/app/globals.css                   |  132 +-
 frontend/app/layout.tsx                    |   42 +-
 frontend/app/not-found.tsx                 |   18 +
 frontend/components.json                   |   25 +
 frontend/components/ui/avatar.tsx          |  109 +
 frontend/components/ui/badge.tsx           |   52 +
 frontend/components/ui/button.tsx          |   58 +
 frontend/components/ui/card.tsx            |  103 +
 frontend/components/ui/dialog.tsx          |  160 ++
 frontend/components/ui/dropdown-menu.tsx   |  268 +++
 frontend/components/ui/form.tsx            |  178 ++
 frontend/components/ui/input.tsx           |   20 +
 frontend/components/ui/label.tsx           |   20 +
 frontend/components/ui/navigation-menu.tsx |  168 ++
 frontend/components/ui/pagination.tsx      |  130 +
 frontend/components/ui/select.tsx          |  201 ++
 frontend/components/ui/separator.tsx       |   25 +
 frontend/components/ui/sheet.tsx           |  138 ++
 frontend/components/ui/skeleton.tsx        |   13 +
 frontend/components/ui/sonner.tsx          |   49 +
 frontend/components/ui/table.tsx           |  116 +
 frontend/components/ui/tabs.tsx            |   82 +
 frontend/components/ui/textarea.tsx        |   18 +
 frontend/lib/api/client.ts                 |   63 +
 frontend/lib/api/server.ts                 |   39 +
 frontend/lib/providers/query-provider.tsx  |   21 +
 frontend/lib/query-keys.ts                 |   24 +
 frontend/lib/utils.ts                      |   14 +
 frontend/lib/validations/address.ts        |   13 +
 frontend/lib/validations/auth.ts           |   20 +
 frontend/lib/validations/product.ts        |   11 +
 frontend/next.config.ts                    |   18 +-
 frontend/package.json                      |   21 +-
 frontend/pnpm-lock.yaml                    | 2505 +++++++++++++++++++-
 frontend/types/auth.ts                     |   41 +
 frontend/types/order.ts                    |   52 +
 frontend/types/payment.ts                  |   19 +
 frontend/types/product.ts                  |   51 +
 39 files changed, 4980 insertions(+), 60 deletions(-)
 create mode 100644 frontend/app/not-found.tsx
 create mode 100644 frontend/components.json
 create mode 100644 frontend/components/ui/avatar.tsx
 create mode 100644 frontend/components/ui/badge.tsx
 create mode 100644 frontend/components/ui/button.tsx
 create mode 100644 frontend/components/ui/card.tsx
 create mode 100644 frontend/components/ui/dialog.tsx
 create mode 100644 frontend/components/ui/dropdown-menu.tsx
 create mode 100644 frontend/components/ui/form.tsx
 create mode 100644 frontend/components/ui/input.tsx
 create mode 100644 frontend/components/ui/label.tsx
 create mode 100644 frontend/components/ui/navigation-menu.tsx
 create mode 100644 frontend/components/ui/pagination.tsx
 create mode 100644 frontend/components/ui/select.tsx
 create mode 100644 frontend/components/ui/separator.tsx
 create mode 100644 frontend/components/ui/sheet.tsx
 create mode 100644 frontend/components/ui/skeleton.tsx
 create mode 100644 frontend/components/ui/sonner.tsx
 create mode 100644 frontend/components/ui/table.tsx
 create mode 100644 frontend/components/ui/tabs.tsx
 create mode 100644 frontend/components/ui/textarea.tsx
 create mode 100644 frontend/lib/api/client.ts
 create mode 100644 frontend/lib/api/server.ts
 create mode 100644 frontend/lib/providers/query-provider.tsx
 create mode 100644 frontend/lib/query-keys.ts
 create mode 100644 frontend/lib/utils.ts
 create mode 100644 frontend/lib/validations/address.ts
 create mode 100644 frontend/lib/validations/auth.ts
 create mode 100644 frontend/lib/validations/product.ts
 create mode 100644 frontend/types/auth.ts
 create mode 100644 frontend/types/order.ts
 create mode 100644 frontend/types/payment.ts
 create mode 100644 frontend/types/product.ts

diff --git a/.gitignore b/.gitignore
index 43da9fc..307c2c0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -72,6 +72,9 @@ logs/
 *.pem
 *.key
 secrets/
+*-credentials.json
+*-service-account.json
+auron-ecommerce-*.json
 
 # ============================================================
 # TEST
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index a2dc41e..c56032b 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -1,26 +1,130 @@
 @import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@custom-variant dark (&:is(.dark *));
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
+  --font-sans: var(--font-sans);
   --font-mono: var(--font-geist-mono);
+  --font-heading: var(--font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
 }
 
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
 }
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}
\ No newline at end of file
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 976eb90..931c2af 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -1,33 +1,37 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import type { Metadata } from 'next'
+import { Geist, Geist_Mono } from 'next/font/google'
+import './globals.css'
+import { QueryProvider } from '@/lib/providers/query-provider'
+import { Toaster } from '@/components/ui/sonner'
 
 const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+})
 
 const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+})
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+  title: { default: 'Auron', template: '%s | Auron' },
+  description: 'Premium e-commerce platform',
+}
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }>) {
   return (
-    <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
-    >
-      <body className="min-h-full flex flex-col">{children}</body>
+    <html lang="en" className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}>
+      <body className="min-h-full flex flex-col">
+        <QueryProvider>
+          {children}
+          <Toaster />
+        </QueryProvider>
+      </body>
     </html>
-  );
+  )
 }
diff --git a/frontend/app/not-found.tsx b/frontend/app/not-found.tsx
new file mode 100644
index 0000000..4a0e1fb
--- /dev/null
+++ b/frontend/app/not-found.tsx
@@ -0,0 +1,18 @@
+import Link from 'next/link'
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+export default function NotFound() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center gap-4 text-center">
+      <h1 className="text-6xl font-bold tracking-tighter">404</h1>
+      <p className="text-xl text-muted-foreground">Page not found</p>
+      <p className="text-sm text-muted-foreground max-w-sm">
+        The page you&apos;re looking for doesn&apos;t exist or has been moved.
+      </p>
+      <Link href="/" className={cn(buttonVariants())}>
+        Back to Home
+      </Link>
+    </div>
+  )
+}
diff --git a/frontend/components.json b/frontend/components.json
new file mode 100644
index 0000000..f382eb7
--- /dev/null
+++ b/frontend/components.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}
diff --git a/frontend/components/ui/avatar.tsx b/frontend/components/ui/avatar.tsx
new file mode 100644
index 0000000..e4fed86
--- /dev/null
+++ b/frontend/components/ui/avatar.tsx
@@ -0,0 +1,109 @@
+"use client"
+
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: AvatarPrimitive.Root.Props & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn(
+        "aspect-square size-full rounded-full object-cover",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: AvatarPrimitive.Fallback.Props) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+}
diff --git a/frontend/components/ui/badge.tsx b/frontend/components/ui/badge.tsx
new file mode 100644
index 0000000..b20959d
--- /dev/null
+++ b/frontend/components/ui/badge.tsx
@@ -0,0 +1,52 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }
diff --git a/frontend/components/ui/button.tsx b/frontend/components/ui/button.tsx
new file mode 100644
index 0000000..b033601
--- /dev/null
+++ b/frontend/components/ui/button.tsx
@@ -0,0 +1,58 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/frontend/components/ui/card.tsx b/frontend/components/ui/card.tsx
new file mode 100644
index 0000000..40cac5f
--- /dev/null
+++ b/frontend/components/ui/card.tsx
@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/frontend/components/ui/dialog.tsx b/frontend/components/ui/dialog.tsx
new file mode 100644
index 0000000..014f5aa
--- /dev/null
+++ b/frontend/components/ui/dialog.tsx
@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-2 right-2"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon
+            />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          Close
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "font-heading text-base leading-none font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/frontend/components/ui/dropdown-menu.tsx b/frontend/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..9d5ebbd
--- /dev/null
+++ b/frontend/components/ui/dropdown-menu.tsx
@@ -0,0 +1,268 @@
+"use client"
+
+import * as React from "react"
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+
+import { cn } from "@/lib/utils"
+import { ChevronRightIcon, CheckIcon } from "lucide-react"
+
+function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
+  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+}
+
+function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
+}
+
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}: MenuPrimitive.Popup.Props &
+  Pick<
+    MenuPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPrimitive.Popup
+          data-slot="dropdown-menu-content"
+          className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
+  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: MenuPrimitive.GroupLabel.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.GroupLabel
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: MenuPrimitive.Item.Props & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </MenuPrimitive.SubmenuTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 0,
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+  return (
+    <DropdownMenuContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn("w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <MenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon
+          />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+  return (
+    <MenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: MenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <MenuPrimitive.RadioItemIndicator>
+          <CheckIcon
+          />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: MenuPrimitive.Separator.Props) {
+  return (
+    <MenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
diff --git a/frontend/components/ui/form.tsx b/frontend/components/ui/form.tsx
new file mode 100644
index 0000000..945378f
--- /dev/null
+++ b/frontend/components/ui/form.tsx
@@ -0,0 +1,178 @@
+'use client'
+
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { Slot } from '@radix-ui/react-slot'
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from 'react-hook-form'
+
+import { cn } from '@/lib/utils'
+import { Label } from '@/components/ui/label'
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>')
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn('space-y-2', className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = 'FormItem'
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && 'text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = 'FormLabel'
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = 'FormControl'
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn('text-[0.8rem] text-muted-foreground', className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = 'FormDescription'
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? '') : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn('text-[0.8rem] font-medium text-destructive', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = 'FormMessage'
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/frontend/components/ui/input.tsx b/frontend/components/ui/input.tsx
new file mode 100644
index 0000000..7d21bab
--- /dev/null
+++ b/frontend/components/ui/input.tsx
@@ -0,0 +1,20 @@
+import * as React from "react"
+import { Input as InputPrimitive } from "@base-ui/react/input"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/frontend/components/ui/label.tsx b/frontend/components/ui/label.tsx
new file mode 100644
index 0000000..74da65c
--- /dev/null
+++ b/frontend/components/ui/label.tsx
@@ -0,0 +1,20 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/frontend/components/ui/navigation-menu.tsx b/frontend/components/ui/navigation-menu.tsx
new file mode 100644
index 0000000..5958637
--- /dev/null
+++ b/frontend/components/ui/navigation-menu.tsx
@@ -0,0 +1,168 @@
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu"
+import { cva } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon } from "lucide-react"
+
+function NavigationMenu({
+  align = "start",
+  className,
+  children,
+  ...props
+}: NavigationMenuPrimitive.Root.Props &
+  Pick<NavigationMenuPrimitive.Positioner.Props, "align">) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <NavigationMenuPositioner align={align} />
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: NavigationMenuPrimitive.Trigger.Props) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon className="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180" aria-hidden="true" />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: NavigationMenuPrimitive.Content.Props) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuPositioner({
+  className,
+  side = "bottom",
+  sideOffset = 8,
+  align = "start",
+  alignOffset = 0,
+  ...props
+}: NavigationMenuPrimitive.Positioner.Props) {
+  return (
+    <NavigationMenuPrimitive.Portal>
+      <NavigationMenuPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        className={cn(
+          "isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0",
+          className
+        )}
+        {...props}
+      >
+        <NavigationMenuPrimitive.Popup className="data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0">
+          <NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden" />
+        </NavigationMenuPrimitive.Popup>
+      </NavigationMenuPrimitive.Positioner>
+    </NavigationMenuPrimitive.Portal>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: NavigationMenuPrimitive.Link.Props) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>) {
+  return (
+    <NavigationMenuPrimitive.Icon
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
+        className
+      )}
+      {...props}
+    >
+      <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    </NavigationMenuPrimitive.Icon>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+  NavigationMenuPositioner,
+}
diff --git a/frontend/components/ui/pagination.tsx b/frontend/components/ui/pagination.tsx
new file mode 100644
index 0000000..db376f6
--- /dev/null
+++ b/frontend/components/ui/pagination.tsx
@@ -0,0 +1,130 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex items-center gap-0.5", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <Button
+      variant={isActive ? "outline" : "ghost"}
+      size={size}
+      className={cn(className)}
+      nativeButton={false}
+      render={
+        <a
+          aria-current={isActive ? "page" : undefined}
+          data-slot="pagination-link"
+          data-active={isActive}
+          {...props}
+        />
+      }
+    />
+  )
+}
+
+function PaginationPrevious({
+  className,
+  text = "Previous",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("pl-1.5!", className)}
+      {...props}
+    >
+      <ChevronLeftIcon data-icon="inline-start" />
+      <span className="hidden sm:block">{text}</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  text = "Next",
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("pr-1.5!", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">{text}</span>
+      <ChevronRightIcon data-icon="inline-end" />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn(
+        "flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <MoreHorizontalIcon
+      />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}
diff --git a/frontend/components/ui/select.tsx b/frontend/components/ui/select.tsx
new file mode 100644
index 0000000..e8021f5
--- /dev/null
+++ b/frontend/components/ui/select.tsx
@@ -0,0 +1,201 @@
+"use client"
+
+import * as React from "react"
+import { Select as SelectPrimitive } from "@base-ui/react/select"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+const Select = SelectPrimitive.Root
+
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+  return (
+    <SelectPrimitive.Value
+      data-slot="select-value"
+      className={cn("flex flex-1 text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: SelectPrimitive.Trigger.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        render={
+          <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+        }
+      />
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}: SelectPrimitive.Popup.Props &
+  Pick<
+    SelectPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+  >) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        alignItemWithTrigger={alignItemWithTrigger}
+        className="isolate z-50"
+      >
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          data-align-trigger={alignItemWithTrigger}
+          className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: SelectPrimitive.GroupLabel.Props) {
+  return (
+    <SelectPrimitive.GroupLabel
+      data-slot="select-label"
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Item.Props) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+        {children}
+      </SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.Separator.Props) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon
+      />
+    </SelectPrimitive.ScrollUpArrow>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon
+      />
+    </SelectPrimitive.ScrollDownArrow>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/frontend/components/ui/separator.tsx b/frontend/components/ui/separator.tsx
new file mode 100644
index 0000000..6e1369e
--- /dev/null
+++ b/frontend/components/ui/separator.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}: SeparatorPrimitive.Props) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/frontend/components/ui/sheet.tsx b/frontend/components/ui/sheet.tsx
new file mode 100644
index 0000000..78c0a76
--- /dev/null
+++ b/frontend/components/ui/sheet.tsx
@@ -0,0 +1,138 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+  return (
+    <SheetPrimitive.Backdrop
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: SheetPrimitive.Popup.Props & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Popup
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close
+            data-slot="sheet-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-3 right-3"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon
+            />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Popup>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-0.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn(
+        "font-heading text-base font-medium text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: SheetPrimitive.Description.Props) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/frontend/components/ui/skeleton.tsx b/frontend/components/ui/skeleton.tsx
new file mode 100644
index 0000000..0118624
--- /dev/null
+++ b/frontend/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/frontend/components/ui/sonner.tsx b/frontend/components/ui/sonner.tsx
new file mode 100644
index 0000000..9280ee5
--- /dev/null
+++ b/frontend/components/ui/sonner.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: (
+          <CircleCheckIcon className="size-4" />
+        ),
+        info: (
+          <InfoIcon className="size-4" />
+        ),
+        warning: (
+          <TriangleAlertIcon className="size-4" />
+        ),
+        error: (
+          <OctagonXIcon className="size-4" />
+        ),
+        loading: (
+          <Loader2Icon className="size-4 animate-spin" />
+        ),
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/frontend/components/ui/table.tsx b/frontend/components/ui/table.tsx
new file mode 100644
index 0000000..abeaced
--- /dev/null
+++ b/frontend/components/ui/table.tsx
@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/frontend/components/ui/tabs.tsx b/frontend/components/ui/tabs.tsx
new file mode 100644
index 0000000..8ee8054
--- /dev/null
+++ b/frontend/components/ui/tabs.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
diff --git a/frontend/components/ui/textarea.tsx b/frontend/components/ui/textarea.tsx
new file mode 100644
index 0000000..04d27f7
--- /dev/null
+++ b/frontend/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/frontend/lib/api/client.ts b/frontend/lib/api/client.ts
new file mode 100644
index 0000000..401754d
--- /dev/null
+++ b/frontend/lib/api/client.ts
@@ -0,0 +1,63 @@
+const BASE_URL = process.env.NEXT_PUBLIC_API_URL!
+
+type RequestOptions = Omit<RequestInit, 'body'> & {
+  body?: unknown
+}
+
+async function request<T>(path: string, options: RequestOptions = {}): Promise<T> {
+  const { body, headers, ...rest } = options
+
+  const res = await fetch(`${BASE_URL}${path}`, {
+    ...rest,
+    headers: {
+      'Content-Type': 'application/json',
+      ...headers,
+    },
+    ...(body !== undefined ? { body: JSON.stringify(body) } : {}),
+  })
+
+  if (res.status === 401) {
+    // Try to refresh the token via the BFF route handler
+    const refreshed = await fetch('/api/auth/refresh', { method: 'POST' })
+    if (refreshed.ok) {
+      // Retry the original request
+      const retry = await fetch(`${BASE_URL}${path}`, {
+        ...rest,
+        headers: {
+          'Content-Type': 'application/json',
+          ...headers,
+        },
+        ...(body !== undefined ? { body: JSON.stringify(body) } : {}),
+      })
+      if (retry.ok) return retry.json()
+    }
+    // Redirect to login on failed refresh
+    window.location.href = '/login'
+    throw new Error('Session expired')
+  }
+
+  if (!res.ok) {
+    const errorBody = await res.json().catch(() => ({}))
+    throw new Error(errorBody.message ?? errorBody.error ?? `${res.status} ${res.statusText}`)
+  }
+
+  if (res.status === 204) return undefined as T
+  return res.json()
+}
+
+export const api = {
+  get: <T>(path: string, options?: RequestOptions) =>
+    request<T>(path, { method: 'GET', ...options }),
+
+  post: <T>(path: string, body?: unknown, options?: RequestOptions) =>
+    request<T>(path, { method: 'POST', body, ...options }),
+
+  put: <T>(path: string, body?: unknown, options?: RequestOptions) =>
+    request<T>(path, { method: 'PUT', body, ...options }),
+
+  patch: <T>(path: string, body?: unknown, options?: RequestOptions) =>
+    request<T>(path, { method: 'PATCH', body, ...options }),
+
+  delete: <T>(path: string, options?: RequestOptions) =>
+    request<T>(path, { method: 'DELETE', ...options }),
+}
diff --git a/frontend/lib/api/server.ts b/frontend/lib/api/server.ts
new file mode 100644
index 0000000..fb3b8e4
--- /dev/null
+++ b/frontend/lib/api/server.ts
@@ -0,0 +1,39 @@
+import 'server-only'
+import { cookies } from 'next/headers'
+
+const BASE_URL = process.env.API_URL!
+
+export async function serverFetch<T>(path: string, init?: RequestInit): Promise<T> {
+  const token = (await cookies()).get('access_token')?.value
+  const res = await fetch(`${BASE_URL}${path}`, {
+    cache: 'no-store',
+    ...init,
+    headers: {
+      'Content-Type': 'application/json',
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      ...init?.headers,
+    },
+  })
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}))
+    throw new Error(body.message ?? body.error ?? `${res.status} ${res.statusText}`)
+  }
+  return res.json()
+}
+
+export async function serverFetchPublic<T>(path: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(`${BASE_URL}${path}`, {
+    cache: 'force-cache',
+    next: { revalidate: 300 },
+    ...init,
+    headers: {
+      'Content-Type': 'application/json',
+      ...init?.headers,
+    },
+  })
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}))
+    throw new Error(body.message ?? body.error ?? `${res.status} ${res.statusText}`)
+  }
+  return res.json()
+}
diff --git a/frontend/lib/providers/query-provider.tsx b/frontend/lib/providers/query-provider.tsx
new file mode 100644
index 0000000..70c72f4
--- /dev/null
+++ b/frontend/lib/providers/query-provider.tsx
@@ -0,0 +1,21 @@
+'use client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { useState } from 'react'
+
+export function QueryProvider({ children }: { children: React.ReactNode }) {
+  const [client] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: { staleTime: 60_000, retry: 1 },
+        },
+      })
+  )
+  return (
+    <QueryClientProvider client={client}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  )
+}
diff --git a/frontend/lib/query-keys.ts b/frontend/lib/query-keys.ts
new file mode 100644
index 0000000..2d214f2
--- /dev/null
+++ b/frontend/lib/query-keys.ts
@@ -0,0 +1,24 @@
+import type { ProductFilters } from '@/types/product'
+
+export const queryKeys = {
+  me: ['auth', 'me'] as const,
+
+  products: (filters?: ProductFilters) =>
+    filters ? (['products', 'list', filters] as const) : (['products', 'list'] as const),
+
+  product: (id: string) => ['products', 'detail', id] as const,
+
+  categories: ['categories'] as const,
+
+  cart: ['cart'] as const,
+
+  orders: ['orders', 'list'] as const,
+  order: (id: string) => ['orders', 'detail', id] as const,
+
+  payment: (id: string) => ['payments', 'detail', id] as const,
+  paymentByOrder: (orderId: string) => ['payments', 'by-order', orderId] as const,
+
+  inventory: (productId: string) => ['inventory', productId] as const,
+
+  addresses: ['addresses'] as const,
+}
diff --git a/frontend/lib/utils.ts b/frontend/lib/utils.ts
new file mode 100644
index 0000000..5281885
--- /dev/null
+++ b/frontend/lib/utils.ts
@@ -0,0 +1,14 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function formatPrice(amount: number, currency = 'USD') {
+  return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(amount)
+}
+
+export function formatDate(dateString: string) {
+  return new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }).format(new Date(dateString))
+}
diff --git a/frontend/lib/validations/address.ts b/frontend/lib/validations/address.ts
new file mode 100644
index 0000000..98ba4e5
--- /dev/null
+++ b/frontend/lib/validations/address.ts
@@ -0,0 +1,13 @@
+import { z } from 'zod'
+
+export const addressSchema = z.object({
+  label: z.string().min(1, 'Label is required'),
+  street: z.string().min(1, 'Street is required'),
+  city: z.string().min(1, 'City is required'),
+  state: z.string().min(1, 'State is required'),
+  zip_code: z.string().min(1, 'ZIP code is required'),
+  country: z.string().min(1, 'Country is required'),
+  is_default: z.boolean().optional().default(false),
+})
+
+export type AddressFormValues = z.infer<typeof addressSchema>
diff --git a/frontend/lib/validations/auth.ts b/frontend/lib/validations/auth.ts
new file mode 100644
index 0000000..db686f8
--- /dev/null
+++ b/frontend/lib/validations/auth.ts
@@ -0,0 +1,20 @@
+import { z } from 'zod'
+
+export const loginSchema = z.object({
+  email: z.string().min(1, 'Email is required').email('Invalid email address'),
+  password: z.string().min(1, 'Password is required'),
+})
+
+export const registerSchema = z.object({
+  full_name: z.string().min(2, 'Full name must be at least 2 characters'),
+  email: z.string().min(1, 'Email is required').email('Invalid email address'),
+  phone: z.string().optional(),
+  password: z.string().min(8, 'Password must be at least 8 characters'),
+  confirm_password: z.string().min(1, 'Please confirm your password'),
+}).refine((data) => data.password === data.confirm_password, {
+  message: 'Passwords do not match',
+  path: ['confirm_password'],
+})
+
+export type LoginFormValues = z.infer<typeof loginSchema>
+export type RegisterFormValues = z.infer<typeof registerSchema>
diff --git a/frontend/lib/validations/product.ts b/frontend/lib/validations/product.ts
new file mode 100644
index 0000000..38a6c29
--- /dev/null
+++ b/frontend/lib/validations/product.ts
@@ -0,0 +1,11 @@
+import { z } from 'zod'
+
+export const productSchema = z.object({
+  name: z.string().min(1, 'Name is required').max(500),
+  description: z.string().min(1, 'Description is required'),
+  category_id: z.string().min(1, 'Category is required'),
+  price: z.coerce.number().positive('Price must be greater than 0'),
+  is_active: z.boolean().optional().default(true),
+})
+
+export type ProductFormValues = z.infer<typeof productSchema>
diff --git a/frontend/next.config.ts b/frontend/next.config.ts
index e9ffa30..e5961c3 100644
--- a/frontend/next.config.ts
+++ b/frontend/next.config.ts
@@ -1,7 +1,17 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next'
 
 const nextConfig: NextConfig = {
-  /* config options here */
-};
+  reactCompiler: true,
+  turbopack: {
+    root: __dirname,
+  },
+  images: {
+    remotePatterns: [
+      { protocol: 'https', hostname: '**' },
+      { protocol: 'http', hostname: 'localhost' },
+      { protocol: 'https', hostname: 'storage.googleapis.com' },
+    ],
+  },
+}
 
-export default nextConfig;
+export default nextConfig
diff --git a/frontend/package.json b/frontend/package.json
index a5872eb..88e10cb 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,9 +9,28 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@base-ui/react": "^1.5.0",
+    "@hookform/resolvers": "^5.4.0",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@stripe/react-stripe-js": "^6.5.0",
+    "@stripe/stripe-js": "^9.7.0",
+    "@tanstack/react-query": "^5.100.14",
+    "@tanstack/react-query-devtools": "^5.100.14",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.17.0",
     "next": "16.2.0",
+    "next-themes": "^0.4.6",
     "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react-dom": "19.2.4",
+    "react-hook-form": "^7.76.1",
+    "server-only": "^0.0.1",
+    "shadcn": "^4.8.3",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0",
+    "zod": "^4.4.3"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 6e416bd..e95deb6 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -8,15 +8,72 @@ importers:
 
   .:
     dependencies:
+      '@base-ui/react':
+        specifier: ^1.5.0
+        version: 1.5.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@hookform/resolvers':
+        specifier: ^5.4.0
+        version: 5.4.0(react-hook-form@7.76.1(react@19.2.4))
+      '@radix-ui/react-label':
+        specifier: ^2.1.8
+        version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-slot':
+        specifier: ^1.2.4
+        version: 1.2.4(@types/react@19.2.14)(react@19.2.4)
+      '@stripe/react-stripe-js':
+        specifier: ^6.5.0
+        version: 6.5.0(@stripe/stripe-js@9.7.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@stripe/stripe-js':
+        specifier: ^9.7.0
+        version: 9.7.0
+      '@tanstack/react-query':
+        specifier: ^5.100.14
+        version: 5.100.14(react@19.2.4)
+      '@tanstack/react-query-devtools':
+        specifier: ^5.100.14
+        version: 5.100.14(@tanstack/react-query@5.100.14(react@19.2.4))(react@19.2.4)
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      lucide-react:
+        specifier: ^1.17.0
+        version: 1.17.0(react@19.2.4)
       next:
         specifier: 16.2.0
         version: 16.2.0(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       react:
         specifier: 19.2.4
         version: 19.2.4
       react-dom:
         specifier: 19.2.4
         version: 19.2.4(react@19.2.4)
+      react-hook-form:
+        specifier: ^7.76.1
+        version: 7.76.1(react@19.2.4)
+      server-only:
+        specifier: ^0.0.1
+        version: 0.0.1
+      shadcn:
+        specifier: ^4.8.3
+        version: 4.8.3(@types/node@20.19.37)(typescript@5.9.3)
+      sonner:
+        specifier: ^2.0.7
+        version: 2.0.7(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      tailwind-merge:
+        specifier: ^3.6.0
+        version: 3.6.0
+      tw-animate-css:
+        specifier: ^1.4.0
+        version: 1.4.0
+      zod:
+        specifier: ^4.4.3
+        version: 4.4.3
     devDependencies:
       '@tailwindcss/postcss':
         specifier: ^4
@@ -53,6 +110,10 @@ packages:
     resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/code-frame@7.29.7':
+    resolution: {integrity: sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/compat-data@7.29.0':
     resolution: {integrity: sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==}
     engines: {node: '>=6.9.0'}
@@ -65,36 +126,98 @@ packages:
     resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/generator@7.29.7':
+    resolution: {integrity: sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-annotate-as-pure@7.29.7':
+    resolution: {integrity: sha512-OoK6239jHPuSQOoS0kfTVKn0b/rVTk0seKq4Gd2UMLtmOVLjDC0ki3e+c90Trqv2gMfvJFqkiljrr568+qddiw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-compilation-targets@7.28.6':
     resolution: {integrity: sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-create-class-features-plugin@7.29.7':
+    resolution: {integrity: sha512-IY3ZD9Tmooqr3TUhc3DUWxiuo8xx1DWLhd5M7hQ+ZWJamqM2BbalrBJb2MisSLoYorOj75U03qULCxQTY9r3hg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
   '@babel/helper-globals@7.28.0':
     resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-globals@7.29.7':
+    resolution: {integrity: sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-member-expression-to-functions@7.29.7':
+    resolution: {integrity: sha512-j+7JYmk1JYDtACIGj0QJqqWZjoUpMoEikQGADMaHgCMCSDqd2+P32rfcibUNrGOMWrlzK1WJBdxrB3JJQZwWtg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-module-imports@7.28.6':
     resolution: {integrity: sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-module-imports@7.29.7':
+    resolution: {integrity: sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-module-transforms@7.28.6':
     resolution: {integrity: sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
+  '@babel/helper-module-transforms@7.29.7':
+    resolution: {integrity: sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-optimise-call-expression@7.29.7':
+    resolution: {integrity: sha512-+kmGVjcT9RGYzoDwdwEqEvGgKe3BYq+O1iGzjFubaNgZHwYHP6lsF2Yghf4kEuv9BV7tYDZ913aBW9am6YKong==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-plugin-utils@7.29.7':
+    resolution: {integrity: sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-replace-supers@7.29.7':
+    resolution: {integrity: sha512-atfGXWSeCiF4DnKZIfmJfQRkSw9b9gNNXR1kqKjbhG4pGYCOnkp8OcTB8E3NXjBu8NpheSnOeNKz8KT7UNFTmQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.29.7':
+    resolution: {integrity: sha512-brcMGQaVzIeUb+6/bs1Av0f8YuNNjKY2JyvfRCsFuFsdKccEQ5Ges2y74D74NZ1Rz8lKJ9ksJkfqwQFJ/iNEyQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-string-parser@7.27.1':
     resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-string-parser@7.29.7':
+    resolution: {integrity: sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-identifier@7.28.5':
     resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-identifier@7.29.7':
+    resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-option@7.27.1':
     resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-option@7.29.7':
+    resolution: {integrity: sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helpers@7.29.2':
     resolution: {integrity: sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==}
     engines: {node: '>=6.9.0'}
@@ -104,18 +227,106 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/parser@7.29.7':
+    resolution: {integrity: sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/plugin-syntax-jsx@7.29.7':
+    resolution: {integrity: sha512-TSu8+mHCoEaaCDEZ0I3+6mvTBYR4PCxQwf2z9/r5Tbztv6NaLR3B9thGTTxX2WGuGHJqRiAbKPeGTJ5XWXVg6A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-typescript@7.29.7':
+    resolution: {integrity: sha512-ngr+82Sh0xMz25TPCZi+nC2iTzjfCdWS2ONXTp/PtSCHCgaCNBpdMqgvJ2ccdLlClVZ7sisIgB914j/JFe+RZA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-modules-commonjs@7.29.7':
+    resolution: {integrity: sha512-j0vCldybPC5b5dwCQOJ21uKtHzt7hxLygJTg9eF1ScfaikEDNfzn94XoW5Fi+seBR0nCyL23xaBFFkq7dTM8XQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-typescript@7.29.7':
+    resolution: {integrity: sha512-jK52h8LaLc7JarhQV2ofeFMts4H7vnOXnqZNA6fYglBTZewRBE51KWt3BUltW1P+KoPsYkHoJeXePuz4zo2LMw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/preset-typescript@7.29.7':
+    resolution: {integrity: sha512-/Foi8vKY2EVbed/1eZx0gJEEwHAIxogrySI7rULcRIvhZzbvoE/b5qG5Ghc0WKAFKOHA9SD1x7RsFlOYdutIiQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/runtime@7.29.7':
+    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.28.6':
     resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/template@7.29.7':
+    resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/traverse@7.29.0':
     resolution: {integrity: sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/traverse@7.29.7':
+    resolution: {integrity: sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/types@7.29.0':
     resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/types@7.29.7':
+    resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
+    engines: {node: '>=6.9.0'}
+
+  '@base-ui/react@1.5.0':
+    resolution: {integrity: sha512-z1gSAlced1yY+iM+mHDEtIkD8UI3Ebs52MuBPxvV6f5hRutk+xvCH/wuB7hDqDzK9JG5FoMz5nhrqtSs1wjt1A==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@date-fns/tz': ^1.2.0
+      '@types/react': ^17 || ^18 || ^19
+      date-fns: ^4.0.0
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@date-fns/tz':
+        optional: true
+      '@types/react':
+        optional: true
+      date-fns:
+        optional: true
+
+  '@base-ui/utils@0.2.9':
+    resolution: {integrity: sha512-x/PDDCYzoqPpjrdyb3VcyylTI2IjUXEtYDGi5foh7KsnmNJIIaVwA2GLgDH1dps1GgXiJbA60hM+AyuTfQzIvw==}
+    peerDependencies:
+      '@types/react': ^17 || ^18 || ^19
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@dotenvx/dotenvx@1.69.2':
+    resolution: {integrity: sha512-60Vh31k5bAAPq57Isx+Iopl2FrZQzZyUc4kh/OESgXiwhrKXqdxEn3JGTGSawng1DkkeC4jofFq1VpPJqNQx4w==}
+    hasBin: true
+
+  '@ecies/ciphers@0.2.6':
+    resolution: {integrity: sha512-patgsRPKGkhhoBjETV4XxD0En4ui5fbX0hzayqI3M8tvNMGUoUvmyYAIWwlxBc1KX5cturfqByYdj5bYGRpN9g==}
+    engines: {bun: '>=1', deno: '>=2.7.10', node: '>=16'}
+    peerDependencies:
+      '@noble/ciphers': ^1.0.0
+
   '@emnapi/core@1.9.0':
     resolution: {integrity: sha512-0DQ98G9ZQZOxfUcQn1waV2yS8aWdZ6kJMbYCJB3oUBecjWYO1fqJ+a1DRfPF3O5JEkwqwP1A9QEN/9mYm2Yd0w==}
 
@@ -163,6 +374,32 @@ packages:
     resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@floating-ui/core@1.7.5':
+    resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}
+
+  '@floating-ui/dom@1.7.6':
+    resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}
+
+  '@floating-ui/react-dom@2.1.8':
+    resolution: {integrity: sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.11':
+    resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
+
+  '@hono/node-server@1.19.14':
+    resolution: {integrity: sha512-GwtvgtXxnWsucXvbQXkRgqksiH2Qed37H9xHZocE5sA3N8O8O8/8FA3uclQXxXVzc9XBZuEOMK7+r02FmSpHtw==}
+    engines: {node: '>=18.14.1'}
+    peerDependencies:
+      hono: ^4
+
+  '@hookform/resolvers@5.4.0':
+    resolution: {integrity: sha512-EIsqr/t/qbinPIhGjMdtvutIN1Kk4uwbROE9/UQ93CAVGR7GkA7Y92+fX80OzXi/OB67jVFYwKGO1WzkxmkFZw==}
+    peerDependencies:
+      react-hook-form: ^7.55.0
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -316,6 +553,41 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@inquirer/ansi@2.0.7':
+    resolution: {integrity: sha512-3eTuUO1vH2cZm2ZKHeQxnOqlTi9EfZDGgIe3BL3I4u+rJHocr9Fz86M4fjYABPvFnQG/gGK551HqDiIcETwU6Q==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
+
+  '@inquirer/confirm@6.1.1':
+    resolution: {integrity: sha512-eb8DBZcz/2qHWQda4rk2JiQk5h9QV/cVHi1yjt0f69WFZMRFn0sJTye3EAP8icut8UDMjQPsaH5KbcOogefrFQ==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/core@11.2.1':
+    resolution: {integrity: sha512-Qd6GJT1yVyrZZCfN8W2qKF5ApmqryXRhRKCuip8h01x2w/esJQ2XIYc6f9abMIHgKQdBfFTSOdbHRLAhuM09UA==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/figures@2.0.7':
+    resolution: {integrity: sha512-aJ8TBPOGB6f/2qziPfElISTCEd5XOYTFckA2SGjhNmiKzfK/u4ot3v0DUzGVdUnKjN10EqnnEPck36BkyfLnJw==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
+
+  '@inquirer/type@4.0.7':
+    resolution: {integrity: sha512-t28inv14nMQ1PhKpsJPY+kEs/c00qzeCOS2gTNRyTjG5d6qsVA2fItxW4hkvGZ5lvanGLdtCzVIx5dwdRpN1+g==}
+    engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -332,6 +604,20 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
+  '@modelcontextprotocol/sdk@1.29.0':
+    resolution: {integrity: sha512-zo37mZA9hJWpULgkRpowewez1y6ML5GsXJPY8FI0tBBCd77HEvza4jDqRKOXgHNn867PVGCyTdzqpz0izu5ZjQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@cfworker/json-schema': ^4.1.1
+      zod: ^3.25 || ^4.0
+    peerDependenciesMeta:
+      '@cfworker/json-schema':
+        optional: true
+
+  '@mswjs/interceptors@0.41.9':
+    resolution: {integrity: sha512-VVPPgHyQ6ShqnrmDWuxjmUIsO9gWyOZFmuOfLd9LfBGQJwZfy0gvv9pbHSJuoFNIYC7ZDX9aoFwowjcdSC4E8w==}
+    engines: {node: '>=18'}
+
   '@napi-rs/wasm-runtime@0.2.12':
     resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
 
@@ -389,6 +675,18 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@noble/ciphers@1.3.0':
+    resolution: {integrity: sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==}
+    engines: {node: ^14.21.3 || >=16}
+
+  '@noble/curves@1.9.7':
+    resolution: {integrity: sha512-gbKGcRUYIjA3/zCCNaWDciTMFI0dCkvou3TL8Zmy5Nc7sJ47a0jtOeZoTaMxkuqRo9cRhjOdZJXegxYE5FN/xw==}
+    engines: {node: ^14.21.3 || >=16}
+
+  '@noble/hashes@1.8.0':
+    resolution: {integrity: sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==}
+    engines: {node: ^14.21.3 || >=16}
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -405,9 +703,86 @@ packages:
     resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
     engines: {node: '>=12.4.0'}
 
+  '@open-draft/deferred-promise@2.2.0':
+    resolution: {integrity: sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==}
+
+  '@open-draft/deferred-promise@3.0.0':
+    resolution: {integrity: sha512-XW375UK8/9SqUVNVa6M0yEy8+iTi4QN5VZ7aZuRFQmy76LRwI9wy5F4YIBU6T+eTe2/DNDo8tqu8RHlwLHM6RA==}
+
+  '@open-draft/logger@0.3.0':
+    resolution: {integrity: sha512-X2g45fzhxH238HKO4xbSr7+wBS8Fvw6ixhTDuvLd5mqh6bJJCFAPwU9mPDxbcrRtfxv4u5IHCEH77BmxvXmmxQ==}
+
+  '@open-draft/until@2.1.0':
+    resolution: {integrity: sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==}
+
+  '@radix-ui/react-compose-refs@1.1.2':
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-label@2.1.8':
+    resolution: {integrity: sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.4':
+    resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.4':
+    resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@rtsao/scc@1.1.0':
     resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
+  '@sec-ant/readable-stream@0.4.1':
+    resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
+
+  '@sindresorhus/merge-streams@4.0.0':
+    resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
+    engines: {node: '>=18'}
+
+  '@standard-schema/utils@0.3.0':
+    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
+
+  '@stripe/react-stripe-js@6.5.0':
+    resolution: {integrity: sha512-MF+H1dXcmlBxBO56F4GlVK0ArpHrKtaOlSZdppqynTmUHVII9M0MedKJd9bLOfWaYe3fFEhd0cQfU/8srWf8yw==}
+    peerDependencies:
+      '@stripe/stripe-js': '>=9.5.0 <10.0.0'
+      react: '>=16.8.0 <20.0.0'
+      react-dom: '>=16.8.0 <20.0.0'
+
+  '@stripe/stripe-js@9.7.0':
+    resolution: {integrity: sha512-r1ElolvWXM4aYnZZVHvKW3EDL8JcwEuIgTuWxlB5lvC+YsvjkQ0gX35x9d8dTDubX395fViLVqkaolVs1PmIQQ==}
+    engines: {node: '>=12.16'}
+
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
@@ -499,6 +874,26 @@ packages:
   '@tailwindcss/postcss@4.2.2':
     resolution: {integrity: sha512-n4goKQbW8RVXIbNKRB/45LzyUqN451deQK0nzIeauVEqjlI49slUlgKYJM2QyUzap/PcpnS7kzSUmPb1sCRvYQ==}
 
+  '@tanstack/query-core@5.100.14':
+    resolution: {integrity: sha512-5X41dGpxgeaHISCRW2oYwcSycZeULZzAunaudXT9ov1KOTj9xwt0CH6hbwqP1/z74ZWF7rYFnDpyYH07XFcZew==}
+
+  '@tanstack/query-devtools@5.100.14':
+    resolution: {integrity: sha512-g96SmSSQecYTYcyuAMRXr895GplJv01UGt7qttQWPOUyZ5EGz5tbRc589bMc2m5BsPFD6O0PCEAHdbDYNP6UBw==}
+
+  '@tanstack/react-query-devtools@5.100.14':
+    resolution: {integrity: sha512-JkP5VDgKOw3t/QSA1OABRHEqx8BuNs5MfvZRooNqdvN57SzTuGq3fKR1a2IH5rqa5HDLUm+FOXUEnB9ueHiLzg==}
+    peerDependencies:
+      '@tanstack/react-query': ^5.100.14
+      react: ^18 || ^19
+
+  '@tanstack/react-query@5.100.14':
+    resolution: {integrity: sha512-oOr6aRdSFEwWhzxEkD/9ZcItM3+LjBSkeVmadWKwUssAHTsqd/7bOjWrX4AbvEkoEhgAxzN0Xk6H/aYzXiYBAw==}
+    peerDependencies:
+      react: ^18 || ^19
+
+  '@ts-morph/common@0.27.0':
+    resolution: {integrity: sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ==}
+
   '@tybys/wasm-util@0.10.1':
     resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
 
@@ -522,6 +917,15 @@ packages:
   '@types/react@19.2.14':
     resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==}
 
+  '@types/set-cookie-parser@2.4.10':
+    resolution: {integrity: sha512-GGmQVGpQWUe5qglJozEjZV/5dyxbOOZ0LHe/lqyWssB88Y4svNfst0uqBVscdDeIKl5Jy5+aPSvy7mI9tYRguw==}
+
+  '@types/statuses@2.0.6':
+    resolution: {integrity: sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA==}
+
+  '@types/validate-npm-package-name@4.0.2':
+    resolution: {integrity: sha512-lrpDziQipxCEeK5kWxvljWYhUvOiB2A9izZd9B2AFarYAkqZshb4lPbRs7zKEic6eGtH8V/2qJW+dPp9OtF6bw==}
+
   '@typescript-eslint/eslint-plugin@8.57.1':
     resolution: {integrity: sha512-Gn3aqnvNl4NGc6x3/Bqk1AOn0thyTU9bqDRhiRnUWezgvr2OnhYCWCgC8zXXRVqBsIL1pSDt7T9nJUe0oM0kDQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -676,6 +1080,10 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  accepts@2.0.0:
+    resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
+    engines: {node: '>= 0.6'}
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -686,9 +1094,36 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  agent-base@7.1.4:
+    resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
+    engines: {node: '>= 14'}
+
+  ajv-formats@3.0.1:
+    resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
+    peerDependencies:
+      ajv: ^8.0.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
   ajv@6.14.0:
     resolution: {integrity: sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==}
 
+  ajv@8.20.0:
+    resolution: {integrity: sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==}
+
+  ansi-colors@4.1.3:
+    resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
+    engines: {node: '>=6'}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@6.2.2:
+    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
+    engines: {node: '>=12'}
+
   ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
@@ -735,6 +1170,10 @@ packages:
   ast-types-flow@0.0.8:
     resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
 
+  ast-types@0.16.1:
+    resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
+    engines: {node: '>=4'}
+
   async-function@1.0.0:
     resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
     engines: {node: '>= 0.4'}
@@ -763,6 +1202,10 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  body-parser@2.2.2:
+    resolution: {integrity: sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==}
+    engines: {node: '>=18'}
+
   brace-expansion@1.1.12:
     resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
 
@@ -779,6 +1222,14 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
+  bundle-name@4.1.0:
+    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
+    engines: {node: '>=18'}
+
+  bytes@3.1.2:
+    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
+    engines: {node: '>= 0.8'}
+
   call-bind-apply-helpers@1.0.2:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
     engines: {node: '>= 0.4'}
@@ -802,9 +1253,39 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
+  chalk@5.6.2:
+    resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
+  cli-cursor@5.0.0:
+    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
+    engines: {node: '>=18'}
+
+  cli-spinners@2.9.2:
+    resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
+    engines: {node: '>=6'}
+
+  cli-width@4.1.0:
+    resolution: {integrity: sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==}
+    engines: {node: '>= 12'}
+
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
+  cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  code-block-writer@13.0.3:
+    resolution: {integrity: sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg==}
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -812,22 +1293,76 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  commander@11.1.0:
+    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+    engines: {node: '>=16'}
+
+  commander@14.0.3:
+    resolution: {integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==}
+    engines: {node: '>=20'}
+
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
+  content-disposition@1.1.0:
+    resolution: {integrity: sha512-5jRCH9Z/+DRP7rkvY83B+yGIGX96OYdJmzngqnw2SBSxqCFPd0w2km3s5iawpGX8krnwSGmF0FW5Nhr0Hfai3g==}
+    engines: {node: '>=18'}
+
+  content-type@1.0.5:
+    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
+    engines: {node: '>= 0.6'}
+
+  content-type@2.0.0:
+    resolution: {integrity: sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==}
+    engines: {node: '>=18'}
+
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
+  cookie-signature@1.2.2:
+    resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
+    engines: {node: '>=6.6.0'}
+
+  cookie@0.7.2:
+    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
+    engines: {node: '>= 0.6'}
+
+  cookie@1.1.1:
+    resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
+    engines: {node: '>=18'}
+
+  cors@2.8.6:
+    resolution: {integrity: sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==}
+    engines: {node: '>= 0.10'}
+
+  cosmiconfig@9.0.1:
+    resolution: {integrity: sha512-hr4ihw+DBqcvrsEDioRO31Z17x71pUYoNe/4h6Z0wB72p7MU7/9gH8Q3s12NFhHPfYBBOV3qyfUxmr/Yn3shnQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
   damerau-levenshtein@1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
 
+  data-uri-to-buffer@4.0.1:
+    resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
+    engines: {node: '>= 12'}
+
   data-view-buffer@1.0.2:
     resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
     engines: {node: '>= 0.4'}
@@ -857,39 +1392,103 @@ packages:
       supports-color:
         optional: true
 
+  dedent@1.7.2:
+    resolution: {integrity: sha512-WzMx3mW98SN+zn3hgemf4OzdmyNhhhKz5Ay0pUfQiMQ3e1g+xmTJWp/pKdwKVXhdSkAEGIIzqeuWrL3mV/AXbA==}
+    peerDependencies:
+      babel-plugin-macros: ^3.1.0
+    peerDependenciesMeta:
+      babel-plugin-macros:
+        optional: true
+
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
+  deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+
+  default-browser-id@5.0.1:
+    resolution: {integrity: sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==}
+    engines: {node: '>=18'}
+
+  default-browser@5.5.0:
+    resolution: {integrity: sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw==}
+    engines: {node: '>=18'}
+
   define-data-property@1.1.4:
     resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
     engines: {node: '>= 0.4'}
 
+  define-lazy-prop@3.0.0:
+    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
+    engines: {node: '>=12'}
+
   define-properties@1.2.1:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
 
+  depd@2.0.0:
+    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
+    engines: {node: '>= 0.8'}
+
   detect-libc@2.1.2:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
+  diff@8.0.4:
+    resolution: {integrity: sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==}
+    engines: {node: '>=0.3.1'}
+
   doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
 
+  dotenv@17.4.2:
+    resolution: {integrity: sha512-nI4U3TottKAcAD9LLud4Cb7b2QztQMUEfHbvhTH09bqXTxnSie8WnjPALV/WMCrJZ6UV/qHJ6L03OqO3LcdYZw==}
+    engines: {node: '>=12'}
+
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
 
+  eciesjs@0.4.18:
+    resolution: {integrity: sha512-wG99Zcfcys9fZux7Cft8BAX/YrOJLJSZ3jyYPfhZHqN2E+Ffx+QXBDsv3gubEgPtV6dTzJMSQUwk1H98/t/0wQ==}
+    engines: {bun: '>=1', deno: '>=2', node: '>=16'}
+
+  ee-first@1.1.1:
+    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
+
   electron-to-chromium@1.5.321:
     resolution: {integrity: sha512-L2C7Q279W2D/J4PLZLk7sebOILDSWos7bMsMNN06rK482umHUrh/3lM8G7IlHFOYip2oAg5nha1rCMxr/rs6ZQ==}
 
+  emoji-regex@10.6.0:
+    resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
+  encodeurl@2.0.0:
+    resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
+    engines: {node: '>= 0.8'}
+
   enhanced-resolve@5.20.1:
     resolution: {integrity: sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==}
     engines: {node: '>=10.13.0'}
 
+  enquirer@2.4.1:
+    resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
+    engines: {node: '>=8.6'}
+
+  env-paths@2.2.1:
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
+
+  error-ex@1.3.4:
+    resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
+
   es-abstract@1.24.1:
     resolution: {integrity: sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==}
     engines: {node: '>= 0.4'}
@@ -926,6 +1525,9 @@ packages:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
 
+  escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+
   escape-string-regexp@4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
@@ -1034,6 +1636,11 @@ packages:
     resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+
   esquery@1.7.0:
     resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
     engines: {node: '>=0.10'}
@@ -1050,6 +1657,36 @@ packages:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
+  etag@1.8.1:
+    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
+    engines: {node: '>= 0.6'}
+
+  eventsource-parser@3.1.0:
+    resolution: {integrity: sha512-kJezFj9YFAMLeORyi7aCLxLbD5/qWMQnoMVlVPyHIll7lgRJCc3JVln9Vgl9nwQi0YkMnhdGTMNn7CkRRAptMg==}
+    engines: {node: '>=18.0.0'}
+
+  eventsource@3.0.7:
+    resolution: {integrity: sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==}
+    engines: {node: '>=18.0.0'}
+
+  execa@5.1.1:
+    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
+    engines: {node: '>=10'}
+
+  execa@9.6.1:
+    resolution: {integrity: sha512-9Be3ZoN4LmYR90tUoVu2te2BsbzHfhJyfEiAVfz7N5/zv+jduIfLrV2xdQXOHbaD6KgpGdO9PRPM1Y4Q9QkPkA==}
+    engines: {node: ^18.19.0 || >=20.5.0}
+
+  express-rate-limit@8.5.2:
+    resolution: {integrity: sha512-5Kb34ipNX694DH48vN9irak1Qx30nb0PLYHXfJgw4YEjiC3ZEmZJhwOp+VfiCYwFzvFTdB9QkArYS5kXa2cx2A==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      express: '>= 4.11'
+
+  express@5.2.1:
+    resolution: {integrity: sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==}
+    engines: {node: '>= 18'}
+
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -1057,12 +1694,28 @@ packages:
     resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
     engines: {node: '>=8.6.0'}
 
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
   fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
   fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
+  fast-string-truncated-width@3.0.3:
+    resolution: {integrity: sha512-0jjjIEL6+0jag3l2XWWizO64/aZVtpiGE3t0Zgqxv0DPuxiMjvB3M24fCyhZUO4KomJQPj3LTSUnDP3GpdwC0g==}
+
+  fast-string-width@3.0.2:
+    resolution: {integrity: sha512-gX8LrtNEI5hq8DVUfRQMbr5lpaS4nMIWV+7XEbXk2b8kiQIizgnlr12B4dA3ZEx3308ze0O4Q1R+cHts8kyUJg==}
+
+  fast-uri@3.1.2:
+    resolution: {integrity: sha512-rVjf7ArG3LTk+FS6Yw81V1DLuZl1bRbNrev6Tmd/9RaroeeRRJhAt7jg/6YFxbvAQXUCavSoZhPPj6oOx+5KjQ==}
+
+  fast-wrap-ansi@0.2.2:
+    resolution: {integrity: sha512-7F2Fl+TjRSenLqlU3UjSH0iyqopqoZIu7eZVpEirP2g1GtWa2G/ecEmBdgz31+Mxr+ELclgg6sokpSFIQiZ02Q==}
+
   fastq@1.20.1:
     resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
 
@@ -1075,6 +1728,14 @@ packages:
       picomatch:
         optional: true
 
+  fetch-blob@3.2.0:
+    resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
+    engines: {node: ^12.20 || >= 14.13}
+
+  figures@6.1.0:
+    resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
+    engines: {node: '>=18'}
+
   file-entry-cache@8.0.0:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
     engines: {node: '>=16.0.0'}
@@ -1083,6 +1744,10 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
+  finalhandler@2.1.1:
+    resolution: {integrity: sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==}
+    engines: {node: '>= 18.0.0'}
+
   find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -1098,6 +1763,22 @@ packages:
     resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
     engines: {node: '>= 0.4'}
 
+  formdata-polyfill@4.0.10:
+    resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
+    engines: {node: '>=12.20.0'}
+
+  forwarded@0.2.0:
+    resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
+    engines: {node: '>= 0.6'}
+
+  fresh@2.0.0:
+    resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
+    engines: {node: '>= 0.8'}
+
+  fs-extra@11.3.5:
+    resolution: {integrity: sha512-eKpRKAovdpZtR1WopLHxlBWvAgPny3c4gX1G5Jhwmmw4XJj0ifSD5qB5TOo8hmA0wlRKDAOAhEE1yVPgs6Fgcg==}
+    engines: {node: '>=14.14'}
+
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
@@ -1108,6 +1789,9 @@ packages:
   functions-have-names@1.2.3:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
 
+  fuzzysort@3.1.0:
+    resolution: {integrity: sha512-sR9BNCjBg6LNgwvxlBd0sBABvQitkLzoVY9MYYROQVX/FvfJ4Mai9LsGhDgd8qYdds0bY77VzYd5iuB+v5rwQQ==}
+
   generator-function@2.0.1:
     resolution: {integrity: sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==}
     engines: {node: '>= 0.4'}
@@ -1116,14 +1800,34 @@ packages:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
 
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
+  get-east-asian-width@1.6.0:
+    resolution: {integrity: sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==}
+    engines: {node: '>=18'}
+
   get-intrinsic@1.3.0:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
 
+  get-own-enumerable-keys@1.0.0:
+    resolution: {integrity: sha512-PKsK2FSrQCyxcGHsGrLDcK0lx+0Ke+6e8KFFozA9/fIQLhQzPaRvJFdcz7+Axg3jUH/Mq+NI4xa5u/UT2tQskA==}
+    engines: {node: '>=14.16'}
+
   get-proto@1.0.1:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
 
+  get-stream@6.0.1:
+    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
+    engines: {node: '>=10'}
+
+  get-stream@9.0.1:
+    resolution: {integrity: sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==}
+    engines: {node: '>=18'}
+
   get-symbol-description@1.1.0:
     resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
     engines: {node: '>= 0.4'}
@@ -1158,6 +1862,10 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
+  graphql@16.14.0:
+    resolution: {integrity: sha512-BBvQ/406p+4CZbTpCbVPSxfzrZrbnuWSP1ELYgyS6B+hNeKzgrdB4JczCa5VZUBQrDa9hUngm0KnexY6pJRN5Q==}
+    engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
+
   has-bigints@1.1.0:
     resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
     engines: {node: '>= 0.4'}
@@ -1185,12 +1893,39 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  headers-polyfill@5.0.1:
+    resolution: {integrity: sha512-1TJ6Fih/b8h5TIcv+1+Hw0PDQWJTKDKzFZzcKOiW1wJza3XoAQlkCuXLbymPYB8+ZQyw8mHvdw560e8zVFIWyA==}
+
   hermes-estree@0.25.1:
     resolution: {integrity: sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==}
 
   hermes-parser@0.25.1:
     resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
 
+  hono@4.12.23:
+    resolution: {integrity: sha512-eIaZ9qDgu7XV0pxOCrg7/WhnQ6Ivm22UcxhXx/A3dcbqbbYgBEkc6e/J/s7j2tS96zoB0S9VBdLwQNCWwUo4LA==}
+    engines: {node: '>=16.9.0'}
+
+  http-errors@2.0.1:
+    resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
+    engines: {node: '>= 0.8'}
+
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
+
+  human-signals@2.1.0:
+    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
+    engines: {node: '>=10.17.0'}
+
+  human-signals@8.0.1:
+    resolution: {integrity: sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==}
+    engines: {node: '>=18.18.0'}
+
+  iconv-lite@0.7.2:
+    resolution: {integrity: sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==}
+    engines: {node: '>=0.10.0'}
+
   ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
@@ -1207,14 +1942,28 @@ packages:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
   internal-slot@1.1.0:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
 
+  ip-address@10.2.0:
+    resolution: {integrity: sha512-/+S6j4E9AHvW9SWMSEY9Xfy66O5PWvVEJ08O0y5JGyEKQpojb0K0GKpz/v5HJ/G0vi3D2sjGK78119oXZeE0qA==}
+    engines: {node: '>= 12'}
+
+  ipaddr.js@1.9.1:
+    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
+    engines: {node: '>= 0.10'}
+
   is-array-buffer@3.0.5:
     resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
     engines: {node: '>= 0.4'}
 
+  is-arrayish@0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+
   is-async-function@2.1.1:
     resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
     engines: {node: '>= 0.4'}
@@ -1246,6 +1995,11 @@ packages:
     resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
     engines: {node: '>= 0.4'}
 
+  is-docker@3.0.0:
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    hasBin: true
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -1254,6 +2008,10 @@ packages:
     resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
     engines: {node: '>= 0.4'}
 
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
   is-generator-function@1.1.2:
     resolution: {integrity: sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==}
     engines: {node: '>= 0.4'}
@@ -1262,6 +2020,19 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
+  is-in-ssh@1.0.0:
+    resolution: {integrity: sha512-jYa6Q9rH90kR1vKB6NM7qqd1mge3Fx4Dhw5TVlK1MUBqhEOuCagrEHMevNuCcbECmXZ0ThXkRm+Ymr51HwEPAw==}
+    engines: {node: '>=20'}
+
+  is-inside-container@1.0.0:
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
+    hasBin: true
+
+  is-interactive@2.0.0:
+    resolution: {integrity: sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==}
+    engines: {node: '>=12'}
+
   is-map@2.0.3:
     resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
     engines: {node: '>= 0.4'}
@@ -1270,6 +2041,9 @@ packages:
     resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
     engines: {node: '>= 0.4'}
 
+  is-node-process@1.2.0:
+    resolution: {integrity: sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==}
+
   is-number-object@1.1.1:
     resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
     engines: {node: '>= 0.4'}
@@ -1278,10 +2052,25 @@ packages:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
+  is-obj@3.0.0:
+    resolution: {integrity: sha512-IlsXEHOjtKhpN8r/tRFj2nDyTmHvcfNeu/nrRIcXE17ROeatXchkojffa1SpdqW4cr/Fj6QkEf/Gn4zf6KKvEQ==}
+    engines: {node: '>=12'}
+
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+
+  is-promise@4.0.0:
+    resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
+
   is-regex@1.2.1:
     resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
     engines: {node: '>= 0.4'}
 
+  is-regexp@3.1.0:
+    resolution: {integrity: sha512-rbku49cWloU5bSMI+zaRaXdQHXnthP6DZ/vLnfdSKyL4zUzuWnomtOEiZZOd+ioQ+avFo/qau3KPTc7Fjy1uPA==}
+    engines: {node: '>=12'}
+
   is-set@2.0.3:
     resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
     engines: {node: '>= 0.4'}
@@ -1290,6 +2079,14 @@ packages:
     resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
     engines: {node: '>= 0.4'}
 
+  is-stream@2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
+
+  is-stream@4.0.1:
+    resolution: {integrity: sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==}
+    engines: {node: '>=18'}
+
   is-string@1.1.1:
     resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
     engines: {node: '>= 0.4'}
@@ -1302,6 +2099,14 @@ packages:
     resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
     engines: {node: '>= 0.4'}
 
+  is-unicode-supported@1.3.0:
+    resolution: {integrity: sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==}
+    engines: {node: '>=12'}
+
+  is-unicode-supported@2.1.0:
+    resolution: {integrity: sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==}
+    engines: {node: '>=18'}
+
   is-weakmap@2.0.2:
     resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
     engines: {node: '>= 0.4'}
@@ -1314,12 +2119,20 @@ packages:
     resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
     engines: {node: '>= 0.4'}
 
+  is-wsl@3.1.1:
+    resolution: {integrity: sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==}
+    engines: {node: '>=16'}
+
   isarray@2.0.5:
     resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
 
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
+  isexe@3.1.5:
+    resolution: {integrity: sha512-6B3tLtFqtQS4ekarvLVMZ+X+VlvQekbe4taUkf/rhVO3d/h0M2rfARm/pXLcPEsjjMsFgrFgSrhQIxcSVrBz8w==}
+    engines: {node: '>=18'}
+
   iterator.prototype@1.1.5:
     resolution: {integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==}
     engines: {node: '>= 0.4'}
@@ -1328,6 +2141,9 @@ packages:
     resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
 
+  jose@6.2.3:
+    resolution: {integrity: sha512-YYVDInQKFJfR/xa3ojUTl8c2KoTwiL1R5Wg9YCydwH0x0B9grbzlg5HC7mMjCtUJjbQ/YnGEZIhI5tCgfTb4Hw==}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -1343,9 +2159,18 @@ packages:
   json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
+  json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+
   json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+
+  json-schema-typed@8.0.2:
+    resolution: {integrity: sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA==}
+
   json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
@@ -1358,6 +2183,9 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  jsonfile@6.2.1:
+    resolution: {integrity: sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q==}
+
   jsx-ast-utils@3.3.5:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
@@ -1365,6 +2193,14 @@ packages:
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
+  kleur@3.0.3:
+    resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
+    engines: {node: '>=6'}
+
+  kleur@4.1.5:
+    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
+    engines: {node: '>=6'}
+
   language-subtag-registry@0.3.23:
     resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
 
@@ -1446,6 +2282,9 @@ packages:
     resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
     engines: {node: '>= 12.0.0'}
 
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -1453,6 +2292,10 @@ packages:
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
+  log-symbols@6.0.0:
+    resolution: {integrity: sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw==}
+    engines: {node: '>=18'}
+
   loose-envify@1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
@@ -1460,6 +2303,11 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lucide-react@1.17.0:
+    resolution: {integrity: sha512-9FA9evdox/JQL5PT57fdA1x/yg8T7knJ98+zjTL3UfKza6pflQUUh3XtaQIHKvnsJw1lmsEyHVlt5jchYxOQ5w==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -1467,6 +2315,17 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
+  media-typer@1.1.0:
+    resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
+    engines: {node: '>= 0.8'}
+
+  merge-descriptors@2.0.0:
+    resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
+    engines: {node: '>=18'}
+
+  merge-stream@2.0.0:
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -1475,6 +2334,22 @@ packages:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
+  mime-db@1.54.0:
+    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@3.0.2:
+    resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==}
+    engines: {node: '>=18'}
+
+  mimic-fn@2.1.0:
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
+
+  mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
+
   minimatch@10.2.4:
     resolution: {integrity: sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==}
     engines: {node: 18 || 20 || >=22}
@@ -1488,6 +2363,20 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  msw@2.14.6:
+    resolution: {integrity: sha512-ALe+N10S72cyx94cMcy3Zs4HhXCj35sgeAL4c+WTvKi0zWnbd8/h0lcFqv0mb2P+aSgAdD7p9HzvA0DiUPxsyg==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      typescript: '>= 4.8.x'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  mute-stream@3.0.0:
+    resolution: {integrity: sha512-dkEJPVvun4FryqBmZ5KhDo0K9iDXAwn08tMLDinNdRBNPcYEDiWYysLcc6k3mjTMlbP9KyylvRpd4wFtwrT9rw==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
   nanoid@3.3.11:
     resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -1501,6 +2390,16 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
+  negotiator@1.0.0:
+    resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
+    engines: {node: '>= 0.6'}
+
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
   next@16.2.0:
     resolution: {integrity: sha512-NLBVrJy1pbV1Yn00L5sU4vFyAHt5XuSjzrNyFnxo6Com0M0KrL6hHM5B99dbqXb2bE9pm4Ow3Zl1xp6HVY9edQ==}
     engines: {node: '>=20.9.0'}
@@ -1522,13 +2421,30 @@ packages:
       sass:
         optional: true
 
+  node-domexception@1.0.0:
+    resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
+    engines: {node: '>=10.5.0'}
+    deprecated: Use your platform's native DOMException instead
+
   node-exports-info@1.6.0:
     resolution: {integrity: sha512-pyFS63ptit/P5WqUkt+UUfe+4oevH+bFeIiPPdfb0pFeYEu/1ELnJu5l+5EcTKYL5M7zaAa7S8ddywgXypqKCw==}
     engines: {node: '>= 0.4'}
 
+  node-fetch@3.3.2:
+    resolution: {integrity: sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   node-releases@2.0.36:
     resolution: {integrity: sha512-TdC8FSgHz8Mwtw9g5L4gR/Sh9XhSP/0DEkQxfEFXOpiul5IiHgHan2VhYYb6agDSfp4KuvltmGApc8HMgUrIkA==}
 
+  npm-run-path@4.0.1:
+    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
+    engines: {node: '>=8'}
+
+  npm-run-path@6.0.0:
+    resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
+    engines: {node: '>=18'}
+
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -1541,6 +2457,10 @@ packages:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
     engines: {node: '>= 0.4'}
 
+  object-treeify@1.1.33:
+    resolution: {integrity: sha512-EFVjAYfzWqWsBMRHPMAXLCDIJnpMhdWAqR7xG6M6a2cs6PMFpl/+Z20w9zDW4vkxOFfddegBKq9Rehd0bxWE7A==}
+    engines: {node: '>= 10'}
+
   object.assign@4.1.7:
     resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
     engines: {node: '>= 0.4'}
@@ -1561,10 +2481,36 @@ packages:
     resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
     engines: {node: '>= 0.4'}
 
+  on-finished@2.4.1:
+    resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
+    engines: {node: '>= 0.8'}
+
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
+  onetime@5.1.2:
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
+
+  onetime@7.0.0:
+    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
+    engines: {node: '>=18'}
+
+  open@11.0.0:
+    resolution: {integrity: sha512-smsWv2LzFjP03xmvFoJ331ss6h+jixfA4UUV/Bsiyuu4YJPfN+FIQGOIiv4w9/+MoHkfkJ22UIaQWRVFRfH6Vw==}
+    engines: {node: '>=20'}
+
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
 
+  ora@8.2.0:
+    resolution: {integrity: sha512-weP+BZ8MVNnlCm8c0Qdc1WSWq4Qn7I+9CJGm7Qali6g44e/PUzbjNqJX5NJ9ljlNMosfJvg1fKEGILklK9cwnw==}
+    engines: {node: '>=18'}
+
+  outvariant@1.4.3:
+    resolution: {integrity: sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==}
+
   own-keys@1.0.1:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
@@ -1581,6 +2527,21 @@ packages:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
 
+  parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+
+  parse-ms@4.0.0:
+    resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==}
+    engines: {node: '>=18'}
+
+  parseurl@1.3.3:
+    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
+    engines: {node: '>= 0.8'}
+
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -1589,9 +2550,19 @@ packages:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
 
+  path-key@4.0.0:
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
+  path-to-regexp@6.3.0:
+    resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==}
+
+  path-to-regexp@8.4.2:
+    resolution: {integrity: sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -1603,10 +2574,22 @@ packages:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
 
+  picomatch@4.0.4:
+    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
+    engines: {node: '>=12'}
+
+  pkce-challenge@5.0.1:
+    resolution: {integrity: sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==}
+    engines: {node: '>=16.20.0'}
+
   possible-typed-array-names@1.1.0:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
 
+  postcss-selector-parser@7.1.1:
+    resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
+    engines: {node: '>=4'}
+
   postcss@8.4.31:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -1615,25 +2598,59 @@ packages:
     resolution: {integrity: sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==}
     engines: {node: ^10 || ^12 || >=14}
 
+  powershell-utils@0.1.0:
+    resolution: {integrity: sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A==}
+    engines: {node: '>=20'}
+
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  pretty-ms@9.3.0:
+    resolution: {integrity: sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==}
+    engines: {node: '>=18'}
+
+  prompts@2.4.2:
+    resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
+    engines: {node: '>= 6'}
+
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
+  proxy-addr@2.0.7:
+    resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
+    engines: {node: '>= 0.10'}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
+  qs@6.15.2:
+    resolution: {integrity: sha512-Rzq0KEyX/w/tEybncDgdkZrJgVUsUMk3xjh3t5bv3S1HTAtg+uOYt72+ZfwiQwKdysThkTBdL/rTi6HDmX9Ddw==}
+    engines: {node: '>=0.6'}
+
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  range-parser@1.2.1:
+    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
+    engines: {node: '>= 0.6'}
+
+  raw-body@3.0.2:
+    resolution: {integrity: sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==}
+    engines: {node: '>= 0.10'}
+
   react-dom@19.2.4:
     resolution: {integrity: sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==}
     peerDependencies:
       react: ^19.2.4
 
+  react-hook-form@7.76.1:
+    resolution: {integrity: sha512-rYM7tPiWlu3nZchkR/ex7piyzui2vFPyaLnXnI/RnblB/L4qfMmyses8llJVtF1NpE9WBBsJlGtcSZzPCXW1qQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -1641,6 +2658,10 @@ packages:
     resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
     engines: {node: '>=0.10.0'}
 
+  recast@0.23.11:
+    resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
+    engines: {node: '>= 4'}
+
   reflect.getprototypeof@1.0.10:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
@@ -1649,6 +2670,17 @@ packages:
     resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
     engines: {node: '>= 0.4'}
 
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
+  reselect@5.2.0:
+    resolution: {integrity: sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==}
+
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -1666,10 +2698,25 @@ packages:
     engines: {node: '>= 0.4'}
     hasBin: true
 
+  restore-cursor@5.1.0:
+    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
+    engines: {node: '>=18'}
+
+  rettime@0.11.11:
+    resolution: {integrity: sha512-ILJRqVWBCTlg9r42fFgwVZx1gnFAcQF8mRoMkbgQfIrjEDf9nbBFDFx00oloOa+Q869FUtaYDXZvEfnecQSCoQ==}
+
   reusify@1.1.0:
     resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
+  router@2.2.0:
+    resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
+    engines: {node: '>= 18'}
+
+  run-applescript@7.1.0:
+    resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
+    engines: {node: '>=18'}
+
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
@@ -1685,6 +2732,9 @@ packages:
     resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
     engines: {node: '>= 0.4'}
 
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
   scheduler@0.27.0:
     resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
@@ -1697,6 +2747,20 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  send@1.2.1:
+    resolution: {integrity: sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==}
+    engines: {node: '>= 18'}
+
+  serve-static@2.2.1:
+    resolution: {integrity: sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==}
+    engines: {node: '>= 18'}
+
+  server-only@0.0.1:
+    resolution: {integrity: sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==}
+
+  set-cookie-parser@3.1.0:
+    resolution: {integrity: sha512-kjnC1DXBHcxaOaOXBHBeRtltsDG2nUiUni+jP92M9gYdW12rsmx92UsfpH7o5tDRs7I1ZZPSQJQGv3UaRfCiuw==}
+
   set-function-length@1.2.2:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
@@ -1709,6 +2773,13 @@ packages:
     resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
     engines: {node: '>= 0.4'}
 
+  setprototypeof@1.2.0:
+    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
+
+  shadcn@4.8.3:
+    resolution: {integrity: sha512-cnP485rIqtDb8waOp+IKUIfifVf64/PCd5VX/nnLeIP+qZ3yS4r6FOQtOdQkoQEvomQUsJS2OHr5CTzKWw0wKQ==}
+    hasBin: true
+
   sharp@0.34.5:
     resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -1737,17 +2808,56 @@ packages:
     resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
     engines: {node: '>= 0.4'}
 
+  signal-exit@3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  sisteransi@1.0.5:
+    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
+
+  sonner@2.0.7:
+    resolution: {integrity: sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
   stable-hash@0.0.5:
     resolution: {integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==}
 
+  statuses@2.0.2:
+    resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
+    engines: {node: '>= 0.8'}
+
+  stdin-discarder@0.2.2:
+    resolution: {integrity: sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ==}
+    engines: {node: '>=18'}
+
   stop-iteration-iterator@1.1.0:
     resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
     engines: {node: '>= 0.4'}
 
+  strict-event-emitter@0.5.1:
+    resolution: {integrity: sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
+
   string.prototype.includes@2.0.1:
     resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
     engines: {node: '>= 0.4'}
@@ -1771,10 +2881,30 @@ packages:
     resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
     engines: {node: '>= 0.4'}
 
+  stringify-object@5.0.0:
+    resolution: {integrity: sha512-zaJYxz2FtcMb4f+g60KsRNFOpVMUyuJgA51Zi5Z1DOTC3S59+OQiVOzE9GZt0x72uBGWKsQIuBKeF9iusmKFsg==}
+    engines: {node: '>=14.16'}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-ansi@7.2.0:
+    resolution: {integrity: sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==}
+    engines: {node: '>=12'}
+
   strip-bom@3.0.0:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
     engines: {node: '>=4'}
 
+  strip-final-newline@2.0.0:
+    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
+    engines: {node: '>=6'}
+
+  strip-final-newline@4.0.0:
+    resolution: {integrity: sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==}
+    engines: {node: '>=18'}
+
   strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
@@ -1800,6 +2930,13 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  tagged-tag@1.0.0:
+    resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
+    engines: {node: '>=20'}
+
+  tailwind-merge@3.6.0:
+    resolution: {integrity: sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==}
+
   tailwindcss@4.2.2:
     resolution: {integrity: sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==}
 
@@ -1807,30 +2944,66 @@ packages:
     resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
     engines: {node: '>=6'}
 
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
   tinyglobby@0.2.15:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
 
+  tldts-core@7.4.1:
+    resolution: {integrity: sha512-sc2nGvGbixlJRHwTh/qQdPXTxJU1UDJboGPQm4d/01YUJ9r/u6aeIulQvEaxUlvKDN7hb1qCLjax+jhVAPLa/g==}
+
+  tldts@7.4.1:
+    resolution: {integrity: sha512-Xze6QPeJ1YTDqZ9SMw1VbwomEvu0+U8Fc9tkGHe+8QANSbzq5G2i644HhK3hhiaxWJgHc214OADS+ZdCeQz/kQ==}
+    hasBin: true
+
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
 
+  toidentifier@1.0.1:
+    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
+    engines: {node: '>=0.6'}
+
+  tough-cookie@6.0.1:
+    resolution: {integrity: sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==}
+    engines: {node: '>=16'}
+
   ts-api-utils@2.5.0:
     resolution: {integrity: sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==}
     engines: {node: '>=18.12'}
     peerDependencies:
       typescript: '>=4.8.4'
 
+  ts-morph@26.0.0:
+    resolution: {integrity: sha512-ztMO++owQnz8c/gIENcM9XfCEzgoGphTv+nKpYNM1bgsdOVC/jRZuEBf6N+mLLDNg68Kl+GgUZfOySaRiG1/Ug==}
+
   tsconfig-paths@3.15.0:
     resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
 
+  tsconfig-paths@4.2.0:
+    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
+    engines: {node: '>=6'}
+
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
+  tw-animate-css@1.4.0:
+    resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
+
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
 
+  type-fest@5.6.0:
+    resolution: {integrity: sha512-8ZiHFm91orbSAe2PSAiSVBVko18pbhbiB3U9GglSzF/zCGkR+rxpHx6sEMCUm4kxY4LjDIUGgCfUMtwfZfjfUA==}
+    engines: {node: '>=20'}
+
+  type-is@2.1.0:
+    resolution: {integrity: sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==}
+    engines: {node: '>= 18'}
+
   typed-array-buffer@1.0.3:
     resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
     engines: {node: '>= 0.4'}
@@ -1866,9 +3039,24 @@ packages:
   undici-types@6.21.0:
     resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
 
+  unicorn-magic@0.3.0:
+    resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
+    engines: {node: '>=18'}
+
+  universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+
+  unpipe@1.0.0:
+    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
+    engines: {node: '>= 0.8'}
+
   unrs-resolver@1.11.1:
     resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
 
+  until-async@3.0.2:
+    resolution: {integrity: sha512-IiSk4HlzAMqTUseHHe3VhIGyuFmN90zMTpD3Z3y8jeQbzLIq500MVM7Jq2vUAnTKAFPJrqwkzr6PoTcPhGcOiw==}
+
   update-browserslist-db@1.2.3:
     resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
     hasBin: true
@@ -1878,6 +3066,26 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
+  use-sync-external-store@1.6.0:
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  validate-npm-package-name@7.0.2:
+    resolution: {integrity: sha512-hVDIBwsRruT73PbK7uP5ebUt+ezEtCmzZz3F59BSr2F6OVFnJ/6h8liuvdLrQ88Xmnk6/+xGGuq+pG9WwTuy3A==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  vary@1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+
+  web-streams-polyfill@3.3.3:
+    resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==}
+    engines: {node: '>= 8'}
+
   which-boxed-primitive@1.1.1:
     resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
     engines: {node: '>= 0.4'}
@@ -1899,25 +3107,69 @@ packages:
     engines: {node: '>= 8'}
     hasBin: true
 
+  which@4.0.0:
+    resolution: {integrity: sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==}
+    engines: {node: ^16.13.0 || >=18.0.0}
+    hasBin: true
+
   word-wrap@1.2.5:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
 
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+  wsl-utils@0.3.1:
+    resolution: {integrity: sha512-g/eziiSUNBSsdDJtCLB8bdYEUMj4jR7AGeUo96p/3dTafgjHhpF4RiCFPiRILwjQoDXx5MqkBr4fwWtR3Ky4Wg==}
+    engines: {node: '>=20'}
+
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  yocto-spinner@1.2.0:
+    resolution: {integrity: sha512-Yw0hUB6UA3o4YUgKy3oSe9a4cxoaZ9sBfYDw+JSxo6Id0KoJGoxzPA24qqUXYKBWABs/zDSGTz9kww7t3F0XGw==}
+    engines: {node: '>=18.19'}
+
+  yoctocolors@2.1.2:
+    resolution: {integrity: sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==}
+    engines: {node: '>=18'}
+
+  zod-to-json-schema@3.25.2:
+    resolution: {integrity: sha512-O/PgfnpT1xKSDeQYSCfRI5Gy3hPf91mKVDuYLUHZJMiDFptvP41MSnWofm8dnCm0256ZNfZIM7DSzuSMAFnjHA==}
+    peerDependencies:
+      zod: ^3.25.28 || ^4
+
   zod-validation-error@4.0.2:
     resolution: {integrity: sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       zod: ^3.25.0 || ^4.0.0
 
-  zod@4.3.6:
-    resolution: {integrity: sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==}
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
+  zod@4.4.3:
+    resolution: {integrity: sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==}
 
 snapshots:
 
@@ -1929,6 +3181,12 @@ snapshots:
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
+  '@babel/code-frame@7.29.7':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.29.7
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
   '@babel/compat-data@7.29.0': {}
 
   '@babel/core@7.29.0':
@@ -1959,38 +3217,116 @@ snapshots:
       '@jridgewell/trace-mapping': 0.3.31
       jsesc: 3.1.0
 
-  '@babel/helper-compilation-targets@7.28.6':
+  '@babel/generator@7.29.7':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  '@babel/helper-annotate-as-pure@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@babel/helper-compilation-targets@7.28.6':
+    dependencies:
+      '@babel/compat-data': 7.29.0
+      '@babel/helper-validator-option': 7.27.1
+      browserslist: 4.28.1
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-create-class-features-plugin@7.29.7(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-member-expression-to-functions': 7.29.7
+      '@babel/helper-optimise-call-expression': 7.29.7
+      '@babel/helper-replace-supers': 7.29.7(@babel/core@7.29.0)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7
+      '@babel/traverse': 7.29.7
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-globals@7.28.0': {}
+
+  '@babel/helper-globals@7.29.7': {}
+
+  '@babel/helper-member-expression-to-functions@7.29.7':
+    dependencies:
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-imports@7.28.6':
+    dependencies:
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-imports@7.29.7':
+    dependencies:
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-module-imports': 7.28.6
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.29.7(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-module-imports': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+      '@babel/traverse': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-optimise-call-expression@7.29.7':
     dependencies:
-      '@babel/compat-data': 7.29.0
-      '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.28.1
-      lru-cache: 5.1.1
-      semver: 6.3.1
+      '@babel/types': 7.29.7
 
-  '@babel/helper-globals@7.28.0': {}
+  '@babel/helper-plugin-utils@7.29.7': {}
 
-  '@babel/helper-module-imports@7.28.6':
+  '@babel/helper-replace-supers@7.29.7(@babel/core@7.29.0)':
     dependencies:
-      '@babel/traverse': 7.29.0
-      '@babel/types': 7.29.0
+      '@babel/core': 7.29.0
+      '@babel/helper-member-expression-to-functions': 7.29.7
+      '@babel/helper-optimise-call-expression': 7.29.7
+      '@babel/traverse': 7.29.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-transforms@7.28.6(@babel/core@7.29.0)':
+  '@babel/helper-skip-transparent-expression-wrappers@7.29.7':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-module-imports': 7.28.6
-      '@babel/helper-validator-identifier': 7.28.5
-      '@babel/traverse': 7.29.0
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
     transitivePeerDependencies:
       - supports-color
 
   '@babel/helper-string-parser@7.27.1': {}
 
+  '@babel/helper-string-parser@7.29.7': {}
+
   '@babel/helper-validator-identifier@7.28.5': {}
 
+  '@babel/helper-validator-identifier@7.29.7': {}
+
   '@babel/helper-validator-option@7.27.1': {}
 
+  '@babel/helper-validator-option@7.29.7': {}
+
   '@babel/helpers@7.29.2':
     dependencies:
       '@babel/template': 7.28.6
@@ -2000,12 +3336,64 @@ snapshots:
     dependencies:
       '@babel/types': 7.29.0
 
+  '@babel/parser@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@babel/plugin-syntax-jsx@7.29.7(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-typescript@7.29.7(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-modules-commonjs@7.29.7(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.0)
+      '@babel/helper-plugin-utils': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-typescript@7.29.7(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.0)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7
+      '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/preset-typescript@7.29.7(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-validator-option': 7.29.7
+      '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.0)
+      '@babel/plugin-transform-modules-commonjs': 7.29.7(@babel/core@7.29.0)
+      '@babel/plugin-transform-typescript': 7.29.7(@babel/core@7.29.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/runtime@7.29.7': {}
+
   '@babel/template@7.28.6':
     dependencies:
       '@babel/code-frame': 7.29.0
       '@babel/parser': 7.29.2
       '@babel/types': 7.29.0
 
+  '@babel/template@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+
   '@babel/traverse@7.29.0':
     dependencies:
       '@babel/code-frame': 7.29.0
@@ -2018,11 +3406,69 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/traverse@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.7
+      '@babel/helper-globals': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.7
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/types@7.29.0':
     dependencies:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
+  '@babel/types@7.29.7':
+    dependencies:
+      '@babel/helper-string-parser': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+
+  '@base-ui/react@1.5.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@base-ui/utils': 0.2.9(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@floating-ui/react-dom': 2.1.8(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@floating-ui/utils': 0.2.11
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      use-sync-external-store: 1.6.0(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@base-ui/utils@0.2.9(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@floating-ui/utils': 0.2.11
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      reselect: 5.2.0
+      use-sync-external-store: 1.6.0(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@dotenvx/dotenvx@1.69.2':
+    dependencies:
+      commander: 11.1.0
+      dotenv: 17.4.2
+      eciesjs: 0.4.18
+      enquirer: 2.4.1
+      execa: 5.1.1
+      fdir: 6.5.0(picomatch@4.0.4)
+      ignore: 5.3.2
+      object-treeify: 1.1.33
+      picomatch: 4.0.4
+      which: 4.0.0
+      yocto-spinner: 1.2.0
+
+  '@ecies/ciphers@0.2.6(@noble/ciphers@1.3.0)':
+    dependencies:
+      '@noble/ciphers': 1.3.0
+
   '@emnapi/core@1.9.0':
     dependencies:
       '@emnapi/wasi-threads': 1.2.0
@@ -2085,6 +3531,32 @@ snapshots:
       '@eslint/core': 0.17.0
       levn: 0.4.1
 
+  '@floating-ui/core@1.7.5':
+    dependencies:
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/dom@1.7.6':
+    dependencies:
+      '@floating-ui/core': 1.7.5
+      '@floating-ui/utils': 0.2.11
+
+  '@floating-ui/react-dom@2.1.8(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@floating-ui/dom': 1.7.6
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
+  '@floating-ui/utils@0.2.11': {}
+
+  '@hono/node-server@1.19.14(hono@4.12.23)':
+    dependencies:
+      hono: 4.12.23
+
+  '@hookform/resolvers@5.4.0(react-hook-form@7.76.1(react@19.2.4))':
+    dependencies:
+      '@standard-schema/utils': 0.3.0
+      react-hook-form: 7.76.1(react@19.2.4)
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.7':
@@ -2193,6 +3665,33 @@ snapshots:
   '@img/sharp-win32-x64@0.34.5':
     optional: true
 
+  '@inquirer/ansi@2.0.7': {}
+
+  '@inquirer/confirm@6.1.1(@types/node@20.19.37)':
+    dependencies:
+      '@inquirer/core': 11.2.1(@types/node@20.19.37)
+      '@inquirer/type': 4.0.7(@types/node@20.19.37)
+    optionalDependencies:
+      '@types/node': 20.19.37
+
+  '@inquirer/core@11.2.1(@types/node@20.19.37)':
+    dependencies:
+      '@inquirer/ansi': 2.0.7
+      '@inquirer/figures': 2.0.7
+      '@inquirer/type': 4.0.7(@types/node@20.19.37)
+      cli-width: 4.1.0
+      fast-wrap-ansi: 0.2.2
+      mute-stream: 3.0.0
+      signal-exit: 4.1.0
+    optionalDependencies:
+      '@types/node': 20.19.37
+
+  '@inquirer/figures@2.0.7': {}
+
+  '@inquirer/type@4.0.7(@types/node@20.19.37)':
+    optionalDependencies:
+      '@types/node': 20.19.37
+
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -2212,6 +3711,37 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@modelcontextprotocol/sdk@1.29.0(zod@3.25.76)':
+    dependencies:
+      '@hono/node-server': 1.19.14(hono@4.12.23)
+      ajv: 8.20.0
+      ajv-formats: 3.0.1(ajv@8.20.0)
+      content-type: 1.0.5
+      cors: 2.8.6
+      cross-spawn: 7.0.6
+      eventsource: 3.0.7
+      eventsource-parser: 3.1.0
+      express: 5.2.1
+      express-rate-limit: 8.5.2(express@5.2.1)
+      hono: 4.12.23
+      jose: 6.2.3
+      json-schema-typed: 8.0.2
+      pkce-challenge: 5.0.1
+      raw-body: 3.0.2
+      zod: 3.25.76
+      zod-to-json-schema: 3.25.2(zod@3.25.76)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@mswjs/interceptors@0.41.9':
+    dependencies:
+      '@open-draft/deferred-promise': 2.2.0
+      '@open-draft/logger': 0.3.0
+      '@open-draft/until': 2.1.0
+      is-node-process: 1.2.0
+      outvariant: 1.4.3
+      strict-event-emitter: 0.5.1
+
   '@napi-rs/wasm-runtime@0.2.12':
     dependencies:
       '@emnapi/core': 1.9.0
@@ -2249,6 +3779,14 @@ snapshots:
   '@next/swc-win32-x64-msvc@16.2.0':
     optional: true
 
+  '@noble/ciphers@1.3.0': {}
+
+  '@noble/curves@1.9.7':
+    dependencies:
+      '@noble/hashes': 1.8.0
+
+  '@noble/hashes@1.8.0': {}
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -2263,8 +3801,65 @@ snapshots:
 
   '@nolyfill/is-core-module@1.0.39': {}
 
+  '@open-draft/deferred-promise@2.2.0': {}
+
+  '@open-draft/deferred-promise@3.0.0': {}
+
+  '@open-draft/logger@0.3.0':
+    dependencies:
+      is-node-process: 1.2.0
+      outvariant: 1.4.3
+
+  '@open-draft/until@2.1.0': {}
+
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-label@2.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-primitive@2.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-slot@1.2.4(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
   '@rtsao/scc@1.1.0': {}
 
+  '@sec-ant/readable-stream@0.4.1': {}
+
+  '@sindresorhus/merge-streams@4.0.0': {}
+
+  '@standard-schema/utils@0.3.0': {}
+
+  '@stripe/react-stripe-js@6.5.0(@stripe/stripe-js@9.7.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@stripe/stripe-js': 9.7.0
+      prop-types: 15.8.1
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
+  '@stripe/stripe-js@9.7.0': {}
+
   '@swc/helpers@0.5.15':
     dependencies:
       tslib: 2.8.1
@@ -2338,6 +3933,27 @@ snapshots:
       postcss: 8.5.8
       tailwindcss: 4.2.2
 
+  '@tanstack/query-core@5.100.14': {}
+
+  '@tanstack/query-devtools@5.100.14': {}
+
+  '@tanstack/react-query-devtools@5.100.14(@tanstack/react-query@5.100.14(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@tanstack/query-devtools': 5.100.14
+      '@tanstack/react-query': 5.100.14(react@19.2.4)
+      react: 19.2.4
+
+  '@tanstack/react-query@5.100.14(react@19.2.4)':
+    dependencies:
+      '@tanstack/query-core': 5.100.14
+      react: 19.2.4
+
+  '@ts-morph/common@0.27.0':
+    dependencies:
+      fast-glob: 3.3.3
+      minimatch: 10.2.4
+      path-browserify: 1.0.1
+
   '@tybys/wasm-util@0.10.1':
     dependencies:
       tslib: 2.8.1
@@ -2361,6 +3977,14 @@ snapshots:
     dependencies:
       csstype: 3.2.3
 
+  '@types/set-cookie-parser@2.4.10':
+    dependencies:
+      '@types/node': 20.19.37
+
+  '@types/statuses@2.0.6': {}
+
+  '@types/validate-npm-package-name@4.0.2': {}
+
   '@typescript-eslint/eslint-plugin@8.57.1(@typescript-eslint/parser@8.57.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
@@ -2511,12 +4135,23 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
     optional: true
 
+  accepts@2.0.0:
+    dependencies:
+      mime-types: 3.0.2
+      negotiator: 1.0.0
+
   acorn-jsx@5.3.2(acorn@8.16.0):
     dependencies:
       acorn: 8.16.0
 
   acorn@8.16.0: {}
 
+  agent-base@7.1.4: {}
+
+  ajv-formats@3.0.1(ajv@8.20.0):
+    optionalDependencies:
+      ajv: 8.20.0
+
   ajv@6.14.0:
     dependencies:
       fast-deep-equal: 3.1.3
@@ -2524,6 +4159,19 @@ snapshots:
       json-schema-traverse: 0.4.1
       uri-js: 4.4.1
 
+  ajv@8.20.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.1.2
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
+  ansi-colors@4.1.3: {}
+
+  ansi-regex@5.0.1: {}
+
+  ansi-regex@6.2.2: {}
+
   ansi-styles@4.3.0:
     dependencies:
       color-convert: 2.0.1
@@ -2601,6 +4249,10 @@ snapshots:
 
   ast-types-flow@0.0.8: {}
 
+  ast-types@0.16.1:
+    dependencies:
+      tslib: 2.8.1
+
   async-function@1.0.0: {}
 
   available-typed-arrays@1.0.7:
@@ -2617,6 +4269,20 @@ snapshots:
 
   baseline-browser-mapping@2.10.8: {}
 
+  body-parser@2.2.2:
+    dependencies:
+      bytes: 3.1.2
+      content-type: 1.0.5
+      debug: 4.4.3
+      http-errors: 2.0.1
+      iconv-lite: 0.7.2
+      on-finished: 2.4.1
+      qs: 6.15.2
+      raw-body: 3.0.2
+      type-is: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
+
   brace-expansion@1.1.12:
     dependencies:
       balanced-match: 1.0.2
@@ -2638,6 +4304,12 @@ snapshots:
       node-releases: 2.0.36
       update-browserslist-db: 1.2.3(browserslist@4.28.1)
 
+  bundle-name@4.1.0:
+    dependencies:
+      run-applescript: 7.1.0
+
+  bytes@3.1.2: {}
+
   call-bind-apply-helpers@1.0.2:
     dependencies:
       es-errors: 1.3.0
@@ -2664,28 +4336,86 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  chalk@5.6.2: {}
+
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
+  cli-cursor@5.0.0:
+    dependencies:
+      restore-cursor: 5.1.0
+
+  cli-spinners@2.9.2: {}
+
+  cli-width@4.1.0: {}
+
   client-only@0.0.1: {}
 
+  cliui@8.0.1:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
+  clsx@2.1.1: {}
+
+  code-block-writer@13.0.3: {}
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
 
   color-name@1.1.4: {}
 
+  commander@11.1.0: {}
+
+  commander@14.0.3: {}
+
   concat-map@0.0.1: {}
 
+  content-disposition@1.1.0: {}
+
+  content-type@1.0.5: {}
+
+  content-type@2.0.0: {}
+
   convert-source-map@2.0.0: {}
 
+  cookie-signature@1.2.2: {}
+
+  cookie@0.7.2: {}
+
+  cookie@1.1.1: {}
+
+  cors@2.8.6:
+    dependencies:
+      object-assign: 4.1.1
+      vary: 1.1.2
+
+  cosmiconfig@9.0.1(typescript@5.9.3):
+    dependencies:
+      env-paths: 2.2.1
+      import-fresh: 3.3.1
+      js-yaml: 4.1.1
+      parse-json: 5.2.0
+    optionalDependencies:
+      typescript: 5.9.3
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
       shebang-command: 2.0.0
       which: 2.0.2
 
+  cssesc@3.0.0: {}
+
   csstype@3.2.3: {}
 
   damerau-levenshtein@1.0.8: {}
 
+  data-uri-to-buffer@4.0.1: {}
+
   data-view-buffer@1.0.2:
     dependencies:
       call-bound: 1.0.4
@@ -2712,41 +4442,86 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  dedent@1.7.2: {}
+
   deep-is@0.1.4: {}
 
+  deepmerge@4.3.1: {}
+
+  default-browser-id@5.0.1: {}
+
+  default-browser@5.5.0:
+    dependencies:
+      bundle-name: 4.1.0
+      default-browser-id: 5.0.1
+
   define-data-property@1.1.4:
     dependencies:
       es-define-property: 1.0.1
       es-errors: 1.3.0
       gopd: 1.2.0
 
+  define-lazy-prop@3.0.0: {}
+
   define-properties@1.2.1:
     dependencies:
       define-data-property: 1.1.4
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
+  depd@2.0.0: {}
+
   detect-libc@2.1.2: {}
 
+  diff@8.0.4: {}
+
   doctrine@2.1.0:
     dependencies:
       esutils: 2.0.3
 
+  dotenv@17.4.2: {}
+
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
       es-errors: 1.3.0
       gopd: 1.2.0
 
+  eciesjs@0.4.18:
+    dependencies:
+      '@ecies/ciphers': 0.2.6(@noble/ciphers@1.3.0)
+      '@noble/ciphers': 1.3.0
+      '@noble/curves': 1.9.7
+      '@noble/hashes': 1.8.0
+
+  ee-first@1.1.1: {}
+
   electron-to-chromium@1.5.321: {}
 
+  emoji-regex@10.6.0: {}
+
+  emoji-regex@8.0.0: {}
+
   emoji-regex@9.2.2: {}
 
+  encodeurl@2.0.0: {}
+
   enhanced-resolve@5.20.1:
     dependencies:
       graceful-fs: 4.2.11
       tapable: 2.3.0
 
+  enquirer@2.4.1:
+    dependencies:
+      ansi-colors: 4.1.3
+      strip-ansi: 6.0.1
+
+  env-paths@2.2.1: {}
+
+  error-ex@1.3.4:
+    dependencies:
+      is-arrayish: 0.2.1
+
   es-abstract@1.24.1:
     dependencies:
       array-buffer-byte-length: 1.0.2
@@ -2851,6 +4626,8 @@ snapshots:
 
   escalade@3.2.0: {}
 
+  escape-html@1.0.3: {}
+
   escape-string-regexp@4.0.0: {}
 
   eslint-config-next@16.2.0(@typescript-eslint/parser@8.57.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3):
@@ -2961,8 +4738,8 @@ snapshots:
       '@babel/parser': 7.29.2
       eslint: 9.39.4(jiti@2.6.1)
       hermes-parser: 0.25.1
-      zod: 4.3.6
-      zod-validation-error: 4.0.2(zod@4.3.6)
+      zod: 4.4.3
+      zod-validation-error: 4.0.2(zod@4.4.3)
     transitivePeerDependencies:
       - supports-color
 
@@ -3046,6 +4823,8 @@ snapshots:
       acorn-jsx: 5.3.2(acorn@8.16.0)
       eslint-visitor-keys: 4.2.1
 
+  esprima@4.0.1: {}
+
   esquery@1.7.0:
     dependencies:
       estraverse: 5.3.0
@@ -3058,6 +4837,79 @@ snapshots:
 
   esutils@2.0.3: {}
 
+  etag@1.8.1: {}
+
+  eventsource-parser@3.1.0: {}
+
+  eventsource@3.0.7:
+    dependencies:
+      eventsource-parser: 3.1.0
+
+  execa@5.1.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      get-stream: 6.0.1
+      human-signals: 2.1.0
+      is-stream: 2.0.1
+      merge-stream: 2.0.0
+      npm-run-path: 4.0.1
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+      strip-final-newline: 2.0.0
+
+  execa@9.6.1:
+    dependencies:
+      '@sindresorhus/merge-streams': 4.0.0
+      cross-spawn: 7.0.6
+      figures: 6.1.0
+      get-stream: 9.0.1
+      human-signals: 8.0.1
+      is-plain-obj: 4.1.0
+      is-stream: 4.0.1
+      npm-run-path: 6.0.0
+      pretty-ms: 9.3.0
+      signal-exit: 4.1.0
+      strip-final-newline: 4.0.0
+      yoctocolors: 2.1.2
+
+  express-rate-limit@8.5.2(express@5.2.1):
+    dependencies:
+      express: 5.2.1
+      ip-address: 10.2.0
+
+  express@5.2.1:
+    dependencies:
+      accepts: 2.0.0
+      body-parser: 2.2.2
+      content-disposition: 1.1.0
+      content-type: 1.0.5
+      cookie: 0.7.2
+      cookie-signature: 1.2.2
+      debug: 4.4.3
+      depd: 2.0.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 2.1.1
+      fresh: 2.0.0
+      http-errors: 2.0.1
+      merge-descriptors: 2.0.0
+      mime-types: 3.0.2
+      on-finished: 2.4.1
+      once: 1.4.0
+      parseurl: 1.3.3
+      proxy-addr: 2.0.7
+      qs: 6.15.2
+      range-parser: 1.2.1
+      router: 2.2.0
+      send: 1.2.1
+      serve-static: 2.2.1
+      statuses: 2.0.2
+      type-is: 2.1.0
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
   fast-deep-equal@3.1.3: {}
 
   fast-glob@3.3.1:
@@ -3068,10 +4920,30 @@ snapshots:
       merge2: 1.4.1
       micromatch: 4.0.8
 
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
   fast-json-stable-stringify@2.1.0: {}
 
   fast-levenshtein@2.0.6: {}
 
+  fast-string-truncated-width@3.0.3: {}
+
+  fast-string-width@3.0.2:
+    dependencies:
+      fast-string-truncated-width: 3.0.3
+
+  fast-uri@3.1.2: {}
+
+  fast-wrap-ansi@0.2.2:
+    dependencies:
+      fast-string-width: 3.0.2
+
   fastq@1.20.1:
     dependencies:
       reusify: 1.1.0
@@ -3080,6 +4952,19 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.3
 
+  fdir@6.5.0(picomatch@4.0.4):
+    optionalDependencies:
+      picomatch: 4.0.4
+
+  fetch-blob@3.2.0:
+    dependencies:
+      node-domexception: 1.0.0
+      web-streams-polyfill: 3.3.3
+
+  figures@6.1.0:
+    dependencies:
+      is-unicode-supported: 2.1.0
+
   file-entry-cache@8.0.0:
     dependencies:
       flat-cache: 4.0.1
@@ -3088,6 +4973,17 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
+  finalhandler@2.1.1:
+    dependencies:
+      debug: 4.4.3
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
   find-up@5.0.0:
     dependencies:
       locate-path: 6.0.0
@@ -3104,6 +5000,20 @@ snapshots:
     dependencies:
       is-callable: 1.2.7
 
+  formdata-polyfill@4.0.10:
+    dependencies:
+      fetch-blob: 3.2.0
+
+  forwarded@0.2.0: {}
+
+  fresh@2.0.0: {}
+
+  fs-extra@11.3.5:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.1
+      universalify: 2.0.1
+
   function-bind@1.1.2: {}
 
   function.prototype.name@1.1.8:
@@ -3117,10 +5027,16 @@ snapshots:
 
   functions-have-names@1.2.3: {}
 
+  fuzzysort@3.1.0: {}
+
   generator-function@2.0.1: {}
 
   gensync@1.0.0-beta.2: {}
 
+  get-caller-file@2.0.5: {}
+
+  get-east-asian-width@1.6.0: {}
+
   get-intrinsic@1.3.0:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -3134,11 +5050,20 @@ snapshots:
       hasown: 2.0.2
       math-intrinsics: 1.1.0
 
+  get-own-enumerable-keys@1.0.0: {}
+
   get-proto@1.0.1:
     dependencies:
       dunder-proto: 1.0.1
       es-object-atoms: 1.1.1
 
+  get-stream@6.0.1: {}
+
+  get-stream@9.0.1:
+    dependencies:
+      '@sec-ant/readable-stream': 0.4.1
+      is-stream: 4.0.1
+
   get-symbol-description@1.1.0:
     dependencies:
       call-bound: 1.0.4
@@ -3170,6 +5095,8 @@ snapshots:
 
   graceful-fs@4.2.11: {}
 
+  graphql@16.14.0: {}
+
   has-bigints@1.1.0: {}
 
   has-flag@4.0.0: {}
@@ -3192,12 +5119,42 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  headers-polyfill@5.0.1:
+    dependencies:
+      '@types/set-cookie-parser': 2.4.10
+      set-cookie-parser: 3.1.0
+
   hermes-estree@0.25.1: {}
 
   hermes-parser@0.25.1:
     dependencies:
       hermes-estree: 0.25.1
 
+  hono@4.12.23: {}
+
+  http-errors@2.0.1:
+    dependencies:
+      depd: 2.0.0
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 2.0.2
+      toidentifier: 1.0.1
+
+  https-proxy-agent@7.0.6:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  human-signals@2.1.0: {}
+
+  human-signals@8.0.1: {}
+
+  iconv-lite@0.7.2:
+    dependencies:
+      safer-buffer: 2.1.2
+
   ignore@5.3.2: {}
 
   ignore@7.0.5: {}
@@ -3209,18 +5166,26 @@ snapshots:
 
   imurmurhash@0.1.4: {}
 
+  inherits@2.0.4: {}
+
   internal-slot@1.1.0:
     dependencies:
       es-errors: 1.3.0
       hasown: 2.0.2
       side-channel: 1.1.0
 
+  ip-address@10.2.0: {}
+
+  ipaddr.js@1.9.1: {}
+
   is-array-buffer@3.0.5:
     dependencies:
       call-bind: 1.0.8
       call-bound: 1.0.4
       get-intrinsic: 1.3.0
 
+  is-arrayish@0.2.1: {}
+
   is-async-function@2.1.1:
     dependencies:
       async-function: 1.0.0
@@ -3259,12 +5224,16 @@ snapshots:
       call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
+  is-docker@3.0.0: {}
+
   is-extglob@2.1.1: {}
 
   is-finalizationregistry@1.1.1:
     dependencies:
       call-bound: 1.0.4
 
+  is-fullwidth-code-point@3.0.0: {}
+
   is-generator-function@1.1.2:
     dependencies:
       call-bound: 1.0.4
@@ -3277,10 +5246,20 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
+  is-in-ssh@1.0.0: {}
+
+  is-inside-container@1.0.0:
+    dependencies:
+      is-docker: 3.0.0
+
+  is-interactive@2.0.0: {}
+
   is-map@2.0.3: {}
 
   is-negative-zero@2.0.3: {}
 
+  is-node-process@1.2.0: {}
+
   is-number-object@1.1.1:
     dependencies:
       call-bound: 1.0.4
@@ -3288,6 +5267,12 @@ snapshots:
 
   is-number@7.0.0: {}
 
+  is-obj@3.0.0: {}
+
+  is-plain-obj@4.1.0: {}
+
+  is-promise@4.0.0: {}
+
   is-regex@1.2.1:
     dependencies:
       call-bound: 1.0.4
@@ -3295,12 +5280,18 @@ snapshots:
       has-tostringtag: 1.0.2
       hasown: 2.0.2
 
+  is-regexp@3.1.0: {}
+
   is-set@2.0.3: {}
 
   is-shared-array-buffer@1.0.4:
     dependencies:
       call-bound: 1.0.4
 
+  is-stream@2.0.1: {}
+
+  is-stream@4.0.1: {}
+
   is-string@1.1.1:
     dependencies:
       call-bound: 1.0.4
@@ -3316,6 +5307,10 @@ snapshots:
     dependencies:
       which-typed-array: 1.1.20
 
+  is-unicode-supported@1.3.0: {}
+
+  is-unicode-supported@2.1.0: {}
+
   is-weakmap@2.0.2: {}
 
   is-weakref@1.1.1:
@@ -3327,10 +5322,16 @@ snapshots:
       call-bound: 1.0.4
       get-intrinsic: 1.3.0
 
+  is-wsl@3.1.1:
+    dependencies:
+      is-inside-container: 1.0.0
+
   isarray@2.0.5: {}
 
   isexe@2.0.0: {}
 
+  isexe@3.1.5: {}
+
   iterator.prototype@1.1.5:
     dependencies:
       define-data-property: 1.1.4
@@ -3342,6 +5343,8 @@ snapshots:
 
   jiti@2.6.1: {}
 
+  jose@6.2.3: {}
+
   js-tokens@4.0.0: {}
 
   js-yaml@4.1.1:
@@ -3352,8 +5355,14 @@ snapshots:
 
   json-buffer@3.0.1: {}
 
+  json-parse-even-better-errors@2.3.1: {}
+
   json-schema-traverse@0.4.1: {}
 
+  json-schema-traverse@1.0.0: {}
+
+  json-schema-typed@8.0.2: {}
+
   json-stable-stringify-without-jsonify@1.0.1: {}
 
   json5@1.0.2:
@@ -3362,6 +5371,12 @@ snapshots:
 
   json5@2.2.3: {}
 
+  jsonfile@6.2.1:
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
   jsx-ast-utils@3.3.5:
     dependencies:
       array-includes: 3.1.9
@@ -3373,6 +5388,10 @@ snapshots:
     dependencies:
       json-buffer: 3.0.1
 
+  kleur@3.0.3: {}
+
+  kleur@4.1.5: {}
+
   language-subtag-registry@0.3.23: {}
 
   language-tags@1.0.9:
@@ -3433,12 +5452,19 @@ snapshots:
       lightningcss-win32-arm64-msvc: 1.32.0
       lightningcss-win32-x64-msvc: 1.32.0
 
+  lines-and-columns@1.2.4: {}
+
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
 
   lodash.merge@4.6.2: {}
 
+  log-symbols@6.0.0:
+    dependencies:
+      chalk: 5.6.2
+      is-unicode-supported: 1.3.0
+
   loose-envify@1.4.0:
     dependencies:
       js-tokens: 4.0.0
@@ -3447,12 +5473,22 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lucide-react@1.17.0(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
   math-intrinsics@1.1.0: {}
 
+  media-typer@1.1.0: {}
+
+  merge-descriptors@2.0.0: {}
+
+  merge-stream@2.0.0: {}
+
   merge2@1.4.1: {}
 
   micromatch@4.0.8:
@@ -3460,6 +5496,16 @@ snapshots:
       braces: 3.0.3
       picomatch: 2.3.1
 
+  mime-db@1.54.0: {}
+
+  mime-types@3.0.2:
+    dependencies:
+      mime-db: 1.54.0
+
+  mimic-fn@2.1.0: {}
+
+  mimic-function@5.0.1: {}
+
   minimatch@10.2.4:
     dependencies:
       brace-expansion: 5.0.4
@@ -3472,12 +5518,46 @@ snapshots:
 
   ms@2.1.3: {}
 
+  msw@2.14.6(@types/node@20.19.37)(typescript@5.9.3):
+    dependencies:
+      '@inquirer/confirm': 6.1.1(@types/node@20.19.37)
+      '@mswjs/interceptors': 0.41.9
+      '@open-draft/deferred-promise': 3.0.0
+      '@types/statuses': 2.0.6
+      cookie: 1.1.1
+      graphql: 16.14.0
+      headers-polyfill: 5.0.1
+      is-node-process: 1.2.0
+      outvariant: 1.4.3
+      path-to-regexp: 6.3.0
+      picocolors: 1.1.1
+      rettime: 0.11.11
+      statuses: 2.0.2
+      strict-event-emitter: 0.5.1
+      tough-cookie: 6.0.1
+      type-fest: 5.6.0
+      until-async: 3.0.2
+      yargs: 17.7.2
+    optionalDependencies:
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - '@types/node'
+
+  mute-stream@3.0.0: {}
+
   nanoid@3.3.11: {}
 
   napi-postinstall@0.3.4: {}
 
   natural-compare@1.4.0: {}
 
+  negotiator@1.0.0: {}
+
+  next-themes@0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
   next@16.2.0(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
       '@next/env': 16.2.0
@@ -3502,6 +5582,8 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
+  node-domexception@1.0.0: {}
+
   node-exports-info@1.6.0:
     dependencies:
       array.prototype.flatmap: 1.3.3
@@ -3509,14 +5591,31 @@ snapshots:
       object.entries: 1.1.9
       semver: 6.3.1
 
+  node-fetch@3.3.2:
+    dependencies:
+      data-uri-to-buffer: 4.0.1
+      fetch-blob: 3.2.0
+      formdata-polyfill: 4.0.10
+
   node-releases@2.0.36: {}
 
+  npm-run-path@4.0.1:
+    dependencies:
+      path-key: 3.1.1
+
+  npm-run-path@6.0.0:
+    dependencies:
+      path-key: 4.0.0
+      unicorn-magic: 0.3.0
+
   object-assign@4.1.1: {}
 
   object-inspect@1.13.4: {}
 
   object-keys@1.1.1: {}
 
+  object-treeify@1.1.33: {}
+
   object.assign@4.1.7:
     dependencies:
       call-bind: 1.0.8
@@ -3553,6 +5652,31 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
+  on-finished@2.4.1:
+    dependencies:
+      ee-first: 1.1.1
+
+  once@1.4.0:
+    dependencies:
+      wrappy: 1.0.2
+
+  onetime@5.1.2:
+    dependencies:
+      mimic-fn: 2.1.0
+
+  onetime@7.0.0:
+    dependencies:
+      mimic-function: 5.0.1
+
+  open@11.0.0:
+    dependencies:
+      default-browser: 5.5.0
+      define-lazy-prop: 3.0.0
+      is-in-ssh: 1.0.0
+      is-inside-container: 1.0.0
+      powershell-utils: 0.1.0
+      wsl-utils: 0.3.1
+
   optionator@0.9.4:
     dependencies:
       deep-is: 0.1.4
@@ -3562,6 +5686,20 @@ snapshots:
       type-check: 0.4.0
       word-wrap: 1.2.5
 
+  ora@8.2.0:
+    dependencies:
+      chalk: 5.6.2
+      cli-cursor: 5.0.0
+      cli-spinners: 2.9.2
+      is-interactive: 2.0.0
+      is-unicode-supported: 2.1.0
+      log-symbols: 6.0.0
+      stdin-discarder: 0.2.2
+      string-width: 7.2.0
+      strip-ansi: 7.2.0
+
+  outvariant@1.4.3: {}
+
   own-keys@1.0.1:
     dependencies:
       get-intrinsic: 1.3.0
@@ -3580,20 +5718,48 @@ snapshots:
     dependencies:
       callsites: 3.1.0
 
+  parse-json@5.2.0:
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      error-ex: 1.3.4
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+
+  parse-ms@4.0.0: {}
+
+  parseurl@1.3.3: {}
+
+  path-browserify@1.0.1: {}
+
   path-exists@4.0.0: {}
 
   path-key@3.1.1: {}
 
+  path-key@4.0.0: {}
+
   path-parse@1.0.7: {}
 
+  path-to-regexp@6.3.0: {}
+
+  path-to-regexp@8.4.2: {}
+
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
 
   picomatch@4.0.3: {}
 
+  picomatch@4.0.4: {}
+
+  pkce-challenge@5.0.1: {}
+
   possible-typed-array-names@1.1.0: {}
 
+  postcss-selector-parser@7.1.1:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
   postcss@8.4.31:
     dependencies:
       nanoid: 3.3.11
@@ -3606,27 +5772,68 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  powershell-utils@0.1.0: {}
+
   prelude-ls@1.2.1: {}
 
+  pretty-ms@9.3.0:
+    dependencies:
+      parse-ms: 4.0.0
+
+  prompts@2.4.2:
+    dependencies:
+      kleur: 3.0.3
+      sisteransi: 1.0.5
+
   prop-types@15.8.1:
     dependencies:
       loose-envify: 1.4.0
       object-assign: 4.1.1
       react-is: 16.13.1
 
+  proxy-addr@2.0.7:
+    dependencies:
+      forwarded: 0.2.0
+      ipaddr.js: 1.9.1
+
   punycode@2.3.1: {}
 
+  qs@6.15.2:
+    dependencies:
+      side-channel: 1.1.0
+
   queue-microtask@1.2.3: {}
 
+  range-parser@1.2.1: {}
+
+  raw-body@3.0.2:
+    dependencies:
+      bytes: 3.1.2
+      http-errors: 2.0.1
+      iconv-lite: 0.7.2
+      unpipe: 1.0.0
+
   react-dom@19.2.4(react@19.2.4):
     dependencies:
       react: 19.2.4
       scheduler: 0.27.0
 
+  react-hook-form@7.76.1(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+
   react-is@16.13.1: {}
 
   react@19.2.4: {}
 
+  recast@0.23.11:
+    dependencies:
+      ast-types: 0.16.1
+      esprima: 4.0.1
+      source-map: 0.6.1
+      tiny-invariant: 1.3.3
+      tslib: 2.8.1
+
   reflect.getprototypeof@1.0.10:
     dependencies:
       call-bind: 1.0.8
@@ -3647,6 +5854,12 @@ snapshots:
       gopd: 1.2.0
       set-function-name: 2.0.2
 
+  require-directory@2.1.1: {}
+
+  require-from-string@2.0.2: {}
+
+  reselect@5.2.0: {}
+
   resolve-from@4.0.0: {}
 
   resolve-pkg-maps@1.0.0: {}
@@ -3666,8 +5879,27 @@ snapshots:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
+  restore-cursor@5.1.0:
+    dependencies:
+      onetime: 7.0.0
+      signal-exit: 4.1.0
+
+  rettime@0.11.11: {}
+
   reusify@1.1.0: {}
 
+  router@2.2.0:
+    dependencies:
+      debug: 4.4.3
+      depd: 2.0.0
+      is-promise: 4.0.0
+      parseurl: 1.3.3
+      path-to-regexp: 8.4.2
+    transitivePeerDependencies:
+      - supports-color
+
+  run-applescript@7.1.0: {}
+
   run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
@@ -3691,12 +5923,43 @@ snapshots:
       es-errors: 1.3.0
       is-regex: 1.2.1
 
+  safer-buffer@2.1.2: {}
+
   scheduler@0.27.0: {}
 
   semver@6.3.1: {}
 
   semver@7.7.4: {}
 
+  send@1.2.1:
+    dependencies:
+      debug: 4.4.3
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 2.0.0
+      http-errors: 2.0.1
+      mime-types: 3.0.2
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  serve-static@2.2.1:
+    dependencies:
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      parseurl: 1.3.3
+      send: 1.2.1
+    transitivePeerDependencies:
+      - supports-color
+
+  server-only@0.0.1: {}
+
+  set-cookie-parser@3.1.0: {}
+
   set-function-length@1.2.2:
     dependencies:
       define-data-property: 1.1.4
@@ -3719,6 +5982,51 @@ snapshots:
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
 
+  setprototypeof@1.2.0: {}
+
+  shadcn@4.8.3(@types/node@20.19.37)(typescript@5.9.3):
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/parser': 7.29.2
+      '@babel/plugin-transform-typescript': 7.29.7(@babel/core@7.29.0)
+      '@babel/preset-typescript': 7.29.7(@babel/core@7.29.0)
+      '@dotenvx/dotenvx': 1.69.2
+      '@modelcontextprotocol/sdk': 1.29.0(zod@3.25.76)
+      '@types/validate-npm-package-name': 4.0.2
+      browserslist: 4.28.1
+      commander: 14.0.3
+      cosmiconfig: 9.0.1(typescript@5.9.3)
+      dedent: 1.7.2
+      deepmerge: 4.3.1
+      diff: 8.0.4
+      execa: 9.6.1
+      fast-glob: 3.3.3
+      fs-extra: 11.3.5
+      fuzzysort: 3.1.0
+      https-proxy-agent: 7.0.6
+      kleur: 4.1.5
+      msw: 2.14.6(@types/node@20.19.37)(typescript@5.9.3)
+      node-fetch: 3.3.2
+      open: 11.0.0
+      ora: 8.2.0
+      postcss: 8.5.8
+      postcss-selector-parser: 7.1.1
+      prompts: 2.4.2
+      recast: 0.23.11
+      stringify-object: 5.0.0
+      tailwind-merge: 3.6.0
+      ts-morph: 26.0.0
+      tsconfig-paths: 4.2.0
+      validate-npm-package-name: 7.0.2
+      zod: 3.25.76
+      zod-to-json-schema: 3.25.2(zod@3.25.76)
+    transitivePeerDependencies:
+      - '@cfworker/json-schema'
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - typescript
+
   sharp@0.34.5:
     dependencies:
       '@img/colour': 1.1.0
@@ -3785,15 +6093,46 @@ snapshots:
       side-channel-map: 1.0.1
       side-channel-weakmap: 1.0.2
 
+  signal-exit@3.0.7: {}
+
+  signal-exit@4.1.0: {}
+
+  sisteransi@1.0.5: {}
+
+  sonner@2.0.7(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
   source-map-js@1.2.1: {}
 
+  source-map@0.6.1: {}
+
   stable-hash@0.0.5: {}
 
+  statuses@2.0.2: {}
+
+  stdin-discarder@0.2.2: {}
+
   stop-iteration-iterator@1.1.0:
     dependencies:
       es-errors: 1.3.0
       internal-slot: 1.1.0
 
+  strict-event-emitter@0.5.1: {}
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  string-width@7.2.0:
+    dependencies:
+      emoji-regex: 10.6.0
+      get-east-asian-width: 1.6.0
+      strip-ansi: 7.2.0
+
   string.prototype.includes@2.0.1:
     dependencies:
       call-bind: 1.0.8
@@ -3844,8 +6183,26 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
+  stringify-object@5.0.0:
+    dependencies:
+      get-own-enumerable-keys: 1.0.0
+      is-obj: 3.0.0
+      is-regexp: 3.1.0
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-ansi@7.2.0:
+    dependencies:
+      ansi-regex: 6.2.2
+
   strip-bom@3.0.0: {}
 
+  strip-final-newline@2.0.0: {}
+
+  strip-final-newline@4.0.0: {}
+
   strip-json-comments@3.1.1: {}
 
   styled-jsx@5.1.6(@babel/core@7.29.0)(react@19.2.4):
@@ -3861,23 +6218,46 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  tagged-tag@1.0.0: {}
+
+  tailwind-merge@3.6.0: {}
+
   tailwindcss@4.2.2: {}
 
   tapable@2.3.0: {}
 
+  tiny-invariant@1.3.3: {}
+
   tinyglobby@0.2.15:
     dependencies:
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
 
+  tldts-core@7.4.1: {}
+
+  tldts@7.4.1:
+    dependencies:
+      tldts-core: 7.4.1
+
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0
 
+  toidentifier@1.0.1: {}
+
+  tough-cookie@6.0.1:
+    dependencies:
+      tldts: 7.4.1
+
   ts-api-utils@2.5.0(typescript@5.9.3):
     dependencies:
       typescript: 5.9.3
 
+  ts-morph@26.0.0:
+    dependencies:
+      '@ts-morph/common': 0.27.0
+      code-block-writer: 13.0.3
+
   tsconfig-paths@3.15.0:
     dependencies:
       '@types/json5': 0.0.29
@@ -3885,12 +6265,30 @@ snapshots:
       minimist: 1.2.8
       strip-bom: 3.0.0
 
+  tsconfig-paths@4.2.0:
+    dependencies:
+      json5: 2.2.3
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+
   tslib@2.8.1: {}
 
+  tw-animate-css@1.4.0: {}
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
 
+  type-fest@5.6.0:
+    dependencies:
+      tagged-tag: 1.0.0
+
+  type-is@2.1.0:
+    dependencies:
+      content-type: 2.0.0
+      media-typer: 1.1.0
+      mime-types: 3.0.2
+
   typed-array-buffer@1.0.3:
     dependencies:
       call-bound: 1.0.4
@@ -3946,6 +6344,12 @@ snapshots:
 
   undici-types@6.21.0: {}
 
+  unicorn-magic@0.3.0: {}
+
+  universalify@2.0.1: {}
+
+  unpipe@1.0.0: {}
+
   unrs-resolver@1.11.1:
     dependencies:
       napi-postinstall: 0.3.4
@@ -3970,6 +6374,8 @@ snapshots:
       '@unrs/resolver-binding-win32-ia32-msvc': 1.11.1
       '@unrs/resolver-binding-win32-x64-msvc': 1.11.1
 
+  until-async@3.0.2: {}
+
   update-browserslist-db@1.2.3(browserslist@4.28.1):
     dependencies:
       browserslist: 4.28.1
@@ -3980,6 +6386,18 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  use-sync-external-store@1.6.0(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+
+  util-deprecate@1.0.2: {}
+
+  validate-npm-package-name@7.0.2: {}
+
+  vary@1.1.2: {}
+
+  web-streams-polyfill@3.3.3: {}
+
   which-boxed-primitive@1.1.1:
     dependencies:
       is-bigint: 1.1.0
@@ -4025,14 +6443,57 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
+  which@4.0.0:
+    dependencies:
+      isexe: 3.1.5
+
   word-wrap@1.2.5: {}
 
+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrappy@1.0.2: {}
+
+  wsl-utils@0.3.1:
+    dependencies:
+      is-wsl: 3.1.1
+      powershell-utils: 0.1.0
+
+  y18n@5.0.8: {}
+
   yallist@3.1.1: {}
 
+  yargs-parser@21.1.1: {}
+
+  yargs@17.7.2:
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
+
   yocto-queue@0.1.0: {}
 
-  zod-validation-error@4.0.2(zod@4.3.6):
+  yocto-spinner@1.2.0:
+    dependencies:
+      yoctocolors: 2.1.2
+
+  yoctocolors@2.1.2: {}
+
+  zod-to-json-schema@3.25.2(zod@3.25.76):
+    dependencies:
+      zod: 3.25.76
+
+  zod-validation-error@4.0.2(zod@4.4.3):
     dependencies:
-      zod: 4.3.6
+      zod: 4.4.3
+
+  zod@3.25.76: {}
 
-  zod@4.3.6: {}
+  zod@4.4.3: {}
diff --git a/frontend/types/auth.ts b/frontend/types/auth.ts
new file mode 100644
index 0000000..3986fc0
--- /dev/null
+++ b/frontend/types/auth.ts
@@ -0,0 +1,41 @@
+export interface User {
+  id: string
+  email: string
+  full_name: string
+  phone?: string
+  role: 'customer' | 'admin'
+  created_at: string
+  updated_at: string
+}
+
+export interface LoginRequest {
+  email: string
+  password: string
+}
+
+export interface RegisterRequest {
+  email: string
+  password: string
+  full_name: string
+  phone?: string
+}
+
+export interface AuthResponse {
+  user: User
+  access_token: string
+  refresh_token: string
+}
+
+export interface Address {
+  id: string
+  user_id: string
+  label: string
+  street: string
+  city: string
+  state: string
+  zip_code: string
+  country: string
+  is_default: boolean
+  created_at: string
+  updated_at: string
+}
diff --git a/frontend/types/order.ts b/frontend/types/order.ts
new file mode 100644
index 0000000..fca676e
--- /dev/null
+++ b/frontend/types/order.ts
@@ -0,0 +1,52 @@
+import type { Product } from './product'
+import type { Address } from './auth'
+
+export type OrderStatus =
+  | 'pending'
+  | 'confirmed'
+  | 'processing'
+  | 'shipped'
+  | 'delivered'
+  | 'cancelled'
+  | 'refunded'
+
+export interface OrderItem {
+  id: string
+  order_id: string
+  product_id: string
+  product?: Product
+  quantity: number
+  unit_price: number
+  total_price: number
+}
+
+export interface Order {
+  id: string
+  user_id: string
+  status: OrderStatus
+  items: OrderItem[]
+  shipping_address: Address
+  subtotal: number
+  total: number
+  created_at: string
+  updated_at: string
+}
+
+export interface CartItem {
+  id: string
+  user_id: string
+  product_id: string
+  product?: Product
+  quantity: number
+  created_at: string
+  updated_at: string
+}
+
+export interface CartResponse {
+  items: CartItem[]
+  subtotal: number
+}
+
+export interface CreateOrderRequest {
+  address_id: string
+}
diff --git a/frontend/types/payment.ts b/frontend/types/payment.ts
new file mode 100644
index 0000000..c224a30
--- /dev/null
+++ b/frontend/types/payment.ts
@@ -0,0 +1,19 @@
+export type PaymentStatus =
+  | 'pending'
+  | 'processing'
+  | 'succeeded'
+  | 'failed'
+  | 'cancelled'
+  | 'refunded'
+
+export interface Payment {
+  id: string
+  order_id: string
+  amount: number
+  currency: string
+  status: PaymentStatus
+  stripe_payment_intent_id?: string
+  client_secret?: string
+  created_at: string
+  updated_at: string
+}
diff --git a/frontend/types/product.ts b/frontend/types/product.ts
new file mode 100644
index 0000000..4176480
--- /dev/null
+++ b/frontend/types/product.ts
@@ -0,0 +1,51 @@
+export interface Category {
+  id: string
+  name: string
+  description?: string
+  created_at: string
+  updated_at: string
+}
+
+export interface ProductImage {
+  id: string
+  product_id: string
+  url: string
+  position: number
+  created_at: string
+}
+
+export interface Product {
+  id: string
+  category_id: string
+  category?: Category
+  name: string
+  description: string
+  price: number
+  image_url?: string
+  images: ProductImage[]
+  is_active: boolean
+  created_at: string
+  updated_at: string
+}
+
+export interface ProductFilters {
+  q?: string
+  category_id?: string
+  min_price?: string
+  max_price?: string
+  sort?: 'newest' | 'oldest' | 'price_asc' | 'price_desc'
+  page?: string
+  limit?: string
+}
+
+export interface PaginationMeta {
+  total: number
+  page: number
+  limit: number
+  total_pages: number
+}
+
+export interface PaginatedProducts {
+  products: Product[]
+  meta: PaginationMeta
+}

From bacef55fb61fe38c4b5784e91ca20cda58d1446d Mon Sep 17 00:00:00 2001
From: rezadrian01 <ahmadadrian324@gmail.com>
Date: Sun, 31 May 2026 14:55:26 +0700
Subject: [PATCH 2/8] fix: install babel-plugin-react-compiler required by
 reactCompiler: true
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Next.js 16 requires this devDependency when reactCompiler is enabled
in next.config.ts — without it the dev server fails to start.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/package.json   |  1 +
 frontend/pnpm-lock.yaml | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 88e10cb..76f9c58 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -37,6 +37,7 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^9",
     "eslint-config-next": "16.2.0",
     "tailwindcss": "^4",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index e95deb6..ce46831 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -43,7 +43,7 @@ importers:
         version: 1.17.0(react@19.2.4)
       next:
         specifier: 16.2.0
-        version: 16.2.0(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 16.2.0(@babel/core@7.29.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       next-themes:
         specifier: ^0.4.6
         version: 0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -87,6 +87,9 @@ importers:
       '@types/react-dom':
         specifier: ^19
         version: 19.2.3(@types/react@19.2.14)
+      babel-plugin-react-compiler:
+        specifier: ^1.0.0
+        version: 1.0.0
       eslint:
         specifier: ^9
         version: 9.39.4(jiti@2.6.1)
@@ -1190,6 +1193,9 @@ packages:
     resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
     engines: {node: '>= 0.4'}
 
+  babel-plugin-react-compiler@1.0.0:
+    resolution: {integrity: sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==}
+
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -4263,6 +4269,10 @@ snapshots:
 
   axobject-query@4.1.0: {}
 
+  babel-plugin-react-compiler@1.0.0:
+    dependencies:
+      '@babel/types': 7.29.7
+
   balanced-match@1.0.2: {}
 
   balanced-match@4.0.4: {}
@@ -5558,7 +5568,7 @@ snapshots:
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
 
-  next@16.2.0(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+  next@16.2.0(@babel/core@7.29.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
       '@next/env': 16.2.0
       '@swc/helpers': 0.5.15
@@ -5577,6 +5587,7 @@ snapshots:
       '@next/swc-linux-x64-musl': 16.2.0
       '@next/swc-win32-arm64-msvc': 16.2.0
       '@next/swc-win32-x64-msvc': 16.2.0
+      babel-plugin-react-compiler: 1.0.0
       sharp: 0.34.5
     transitivePeerDependencies:
       - '@babel/core'

From 16686e878bcbefc67a3b4b2320a82883f2f9436f Mon Sep 17 00:00:00 2001
From: rezadrian01 <ahmadadrian324@gmail.com>
Date: Sun, 31 May 2026 15:07:54 +0700
Subject: [PATCH 3/8] feat: auth BFF route handlers, proxy guard, and
 login/register pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Route Handlers (BFF cookie relay):
- app/api/auth/login — POST: calls backend, sets HttpOnly access_token (15m) +
  refresh_token (7d) both with Path=/ so proxy.ts can read the refresh cookie
- app/api/auth/register — POST: same cookie pattern as login
- app/api/auth/logout — POST: best-effort backend logout, clears both cookies
- app/api/auth/refresh — POST: exchanges refresh_token, issues new pair
- app/api/auth/me — GET: proxies /users/me with the httpOnly access_token

proxy.ts (Next.js 16 — renamed from middleware.ts):
- Redirects logged-in users away from /login and /register
- Guards /cart, /checkout, /orders, /profile, /admin with access_token check
- Falls back to token refresh via /api/auth/refresh when only refresh_token exists
- Decodes JWT payload to enforce admin-only access to /admin routes

Auth pages — luxury editorial dark design:
- app/(auth)/layout.tsx: split panel, Cormorant Garamond, warm-gold accent,
  subtle grid texture, radial glow, staggered reveal animations
- login/page.tsx + login-form.tsx: react-hook-form + loginSchema, inline error
  state, gold focus ring via CSS variable override, callbackUrl redirect
- register/page.tsx + register-form.tsx: full_name, email, phone (optional),
  password, confirm_password with cross-field Zod refinement

lib/hooks/use-auth.ts: useCurrentUser() + useLogout() with TanStack Query
globals.css: added auron-fade-up keyframes + gold color tokens

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/app/(auth)/layout.tsx                | 146 +++++++++
 frontend/app/(auth)/login/login-form.tsx      | 243 +++++++++++++++
 frontend/app/(auth)/login/page.tsx            |  13 +
 frontend/app/(auth)/register/page.tsx         |   8 +
 .../app/(auth)/register/register-form.tsx     | 287 ++++++++++++++++++
 frontend/app/api/auth/login/route.ts          |  17 ++
 frontend/app/api/auth/logout/route.ts         |  15 +
 frontend/app/api/auth/me/route.ts             |  14 +
 frontend/app/api/auth/refresh/route.ts        |  29 ++
 frontend/app/api/auth/register/route.ts       |  16 +
 frontend/app/globals.css                      |  12 +
 frontend/lib/hooks/use-auth.ts                |  34 +++
 frontend/proxy.ts                             |  56 ++++
 13 files changed, 890 insertions(+)
 create mode 100644 frontend/app/(auth)/layout.tsx
 create mode 100644 frontend/app/(auth)/login/login-form.tsx
 create mode 100644 frontend/app/(auth)/login/page.tsx
 create mode 100644 frontend/app/(auth)/register/page.tsx
 create mode 100644 frontend/app/(auth)/register/register-form.tsx
 create mode 100644 frontend/app/api/auth/login/route.ts
 create mode 100644 frontend/app/api/auth/logout/route.ts
 create mode 100644 frontend/app/api/auth/me/route.ts
 create mode 100644 frontend/app/api/auth/refresh/route.ts
 create mode 100644 frontend/app/api/auth/register/route.ts
 create mode 100644 frontend/lib/hooks/use-auth.ts
 create mode 100644 frontend/proxy.ts

diff --git a/frontend/app/(auth)/layout.tsx b/frontend/app/(auth)/layout.tsx
new file mode 100644
index 0000000..70c3a61
--- /dev/null
+++ b/frontend/app/(auth)/layout.tsx
@@ -0,0 +1,146 @@
+import { Cormorant_Garamond } from 'next/font/google'
+import type { Metadata } from 'next'
+
+const cormorant = Cormorant_Garamond({
+  subsets: ['latin'],
+  weight: ['300', '400', '500', '600'],
+  variable: '--font-cormorant',
+})
+
+export const metadata: Metadata = {
+  title: { absolute: 'Auron' },
+}
+
+const DARK = 'oklch(0.085 0.01 50)'
+const DARK_SURFACE = 'oklch(0.11 0.01 55)'
+const GOLD = 'oklch(0.75 0.12 85)'
+const TEXT = 'oklch(0.95 0.01 70)'
+const MUTED = 'oklch(0.42 0.02 70)'
+
+export default function AuthLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      className={cormorant.variable}
+      style={{ minHeight: '100svh', display: 'flex', background: DARK_SURFACE }}
+    >
+      {/* ── Left panel — brand identity ─────────────────────── */}
+      <div
+        className="hidden lg:flex lg:w-[46%] xl:w-[42%] relative overflow-hidden flex-col justify-between"
+        style={{
+          background: DARK,
+          padding: '3rem',
+          backgroundImage: `
+            linear-gradient(oklch(0.75 0.12 85 / 0.05) 1px, transparent 1px),
+            linear-gradient(90deg, oklch(0.75 0.12 85 / 0.05) 1px, transparent 1px)
+          `,
+          backgroundSize: '56px 56px',
+        }}
+      >
+        {/* Top — logo mark */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+          <div
+            style={{
+              width: '8px',
+              height: '8px',
+              borderRadius: '50%',
+              background: GOLD,
+              boxShadow: `0 0 12px ${GOLD}`,
+            }}
+          />
+          <span
+            style={{
+              fontFamily: 'var(--font-cormorant)',
+              fontSize: '0.95rem',
+              letterSpacing: '0.35em',
+              textTransform: 'uppercase',
+              color: TEXT,
+              fontWeight: 500,
+            }}
+          >
+            Auron
+          </span>
+        </div>
+
+        {/* Centre — large brand display */}
+        <div style={{ position: 'relative' }}>
+          <h1
+            style={{
+              fontFamily: 'var(--font-cormorant)',
+              fontSize: 'clamp(5rem, 10vw, 8.5rem)',
+              fontWeight: 300,
+              lineHeight: 0.88,
+              letterSpacing: '-0.02em',
+              color: TEXT,
+              margin: 0,
+            }}
+          >
+            Where
+            <br />
+            <span style={{ color: GOLD }}>excel</span>
+            <br />
+            lence
+            <br />
+            meets
+            <br />
+            <em style={{ fontStyle: 'italic', color: MUTED }}>elegance</em>
+          </h1>
+
+          {/* Decorative vertical line */}
+          <div
+            style={{
+              position: 'absolute',
+              left: '-2rem',
+              top: 0,
+              bottom: 0,
+              width: '1px',
+              background: `linear-gradient(to bottom, transparent, ${GOLD}, transparent)`,
+            }}
+          />
+        </div>
+
+        {/* Bottom — tagline + accent */}
+        <div>
+          <div style={{ width: '2.5rem', height: '1px', background: GOLD, marginBottom: '1rem' }} />
+          <p
+            style={{
+              fontSize: '0.65rem',
+              letterSpacing: '0.3em',
+              textTransform: 'uppercase',
+              color: MUTED,
+            }}
+          >
+            Premium E-Commerce
+          </p>
+        </div>
+
+        {/* Corner accent — subtle glow */}
+        <div
+          style={{
+            position: 'absolute',
+            bottom: '-6rem',
+            right: '-6rem',
+            width: '20rem',
+            height: '20rem',
+            borderRadius: '50%',
+            background: `radial-gradient(circle, oklch(0.75 0.12 85 / 0.06) 0%, transparent 70%)`,
+            pointerEvents: 'none',
+          }}
+        />
+      </div>
+
+      {/* ── Right panel — form container ────────────────────── */}
+      <div
+        style={{
+          flex: 1,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '2rem',
+          background: DARK_SURFACE,
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/app/(auth)/login/login-form.tsx b/frontend/app/(auth)/login/login-form.tsx
new file mode 100644
index 0000000..09d533a
--- /dev/null
+++ b/frontend/app/(auth)/login/login-form.tsx
@@ -0,0 +1,243 @@
+'use client'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { loginSchema, type LoginFormValues } from '@/lib/validations/auth'
+import { Form, FormField, FormItem, FormControl, FormMessage } from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useState } from 'react'
+import Link from 'next/link'
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const TEXT = 'oklch(0.95 0.01 70)'
+const MUTED = 'oklch(0.42 0.02 70)'
+const LABEL = 'oklch(0.52 0.02 70)'
+
+const fadeUp = (delay = 0): React.CSSProperties => ({
+  animation: 'auron-fade-up 0.55s ease-out both',
+  animationDelay: `${delay}ms`,
+})
+
+export function LoginForm() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const callbackUrl = searchParams.get('callbackUrl') ?? '/'
+  const [isPending, setIsPending] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const form = useForm<LoginFormValues>({
+    resolver: zodResolver(loginSchema),
+    defaultValues: { email: '', password: '' },
+  })
+
+  async function onSubmit(values: LoginFormValues) {
+    setIsPending(true)
+    setError(null)
+    try {
+      const res = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(values),
+      })
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        setError(
+          data.message ?? data.error ??
+          (res.status === 401 ? 'Invalid email or password' : 'Login failed')
+        )
+        return
+      }
+      router.push(callbackUrl)
+      router.refresh()
+    } catch {
+      setError('Something went wrong. Please try again.')
+    } finally {
+      setIsPending(false)
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        style={{
+          width: '100%',
+          maxWidth: '22rem',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1.75rem',
+          // Override shadcn token values for gold focus
+          '--ring': GOLD,
+          '--input': 'oklch(0.75 0.12 85 / 0.18)',
+          '--border': 'oklch(0.75 0.12 85 / 0.22)',
+          '--foreground': TEXT,
+          '--muted-foreground': MUTED,
+        } as React.CSSProperties}
+      >
+        {/* Header */}
+        <div style={fadeUp(0)}>
+          <p
+            style={{
+              fontSize: '0.65rem',
+              letterSpacing: '0.25em',
+              textTransform: 'uppercase',
+              color: LABEL,
+              marginBottom: '0.6rem',
+            }}
+          >
+            Welcome back
+          </p>
+          <h2
+            style={{
+              fontFamily: 'var(--font-cormorant)',
+              fontSize: '2.4rem',
+              fontWeight: 300,
+              lineHeight: 1.1,
+              color: TEXT,
+              margin: 0,
+            }}
+          >
+            Sign in to Auron
+          </h2>
+        </div>
+
+        {/* Email */}
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem style={fadeUp(80)}>
+              <label
+                style={{
+                  display: 'block',
+                  fontSize: '0.65rem',
+                  letterSpacing: '0.2em',
+                  textTransform: 'uppercase',
+                  color: LABEL,
+                  marginBottom: '0.5rem',
+                }}
+              >
+                Email address
+              </label>
+              <FormControl>
+                <Input
+                  type="email"
+                  placeholder="you@example.com"
+                  autoComplete="email"
+                  className="bg-transparent"
+                  style={{ color: TEXT }}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {/* Password */}
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem style={fadeUp(160)}>
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  marginBottom: '0.5rem',
+                }}
+              >
+                <label
+                  style={{
+                    fontSize: '0.65rem',
+                    letterSpacing: '0.2em',
+                    textTransform: 'uppercase',
+                    color: LABEL,
+                  }}
+                >
+                  Password
+                </label>
+                <span
+                  style={{
+                    fontSize: '0.7rem',
+                    color: GOLD,
+                    cursor: 'pointer',
+                    letterSpacing: '0.05em',
+                  }}
+                >
+                  Forgot?
+                </span>
+              </div>
+              <FormControl>
+                <Input
+                  type="password"
+                  placeholder="••••••••"
+                  autoComplete="current-password"
+                  className="bg-transparent"
+                  style={{ color: TEXT }}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {/* Error message */}
+        {error && (
+          <p
+            style={{
+              fontSize: '0.78rem',
+              color: 'oklch(0.68 0.2 25)',
+              animation: 'auron-fade-up 0.3s ease-out both',
+              margin: '-0.5rem 0',
+            }}
+          >
+            {error}
+          </p>
+        )}
+
+        {/* Submit */}
+        <div style={fadeUp(240)}>
+          <button
+            type="submit"
+            disabled={isPending}
+            style={{
+              width: '100%',
+              height: '42px',
+              background: isPending ? 'oklch(0.65 0.09 85)' : GOLD,
+              color: 'oklch(0.09 0.01 55)',
+              fontSize: '0.7rem',
+              fontWeight: 600,
+              letterSpacing: '0.2em',
+              textTransform: 'uppercase',
+              border: 'none',
+              borderRadius: '3px',
+              cursor: isPending ? 'not-allowed' : 'pointer',
+              transition: 'background 0.2s, opacity 0.2s',
+              opacity: isPending ? 0.7 : 1,
+            }}
+          >
+            {isPending ? 'Signing in…' : 'Sign In'}
+          </button>
+        </div>
+
+        {/* Register link */}
+        <p
+          style={{
+            textAlign: 'center',
+            fontSize: '0.73rem',
+            color: LABEL,
+            ...fadeUp(320),
+          }}
+        >
+          Don&apos;t have an account?{' '}
+          <Link href="/register" style={{ color: GOLD, textDecoration: 'none' }}>
+            Create one
+          </Link>
+        </p>
+      </form>
+    </Form>
+  )
+}
diff --git a/frontend/app/(auth)/login/page.tsx b/frontend/app/(auth)/login/page.tsx
new file mode 100644
index 0000000..eec3a3f
--- /dev/null
+++ b/frontend/app/(auth)/login/page.tsx
@@ -0,0 +1,13 @@
+import { Suspense } from 'react'
+import type { Metadata } from 'next'
+import { LoginForm } from './login-form'
+
+export const metadata: Metadata = { title: 'Sign In' }
+
+export default function LoginPage() {
+  return (
+    <Suspense>
+      <LoginForm />
+    </Suspense>
+  )
+}
diff --git a/frontend/app/(auth)/register/page.tsx b/frontend/app/(auth)/register/page.tsx
new file mode 100644
index 0000000..f76a642
--- /dev/null
+++ b/frontend/app/(auth)/register/page.tsx
@@ -0,0 +1,8 @@
+import type { Metadata } from 'next'
+import { RegisterForm } from './register-form'
+
+export const metadata: Metadata = { title: 'Create Account' }
+
+export default function RegisterPage() {
+  return <RegisterForm />
+}
diff --git a/frontend/app/(auth)/register/register-form.tsx b/frontend/app/(auth)/register/register-form.tsx
new file mode 100644
index 0000000..6f23d83
--- /dev/null
+++ b/frontend/app/(auth)/register/register-form.tsx
@@ -0,0 +1,287 @@
+'use client'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { registerSchema, type RegisterFormValues } from '@/lib/validations/auth'
+import { Form, FormField, FormItem, FormControl, FormMessage } from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+import Link from 'next/link'
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const TEXT = 'oklch(0.95 0.01 70)'
+const MUTED = 'oklch(0.42 0.02 70)'
+const LABEL = 'oklch(0.52 0.02 70)'
+
+const fadeUp = (delay = 0): React.CSSProperties => ({
+  animation: 'auron-fade-up 0.55s ease-out both',
+  animationDelay: `${delay}ms`,
+})
+
+const labelStyle: React.CSSProperties = {
+  display: 'block',
+  fontSize: '0.65rem',
+  letterSpacing: '0.2em',
+  textTransform: 'uppercase',
+  color: LABEL,
+  marginBottom: '0.5rem',
+}
+
+export function RegisterForm() {
+  const router = useRouter()
+  const [isPending, setIsPending] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const form = useForm<RegisterFormValues>({
+    resolver: zodResolver(registerSchema),
+    defaultValues: {
+      full_name: '',
+      email: '',
+      phone: '',
+      password: '',
+      confirm_password: '',
+    },
+  })
+
+  async function onSubmit(values: RegisterFormValues) {
+    setIsPending(true)
+    setError(null)
+    try {
+      const { confirm_password: _, ...payload } = values
+      // Remove empty phone
+      if (!payload.phone) delete (payload as { phone?: string }).phone
+
+      const res = await fetch('/api/auth/register', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      })
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        setError(data.message ?? data.error ?? 'Registration failed')
+        return
+      }
+      router.push('/')
+      router.refresh()
+    } catch {
+      setError('Something went wrong. Please try again.')
+    } finally {
+      setIsPending(false)
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        style={{
+          width: '100%',
+          maxWidth: '22rem',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1.4rem',
+          '--ring': GOLD,
+          '--input': 'oklch(0.75 0.12 85 / 0.18)',
+          '--border': 'oklch(0.75 0.12 85 / 0.22)',
+          '--foreground': TEXT,
+          '--muted-foreground': MUTED,
+        } as React.CSSProperties}
+      >
+        {/* Header */}
+        <div style={{ ...fadeUp(0), marginBottom: '0.25rem' }}>
+          <p
+            style={{
+              fontSize: '0.65rem',
+              letterSpacing: '0.25em',
+              textTransform: 'uppercase',
+              color: LABEL,
+              marginBottom: '0.6rem',
+            }}
+          >
+            New here?
+          </p>
+          <h2
+            style={{
+              fontFamily: 'var(--font-cormorant)',
+              fontSize: '2.4rem',
+              fontWeight: 300,
+              lineHeight: 1.1,
+              color: TEXT,
+              margin: 0,
+            }}
+          >
+            Create your account
+          </h2>
+        </div>
+
+        {/* Full name */}
+        <FormField
+          control={form.control}
+          name="full_name"
+          render={({ field }) => (
+            <FormItem style={fadeUp(80)}>
+              <label style={labelStyle}>Full name</label>
+              <FormControl>
+                <Input
+                  placeholder="Jane Doe"
+                  autoComplete="name"
+                  className="bg-transparent"
+                  style={{ color: TEXT }}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {/* Email */}
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem style={fadeUp(140)}>
+              <label style={labelStyle}>Email address</label>
+              <FormControl>
+                <Input
+                  type="email"
+                  placeholder="you@example.com"
+                  autoComplete="email"
+                  className="bg-transparent"
+                  style={{ color: TEXT }}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {/* Phone */}
+        <FormField
+          control={form.control}
+          name="phone"
+          render={({ field }) => (
+            <FormItem style={fadeUp(180)}>
+              <label style={{ ...labelStyle, color: MUTED }}>
+                Phone{' '}
+                <span style={{ letterSpacing: 0, textTransform: 'none', fontSize: '0.65rem' }}>
+                  (optional)
+                </span>
+              </label>
+              <FormControl>
+                <Input
+                  type="tel"
+                  placeholder="+1 555 000 0000"
+                  autoComplete="tel"
+                  className="bg-transparent"
+                  style={{ color: TEXT }}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {/* Password */}
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem style={fadeUp(220)}>
+              <label style={labelStyle}>Password</label>
+              <FormControl>
+                <Input
+                  type="password"
+                  placeholder="Min. 8 characters"
+                  autoComplete="new-password"
+                  className="bg-transparent"
+                  style={{ color: TEXT }}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {/* Confirm password */}
+        <FormField
+          control={form.control}
+          name="confirm_password"
+          render={({ field }) => (
+            <FormItem style={fadeUp(260)}>
+              <label style={labelStyle}>Confirm password</label>
+              <FormControl>
+                <Input
+                  type="password"
+                  placeholder="••••••••"
+                  autoComplete="new-password"
+                  className="bg-transparent"
+                  style={{ color: TEXT }}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {/* Error */}
+        {error && (
+          <p
+            style={{
+              fontSize: '0.78rem',
+              color: 'oklch(0.68 0.2 25)',
+              animation: 'auron-fade-up 0.3s ease-out both',
+              margin: '-0.25rem 0',
+            }}
+          >
+            {error}
+          </p>
+        )}
+
+        {/* Submit */}
+        <div style={fadeUp(300)}>
+          <button
+            type="submit"
+            disabled={isPending}
+            style={{
+              width: '100%',
+              height: '42px',
+              background: isPending ? 'oklch(0.65 0.09 85)' : GOLD,
+              color: 'oklch(0.09 0.01 55)',
+              fontSize: '0.7rem',
+              fontWeight: 600,
+              letterSpacing: '0.2em',
+              textTransform: 'uppercase',
+              border: 'none',
+              borderRadius: '3px',
+              cursor: isPending ? 'not-allowed' : 'pointer',
+              transition: 'background 0.2s, opacity 0.2s',
+              opacity: isPending ? 0.7 : 1,
+            }}
+          >
+            {isPending ? 'Creating account…' : 'Create Account'}
+          </button>
+        </div>
+
+        {/* Login link */}
+        <p
+          style={{
+            textAlign: 'center',
+            fontSize: '0.73rem',
+            color: LABEL,
+            ...fadeUp(360),
+          }}
+        >
+          Already have an account?{' '}
+          <Link href="/login" style={{ color: GOLD, textDecoration: 'none' }}>
+            Sign in
+          </Link>
+        </p>
+      </form>
+    </Form>
+  )
+}
diff --git a/frontend/app/api/auth/login/route.ts b/frontend/app/api/auth/login/route.ts
new file mode 100644
index 0000000..7510c35
--- /dev/null
+++ b/frontend/app/api/auth/login/route.ts
@@ -0,0 +1,17 @@
+export async function POST(req: Request) {
+  const body = await req.json()
+  const res = await fetch(`${process.env.API_URL}/auth/login`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  if (!res.ok) return Response.json(await res.json(), { status: res.status })
+  const data = await res.json()
+  const response = Response.json({ user: data.user })
+  // Path=/ so the browser includes refresh_token on all requests (required for proxy.ts refresh)
+  response.headers.append('Set-Cookie',
+    `access_token=${data.access_token}; HttpOnly; SameSite=Lax; Path=/; Max-Age=900`)
+  response.headers.append('Set-Cookie',
+    `refresh_token=${data.refresh_token}; HttpOnly; SameSite=Lax; Path=/; Max-Age=604800`)
+  return response
+}
diff --git a/frontend/app/api/auth/logout/route.ts b/frontend/app/api/auth/logout/route.ts
new file mode 100644
index 0000000..fecf142
--- /dev/null
+++ b/frontend/app/api/auth/logout/route.ts
@@ -0,0 +1,15 @@
+import { cookies } from 'next/headers'
+
+export async function POST() {
+  const token = (await cookies()).get('access_token')?.value
+  if (token) {
+    await fetch(`${process.env.API_URL}/auth/logout`, {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${token}` },
+    }).catch(() => {})
+  }
+  const response = Response.json({ ok: true })
+  response.headers.append('Set-Cookie', 'access_token=; HttpOnly; Max-Age=0; Path=/')
+  response.headers.append('Set-Cookie', 'refresh_token=; HttpOnly; Max-Age=0; Path=/')
+  return response
+}
diff --git a/frontend/app/api/auth/me/route.ts b/frontend/app/api/auth/me/route.ts
new file mode 100644
index 0000000..7a1b076
--- /dev/null
+++ b/frontend/app/api/auth/me/route.ts
@@ -0,0 +1,14 @@
+import { cookies } from 'next/headers'
+
+export async function GET() {
+  const token = (await cookies()).get('access_token')?.value
+  if (!token) return Response.json(null, { status: 401 })
+
+  const res = await fetch(`${process.env.API_URL}/users/me`, {
+    headers: { Authorization: `Bearer ${token}` },
+    cache: 'no-store',
+  })
+
+  if (!res.ok) return Response.json(null, { status: res.status })
+  return Response.json(await res.json())
+}
diff --git a/frontend/app/api/auth/refresh/route.ts b/frontend/app/api/auth/refresh/route.ts
new file mode 100644
index 0000000..c5ec7e4
--- /dev/null
+++ b/frontend/app/api/auth/refresh/route.ts
@@ -0,0 +1,29 @@
+import { cookies } from 'next/headers'
+
+export async function POST() {
+  const refreshToken = (await cookies()).get('refresh_token')?.value
+  if (!refreshToken) {
+    return Response.json({ error: 'No refresh token' }, { status: 401 })
+  }
+
+  const res = await fetch(`${process.env.API_URL}/auth/refresh`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ refresh_token: refreshToken }),
+  })
+
+  if (!res.ok) {
+    const response = Response.json({ error: 'Refresh failed' }, { status: 401 })
+    response.headers.append('Set-Cookie', 'access_token=; HttpOnly; Max-Age=0; Path=/')
+    response.headers.append('Set-Cookie', 'refresh_token=; HttpOnly; Max-Age=0; Path=/')
+    return response
+  }
+
+  const data = await res.json()
+  const response = Response.json({ ok: true })
+  response.headers.append('Set-Cookie',
+    `access_token=${data.access_token}; HttpOnly; SameSite=Lax; Path=/; Max-Age=900`)
+  response.headers.append('Set-Cookie',
+    `refresh_token=${data.refresh_token}; HttpOnly; SameSite=Lax; Path=/; Max-Age=604800`)
+  return response
+}
diff --git a/frontend/app/api/auth/register/route.ts b/frontend/app/api/auth/register/route.ts
new file mode 100644
index 0000000..7963535
--- /dev/null
+++ b/frontend/app/api/auth/register/route.ts
@@ -0,0 +1,16 @@
+export async function POST(req: Request) {
+  const body = await req.json()
+  const res = await fetch(`${process.env.API_URL}/auth/register`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  if (!res.ok) return Response.json(await res.json(), { status: res.status })
+  const data = await res.json()
+  const response = Response.json({ user: data.user })
+  response.headers.append('Set-Cookie',
+    `access_token=${data.access_token}; HttpOnly; SameSite=Lax; Path=/; Max-Age=900`)
+  response.headers.append('Set-Cookie',
+    `refresh_token=${data.refresh_token}; HttpOnly; SameSite=Lax; Path=/; Max-Age=604800`)
+  return response
+}
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index c56032b..aed2995 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -127,4 +127,16 @@
   html {
     @apply font-sans;
   }
+}
+
+/* ── Auron brand tokens ─────────────────────────────────────── */
+@theme inline {
+  --color-gold: oklch(0.75 0.12 85);
+  --color-gold-dim: oklch(0.65 0.09 85);
+}
+
+/* ── Auth page animations ───────────────────────────────────── */
+@keyframes auron-fade-up {
+  from { opacity: 0; transform: translateY(14px); }
+  to   { opacity: 1; transform: translateY(0); }
 }
\ No newline at end of file
diff --git a/frontend/lib/hooks/use-auth.ts b/frontend/lib/hooks/use-auth.ts
new file mode 100644
index 0000000..b418273
--- /dev/null
+++ b/frontend/lib/hooks/use-auth.ts
@@ -0,0 +1,34 @@
+'use client'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { useRouter } from 'next/navigation'
+import { queryKeys } from '@/lib/query-keys'
+import type { User } from '@/types/auth'
+
+export function useCurrentUser() {
+  return useQuery<User | null>({
+    queryKey: queryKeys.me,
+    queryFn: async () => {
+      const res = await fetch('/api/auth/me')
+      if (!res.ok) return null
+      const data = await res.json()
+      return data?.user ?? data ?? null
+    },
+    retry: false,
+    staleTime: 5 * 60_000,
+  })
+}
+
+export function useLogout() {
+  const qc = useQueryClient()
+  const router = useRouter()
+  return useMutation({
+    mutationFn: () =>
+      fetch('/api/auth/logout', { method: 'POST' }).then(r => r.json()),
+    onSuccess: () => {
+      qc.setQueryData(queryKeys.me, null)
+      qc.clear()
+      router.push('/login')
+      router.refresh()
+    },
+  })
+}
diff --git a/frontend/proxy.ts b/frontend/proxy.ts
new file mode 100644
index 0000000..fc0df0b
--- /dev/null
+++ b/frontend/proxy.ts
@@ -0,0 +1,56 @@
+import { NextResponse, type NextRequest } from 'next/server'
+
+const PROTECTED = ['/cart', '/checkout', '/orders', '/profile']
+const ADMIN_ONLY = ['/admin']
+const AUTH_PAGES = ['/login', '/register']
+
+export async function proxy(req: NextRequest) {
+  const { pathname } = req.nextUrl
+  const accessToken = req.cookies.get('access_token')?.value
+  const refreshToken = req.cookies.get('refresh_token')?.value
+
+  const isProtected = PROTECTED.some(p => pathname.startsWith(p))
+  const isAdmin = ADMIN_ONLY.some(p => pathname.startsWith(p))
+  const isAuthPage = AUTH_PAGES.some(p => pathname.startsWith(p))
+
+  // Redirect logged-in users away from auth pages
+  if (isAuthPage && accessToken) {
+    return NextResponse.redirect(new URL('/', req.url))
+  }
+
+  // Guard protected and admin routes
+  if ((isProtected || isAdmin) && !accessToken) {
+    if (refreshToken) {
+      const refreshRes = await fetch(new URL('/api/auth/refresh', req.url), {
+        method: 'POST',
+        headers: { cookie: `refresh_token=${refreshToken}` },
+      })
+      if (refreshRes.ok) {
+        const response = NextResponse.next()
+        for (const [key, value] of refreshRes.headers.entries()) {
+          if (key.toLowerCase() === 'set-cookie') response.headers.append(key, value)
+        }
+        return response
+      }
+    }
+    const loginUrl = new URL('/login', req.url)
+    loginUrl.searchParams.set('callbackUrl', pathname)
+    return NextResponse.redirect(loginUrl)
+  }
+
+  // Redirect non-admins away from /admin
+  if (isAdmin && accessToken) {
+    try {
+      const payload = JSON.parse(atob(accessToken.split('.')[1]))
+      if (payload.role !== 'admin') return NextResponse.redirect(new URL('/', req.url))
+    } catch {
+      return NextResponse.redirect(new URL('/login', req.url))
+    }
+  }
+
+  return NextResponse.next()
+}
+
+export const config = {
+  matcher: ['/((?!_next|favicon.ico|api|public).*)'],
+}

From 7a8467d582151ad0ebed99c4ca0090e63a81a912 Mon Sep 17 00:00:00 2001
From: rezadrian01 <ahmadadrian324@gmail.com>
Date: Sun, 31 May 2026 15:23:17 +0700
Subject: [PATCH 4/8] feat: shop layout, product catalog, and editorial landing
 page

Layout:
- app/(shop)/layout.tsx: shop shell wrapping Navbar + Footer around all shop pages
- Navbar: sticky glass-blur header, Cormorant Garamond logo with gold dot, debounced
  search (NavbarSearch client island in Suspense), cart icon, user dropdown with
  avatar initials and role-aware menu (admin link shown for admin role)
- Footer: dark-panel, three link columns, gold top-line gradient, client component
  for hover effects
- Promoted Cormorant Garamond to root layout so both auth and shop share the font

Landing page (app/(shop)/page.tsx):
- Animated ticker band (CSS-only, seamless loop, gold dots as separators)
- Asymmetric editorial hero: oversized stacked serif text left, dark geometric panel
  right with concentric gold circles and "A" monogram watermark
- Featured products grid (8 newest, SSR with 5-min revalidation)
- CategoryGrid client component with gold-border hover on category cards

Product catalog:
- /products: server-rendered listing with ProductFilters sidebar (category, sort,
  price range) and ProductSearch (300ms debounce, updates URL), both wrapped in
  Suspense; searchParams awaited as Promise (Next.js 16)
- /products/[id]: product detail with image gallery strip, stock badge, breadcrumb,
  add-to-cart button (disabled when out-of-stock, wired in next phase)
- loading.tsx files for both routes (skeleton states)

Components:
- ProductCard: 4:5 aspect image, slide-up on hover, fallback "A" monogram
- ProductGrid: responsive auto-fill grid + page-number pagination
- ProductGridSkeleton: matching skeleton layout
- ProductFilters + ProductSearch: client components, URL-param driven
- CategoryGrid: client component extracted to avoid server/client boundary issues

API layer:
- lib/api/products.ts: getProducts, getProduct, getCategories (server-only,
  force-cache with 5-min revalidation)
- lib/hooks/use-products.ts: useProducts, useProduct, useCategories (client hooks)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/app/(auth)/layout.tsx                |   8 -
 frontend/app/(shop)/layout.tsx                |  12 +
 frontend/app/(shop)/page.tsx                  | 273 ++++++++++++++++++
 frontend/app/(shop)/products/[id]/loading.tsx |  20 ++
 frontend/app/(shop)/products/[id]/page.tsx    | 181 ++++++++++++
 frontend/app/(shop)/products/loading.tsx      |  14 +
 frontend/app/(shop)/products/page.tsx         |  75 +++++
 frontend/app/layout.tsx                       |  25 +-
 frontend/app/page.tsx                         |  65 -----
 frontend/components/home/category-grid.tsx    |  64 ++++
 frontend/components/layout/cart-count.tsx     |   6 +
 frontend/components/layout/footer.tsx         | 137 +++++++++
 frontend/components/layout/navbar-search.tsx  |  64 ++++
 frontend/components/layout/navbar.tsx         | 186 ++++++++++++
 frontend/components/product/product-card.tsx  |  94 ++++++
 .../components/product/product-filters.tsx    | 140 +++++++++
 .../product/product-grid-skeleton.tsx         |  23 ++
 frontend/components/product/product-grid.tsx  |  76 +++++
 .../components/product/product-search.tsx     |  80 +++++
 frontend/lib/api/products.ts                  |  30 ++
 frontend/lib/hooks/use-products.ts            |  41 +++
 21 files changed, 1527 insertions(+), 87 deletions(-)
 create mode 100644 frontend/app/(shop)/layout.tsx
 create mode 100644 frontend/app/(shop)/page.tsx
 create mode 100644 frontend/app/(shop)/products/[id]/loading.tsx
 create mode 100644 frontend/app/(shop)/products/[id]/page.tsx
 create mode 100644 frontend/app/(shop)/products/loading.tsx
 create mode 100644 frontend/app/(shop)/products/page.tsx
 delete mode 100644 frontend/app/page.tsx
 create mode 100644 frontend/components/home/category-grid.tsx
 create mode 100644 frontend/components/layout/cart-count.tsx
 create mode 100644 frontend/components/layout/footer.tsx
 create mode 100644 frontend/components/layout/navbar-search.tsx
 create mode 100644 frontend/components/layout/navbar.tsx
 create mode 100644 frontend/components/product/product-card.tsx
 create mode 100644 frontend/components/product/product-filters.tsx
 create mode 100644 frontend/components/product/product-grid-skeleton.tsx
 create mode 100644 frontend/components/product/product-grid.tsx
 create mode 100644 frontend/components/product/product-search.tsx
 create mode 100644 frontend/lib/api/products.ts
 create mode 100644 frontend/lib/hooks/use-products.ts

diff --git a/frontend/app/(auth)/layout.tsx b/frontend/app/(auth)/layout.tsx
index 70c3a61..583f33e 100644
--- a/frontend/app/(auth)/layout.tsx
+++ b/frontend/app/(auth)/layout.tsx
@@ -1,12 +1,5 @@
-import { Cormorant_Garamond } from 'next/font/google'
 import type { Metadata } from 'next'
 
-const cormorant = Cormorant_Garamond({
-  subsets: ['latin'],
-  weight: ['300', '400', '500', '600'],
-  variable: '--font-cormorant',
-})
-
 export const metadata: Metadata = {
   title: { absolute: 'Auron' },
 }
@@ -20,7 +13,6 @@ const MUTED = 'oklch(0.42 0.02 70)'
 export default function AuthLayout({ children }: { children: React.ReactNode }) {
   return (
     <div
-      className={cormorant.variable}
       style={{ minHeight: '100svh', display: 'flex', background: DARK_SURFACE }}
     >
       {/* ── Left panel — brand identity ─────────────────────── */}
diff --git a/frontend/app/(shop)/layout.tsx b/frontend/app/(shop)/layout.tsx
new file mode 100644
index 0000000..b26454b
--- /dev/null
+++ b/frontend/app/(shop)/layout.tsx
@@ -0,0 +1,12 @@
+import { Navbar } from '@/components/layout/navbar'
+import { Footer } from '@/components/layout/footer'
+
+export default function ShopLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100svh' }}>
+      <Navbar />
+      <main style={{ flex: 1, background: 'oklch(0.975 0.005 75)' }}>{children}</main>
+      <Footer />
+    </div>
+  )
+}
diff --git a/frontend/app/(shop)/page.tsx b/frontend/app/(shop)/page.tsx
new file mode 100644
index 0000000..98b7dfb
--- /dev/null
+++ b/frontend/app/(shop)/page.tsx
@@ -0,0 +1,273 @@
+import Link from 'next/link'
+import { getProducts, getCategories } from '@/lib/api/products'
+import { ProductCard } from '@/components/product/product-card'
+import { CategoryGrid } from '@/components/home/category-grid'
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = { title: 'Auron — Premium E-Commerce' }
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+const CREAM = 'oklch(0.975 0.005 75)'
+const MUTED = 'oklch(0.52 0 0)'
+
+// ── Ticker ────────────────────────────────────────────────────────────────────
+function Ticker() {
+  const items = ['New Arrivals', 'Free Shipping Over $150', 'Premium Goods', 'Curated Quality', 'Limited Editions']
+  const repeated = [...items, ...items] // duplicate for seamless loop
+  return (
+    <div
+      style={{
+        overflow: 'hidden',
+        background: CHARCOAL,
+        padding: '10px 0',
+        borderBottom: `1px solid oklch(1 0 0 / 0.06)`,
+      }}
+    >
+      <style>{`
+        @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+      `}</style>
+      <div
+        style={{
+          display: 'flex',
+          width: 'max-content',
+          animation: 'ticker 22s linear infinite',
+        }}
+      >
+        {repeated.map((item, i) => (
+          <span key={i} style={{ display: 'flex', alignItems: 'center', gap: '2rem', paddingRight: '2rem' }}>
+            <span style={{ fontSize: '0.6rem', letterSpacing: '0.3em', textTransform: 'uppercase', color: 'oklch(0.85 0 0)', whiteSpace: 'nowrap' }}>
+              {item}
+            </span>
+            <span style={{ width: '4px', height: '4px', borderRadius: '50%', background: GOLD, flexShrink: 0 }} />
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// ── Hero ──────────────────────────────────────────────────────────────────────
+function Hero() {
+  return (
+    <section
+      style={{
+        background: CREAM,
+        minHeight: 'calc(85svh - 60px)',
+        display: 'grid',
+        gridTemplateColumns: '55% 45%',
+        overflow: 'hidden',
+      }}
+    >
+      {/* Left — editorial text */}
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          padding: 'clamp(3rem, 6vw, 6rem)',
+          gap: '2rem',
+        }}
+      >
+        <p style={{ fontSize: '0.62rem', letterSpacing: '0.35em', textTransform: 'uppercase', color: GOLD }}>
+          The New Standard
+        </p>
+
+        <h1
+          style={{
+            fontFamily: 'var(--font-cormorant)',
+            fontSize: 'clamp(4.5rem, 8vw, 7.5rem)',
+            fontWeight: 300,
+            lineHeight: 0.9,
+            letterSpacing: '-0.02em',
+            color: CHARCOAL,
+            margin: 0,
+          }}
+        >
+          Curated
+          <br />
+          <em style={{ fontStyle: 'italic', color: MUTED }}>luxury.</em>
+          <br />
+          Delivered.
+        </h1>
+
+        <div style={{ display: 'flex', alignItems: 'center', gap: '1.5rem' }}>
+          <Link
+            href="/products"
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: '0.75rem',
+              padding: '13px 28px',
+              background: CHARCOAL,
+              color: '#fff',
+              fontSize: '0.7rem',
+              letterSpacing: '0.2em',
+              textTransform: 'uppercase',
+              textDecoration: 'none',
+              borderRadius: '2px',
+              transition: 'background 0.2s',
+            }}
+          >
+            Explore Collection
+          </Link>
+          <Link
+            href="/products?sort=newest"
+            style={{ fontSize: '0.72rem', color: MUTED, textDecoration: 'underline', textUnderlineOffset: '4px' }}
+          >
+            New arrivals →
+          </Link>
+        </div>
+      </div>
+
+      {/* Right — accent panel */}
+      <div
+        style={{
+          background: CHARCOAL,
+          position: 'relative',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          overflow: 'hidden',
+        }}
+      >
+        {/* Gold grid overlay */}
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            backgroundImage: `
+              linear-gradient(oklch(0.75 0.12 85 / 0.06) 1px, transparent 1px),
+              linear-gradient(90deg, oklch(0.75 0.12 85 / 0.06) 1px, transparent 1px)
+            `,
+            backgroundSize: '48px 48px',
+          }}
+        />
+        {/* Large "A" monogram */}
+        <span
+          style={{
+            fontFamily: 'var(--font-cormorant)',
+            fontSize: 'clamp(12rem, 22vw, 20rem)',
+            fontWeight: 300,
+            color: 'oklch(1 0 0 / 0.04)',
+            lineHeight: 1,
+            userSelect: 'none',
+            position: 'absolute',
+          }}
+        >
+          A
+        </span>
+        {/* Gold circle accent */}
+        <div
+          style={{
+            width: '180px',
+            height: '180px',
+            borderRadius: '50%',
+            border: `1px solid ${GOLD}`,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            position: 'relative',
+          }}
+        >
+          <div style={{ width: '120px', height: '120px', borderRadius: '50%', border: `1px solid oklch(0.75 0.12 85 / 0.4)` }} />
+          <div
+            style={{
+              position: 'absolute',
+              width: '8px',
+              height: '8px',
+              borderRadius: '50%',
+              background: GOLD,
+              boxShadow: `0 0 16px ${GOLD}`,
+            }}
+          />
+        </div>
+        {/* Corner text */}
+        <p
+          style={{
+            position: 'absolute',
+            bottom: '2.5rem',
+            right: '2.5rem',
+            fontSize: '0.6rem',
+            letterSpacing: '0.3em',
+            textTransform: 'uppercase',
+            color: 'oklch(0.45 0 0)',
+            writingMode: 'vertical-rl',
+          }}
+        >
+          Premium Quality
+        </p>
+      </div>
+    </section>
+  )
+}
+
+// ── Landing page ──────────────────────────────────────────────────────────────
+export default async function HomePage() {
+  const [productsData, categories] = await Promise.all([
+    getProducts({ limit: '8', sort: 'newest' }).catch(() => ({ products: [], meta: { total: 0, page: 1, limit: 8, total_pages: 0 } })),
+    getCategories().catch(() => []),
+  ])
+
+  return (
+    <>
+      <Ticker />
+      <Hero />
+
+      {/* ── Featured products ────────────────────────────────── */}
+      <section style={{ maxWidth: '1200px', margin: '0 auto', padding: '5rem 1.5rem' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: '2.5rem' }}>
+          <div>
+            <p style={{ fontSize: '0.6rem', letterSpacing: '0.3em', textTransform: 'uppercase', color: GOLD, marginBottom: '0.5rem' }}>
+              Handpicked
+            </p>
+            <h2
+              style={{
+                fontFamily: 'var(--font-cormorant)',
+                fontSize: '2.5rem',
+                fontWeight: 300,
+                color: CHARCOAL,
+                margin: 0,
+                lineHeight: 1,
+              }}
+            >
+              Featured
+            </h2>
+          </div>
+          <Link
+            href="/products"
+            style={{ fontSize: '0.72rem', color: MUTED, textDecoration: 'underline', textUnderlineOffset: '4px', whiteSpace: 'nowrap' }}
+          >
+            View all →
+          </Link>
+        </div>
+
+        {productsData.products.length > 0 ? (
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: '1.5rem' }}>
+            {productsData.products.map(product => (
+              <ProductCard key={product.id} product={product} />
+            ))}
+          </div>
+        ) : (
+          <div
+            style={{
+              height: '300px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              border: '1px dashed oklch(0.85 0 0)',
+              borderRadius: '4px',
+            }}
+          >
+            <p style={{ fontFamily: 'var(--font-cormorant)', fontSize: '1.4rem', fontWeight: 300, color: 'oklch(0.7 0 0)' }}>
+              Products coming soon
+            </p>
+          </div>
+        )}
+      </section>
+
+      {/* ── Categories ───────────────────────────────────────── */}
+      <CategoryGrid categories={categories} />
+    </>
+  )
+}
diff --git a/frontend/app/(shop)/products/[id]/loading.tsx b/frontend/app/(shop)/products/[id]/loading.tsx
new file mode 100644
index 0000000..2f8ccf6
--- /dev/null
+++ b/frontend/app/(shop)/products/[id]/loading.tsx
@@ -0,0 +1,20 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
+export default function Loading() {
+  return (
+    <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '3rem 1.5rem' }}>
+      <Skeleton style={{ height: '18px', width: '220px', marginBottom: '2.5rem', borderRadius: '3px' }} />
+      <div style={{ display: 'grid', gridTemplateColumns: '55% 1fr', gap: '4rem' }}>
+        <Skeleton style={{ aspectRatio: '4/5', borderRadius: '4px' }} />
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem', paddingTop: '0.5rem' }}>
+          <Skeleton style={{ height: '12px', width: '80px' }} />
+          <Skeleton style={{ height: '60px', width: '85%' }} />
+          <Skeleton style={{ height: '28px', width: '100px' }} />
+          <Skeleton style={{ height: '1px', width: '100%' }} />
+          <Skeleton style={{ height: '80px', width: '100%' }} />
+          <Skeleton style={{ height: '48px', width: '100%', borderRadius: '3px' }} />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/app/(shop)/products/[id]/page.tsx b/frontend/app/(shop)/products/[id]/page.tsx
new file mode 100644
index 0000000..995f0ec
--- /dev/null
+++ b/frontend/app/(shop)/products/[id]/page.tsx
@@ -0,0 +1,181 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import { getProduct } from '@/lib/api/products'
+import { serverFetchPublic } from '@/lib/api/server'
+import { formatPrice } from '@/lib/utils'
+
+type Inventory = { available_quantity: number; total_quantity: number }
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+const MUTED = 'oklch(0.52 0 0)'
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ id: string }>
+}): Promise<Metadata> {
+  const { id } = await params
+  const product = await getProduct(id).catch(() => null)
+  if (!product) return { title: 'Product Not Found' }
+  return {
+    title: product.name,
+    description: product.description,
+    openGraph: { images: product.image_url ? [product.image_url] : [] },
+  }
+}
+
+function StockBadge({ qty }: { qty: number | null }) {
+  if (qty === null) return null
+  const label = qty === 0 ? 'Out of Stock' : qty < 5 ? `Only ${qty} left` : 'In Stock'
+  const color = qty === 0 ? 'oklch(0.6 0.18 25)' : qty < 5 ? 'oklch(0.65 0.14 60)' : 'oklch(0.5 0.14 145)'
+  return (
+    <span style={{ fontSize: '0.7rem', color, letterSpacing: '0.1em', textTransform: 'uppercase' }}>
+      {label}
+    </span>
+  )
+}
+
+export default async function ProductDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>
+}) {
+  const { id } = await params
+
+  const [product, inventory] = await Promise.all([
+    getProduct(id).catch(() => null),
+    serverFetchPublic<Inventory>(`/inventory/${id}`).catch(() => null),
+  ])
+
+  if (!product) notFound()
+
+  const imageUrl = product.image_url ?? product.images?.[0]?.url
+  const allImages = product.images?.length ? product.images : (imageUrl ? [{ id: 'main', url: imageUrl, position: 0, product_id: id, created_at: '' }] : [])
+  const availableQty = inventory?.available_quantity ?? null
+
+  return (
+    <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '3rem 1.5rem' }}>
+      {/* Breadcrumb */}
+      <nav style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', marginBottom: '2.5rem', fontSize: '0.72rem', color: MUTED }}>
+        <Link href="/" style={{ color: MUTED, textDecoration: 'none' }}>Home</Link>
+        <span>›</span>
+        <Link href="/products" style={{ color: MUTED, textDecoration: 'none' }}>Shop</Link>
+        <span>›</span>
+        <span style={{ color: CHARCOAL }}>{product.name}</span>
+      </nav>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '55% 1fr', gap: '4rem', alignItems: 'start' }}>
+        {/* Images */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+          {/* Main image */}
+          <div style={{ position: 'relative', aspectRatio: '4/5', background: 'oklch(0.96 0 0)', borderRadius: '4px', overflow: 'hidden' }}>
+            {imageUrl ? (
+              <Image
+                src={imageUrl}
+                alt={product.name}
+                fill
+                sizes="(max-width: 1024px) 100vw, 55vw"
+                style={{ objectFit: 'cover' }}
+                priority
+              />
+            ) : (
+              <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                <span style={{ fontFamily: 'var(--font-cormorant)', fontSize: '6rem', fontWeight: 300, color: 'oklch(0.85 0.03 70)' }}>A</span>
+              </div>
+            )}
+          </div>
+
+          {/* Thumbnail strip */}
+          {allImages.length > 1 && (
+            <div style={{ display: 'flex', gap: '0.5rem', overflowX: 'auto' }}>
+              {allImages.map((img, i) => (
+                <div
+                  key={img.id}
+                  style={{
+                    position: 'relative',
+                    width: '72px',
+                    height: '88px',
+                    flexShrink: 0,
+                    borderRadius: '3px',
+                    overflow: 'hidden',
+                    border: i === 0 ? `2px solid ${CHARCOAL}` : '2px solid transparent',
+                    background: 'oklch(0.96 0 0)',
+                  }}
+                >
+                  <Image src={img.url} alt={`${product.name} ${i + 1}`} fill style={{ objectFit: 'cover' }} sizes="72px" />
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Product info */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem', paddingTop: '0.5rem' }}>
+          {/* Category */}
+          {product.category && (
+            <Link
+              href={`/products?category_id=${product.category_id}`}
+              style={{ fontSize: '0.65rem', letterSpacing: '0.25em', textTransform: 'uppercase', color: GOLD, textDecoration: 'none' }}
+            >
+              {product.category.name}
+            </Link>
+          )}
+
+          {/* Name */}
+          <h1
+            style={{
+              fontFamily: 'var(--font-cormorant)',
+              fontSize: '2.5rem',
+              fontWeight: 400,
+              color: CHARCOAL,
+              margin: 0,
+              lineHeight: 1.1,
+            }}
+          >
+            {product.name}
+          </h1>
+
+          {/* Price + stock */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+            <span style={{ fontSize: '1.4rem', fontWeight: 600, color: GOLD, letterSpacing: '0.02em' }}>
+              {formatPrice(product.price)}
+            </span>
+            <StockBadge qty={availableQty} />
+          </div>
+
+          {/* Divider */}
+          <div style={{ height: '1px', background: 'oklch(0.9 0 0)' }} />
+
+          {/* Description */}
+          <p style={{ fontSize: '0.85rem', color: MUTED, lineHeight: 1.75 }}>{product.description}</p>
+
+          {/* Add to cart — wired in Phase 4 */}
+          <button
+            disabled={availableQty === 0}
+            style={{
+              height: '48px',
+              background: availableQty === 0 ? 'oklch(0.88 0 0)' : CHARCOAL,
+              color: availableQty === 0 ? MUTED : '#fff',
+              fontSize: '0.72rem',
+              fontWeight: 600,
+              letterSpacing: '0.2em',
+              textTransform: 'uppercase',
+              border: 'none',
+              borderRadius: '3px',
+              cursor: availableQty === 0 ? 'not-allowed' : 'pointer',
+              transition: 'background 0.2s',
+            }}
+          >
+            {availableQty === 0 ? 'Out of Stock' : 'Add to Cart'}
+          </button>
+
+          {/* Gold accent */}
+          <div style={{ width: '2.5rem', height: '1px', background: GOLD }} />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/app/(shop)/products/loading.tsx b/frontend/app/(shop)/products/loading.tsx
new file mode 100644
index 0000000..768fd6c
--- /dev/null
+++ b/frontend/app/(shop)/products/loading.tsx
@@ -0,0 +1,14 @@
+import { ProductGridSkeleton } from '@/components/product/product-grid-skeleton'
+
+export default function Loading() {
+  return (
+    <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '3rem 1.5rem' }}>
+      <div style={{ display: 'flex', gap: '3rem' }}>
+        <div style={{ width: '200px', flexShrink: 0 }} />
+        <div style={{ flex: 1 }}>
+          <ProductGridSkeleton count={12} />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/app/(shop)/products/page.tsx b/frontend/app/(shop)/products/page.tsx
new file mode 100644
index 0000000..ffce9d2
--- /dev/null
+++ b/frontend/app/(shop)/products/page.tsx
@@ -0,0 +1,75 @@
+import { Suspense } from 'react'
+import type { Metadata } from 'next'
+import { getProducts, getCategories } from '@/lib/api/products'
+import { ProductGrid } from '@/components/product/product-grid'
+import { ProductFilters } from '@/components/product/product-filters'
+import { ProductSearch } from '@/components/product/product-search'
+import { ProductGridSkeleton } from '@/components/product/product-grid-skeleton'
+import type { ProductFilters as Filters } from '@/types/product'
+
+export const metadata: Metadata = { title: 'Shop' }
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+
+export default async function ProductsPage({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string>>
+}) {
+  const params = await searchParams
+  const filters = params as Filters
+
+  const [data, categories] = await Promise.all([
+    getProducts(filters).catch(() => ({
+      products: [],
+      meta: { total: 0, page: 1, limit: 12, total_pages: 0 },
+    })),
+    getCategories().catch(() => []),
+  ])
+
+  const currentPage = Number(params.page ?? 1)
+
+  return (
+    <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '3rem 1.5rem' }}>
+      {/* Header */}
+      <div style={{ marginBottom: '2.5rem' }}>
+        <p style={{ fontSize: '0.6rem', letterSpacing: '0.3em', textTransform: 'uppercase', color: GOLD, marginBottom: '0.5rem' }}>
+          Browse
+        </p>
+        <h1
+          style={{
+            fontFamily: 'var(--font-cormorant)',
+            fontSize: '3rem',
+            fontWeight: 300,
+            color: CHARCOAL,
+            margin: '0 0 1.5rem',
+            lineHeight: 1,
+          }}
+        >
+          All Products
+        </h1>
+        <Suspense>
+          <ProductSearch />
+        </Suspense>
+      </div>
+
+      {/* Body: sidebar + grid */}
+      <div style={{ display: 'flex', gap: '3rem', alignItems: 'flex-start' }}>
+        <Suspense fallback={null}>
+          <ProductFilters categories={categories} currentParams={params} />
+        </Suspense>
+
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <Suspense fallback={<ProductGridSkeleton />}>
+            <ProductGrid
+              products={data.products}
+              meta={data.meta}
+              currentPage={currentPage}
+            />
+          </Suspense>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 931c2af..e62db77 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -1,17 +1,15 @@
 import type { Metadata } from 'next'
-import { Geist, Geist_Mono } from 'next/font/google'
+import { Geist, Geist_Mono, Cormorant_Garamond } from 'next/font/google'
 import './globals.css'
 import { QueryProvider } from '@/lib/providers/query-provider'
 import { Toaster } from '@/components/ui/sonner'
 
-const geistSans = Geist({
-  variable: '--font-geist-sans',
-  subsets: ['latin'],
-})
-
-const geistMono = Geist_Mono({
-  variable: '--font-geist-mono',
+const geistSans = Geist({ variable: '--font-geist-sans', subsets: ['latin'] })
+const geistMono = Geist_Mono({ variable: '--font-geist-mono', subsets: ['latin'] })
+const cormorant = Cormorant_Garamond({
   subsets: ['latin'],
+  weight: ['300', '400', '500', '600'],
+  variable: '--font-cormorant',
 })
 
 export const metadata: Metadata = {
@@ -19,13 +17,12 @@ export const metadata: Metadata = {
   description: 'Premium e-commerce platform',
 }
 
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode
-}>) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}>
+    <html
+      lang="en"
+      className={`${geistSans.variable} ${geistMono.variable} ${cormorant.variable} h-full antialiased`}
+    >
       <body className="min-h-full flex flex-col">
         <QueryProvider>
           {children}
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
deleted file mode 100644
index 3f36f7c..0000000
--- a/frontend/app/page.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import Image from "next/image";
-
-export default function Home() {
-  return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
-  );
-}
diff --git a/frontend/components/home/category-grid.tsx b/frontend/components/home/category-grid.tsx
new file mode 100644
index 0000000..425f9e1
--- /dev/null
+++ b/frontend/components/home/category-grid.tsx
@@ -0,0 +1,64 @@
+'use client'
+import Link from 'next/link'
+import type { Category } from '@/types/product'
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+
+export function CategoryGrid({ categories }: { categories: Category[] }) {
+  if (!categories.length) return null
+  return (
+    <section style={{ background: CHARCOAL, padding: '4rem 1.5rem' }}>
+      <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
+        <p style={{ fontSize: '0.6rem', letterSpacing: '0.3em', textTransform: 'uppercase', color: GOLD, marginBottom: '0.5rem' }}>
+          Browse by
+        </p>
+        <h2
+          style={{
+            fontFamily: 'var(--font-cormorant)',
+            fontSize: '2.5rem',
+            fontWeight: 300,
+            color: 'oklch(0.95 0.01 70)',
+            margin: '0 0 2.5rem',
+            lineHeight: 1,
+          }}
+        >
+          Category
+        </h2>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '1rem' }}>
+          {categories.map(cat => (
+            <Link
+              key={cat.id}
+              href={`/products?category_id=${cat.id}`}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                padding: '1.25rem',
+                border: '1px solid oklch(1 0 0 / 0.08)',
+                borderRadius: '3px',
+                textDecoration: 'none',
+                transition: 'border-color 0.2s, background 0.2s',
+              }}
+              onMouseEnter={e => {
+                const el = e.currentTarget as HTMLElement
+                el.style.borderColor = GOLD
+                el.style.background = 'oklch(1 0 0 / 0.03)'
+              }}
+              onMouseLeave={e => {
+                const el = e.currentTarget as HTMLElement
+                el.style.borderColor = 'oklch(1 0 0 / 0.08)'
+                el.style.background = 'transparent'
+              }}
+            >
+              <span style={{ fontFamily: 'var(--font-cormorant)', fontSize: '1.1rem', fontWeight: 400, color: 'oklch(0.9 0.01 70)' }}>
+                {cat.name}
+              </span>
+              <span style={{ color: GOLD, fontSize: '1rem' }}>→</span>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/frontend/components/layout/cart-count.tsx b/frontend/components/layout/cart-count.tsx
new file mode 100644
index 0000000..24f41aa
--- /dev/null
+++ b/frontend/components/layout/cart-count.tsx
@@ -0,0 +1,6 @@
+'use client'
+// Wired up in Phase 4 when cart hooks are added.
+// Renders nothing for now so the navbar icon is clean.
+export function CartCount() {
+  return null
+}
diff --git a/frontend/components/layout/footer.tsx b/frontend/components/layout/footer.tsx
new file mode 100644
index 0000000..69d2995
--- /dev/null
+++ b/frontend/components/layout/footer.tsx
@@ -0,0 +1,137 @@
+'use client'
+import Link from 'next/link'
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const TEXT = 'oklch(0.95 0.01 70)'
+const MUTED = 'oklch(0.42 0.02 70)'
+const DARK = 'oklch(0.085 0.01 50)'
+
+const links = {
+  Shop: [
+    { label: 'All Products', href: '/products' },
+    { label: 'New Arrivals', href: '/products?sort=newest' },
+  ],
+  Company: [
+    { label: 'About Auron', href: '/about' },
+    { label: 'Contact', href: '/contact' },
+  ],
+  Support: [
+    { label: 'FAQ', href: '/faq' },
+    { label: 'Shipping', href: '/shipping' },
+    { label: 'Returns', href: '/returns' },
+  ],
+}
+
+export function Footer() {
+  return (
+    <footer style={{ background: DARK, color: TEXT }}>
+      {/* Gold top line */}
+      <div style={{ height: '1px', background: `linear-gradient(to right, transparent, ${GOLD}, transparent)` }} />
+
+      <div
+        style={{
+          maxWidth: '1200px',
+          margin: '0 auto',
+          padding: '4rem 1.5rem 2.5rem',
+          display: 'grid',
+          gridTemplateColumns: '1fr auto',
+          gap: '3rem',
+        }}
+      >
+        {/* Brand */}
+        <div style={{ maxWidth: '280px' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '1rem' }}>
+            <div
+              style={{
+                width: '7px',
+                height: '7px',
+                borderRadius: '50%',
+                background: GOLD,
+                boxShadow: `0 0 8px ${GOLD}`,
+              }}
+            />
+            <span
+              style={{
+                fontFamily: 'var(--font-cormorant)',
+                fontSize: '1.1rem',
+                fontWeight: 500,
+                letterSpacing: '0.35em',
+                textTransform: 'uppercase',
+                color: TEXT,
+              }}
+            >
+              Auron
+            </span>
+          </div>
+          <p style={{ fontSize: '0.78rem', color: MUTED, lineHeight: 1.7, maxWidth: '220px' }}>
+            Premium goods, curated for those who appreciate the difference.
+          </p>
+        </div>
+
+        {/* Link columns */}
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(3, 120px)',
+            gap: '2rem',
+          }}
+        >
+          {Object.entries(links).map(([heading, items]) => (
+            <div key={heading}>
+              <p
+                style={{
+                  fontSize: '0.6rem',
+                  letterSpacing: '0.3em',
+                  textTransform: 'uppercase',
+                  color: GOLD,
+                  marginBottom: '1rem',
+                }}
+              >
+                {heading}
+              </p>
+              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
+                {items.map(({ label, href }) => (
+                  <li key={label}>
+                    <Link
+                      href={href}
+                      style={{
+                        fontSize: '0.78rem',
+                        color: MUTED,
+                        textDecoration: 'none',
+                        transition: 'color 0.15s',
+                      }}
+                      onMouseEnter={e => (e.currentTarget.style.color = TEXT)}
+                      onMouseLeave={e => (e.currentTarget.style.color = MUTED)}
+                    >
+                      {label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Bottom bar */}
+      <div
+        style={{
+          borderTop: '1px solid oklch(1 0 0 / 0.07)',
+          padding: '1.25rem 1.5rem',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          maxWidth: '1200px',
+          margin: '0 auto',
+        }}
+      >
+        <p style={{ fontSize: '0.7rem', color: MUTED }}>
+          © {new Date().getFullYear()} Auron. All rights reserved.
+        </p>
+        <p style={{ fontSize: '0.65rem', letterSpacing: '0.15em', textTransform: 'uppercase', color: MUTED }}>
+          Premium E-Commerce
+        </p>
+      </div>
+    </footer>
+  )
+}
diff --git a/frontend/components/layout/navbar-search.tsx b/frontend/components/layout/navbar-search.tsx
new file mode 100644
index 0000000..5776220
--- /dev/null
+++ b/frontend/components/layout/navbar-search.tsx
@@ -0,0 +1,64 @@
+'use client'
+import { useSearchParams, useRouter } from 'next/navigation'
+import { useState, useEffect, useRef } from 'react'
+import { Search } from 'lucide-react'
+
+const BORDER = 'oklch(0.88 0 0)'
+const MUTED = 'oklch(0.58 0 0)'
+
+export function NavbarSearch() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const [value, setValue] = useState(searchParams.get('q') ?? '')
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    if (timerRef.current) clearTimeout(timerRef.current)
+    timerRef.current = setTimeout(() => {
+      const params = new URLSearchParams(searchParams.toString())
+      if (value.trim()) params.set('q', value.trim())
+      else params.delete('q')
+      params.delete('page')
+      router.push(`/products?${params.toString()}`)
+    }, 350)
+    return () => { if (timerRef.current) clearTimeout(timerRef.current) }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return (
+    <div style={{ position: 'relative', width: '100%', maxWidth: '280px' }}>
+      <Search
+        size={13}
+        style={{
+          position: 'absolute',
+          left: '10px',
+          top: '50%',
+          transform: 'translateY(-50%)',
+          color: MUTED,
+          pointerEvents: 'none',
+        }}
+      />
+      <input
+        type="search"
+        placeholder="Search products…"
+        value={value}
+        onChange={e => setValue(e.target.value)}
+        style={{
+          width: '100%',
+          height: '34px',
+          paddingLeft: '30px',
+          paddingRight: '12px',
+          fontSize: '0.8rem',
+          background: 'oklch(0.96 0 0)',
+          border: `1px solid ${BORDER}`,
+          borderRadius: '4px',
+          outline: 'none',
+          color: 'oklch(0.14 0.01 50)',
+          transition: 'border-color 0.15s',
+        }}
+        onFocus={e => (e.currentTarget.style.borderColor = 'oklch(0.75 0.12 85)')}
+        onBlur={e => (e.currentTarget.style.borderColor = BORDER)}
+      />
+    </div>
+  )
+}
diff --git a/frontend/components/layout/navbar.tsx b/frontend/components/layout/navbar.tsx
new file mode 100644
index 0000000..b634753
--- /dev/null
+++ b/frontend/components/layout/navbar.tsx
@@ -0,0 +1,186 @@
+'use client'
+import Link from 'next/link'
+import { Suspense } from 'react'
+import { useRouter } from 'next/navigation'
+import { ShoppingBag, User, LogOut, LayoutDashboard, Package } from 'lucide-react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { NavbarSearch } from './navbar-search'
+import { CartCount } from './cart-count'
+import { useCurrentUser, useLogout } from '@/lib/hooks/use-auth'
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+const MUTED = 'oklch(0.52 0 0)'
+
+function UserAvatar({ name }: { name: string }) {
+  const initials = name
+    .split(' ')
+    .map(w => w[0])
+    .slice(0, 2)
+    .join('')
+    .toUpperCase()
+  return (
+    <div
+      style={{
+        width: '32px',
+        height: '32px',
+        borderRadius: '50%',
+        background: CHARCOAL,
+        color: 'oklch(0.97 0.01 70)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: '0.65rem',
+        fontWeight: 600,
+        letterSpacing: '0.05em',
+        cursor: 'pointer',
+        flexShrink: 0,
+      }}
+    >
+      {initials}
+    </div>
+  )
+}
+
+export function Navbar() {
+  const router = useRouter()
+  const { data: user, isLoading } = useCurrentUser()
+  const logout = useLogout()
+
+  return (
+    <header
+      style={{
+        position: 'sticky',
+        top: 0,
+        zIndex: 50,
+        background: 'rgba(255,255,255,0.95)',
+        backdropFilter: 'blur(8px)',
+        borderBottom: '1px solid oklch(0.92 0 0)',
+        height: '60px',
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 1.5rem',
+        gap: '1.5rem',
+      }}
+    >
+      {/* Logo */}
+      <Link
+        href="/"
+        style={{ display: 'flex', alignItems: 'center', gap: '8px', textDecoration: 'none', flexShrink: 0 }}
+      >
+        <div style={{ width: '7px', height: '7px', borderRadius: '50%', background: GOLD, boxShadow: `0 0 8px ${GOLD}` }} />
+        <span
+          style={{
+            fontFamily: 'var(--font-cormorant)',
+            fontSize: '1.15rem',
+            fontWeight: 500,
+            letterSpacing: '0.3em',
+            textTransform: 'uppercase',
+            color: CHARCOAL,
+          }}
+        >
+          Auron
+        </span>
+      </Link>
+
+      {/* Nav links */}
+      <nav className="hidden md:flex" style={{ gap: '1.5rem' }}>
+        {[
+          { href: '/products', label: 'Shop' },
+          { href: '/products?sort=newest', label: 'New Arrivals' },
+        ].map(({ href, label }) => (
+          <Link
+            key={href}
+            href={href}
+            style={{
+              fontSize: '0.75rem',
+              letterSpacing: '0.12em',
+              textTransform: 'uppercase',
+              color: MUTED,
+              textDecoration: 'none',
+            }}
+          >
+            {label}
+          </Link>
+        ))}
+      </nav>
+
+      {/* Search */}
+      <div className="hidden md:flex" style={{ flex: 1, justifyContent: 'center' }}>
+        <Suspense>
+          <NavbarSearch />
+        </Suspense>
+      </div>
+
+      {/* Right actions */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginLeft: 'auto' }}>
+        <Link href="/cart" style={{ position: 'relative', color: CHARCOAL, display: 'flex' }} aria-label="Cart">
+          <ShoppingBag size={20} strokeWidth={1.5} />
+          <CartCount />
+        </Link>
+
+        {isLoading ? (
+          <div style={{ width: '32px', height: '32px', borderRadius: '50%', background: 'oklch(0.94 0 0)' }} />
+        ) : user ? (
+          <DropdownMenu>
+            <DropdownMenuTrigger style={{ border: 'none', background: 'none', padding: 0, cursor: 'pointer' }}>
+              <UserAvatar name={user.full_name} />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" style={{ minWidth: '180px' }}>
+              <div style={{ padding: '8px 12px 6px' }}>
+                <p style={{ fontSize: '0.8rem', fontWeight: 500, color: CHARCOAL }}>{user.full_name}</p>
+                <p style={{ fontSize: '0.7rem', color: MUTED, marginTop: '2px' }}>{user.email}</p>
+              </div>
+              <DropdownMenuSeparator />
+              {user.role === 'admin' && (
+                <DropdownMenuItem onClick={() => router.push('/admin')}>
+                  <LayoutDashboard size={14} /> Admin
+                </DropdownMenuItem>
+              )}
+              <DropdownMenuItem onClick={() => router.push('/profile')}>
+                <User size={14} /> Profile
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => router.push('/orders')}>
+                <Package size={14} /> My Orders
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onClick={() => logout.mutate()}
+                variant="destructive"
+              >
+                <LogOut size={14} /> Sign Out
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ) : (
+          <div style={{ display: 'flex', gap: '0.75rem', alignItems: 'center' }}>
+            <Link href="/login" style={{ fontSize: '0.75rem', letterSpacing: '0.1em', textTransform: 'uppercase', color: MUTED, textDecoration: 'none' }}>
+              Sign In
+            </Link>
+            <Link
+              href="/register"
+              style={{
+                fontSize: '0.7rem',
+                letterSpacing: '0.1em',
+                textTransform: 'uppercase',
+                padding: '6px 14px',
+                background: CHARCOAL,
+                color: 'oklch(0.97 0.01 70)',
+                textDecoration: 'none',
+                borderRadius: '3px',
+              }}
+            >
+              Register
+            </Link>
+          </div>
+        )}
+      </div>
+    </header>
+  )
+}
diff --git a/frontend/components/product/product-card.tsx b/frontend/components/product/product-card.tsx
new file mode 100644
index 0000000..2c64057
--- /dev/null
+++ b/frontend/components/product/product-card.tsx
@@ -0,0 +1,94 @@
+'use client'
+import Image from 'next/image'
+import Link from 'next/link'
+import { formatPrice } from '@/lib/utils'
+import type { Product } from '@/types/product'
+
+const GOLD = 'oklch(0.75 0.12 85)'
+
+export function ProductCard({ product }: { product: Product }) {
+  const imageUrl = product.image_url ?? product.images?.[0]?.url
+
+  return (
+    <Link
+      href={`/products/${product.id}`}
+      style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}
+    >
+      <article
+        style={{
+          background: '#fff',
+          borderRadius: '4px',
+          overflow: 'hidden',
+          transition: 'transform 0.22s ease, box-shadow 0.22s ease',
+        }}
+        onMouseEnter={e => {
+          const el = e.currentTarget as HTMLElement
+          el.style.transform = 'translateY(-4px)'
+          el.style.boxShadow = '0 12px 32px oklch(0 0 0 / 0.10)'
+        }}
+        onMouseLeave={e => {
+          const el = e.currentTarget as HTMLElement
+          el.style.transform = 'translateY(0)'
+          el.style.boxShadow = 'none'
+        }}
+      >
+        {/* Image */}
+        <div style={{ position: 'relative', aspectRatio: '4/5', background: 'oklch(0.96 0 0)', overflow: 'hidden' }}>
+          {imageUrl ? (
+            <Image
+              src={imageUrl}
+              alt={product.name}
+              fill
+              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
+              style={{ objectFit: 'cover', transition: 'transform 0.4s ease' }}
+              onMouseEnter={e => ((e.currentTarget as HTMLElement).style.transform = 'scale(1.04)')}
+              onMouseLeave={e => ((e.currentTarget as HTMLElement).style.transform = 'scale(1)')}
+            />
+          ) : (
+            <div
+              style={{
+                position: 'absolute',
+                inset: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <span
+                style={{
+                  fontFamily: 'var(--font-cormorant)',
+                  fontSize: '4rem',
+                  fontWeight: 300,
+                  color: 'oklch(0.85 0.03 70)',
+                  letterSpacing: '-0.02em',
+                }}
+              >
+                A
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* Info */}
+        <div style={{ padding: '0.9rem 1rem 1.1rem' }}>
+          <p
+            style={{
+              fontSize: '0.72rem',
+              fontWeight: 500,
+              color: 'oklch(0.14 0.01 50)',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              marginBottom: '0.35rem',
+            }}
+          >
+            {product.name}
+          </p>
+          <p style={{ fontSize: '0.8rem', fontWeight: 600, color: GOLD, letterSpacing: '0.03em' }}>
+            {formatPrice(product.price)}
+          </p>
+        </div>
+      </article>
+    </Link>
+  )
+}
diff --git a/frontend/components/product/product-filters.tsx b/frontend/components/product/product-filters.tsx
new file mode 100644
index 0000000..f5c979e
--- /dev/null
+++ b/frontend/components/product/product-filters.tsx
@@ -0,0 +1,140 @@
+'use client'
+import { useRouter, usePathname, useSearchParams } from 'next/navigation'
+import type { Category } from '@/types/product'
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+const MUTED = 'oklch(0.55 0 0)'
+const BORDER = 'oklch(0.88 0 0)'
+
+const labelStyle: React.CSSProperties = {
+  fontSize: '0.62rem',
+  letterSpacing: '0.22em',
+  textTransform: 'uppercase',
+  color: MUTED,
+  display: 'block',
+  marginBottom: '0.5rem',
+}
+
+const selectStyle: React.CSSProperties = {
+  width: '100%',
+  height: '34px',
+  padding: '0 10px',
+  fontSize: '0.78rem',
+  border: `1px solid ${BORDER}`,
+  borderRadius: '3px',
+  background: '#fff',
+  color: CHARCOAL,
+  outline: 'none',
+  cursor: 'pointer',
+  appearance: 'none',
+  backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")`,
+  backgroundRepeat: 'no-repeat',
+  backgroundPosition: 'right 10px center',
+  paddingRight: '28px',
+}
+
+export function ProductFilters({
+  categories,
+  currentParams,
+}: {
+  categories: Category[]
+  currentParams: Record<string, string>
+}) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  function update(key: string, value: string) {
+    const params = new URLSearchParams(searchParams.toString())
+    if (value) params.set(key, value)
+    else params.delete(key)
+    params.delete('page')
+    router.push(`${pathname}?${params.toString()}`)
+  }
+
+  function clearAll() {
+    router.push(pathname)
+  }
+
+  const hasFilters = Object.keys(currentParams).some(k =>
+    ['q', 'category_id', 'min_price', 'max_price', 'sort'].includes(k)
+  )
+
+  return (
+    <aside style={{ width: '200px', flexShrink: 0, display: 'flex', flexDirection: 'column', gap: '1.75rem' }}>
+      {/* Header */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <span style={{ fontSize: '0.7rem', letterSpacing: '0.25em', textTransform: 'uppercase', color: CHARCOAL, fontWeight: 500 }}>
+          Filters
+        </span>
+        {hasFilters && (
+          <button
+            onClick={clearAll}
+            style={{ fontSize: '0.68rem', color: GOLD, background: 'none', border: 'none', cursor: 'pointer', letterSpacing: '0.1em' }}
+          >
+            Clear all
+          </button>
+        )}
+      </div>
+
+      {/* Category */}
+      <div>
+        <label style={labelStyle}>Category</label>
+        <select
+          value={currentParams.category_id ?? ''}
+          onChange={e => update('category_id', e.target.value)}
+          style={selectStyle}
+        >
+          <option value="">All</option>
+          {categories.map(cat => (
+            <option key={cat.id} value={cat.id}>{cat.name}</option>
+          ))}
+        </select>
+      </div>
+
+      {/* Sort */}
+      <div>
+        <label style={labelStyle}>Sort by</label>
+        <select
+          value={currentParams.sort ?? ''}
+          onChange={e => update('sort', e.target.value)}
+          style={selectStyle}
+        >
+          <option value="">Default</option>
+          <option value="newest">Newest</option>
+          <option value="oldest">Oldest</option>
+          <option value="price_asc">Price: Low to High</option>
+          <option value="price_desc">Price: High to Low</option>
+        </select>
+      </div>
+
+      {/* Price range */}
+      <div>
+        <label style={labelStyle}>Price range</label>
+        <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+          <input
+            type="number"
+            placeholder="Min"
+            min={0}
+            defaultValue={currentParams.min_price}
+            onBlur={e => update('min_price', e.target.value)}
+            style={{ ...selectStyle, width: '50%', paddingRight: '10px', backgroundImage: 'none' }}
+          />
+          <span style={{ fontSize: '0.7rem', color: MUTED }}>–</span>
+          <input
+            type="number"
+            placeholder="Max"
+            min={0}
+            defaultValue={currentParams.max_price}
+            onBlur={e => update('max_price', e.target.value)}
+            style={{ ...selectStyle, width: '50%', paddingRight: '10px', backgroundImage: 'none' }}
+          />
+        </div>
+      </div>
+
+      {/* Gold accent line */}
+      <div style={{ width: '2rem', height: '1px', background: GOLD }} />
+    </aside>
+  )
+}
diff --git a/frontend/components/product/product-grid-skeleton.tsx b/frontend/components/product/product-grid-skeleton.tsx
new file mode 100644
index 0000000..f0fd675
--- /dev/null
+++ b/frontend/components/product/product-grid-skeleton.tsx
@@ -0,0 +1,23 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
+export function ProductGridSkeleton({ count = 8 }: { count?: number }) {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))',
+        gap: '1.5rem',
+      }}
+    >
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} style={{ background: '#fff', borderRadius: '4px', overflow: 'hidden' }}>
+          <Skeleton style={{ aspectRatio: '4/5', width: '100%' }} />
+          <div style={{ padding: '0.9rem 1rem 1.1rem', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+            <Skeleton style={{ height: '14px', width: '80%', borderRadius: '3px' }} />
+            <Skeleton style={{ height: '14px', width: '40%', borderRadius: '3px' }} />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/frontend/components/product/product-grid.tsx b/frontend/components/product/product-grid.tsx
new file mode 100644
index 0000000..725a4ad
--- /dev/null
+++ b/frontend/components/product/product-grid.tsx
@@ -0,0 +1,76 @@
+import Link from 'next/link'
+import { ProductCard } from './product-card'
+import type { Product, PaginationMeta } from '@/types/product'
+
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+
+function Pagination({ meta, currentPage }: { meta: PaginationMeta; currentPage: number }) {
+  if (meta.total_pages <= 1) return null
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '0.5rem', marginTop: '3rem' }}>
+      {Array.from({ length: meta.total_pages }, (_, i) => i + 1).map(page => (
+        <Link
+          key={page}
+          href={`?page=${page}`}
+          style={{
+            width: '36px',
+            height: '36px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: '3px',
+            fontSize: '0.78rem',
+            textDecoration: 'none',
+            background: page === currentPage ? CHARCOAL : 'transparent',
+            color: page === currentPage ? '#fff' : CHARCOAL,
+            border: `1px solid ${page === currentPage ? CHARCOAL : 'oklch(0.88 0 0)'}`,
+            transition: 'all 0.15s',
+          }}
+        >
+          {page}
+        </Link>
+      ))}
+    </div>
+  )
+}
+
+export function ProductGrid({
+  products,
+  meta,
+  currentPage = 1,
+}: {
+  products: Product[]
+  meta: PaginationMeta
+  currentPage?: number
+}) {
+  if (products.length === 0) {
+    return (
+      <div style={{ textAlign: 'center', padding: '5rem 1rem' }}>
+        <p style={{ fontFamily: 'var(--font-cormorant)', fontSize: '1.8rem', fontWeight: 300, color: 'oklch(0.5 0 0)', marginBottom: '0.75rem' }}>
+          No products found
+        </p>
+        <p style={{ fontSize: '0.8rem', color: 'oklch(0.6 0 0)' }}>Try adjusting your filters.</p>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))',
+          gap: '1.5rem',
+        }}
+      >
+        {products.map(product => (
+          <ProductCard key={product.id} product={product} />
+        ))}
+      </div>
+      <Pagination meta={meta} currentPage={currentPage} />
+      <p style={{ textAlign: 'center', fontSize: '0.72rem', color: 'oklch(0.6 0 0)', marginTop: '1.25rem' }}>
+        {meta.total} {meta.total === 1 ? 'product' : 'products'}
+      </p>
+    </div>
+  )
+}
diff --git a/frontend/components/product/product-search.tsx b/frontend/components/product/product-search.tsx
new file mode 100644
index 0000000..56e0c91
--- /dev/null
+++ b/frontend/components/product/product-search.tsx
@@ -0,0 +1,80 @@
+'use client'
+import { useSearchParams, useRouter, usePathname } from 'next/navigation'
+import { useState, useEffect, useRef } from 'react'
+import { Search, X } from 'lucide-react'
+
+export function ProductSearch() {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const [value, setValue] = useState(searchParams.get('q') ?? '')
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    if (timerRef.current) clearTimeout(timerRef.current)
+    timerRef.current = setTimeout(() => {
+      const params = new URLSearchParams(searchParams.toString())
+      if (value.trim()) params.set('q', value.trim())
+      else params.delete('q')
+      params.delete('page')
+      router.push(`${pathname}?${params.toString()}`)
+    }, 300)
+    return () => { if (timerRef.current) clearTimeout(timerRef.current) }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return (
+    <div style={{ position: 'relative', width: '100%' }}>
+      <Search
+        size={14}
+        style={{
+          position: 'absolute',
+          left: '12px',
+          top: '50%',
+          transform: 'translateY(-50%)',
+          color: 'oklch(0.6 0 0)',
+          pointerEvents: 'none',
+        }}
+      />
+      <input
+        type="search"
+        placeholder="Search by name or description…"
+        value={value}
+        onChange={e => setValue(e.target.value)}
+        style={{
+          width: '100%',
+          height: '40px',
+          paddingLeft: '38px',
+          paddingRight: value ? '36px' : '12px',
+          fontSize: '0.82rem',
+          border: '1px solid oklch(0.88 0 0)',
+          borderRadius: '4px',
+          background: '#fff',
+          color: 'oklch(0.14 0.01 50)',
+          outline: 'none',
+          transition: 'border-color 0.15s',
+        }}
+        onFocus={e => (e.currentTarget.style.borderColor = 'oklch(0.75 0.12 85)')}
+        onBlur={e => (e.currentTarget.style.borderColor = 'oklch(0.88 0 0)')}
+      />
+      {value && (
+        <button
+          onClick={() => setValue('')}
+          style={{
+            position: 'absolute',
+            right: '10px',
+            top: '50%',
+            transform: 'translateY(-50%)',
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            color: 'oklch(0.6 0 0)',
+            display: 'flex',
+          }}
+        >
+          <X size={14} />
+        </button>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/lib/api/products.ts b/frontend/lib/api/products.ts
new file mode 100644
index 0000000..0201f4e
--- /dev/null
+++ b/frontend/lib/api/products.ts
@@ -0,0 +1,30 @@
+import { serverFetchPublic } from './server'
+import type { Product, PaginatedProducts, Category, ProductFilters } from '@/types/product'
+
+function buildQuery(filters?: ProductFilters): string {
+  if (!filters) return ''
+  const params = new URLSearchParams()
+  if (filters.q) params.set('q', filters.q)
+  if (filters.category_id) params.set('category_id', filters.category_id)
+  if (filters.min_price) params.set('min_price', filters.min_price)
+  if (filters.max_price) params.set('max_price', filters.max_price)
+  if (filters.sort) params.set('sort', filters.sort)
+  if (filters.page) params.set('page', filters.page)
+  if (filters.limit) params.set('limit', filters.limit)
+  const qs = params.toString()
+  return qs ? `?${qs}` : ''
+}
+
+export async function getProducts(filters?: ProductFilters): Promise<PaginatedProducts> {
+  return serverFetchPublic(`/products${buildQuery(filters)}`)
+}
+
+export async function getProduct(id: string): Promise<Product> {
+  return serverFetchPublic(`/products/${id}`)
+}
+
+export async function getCategories(): Promise<Category[]> {
+  const data = await serverFetchPublic<{ categories?: Category[] } | Category[]>('/categories')
+  if (Array.isArray(data)) return data
+  return (data as { categories?: Category[] }).categories ?? []
+}
diff --git a/frontend/lib/hooks/use-products.ts b/frontend/lib/hooks/use-products.ts
new file mode 100644
index 0000000..ff9ea2f
--- /dev/null
+++ b/frontend/lib/hooks/use-products.ts
@@ -0,0 +1,41 @@
+'use client'
+import { useQuery } from '@tanstack/react-query'
+import { api } from '@/lib/api/client'
+import { queryKeys } from '@/lib/query-keys'
+import type { PaginatedProducts, Product, Category, ProductFilters } from '@/types/product'
+
+function buildQuery(filters?: ProductFilters): string {
+  if (!filters) return ''
+  const params = new URLSearchParams()
+  const entries = Object.entries(filters) as [string, string | undefined][]
+  for (const [k, v] of entries) if (v) params.set(k, v)
+  const qs = params.toString()
+  return qs ? `?${qs}` : ''
+}
+
+export function useProducts(filters?: ProductFilters) {
+  return useQuery({
+    queryKey: queryKeys.products(filters),
+    queryFn: () => api.get<PaginatedProducts>(`/products${buildQuery(filters)}`),
+    staleTime: 60_000,
+  })
+}
+
+export function useProduct(id: string) {
+  return useQuery({
+    queryKey: queryKeys.product(id),
+    queryFn: () => api.get<Product>(`/products/${id}`),
+  })
+}
+
+export function useCategories() {
+  return useQuery({
+    queryKey: queryKeys.categories,
+    queryFn: async () => {
+      const data = await api.get<{ categories?: Category[] } | Category[]>('/categories')
+      if (Array.isArray(data)) return data
+      return (data as { categories?: Category[] }).categories ?? []
+    },
+    staleTime: 10 * 60_000,
+  })
+}

From 73887f3c23e27840a3e09a7ae98e2fc9f433dc27 Mon Sep 17 00:00:00 2001
From: rezadrian01 <ahmadadrian324@gmail.com>
Date: Sun, 31 May 2026 15:34:13 +0700
Subject: [PATCH 5/8] feat: cart system, order history, and authenticated BFF
 proxy routes

- Cart: add/update/remove items, qty stepper, real-time total, CartCount badge in navbar
- Product detail: Add to Cart client component wired with quantity selector and toast feedback
- Cart page: item list with inline controls, order summary panel with shipping threshold logic, empty state
- BFF route handlers for cart and orders (read access_token httpOnly cookie, forward to gateway with Bearer auth)
- Order history list: SSR via serverFetch, status badges, order rows with hover state
- Order detail: SSR, item breakdown table, shipping address, cancel button (client component, available on pending/confirmed/processing)
- TypeScript types for Cart, CartItem, Order, OrderItem

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/app/(shop)/cart/loading.tsx          |  26 +++
 frontend/app/(shop)/cart/page.tsx             | 143 +++++++++++++
 frontend/app/(shop)/orders/[id]/loading.tsx   |  31 +++
 frontend/app/(shop)/orders/[id]/page.tsx      | 183 ++++++++++++++++
 frontend/app/(shop)/orders/loading.tsx        |  33 +++
 frontend/app/(shop)/orders/page.tsx           | 200 ++++++++++++++++++
 .../app/(shop)/products/[id]/add-to-cart.tsx  | 141 ++++++++++++
 frontend/app/(shop)/products/[id]/page.tsx    |  24 +--
 frontend/app/api/cart/[itemId]/route.ts       |  43 ++++
 frontend/app/api/cart/route.ts                |  34 +++
 frontend/app/api/orders/[id]/cancel/route.ts  |  24 +++
 frontend/app/api/orders/[id]/route.ts         |  24 +++
 frontend/app/api/orders/route.ts              |  36 ++++
 frontend/components/cart/cart-item.tsx        | 155 ++++++++++++++
 frontend/components/cart/cart-summary.tsx     | 108 ++++++++++
 frontend/components/layout/cart-count.tsx     |  33 ++-
 .../components/order/cancel-order-button.tsx  |  56 +++++
 frontend/lib/hooks/use-cart.ts                |  64 ++++++
 frontend/lib/hooks/use-orders.ts              |  54 +++++
 frontend/types/cart.ts                        |  20 ++
 frontend/types/order.ts                       |  38 +---
 21 files changed, 1418 insertions(+), 52 deletions(-)
 create mode 100644 frontend/app/(shop)/cart/loading.tsx
 create mode 100644 frontend/app/(shop)/cart/page.tsx
 create mode 100644 frontend/app/(shop)/orders/[id]/loading.tsx
 create mode 100644 frontend/app/(shop)/orders/[id]/page.tsx
 create mode 100644 frontend/app/(shop)/orders/loading.tsx
 create mode 100644 frontend/app/(shop)/orders/page.tsx
 create mode 100644 frontend/app/(shop)/products/[id]/add-to-cart.tsx
 create mode 100644 frontend/app/api/cart/[itemId]/route.ts
 create mode 100644 frontend/app/api/cart/route.ts
 create mode 100644 frontend/app/api/orders/[id]/cancel/route.ts
 create mode 100644 frontend/app/api/orders/[id]/route.ts
 create mode 100644 frontend/app/api/orders/route.ts
 create mode 100644 frontend/components/cart/cart-item.tsx
 create mode 100644 frontend/components/cart/cart-summary.tsx
 create mode 100644 frontend/components/order/cancel-order-button.tsx
 create mode 100644 frontend/lib/hooks/use-cart.ts
 create mode 100644 frontend/lib/hooks/use-orders.ts
 create mode 100644 frontend/types/cart.ts

diff --git a/frontend/app/(shop)/cart/loading.tsx b/frontend/app/(shop)/cart/loading.tsx
new file mode 100644
index 0000000..4f69072
--- /dev/null
+++ b/frontend/app/(shop)/cart/loading.tsx
@@ -0,0 +1,26 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
+export default function Loading() {
+  return (
+    <div style={{ maxWidth: '1100px', margin: '0 auto', padding: '3rem 1.5rem' }}>
+      <Skeleton style={{ height: '12px', width: '120px', marginBottom: '0.5rem', borderRadius: '3px' }} />
+      <Skeleton style={{ height: '44px', width: '160px', marginBottom: '2.5rem', borderRadius: '3px' }} />
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: '3rem' }}>
+        <div>
+          {[1, 2].map(i => (
+            <div key={i} style={{ display: 'grid', gridTemplateColumns: '80px 1fr auto', gap: '1.25rem', padding: '1.25rem 0', borderBottom: '1px solid oklch(0.92 0 0)' }}>
+              <Skeleton style={{ height: '96px', borderRadius: '3px' }} />
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                <Skeleton style={{ height: '14px', width: '70%' }} />
+                <Skeleton style={{ height: '12px', width: '40%' }} />
+                <Skeleton style={{ height: '28px', width: '90px', marginTop: '0.25rem' }} />
+              </div>
+              <Skeleton style={{ height: '18px', width: '70px' }} />
+            </div>
+          ))}
+        </div>
+        <Skeleton style={{ height: '280px', borderRadius: '4px' }} />
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/app/(shop)/cart/page.tsx b/frontend/app/(shop)/cart/page.tsx
new file mode 100644
index 0000000..031eda3
--- /dev/null
+++ b/frontend/app/(shop)/cart/page.tsx
@@ -0,0 +1,143 @@
+'use client'
+import Link from 'next/link'
+import { ShoppingBag } from 'lucide-react'
+import { useCart } from '@/lib/hooks/use-cart'
+import { CartItem } from '@/components/cart/cart-item'
+import { CartSummary } from '@/components/cart/cart-summary'
+import { Skeleton } from '@/components/ui/skeleton'
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+const MUTED = 'oklch(0.52 0 0)'
+const CREAM = 'oklch(0.975 0.005 75)'
+
+function CartSkeleton() {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: '3rem', alignItems: 'start' }}>
+      <div>
+        {[1, 2, 3].map(i => (
+          <div key={i} style={{ display: 'grid', gridTemplateColumns: '80px 1fr auto', gap: '1.25rem', padding: '1.25rem 0', borderBottom: '1px solid oklch(0.92 0 0)' }}>
+            <Skeleton style={{ height: '96px', borderRadius: '3px' }} />
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+              <Skeleton style={{ height: '14px', width: '70%' }} />
+              <Skeleton style={{ height: '12px', width: '40%' }} />
+              <Skeleton style={{ height: '28px', width: '90px', marginTop: '0.25rem' }} />
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: '0.5rem' }}>
+              <Skeleton style={{ height: '18px', width: '70px' }} />
+              <Skeleton style={{ height: '24px', width: '24px', borderRadius: '50%' }} />
+            </div>
+          </div>
+        ))}
+      </div>
+      <Skeleton style={{ height: '300px', borderRadius: '4px' }} />
+    </div>
+  )
+}
+
+export default function CartPage() {
+  const { data: cart, isLoading } = useCart()
+
+  return (
+    <div style={{ background: CREAM, minHeight: 'calc(100svh - 60px)' }}>
+      <div style={{ maxWidth: '1100px', margin: '0 auto', padding: '3rem 1.5rem' }}>
+        {/* Header */}
+        <div style={{ marginBottom: '2.5rem' }}>
+          <p style={{ fontSize: '0.6rem', letterSpacing: '0.3em', textTransform: 'uppercase', color: GOLD, marginBottom: '0.5rem' }}>
+            Your Selection
+          </p>
+          <h1
+            style={{
+              fontFamily: 'var(--font-cormorant)',
+              fontSize: '2.8rem',
+              fontWeight: 300,
+              color: CHARCOAL,
+              margin: 0,
+              lineHeight: 1,
+            }}
+          >
+            Cart
+          </h1>
+        </div>
+
+        {isLoading ? (
+          <CartSkeleton />
+        ) : !cart || cart.items.length === 0 ? (
+          /* Empty state */
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: '1.5rem',
+              padding: '6rem 1.5rem',
+              textAlign: 'center',
+            }}
+          >
+            <div
+              style={{
+                width: '80px',
+                height: '80px',
+                borderRadius: '50%',
+                border: `1px solid oklch(0.85 0 0)`,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: 'oklch(0.75 0 0)',
+              }}
+            >
+              <ShoppingBag size={32} strokeWidth={1} />
+            </div>
+            <div>
+              <p
+                style={{
+                  fontFamily: 'var(--font-cormorant)',
+                  fontSize: '1.8rem',
+                  fontWeight: 300,
+                  color: CHARCOAL,
+                  margin: '0 0 0.5rem',
+                }}
+              >
+                Your cart is empty
+              </p>
+              <p style={{ fontSize: '0.82rem', color: MUTED }}>
+                Discover our curated collection and add your favourites.
+              </p>
+            </div>
+            <Link
+              href="/products"
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                padding: '12px 28px',
+                background: CHARCOAL,
+                color: '#fff',
+                fontSize: '0.7rem',
+                letterSpacing: '0.2em',
+                textTransform: 'uppercase',
+                textDecoration: 'none',
+                borderRadius: '3px',
+              }}
+            >
+              Explore Collection
+            </Link>
+          </div>
+        ) : (
+          /* Cart with items */
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: '3rem', alignItems: 'start' }}>
+            {/* Items */}
+            <div>
+              {cart.items.map(item => (
+                <CartItem key={item.id} item={item} />
+              ))}
+            </div>
+
+            {/* Summary */}
+            <CartSummary total={cart.total} itemCount={cart.items.length} />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/app/(shop)/orders/[id]/loading.tsx b/frontend/app/(shop)/orders/[id]/loading.tsx
new file mode 100644
index 0000000..0d3d8a4
--- /dev/null
+++ b/frontend/app/(shop)/orders/[id]/loading.tsx
@@ -0,0 +1,31 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
+export default function Loading() {
+  return (
+    <div style={{ maxWidth: '800px', margin: '0 auto', padding: '3rem 1.5rem' }}>
+      <Skeleton style={{ height: '13px', width: '140px', marginBottom: '2.5rem' }} />
+      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '2.5rem' }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          <Skeleton style={{ height: '12px', width: '60px' }} />
+          <Skeleton style={{ height: '36px', width: '200px' }} />
+          <Skeleton style={{ height: '12px', width: '120px' }} />
+        </div>
+        <Skeleton style={{ height: '28px', width: '90px', borderRadius: '2px' }} />
+      </div>
+      <div style={{ border: '1px solid oklch(0.9 0 0)', borderRadius: '4px', overflow: 'hidden', marginBottom: '2rem' }}>
+        {[1, 2].map(i => (
+          <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 80px 100px 100px', gap: '0.75rem', padding: '1rem 1.25rem', borderBottom: '1px solid oklch(0.93 0 0)' }}>
+            <Skeleton style={{ height: '14px', width: '60%' }} />
+            <Skeleton style={{ height: '14px', width: '30px' }} />
+            <Skeleton style={{ height: '14px', width: '50px' }} />
+            <Skeleton style={{ height: '14px', width: '60px' }} />
+          </div>
+        ))}
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem' }}>
+        <Skeleton style={{ height: '120px', borderRadius: '4px' }} />
+        <Skeleton style={{ height: '120px', borderRadius: '4px' }} />
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/app/(shop)/orders/[id]/page.tsx b/frontend/app/(shop)/orders/[id]/page.tsx
new file mode 100644
index 0000000..9dce270
--- /dev/null
+++ b/frontend/app/(shop)/orders/[id]/page.tsx
@@ -0,0 +1,183 @@
+import Link from 'next/link'
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import { serverFetch } from '@/lib/api/server'
+import { formatPrice, formatDate } from '@/lib/utils'
+import { CancelOrderButton } from '@/components/order/cancel-order-button'
+import type { Order } from '@/types/order'
+
+export const metadata: Metadata = { title: 'Order Detail' }
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+const MUTED = 'oklch(0.52 0 0)'
+const CREAM = 'oklch(0.975 0.005 75)'
+
+const STATUS_COLORS: Record<string, string> = {
+  pending:    'oklch(0.65 0.14 60)',
+  confirmed:  'oklch(0.5 0.14 145)',
+  processing: 'oklch(0.55 0.15 230)',
+  shipped:    'oklch(0.55 0.15 260)',
+  delivered:  'oklch(0.45 0.16 145)',
+  cancelled:  'oklch(0.55 0 0)',
+}
+
+const CANCELLABLE = new Set(['pending', 'confirmed', 'processing'])
+
+export default async function OrderDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>
+}) {
+  const { id } = await params
+
+  let order: Order | null = null
+  try {
+    const data = await serverFetch<{ success: boolean; data: Order }>(`/orders/${id}`)
+    order = data.data ?? null
+  } catch {
+    notFound()
+  }
+
+  if (!order) notFound()
+
+  const isCancellable = CANCELLABLE.has(order.status)
+
+  return (
+    <div style={{ background: CREAM, minHeight: 'calc(100svh - 60px)' }}>
+      <div style={{ maxWidth: '800px', margin: '0 auto', padding: '3rem 1.5rem' }}>
+        {/* Breadcrumb */}
+        <nav style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', marginBottom: '2.5rem', fontSize: '0.72rem', color: MUTED }}>
+          <Link href="/orders" style={{ color: MUTED, textDecoration: 'none' }}>My Orders</Link>
+          <span>›</span>
+          <span style={{ color: CHARCOAL }}>#{order.id.slice(-8).toUpperCase()}</span>
+        </nav>
+
+        {/* Order header */}
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '2.5rem', flexWrap: 'wrap', gap: '1rem' }}>
+          <div>
+            <p style={{ fontSize: '0.6rem', letterSpacing: '0.3em', textTransform: 'uppercase', color: GOLD, marginBottom: '0.5rem' }}>
+              Order
+            </p>
+            <h1
+              style={{
+                fontFamily: 'var(--font-cormorant)',
+                fontSize: '2.2rem',
+                fontWeight: 300,
+                color: CHARCOAL,
+                margin: '0 0 0.5rem',
+                lineHeight: 1,
+              }}
+            >
+              #{order.id.slice(-8).toUpperCase()}
+            </h1>
+            <p style={{ fontSize: '0.72rem', color: MUTED }}>Placed {formatDate(order.created_at)}</p>
+          </div>
+
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: '0.75rem' }}>
+            <span
+              style={{
+                fontSize: '0.62rem',
+                fontWeight: 600,
+                letterSpacing: '0.15em',
+                textTransform: 'uppercase',
+                color: STATUS_COLORS[order.status] ?? MUTED,
+                padding: '5px 12px',
+                border: `1px solid ${STATUS_COLORS[order.status] ?? MUTED}`,
+                borderRadius: '2px',
+              }}
+            >
+              {order.status}
+            </span>
+            {isCancellable && <CancelOrderButton orderId={order.id} />}
+          </div>
+        </div>
+
+        {/* Items */}
+        <section style={{ marginBottom: '2rem' }}>
+          <p
+            style={{
+              fontSize: '0.6rem',
+              letterSpacing: '0.25em',
+              textTransform: 'uppercase',
+              color: MUTED,
+              marginBottom: '1rem',
+            }}
+          >
+            Items
+          </p>
+
+          <div style={{ border: '1px solid oklch(0.9 0 0)', borderRadius: '4px', overflow: 'hidden' }}>
+            {/* Table header */}
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: '1fr 80px 100px 100px',
+                gap: '0.75rem',
+                padding: '0.75rem 1.25rem',
+                background: 'oklch(0.97 0 0)',
+                borderBottom: '1px solid oklch(0.9 0 0)',
+              }}
+            >
+              {['Product', 'Qty', 'Unit Price', 'Subtotal'].map(h => (
+                <span key={h} style={{ fontSize: '0.6rem', letterSpacing: '0.15em', textTransform: 'uppercase', color: MUTED }}>
+                  {h}
+                </span>
+              ))}
+            </div>
+
+            {order.items?.map(item => (
+              <div
+                key={item.id}
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: '1fr 80px 100px 100px',
+                  gap: '0.75rem',
+                  alignItems: 'center',
+                  padding: '1rem 1.25rem',
+                  borderBottom: '1px solid oklch(0.93 0 0)',
+                }}
+              >
+                <p style={{ fontSize: '0.82rem', fontWeight: 500, color: CHARCOAL }}>{item.product_name}</p>
+                <p style={{ fontSize: '0.78rem', color: MUTED }}>{item.quantity}</p>
+                <p style={{ fontSize: '0.78rem', color: MUTED }}>{formatPrice(item.price)}</p>
+                <p style={{ fontSize: '0.82rem', fontWeight: 600, color: GOLD }}>{formatPrice(item.subtotal)}</p>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem' }}>
+          {/* Shipping */}
+          <section>
+            <p style={{ fontSize: '0.6rem', letterSpacing: '0.25em', textTransform: 'uppercase', color: MUTED, marginBottom: '1rem' }}>
+              Shipping To
+            </p>
+            <div style={{ border: '1px solid oklch(0.9 0 0)', borderRadius: '4px', padding: '1.25rem', display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
+              <p style={{ fontSize: '0.82rem', fontWeight: 500, color: CHARCOAL }}>{order.shipping_name}</p>
+              <p style={{ fontSize: '0.78rem', color: MUTED, lineHeight: 1.5 }}>{order.shipping_address}</p>
+            </div>
+          </section>
+
+          {/* Total breakdown */}
+          <section>
+            <p style={{ fontSize: '0.6rem', letterSpacing: '0.25em', textTransform: 'uppercase', color: MUTED, marginBottom: '1rem' }}>
+              Summary
+            </p>
+            <div style={{ border: '1px solid oklch(0.9 0 0)', borderRadius: '4px', padding: '1.25rem', display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.78rem', color: MUTED }}>
+                <span>Items ({order.items?.length ?? 0})</span>
+                <span>{formatPrice(order.total_amount)}</span>
+              </div>
+              <div style={{ height: '1px', background: 'oklch(0.9 0 0)' }} />
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <span style={{ fontSize: '0.78rem', fontWeight: 600, color: CHARCOAL, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Total</span>
+                <span style={{ fontSize: '1rem', fontWeight: 700, color: GOLD }}>{formatPrice(order.total_amount)}</span>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/app/(shop)/orders/loading.tsx b/frontend/app/(shop)/orders/loading.tsx
new file mode 100644
index 0000000..5a6d38b
--- /dev/null
+++ b/frontend/app/(shop)/orders/loading.tsx
@@ -0,0 +1,33 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
+export default function Loading() {
+  return (
+    <div style={{ maxWidth: '900px', margin: '0 auto', padding: '3rem 1.5rem' }}>
+      <Skeleton style={{ height: '12px', width: '80px', marginBottom: '0.5rem' }} />
+      <Skeleton style={{ height: '44px', width: '200px', marginBottom: '2.5rem' }} />
+      <div>
+        {[1, 2, 3, 4].map(i => (
+          <div
+            key={i}
+            style={{
+              display: 'grid',
+              gridTemplateColumns: '180px 1fr 110px 120px 80px',
+              gap: '1rem',
+              padding: '1rem',
+              borderBottom: '1px solid oklch(0.92 0 0)',
+            }}
+          >
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+              <Skeleton style={{ height: '13px', width: '110px' }} />
+              <Skeleton style={{ height: '11px', width: '80px' }} />
+            </div>
+            <Skeleton style={{ height: '13px', width: '60px' }} />
+            <Skeleton style={{ height: '22px', width: '90px', borderRadius: '2px' }} />
+            <Skeleton style={{ height: '15px', width: '70px' }} />
+            <Skeleton style={{ height: '13px', width: '50px' }} />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/app/(shop)/orders/page.tsx b/frontend/app/(shop)/orders/page.tsx
new file mode 100644
index 0000000..7953257
--- /dev/null
+++ b/frontend/app/(shop)/orders/page.tsx
@@ -0,0 +1,200 @@
+import Link from 'next/link'
+import type { Metadata } from 'next'
+import { serverFetch } from '@/lib/api/server'
+import { formatPrice, formatDate } from '@/lib/utils'
+import type { Order, OrderListMeta } from '@/types/order'
+
+export const metadata: Metadata = { title: 'My Orders' }
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+const MUTED = 'oklch(0.52 0 0)'
+const CREAM = 'oklch(0.975 0.005 75)'
+
+const STATUS_COLORS: Record<string, string> = {
+  pending:    'oklch(0.65 0.14 60)',
+  confirmed:  'oklch(0.5 0.14 145)',
+  processing: 'oklch(0.55 0.15 230)',
+  shipped:    'oklch(0.55 0.15 260)',
+  delivered:  'oklch(0.45 0.16 145)',
+  cancelled:  'oklch(0.55 0 0)',
+}
+
+function StatusBadge({ status }: { status: string }) {
+  return (
+    <span
+      style={{
+        fontSize: '0.6rem',
+        fontWeight: 600,
+        letterSpacing: '0.15em',
+        textTransform: 'uppercase',
+        color: STATUS_COLORS[status] ?? MUTED,
+        padding: '3px 8px',
+        border: `1px solid ${STATUS_COLORS[status] ?? MUTED}`,
+        borderRadius: '2px',
+        whiteSpace: 'nowrap',
+      }}
+    >
+      {status}
+    </span>
+  )
+}
+
+export default async function OrdersPage() {
+  let orders: Order[] = []
+  let meta: OrderListMeta = { page: 1, limit: 10, total: 0 }
+
+  try {
+    const data = await serverFetch<{ success: boolean; data: Order[]; meta: OrderListMeta }>('/orders')
+    orders = data.data ?? []
+    meta = data.meta ?? meta
+  } catch {
+    // user not authenticated or service down — show empty state
+  }
+
+  return (
+    <div style={{ background: CREAM, minHeight: 'calc(100svh - 60px)' }}>
+      <div style={{ maxWidth: '900px', margin: '0 auto', padding: '3rem 1.5rem' }}>
+        {/* Header */}
+        <div style={{ marginBottom: '2.5rem' }}>
+          <p style={{ fontSize: '0.6rem', letterSpacing: '0.3em', textTransform: 'uppercase', color: GOLD, marginBottom: '0.5rem' }}>
+            Account
+          </p>
+          <h1
+            style={{
+              fontFamily: 'var(--font-cormorant)',
+              fontSize: '2.8rem',
+              fontWeight: 300,
+              color: CHARCOAL,
+              margin: 0,
+              lineHeight: 1,
+            }}
+          >
+            My Orders
+          </h1>
+        </div>
+
+        {orders.length === 0 ? (
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '1.25rem',
+              padding: '6rem 1.5rem',
+              textAlign: 'center',
+            }}
+          >
+            <p
+              style={{
+                fontFamily: 'var(--font-cormorant)',
+                fontSize: '1.8rem',
+                fontWeight: 300,
+                color: CHARCOAL,
+                margin: 0,
+              }}
+            >
+              No orders yet
+            </p>
+            <p style={{ fontSize: '0.82rem', color: MUTED }}>
+              Your order history will appear here once you make a purchase.
+            </p>
+            <Link
+              href="/products"
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                padding: '12px 28px',
+                background: CHARCOAL,
+                color: '#fff',
+                fontSize: '0.7rem',
+                letterSpacing: '0.2em',
+                textTransform: 'uppercase',
+                textDecoration: 'none',
+                borderRadius: '3px',
+              }}
+            >
+              Start Shopping
+            </Link>
+          </div>
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
+            {/* Table header */}
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: '180px 1fr 110px 120px 80px',
+                gap: '1rem',
+                padding: '0.75rem 1rem',
+                borderBottom: '1px solid oklch(0.88 0 0)',
+              }}
+            >
+              {['Order', 'Items', 'Status', 'Total', ''].map(h => (
+                <span
+                  key={h}
+                  style={{
+                    fontSize: '0.6rem',
+                    letterSpacing: '0.2em',
+                    textTransform: 'uppercase',
+                    color: MUTED,
+                  }}
+                >
+                  {h}
+                </span>
+              ))}
+            </div>
+
+            {orders.map(order => (
+              <div
+                key={order.id}
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: '180px 1fr 110px 120px 80px',
+                  gap: '1rem',
+                  alignItems: 'center',
+                  padding: '1rem',
+                  borderBottom: '1px solid oklch(0.92 0 0)',
+                  transition: 'background 0.12s',
+                }}
+                onMouseEnter={e => ((e.currentTarget as HTMLElement).style.background = 'oklch(0.965 0.003 75)')}
+                onMouseLeave={e => ((e.currentTarget as HTMLElement).style.background = 'transparent')}
+              >
+                <div>
+                  <p style={{ fontSize: '0.72rem', fontWeight: 500, color: CHARCOAL, marginBottom: '2px' }}>
+                    #{order.id.slice(-8).toUpperCase()}
+                  </p>
+                  <p style={{ fontSize: '0.68rem', color: MUTED }}>{formatDate(order.created_at)}</p>
+                </div>
+                <p style={{ fontSize: '0.75rem', color: MUTED }}>
+                  {order.items?.length ?? 0} {(order.items?.length ?? 0) === 1 ? 'item' : 'items'}
+                </p>
+                <StatusBadge status={order.status} />
+                <span style={{ fontSize: '0.82rem', fontWeight: 600, color: GOLD }}>
+                  {formatPrice(order.total_amount)}
+                </span>
+                <Link
+                  href={`/orders/${order.id}`}
+                  style={{
+                    fontSize: '0.7rem',
+                    color: CHARCOAL,
+                    textDecoration: 'underline',
+                    textUnderlineOffset: '3px',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  View →
+                </Link>
+              </div>
+            ))}
+
+            {meta.total > meta.limit && (
+              <p style={{ fontSize: '0.72rem', color: MUTED, padding: '1.5rem 1rem 0', textAlign: 'center' }}>
+                Showing {orders.length} of {meta.total} orders
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/app/(shop)/products/[id]/add-to-cart.tsx b/frontend/app/(shop)/products/[id]/add-to-cart.tsx
new file mode 100644
index 0000000..812014d
--- /dev/null
+++ b/frontend/app/(shop)/products/[id]/add-to-cart.tsx
@@ -0,0 +1,141 @@
+'use client'
+import { useState } from 'react'
+import { Minus, Plus } from 'lucide-react'
+import { toast } from 'sonner'
+import { useAddToCart } from '@/lib/hooks/use-cart'
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+const MUTED = 'oklch(0.52 0 0)'
+
+interface Props {
+  productId: string
+  outOfStock: boolean
+}
+
+export function AddToCart({ productId, outOfStock }: Props) {
+  const [qty, setQty] = useState(1)
+  const mutation = useAddToCart()
+
+  const handleAdd = async () => {
+    try {
+      await mutation.mutateAsync({ product_id: productId, quantity: qty })
+      toast.success('Added to cart')
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : 'Failed to add to cart')
+    }
+  }
+
+  if (outOfStock) {
+    return (
+      <button
+        disabled
+        style={{
+          height: '48px',
+          background: 'oklch(0.88 0 0)',
+          color: MUTED,
+          fontSize: '0.72rem',
+          fontWeight: 600,
+          letterSpacing: '0.2em',
+          textTransform: 'uppercase',
+          border: 'none',
+          borderRadius: '3px',
+          cursor: 'not-allowed',
+          width: '100%',
+        }}
+      >
+        Out of Stock
+      </button>
+    )
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+      {/* Quantity selector */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0', border: '1px solid oklch(0.88 0 0)', borderRadius: '3px', width: 'fit-content' }}>
+        <button
+          onClick={() => setQty(q => Math.max(1, q - 1))}
+          disabled={qty <= 1}
+          style={{
+            width: '36px',
+            height: '36px',
+            background: 'none',
+            border: 'none',
+            cursor: qty <= 1 ? 'not-allowed' : 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: qty <= 1 ? 'oklch(0.75 0 0)' : CHARCOAL,
+          }}
+        >
+          <Minus size={14} />
+        </button>
+        <span
+          style={{
+            minWidth: '36px',
+            textAlign: 'center',
+            fontSize: '0.82rem',
+            fontWeight: 500,
+            color: CHARCOAL,
+            borderLeft: '1px solid oklch(0.88 0 0)',
+            borderRight: '1px solid oklch(0.88 0 0)',
+            padding: '0 4px',
+            lineHeight: '36px',
+          }}
+        >
+          {qty}
+        </span>
+        <button
+          onClick={() => setQty(q => q + 1)}
+          style={{
+            width: '36px',
+            height: '36px',
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: CHARCOAL,
+          }}
+        >
+          <Plus size={14} />
+        </button>
+      </div>
+
+      {/* Add button */}
+      <button
+        onClick={handleAdd}
+        disabled={mutation.isPending}
+        style={{
+          height: '48px',
+          background: mutation.isPending ? 'oklch(0.28 0.01 50)' : CHARCOAL,
+          color: '#fff',
+          fontSize: '0.72rem',
+          fontWeight: 600,
+          letterSpacing: '0.2em',
+          textTransform: 'uppercase',
+          border: 'none',
+          borderRadius: '3px',
+          cursor: mutation.isPending ? 'not-allowed' : 'pointer',
+          transition: 'background 0.2s',
+          width: '100%',
+        }}
+        onMouseEnter={e => {
+          if (!mutation.isPending) (e.currentTarget as HTMLElement).style.background = `oklch(0.22 0.01 50)`
+        }}
+        onMouseLeave={e => {
+          if (!mutation.isPending) (e.currentTarget as HTMLElement).style.background = CHARCOAL
+        }}
+      >
+        {mutation.isPending ? 'Adding…' : 'Add to Cart'}
+      </button>
+
+      {/* Gold accent */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', paddingTop: '0.25rem' }}>
+        <div style={{ width: '1.5rem', height: '1px', background: GOLD }} />
+        <p style={{ fontSize: '0.65rem', color: MUTED, letterSpacing: '0.1em' }}>Free shipping over $150</p>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/app/(shop)/products/[id]/page.tsx b/frontend/app/(shop)/products/[id]/page.tsx
index 995f0ec..840b5eb 100644
--- a/frontend/app/(shop)/products/[id]/page.tsx
+++ b/frontend/app/(shop)/products/[id]/page.tsx
@@ -5,6 +5,7 @@ import { notFound } from 'next/navigation'
 import { getProduct } from '@/lib/api/products'
 import { serverFetchPublic } from '@/lib/api/server'
 import { formatPrice } from '@/lib/utils'
+import { AddToCart } from './add-to-cart'
 
 type Inventory = { available_quantity: number; total_quantity: number }
 
@@ -152,28 +153,7 @@ export default async function ProductDetailPage({
           {/* Description */}
           <p style={{ fontSize: '0.85rem', color: MUTED, lineHeight: 1.75 }}>{product.description}</p>
 
-          {/* Add to cart — wired in Phase 4 */}
-          <button
-            disabled={availableQty === 0}
-            style={{
-              height: '48px',
-              background: availableQty === 0 ? 'oklch(0.88 0 0)' : CHARCOAL,
-              color: availableQty === 0 ? MUTED : '#fff',
-              fontSize: '0.72rem',
-              fontWeight: 600,
-              letterSpacing: '0.2em',
-              textTransform: 'uppercase',
-              border: 'none',
-              borderRadius: '3px',
-              cursor: availableQty === 0 ? 'not-allowed' : 'pointer',
-              transition: 'background 0.2s',
-            }}
-          >
-            {availableQty === 0 ? 'Out of Stock' : 'Add to Cart'}
-          </button>
-
-          {/* Gold accent */}
-          <div style={{ width: '2.5rem', height: '1px', background: GOLD }} />
+          <AddToCart productId={id} outOfStock={availableQty === 0} />
         </div>
       </div>
     </div>
diff --git a/frontend/app/api/cart/[itemId]/route.ts b/frontend/app/api/cart/[itemId]/route.ts
new file mode 100644
index 0000000..3ba5eb8
--- /dev/null
+++ b/frontend/app/api/cart/[itemId]/route.ts
@@ -0,0 +1,43 @@
+import { cookies } from 'next/headers'
+import { NextRequest } from 'next/server'
+
+const BASE = process.env.API_URL!
+
+async function token() {
+  return (await cookies()).get('access_token')?.value
+}
+
+export async function PUT(
+  req: NextRequest,
+  { params }: { params: Promise<{ itemId: string }> },
+) {
+  const t = await token()
+  if (!t) return Response.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const { itemId } = await params
+  const body = await req.json()
+  const res = await fetch(`${BASE}/cart/items/${itemId}`, {
+    method: 'PUT',
+    headers: { Authorization: `Bearer ${t}`, 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  const data = await res.json()
+  return Response.json(data, { status: res.status })
+}
+
+export async function DELETE(
+  _: NextRequest,
+  { params }: { params: Promise<{ itemId: string }> },
+) {
+  const t = await token()
+  if (!t) return Response.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const { itemId } = await params
+  const res = await fetch(`${BASE}/cart/items/${itemId}`, {
+    method: 'DELETE',
+    headers: { Authorization: `Bearer ${t}` },
+  })
+  if (res.status === 204) return new Response(null, { status: 204 })
+  const data = await res.json()
+  return Response.json(data, { status: res.status })
+}
diff --git a/frontend/app/api/cart/route.ts b/frontend/app/api/cart/route.ts
new file mode 100644
index 0000000..a529f3a
--- /dev/null
+++ b/frontend/app/api/cart/route.ts
@@ -0,0 +1,34 @@
+import { cookies } from 'next/headers'
+import { NextRequest } from 'next/server'
+
+const BASE = process.env.API_URL!
+
+async function token() {
+  return (await cookies()).get('access_token')?.value
+}
+
+export async function GET() {
+  const t = await token()
+  if (!t) return Response.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const res = await fetch(`${BASE}/cart`, {
+    headers: { Authorization: `Bearer ${t}` },
+    cache: 'no-store',
+  })
+  const data = await res.json()
+  return Response.json(data, { status: res.status })
+}
+
+export async function POST(req: NextRequest) {
+  const t = await token()
+  if (!t) return Response.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const body = await req.json()
+  const res = await fetch(`${BASE}/cart/items`, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${t}`, 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  const data = await res.json()
+  return Response.json(data, { status: res.status })
+}
diff --git a/frontend/app/api/orders/[id]/cancel/route.ts b/frontend/app/api/orders/[id]/cancel/route.ts
new file mode 100644
index 0000000..05ca5ae
--- /dev/null
+++ b/frontend/app/api/orders/[id]/cancel/route.ts
@@ -0,0 +1,24 @@
+import { cookies } from 'next/headers'
+import { NextRequest } from 'next/server'
+
+const BASE = process.env.API_URL!
+
+async function token() {
+  return (await cookies()).get('access_token')?.value
+}
+
+export async function PUT(
+  _: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const t = await token()
+  if (!t) return Response.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const { id } = await params
+  const res = await fetch(`${BASE}/orders/${id}/cancel`, {
+    method: 'PUT',
+    headers: { Authorization: `Bearer ${t}` },
+  })
+  const data = await res.json()
+  return Response.json(data, { status: res.status })
+}
diff --git a/frontend/app/api/orders/[id]/route.ts b/frontend/app/api/orders/[id]/route.ts
new file mode 100644
index 0000000..b6ca4e0
--- /dev/null
+++ b/frontend/app/api/orders/[id]/route.ts
@@ -0,0 +1,24 @@
+import { cookies } from 'next/headers'
+import { NextRequest } from 'next/server'
+
+const BASE = process.env.API_URL!
+
+async function token() {
+  return (await cookies()).get('access_token')?.value
+}
+
+export async function GET(
+  _: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const t = await token()
+  if (!t) return Response.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const { id } = await params
+  const res = await fetch(`${BASE}/orders/${id}`, {
+    headers: { Authorization: `Bearer ${t}` },
+    cache: 'no-store',
+  })
+  const data = await res.json()
+  return Response.json(data, { status: res.status })
+}
diff --git a/frontend/app/api/orders/route.ts b/frontend/app/api/orders/route.ts
new file mode 100644
index 0000000..3625743
--- /dev/null
+++ b/frontend/app/api/orders/route.ts
@@ -0,0 +1,36 @@
+import { cookies } from 'next/headers'
+import { NextRequest } from 'next/server'
+
+const BASE = process.env.API_URL!
+
+async function token() {
+  return (await cookies()).get('access_token')?.value
+}
+
+export async function GET(req: NextRequest) {
+  const t = await token()
+  if (!t) return Response.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const { searchParams } = req.nextUrl
+  const qs = searchParams.toString()
+  const res = await fetch(`${BASE}/orders${qs ? `?${qs}` : ''}`, {
+    headers: { Authorization: `Bearer ${t}` },
+    cache: 'no-store',
+  })
+  const data = await res.json()
+  return Response.json(data, { status: res.status })
+}
+
+export async function POST(req: NextRequest) {
+  const t = await token()
+  if (!t) return Response.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const body = await req.json()
+  const res = await fetch(`${BASE}/orders`, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${t}`, 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  const data = await res.json()
+  return Response.json(data, { status: res.status })
+}
diff --git a/frontend/components/cart/cart-item.tsx b/frontend/components/cart/cart-item.tsx
new file mode 100644
index 0000000..972feeb
--- /dev/null
+++ b/frontend/components/cart/cart-item.tsx
@@ -0,0 +1,155 @@
+'use client'
+import { Minus, Plus, X } from 'lucide-react'
+import { toast } from 'sonner'
+import { formatPrice } from '@/lib/utils'
+import { useUpdateCartItem, useRemoveCartItem } from '@/lib/hooks/use-cart'
+import type { CartItem as CartItemType } from '@/types/cart'
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+const MUTED = 'oklch(0.52 0 0)'
+
+export function CartItem({ item }: { item: CartItemType }) {
+  const update = useUpdateCartItem()
+  const remove = useRemoveCartItem()
+
+  const handleQty = async (delta: number) => {
+    const newQty = item.quantity + delta
+    if (newQty < 1) return
+    try {
+      await update.mutateAsync({ itemId: item.id, quantity: newQty })
+    } catch {
+      toast.error('Failed to update quantity')
+    }
+  }
+
+  const handleRemove = async () => {
+    try {
+      await remove.mutateAsync(item.id)
+      toast.success('Item removed')
+    } catch {
+      toast.error('Failed to remove item')
+    }
+  }
+
+  const isBusy = update.isPending || remove.isPending
+
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '80px 1fr auto',
+        gap: '1.25rem',
+        alignItems: 'center',
+        padding: '1.25rem 0',
+        borderBottom: '1px solid oklch(0.92 0 0)',
+        opacity: isBusy ? 0.5 : 1,
+        transition: 'opacity 0.15s',
+      }}
+    >
+      {/* Placeholder image (no image in cart item response) */}
+      <div
+        style={{
+          width: '80px',
+          height: '96px',
+          background: 'oklch(0.96 0 0)',
+          borderRadius: '3px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexShrink: 0,
+        }}
+      >
+        <span style={{ fontFamily: 'var(--font-cormorant)', fontSize: '2rem', fontWeight: 300, color: 'oklch(0.8 0.03 70)' }}>A</span>
+      </div>
+
+      {/* Info */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
+        <p style={{ fontSize: '0.82rem', fontWeight: 500, color: CHARCOAL, lineHeight: 1.3 }}>
+          {item.product_name}
+        </p>
+        <p style={{ fontSize: '0.75rem', color: MUTED }}>
+          {formatPrice(item.price)} each
+        </p>
+
+        {/* Qty controls */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 0, border: '1px solid oklch(0.88 0 0)', borderRadius: '3px', width: 'fit-content', marginTop: '0.25rem' }}>
+          <button
+            onClick={() => handleQty(-1)}
+            disabled={isBusy || item.quantity <= 1}
+            style={{
+              width: '28px',
+              height: '28px',
+              background: 'none',
+              border: 'none',
+              cursor: item.quantity <= 1 ? 'not-allowed' : 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: item.quantity <= 1 ? 'oklch(0.75 0 0)' : CHARCOAL,
+            }}
+          >
+            <Minus size={12} />
+          </button>
+          <span
+            style={{
+              minWidth: '28px',
+              textAlign: 'center',
+              fontSize: '0.78rem',
+              fontWeight: 500,
+              color: CHARCOAL,
+              borderLeft: '1px solid oklch(0.88 0 0)',
+              borderRight: '1px solid oklch(0.88 0 0)',
+              lineHeight: '28px',
+            }}
+          >
+            {item.quantity}
+          </span>
+          <button
+            onClick={() => handleQty(1)}
+            disabled={isBusy}
+            style={{
+              width: '28px',
+              height: '28px',
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: CHARCOAL,
+            }}
+          >
+            <Plus size={12} />
+          </button>
+        </div>
+      </div>
+
+      {/* Subtotal + remove */}
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: '0.5rem' }}>
+        <span style={{ fontSize: '0.88rem', fontWeight: 600, color: GOLD }}>
+          {formatPrice(item.subtotal)}
+        </span>
+        <button
+          onClick={handleRemove}
+          disabled={isBusy}
+          style={{
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            color: 'oklch(0.7 0 0)',
+            padding: '4px',
+            display: 'flex',
+            alignItems: 'center',
+            transition: 'color 0.15s',
+          }}
+          onMouseEnter={e => ((e.currentTarget as HTMLElement).style.color = 'oklch(0.5 0.18 25)')}
+          onMouseLeave={e => ((e.currentTarget as HTMLElement).style.color = 'oklch(0.7 0 0)')}
+          aria-label="Remove item"
+        >
+          <X size={15} />
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/components/cart/cart-summary.tsx b/frontend/components/cart/cart-summary.tsx
new file mode 100644
index 0000000..27e6196
--- /dev/null
+++ b/frontend/components/cart/cart-summary.tsx
@@ -0,0 +1,108 @@
+'use client'
+import Link from 'next/link'
+import { formatPrice } from '@/lib/utils'
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+const MUTED = 'oklch(0.52 0 0)'
+
+interface Props {
+  total: number
+  itemCount: number
+}
+
+export function CartSummary({ total, itemCount }: Props) {
+  const freeShipping = total >= 150
+  const shipping = freeShipping ? 0 : 9.99
+  const grandTotal = total + shipping
+
+  return (
+    <div
+      style={{
+        background: 'oklch(0.975 0.005 75)',
+        border: '1px solid oklch(0.9 0 0)',
+        borderRadius: '4px',
+        padding: '1.75rem',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '1rem',
+        position: 'sticky',
+        top: '80px',
+      }}
+    >
+      <p
+        style={{
+          fontFamily: 'var(--font-cormorant)',
+          fontSize: '1.4rem',
+          fontWeight: 400,
+          color: CHARCOAL,
+          margin: 0,
+          lineHeight: 1,
+        }}
+      >
+        Summary
+      </p>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.8rem', color: MUTED }}>
+          <span>Subtotal ({itemCount} {itemCount === 1 ? 'item' : 'items'})</span>
+          <span>{formatPrice(total)}</span>
+        </div>
+        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.8rem', color: MUTED }}>
+          <span>Shipping</span>
+          <span style={{ color: freeShipping ? 'oklch(0.5 0.14 145)' : MUTED }}>
+            {freeShipping ? 'Free' : formatPrice(shipping)}
+          </span>
+        </div>
+        {!freeShipping && (
+          <p style={{ fontSize: '0.68rem', color: 'oklch(0.65 0.09 85)', letterSpacing: '0.02em' }}>
+            Add {formatPrice(150 - total)} more for free shipping
+          </p>
+        )}
+      </div>
+
+      <div style={{ height: '1px', background: 'oklch(0.88 0 0)' }} />
+
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <span style={{ fontSize: '0.82rem', fontWeight: 600, color: CHARCOAL, letterSpacing: '0.05em', textTransform: 'uppercase' }}>Total</span>
+        <span style={{ fontSize: '1.1rem', fontWeight: 700, color: GOLD }}>{formatPrice(grandTotal)}</span>
+      </div>
+
+      <Link
+        href="/checkout"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '48px',
+          background: CHARCOAL,
+          color: '#fff',
+          fontSize: '0.72rem',
+          fontWeight: 600,
+          letterSpacing: '0.2em',
+          textTransform: 'uppercase',
+          textDecoration: 'none',
+          borderRadius: '3px',
+          transition: 'background 0.2s',
+        }}
+        onMouseEnter={e => ((e.currentTarget as HTMLElement).style.background = 'oklch(0.22 0.01 50)')}
+        onMouseLeave={e => ((e.currentTarget as HTMLElement).style.background = CHARCOAL)}
+      >
+        Proceed to Checkout
+      </Link>
+
+      <Link
+        href="/products"
+        style={{
+          textAlign: 'center',
+          fontSize: '0.72rem',
+          color: MUTED,
+          textDecoration: 'underline',
+          textUnderlineOffset: '3px',
+        }}
+      >
+        Continue Shopping
+      </Link>
+    </div>
+  )
+}
diff --git a/frontend/components/layout/cart-count.tsx b/frontend/components/layout/cart-count.tsx
index 24f41aa..1250d7b 100644
--- a/frontend/components/layout/cart-count.tsx
+++ b/frontend/components/layout/cart-count.tsx
@@ -1,6 +1,33 @@
 'use client'
-// Wired up in Phase 4 when cart hooks are added.
-// Renders nothing for now so the navbar icon is clean.
+import { useCart } from '@/lib/hooks/use-cart'
+
+const GOLD = 'oklch(0.75 0.12 85)'
+
 export function CartCount() {
-  return null
+  const { data: cart } = useCart()
+  const count = cart?.items?.length ?? 0
+  if (!count) return null
+  return (
+    <span
+      style={{
+        position: 'absolute',
+        top: '-6px',
+        right: '-6px',
+        minWidth: '16px',
+        height: '16px',
+        borderRadius: '50%',
+        background: GOLD,
+        color: 'oklch(0.1 0 0)',
+        fontSize: '0.58rem',
+        fontWeight: 700,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        lineHeight: 1,
+        padding: '0 3px',
+      }}
+    >
+      {count > 99 ? '99+' : count}
+    </span>
+  )
 }
diff --git a/frontend/components/order/cancel-order-button.tsx b/frontend/components/order/cancel-order-button.tsx
new file mode 100644
index 0000000..5d21b21
--- /dev/null
+++ b/frontend/components/order/cancel-order-button.tsx
@@ -0,0 +1,56 @@
+'use client'
+import { useRouter } from 'next/navigation'
+import { toast } from 'sonner'
+import { useCancelOrder } from '@/lib/hooks/use-orders'
+
+const MUTED = 'oklch(0.52 0 0)'
+
+export function CancelOrderButton({ orderId }: { orderId: string }) {
+  const router = useRouter()
+  const mutation = useCancelOrder()
+
+  const handle = async () => {
+    if (!confirm('Cancel this order?')) return
+    try {
+      await mutation.mutateAsync(orderId)
+      toast.success('Order cancelled')
+      router.refresh()
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : 'Failed to cancel order')
+    }
+  }
+
+  return (
+    <button
+      onClick={handle}
+      disabled={mutation.isPending}
+      style={{
+        padding: '10px 20px',
+        background: 'none',
+        border: '1px solid oklch(0.85 0 0)',
+        borderRadius: '3px',
+        fontSize: '0.7rem',
+        fontWeight: 500,
+        letterSpacing: '0.12em',
+        textTransform: 'uppercase',
+        color: mutation.isPending ? 'oklch(0.7 0 0)' : MUTED,
+        cursor: mutation.isPending ? 'not-allowed' : 'pointer',
+        transition: 'border-color 0.15s, color 0.15s',
+      }}
+      onMouseEnter={e => {
+        if (!mutation.isPending) {
+          const el = e.currentTarget as HTMLElement
+          el.style.borderColor = 'oklch(0.6 0.18 25)'
+          el.style.color = 'oklch(0.5 0.18 25)'
+        }
+      }}
+      onMouseLeave={e => {
+        const el = e.currentTarget as HTMLElement
+        el.style.borderColor = 'oklch(0.85 0 0)'
+        el.style.color = MUTED
+      }}
+    >
+      {mutation.isPending ? 'Cancelling…' : 'Cancel Order'}
+    </button>
+  )
+}
diff --git a/frontend/lib/hooks/use-cart.ts b/frontend/lib/hooks/use-cart.ts
new file mode 100644
index 0000000..9a87131
--- /dev/null
+++ b/frontend/lib/hooks/use-cart.ts
@@ -0,0 +1,64 @@
+'use client'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { queryKeys } from '@/lib/query-keys'
+import type { Cart } from '@/types/cart'
+
+export function useCart() {
+  return useQuery<Cart | null>({
+    queryKey: queryKeys.cart,
+    queryFn: async () => {
+      const res = await fetch('/api/cart')
+      if (res.status === 401) return null
+      if (!res.ok) return null
+      const data = await res.json()
+      return (data?.data as Cart) ?? null
+    },
+    retry: false,
+    staleTime: 30_000,
+  })
+}
+
+export function useAddToCart() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async ({ product_id, quantity }: { product_id: string; quantity: number }) => {
+      const res = await fetch('/api/cart', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ product_id, quantity }),
+      })
+      const data = await res.json()
+      if (!res.ok) throw new Error(data?.error ?? 'Failed to add to cart')
+      return data
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: queryKeys.cart }),
+  })
+}
+
+export function useUpdateCartItem() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async ({ itemId, quantity }: { itemId: string; quantity: number }) => {
+      const res = await fetch(`/api/cart/${itemId}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ quantity }),
+      })
+      const data = await res.json()
+      if (!res.ok) throw new Error(data?.error ?? 'Failed to update quantity')
+      return data
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: queryKeys.cart }),
+  })
+}
+
+export function useRemoveCartItem() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async (itemId: string) => {
+      const res = await fetch(`/api/cart/${itemId}`, { method: 'DELETE' })
+      if (!res.ok) throw new Error('Failed to remove item')
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: queryKeys.cart }),
+  })
+}
diff --git a/frontend/lib/hooks/use-orders.ts b/frontend/lib/hooks/use-orders.ts
new file mode 100644
index 0000000..295f6bc
--- /dev/null
+++ b/frontend/lib/hooks/use-orders.ts
@@ -0,0 +1,54 @@
+'use client'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { queryKeys } from '@/lib/query-keys'
+import type { Order, OrderListMeta } from '@/types/order'
+
+export function useOrders(page = 1, limit = 10) {
+  return useQuery<{ orders: Order[]; meta: OrderListMeta } | null>({
+    queryKey: [...queryKeys.orders, { page, limit }],
+    queryFn: async () => {
+      const res = await fetch(`/api/orders?page=${page}&limit=${limit}`)
+      if (res.status === 401) return null
+      if (!res.ok) return null
+      const data = await res.json()
+      if (!data?.success) return null
+      return {
+        orders: (data.data as Order[]) ?? [],
+        meta: (data.meta as OrderListMeta) ?? { page, limit, total: 0 },
+      }
+    },
+    retry: false,
+    staleTime: 60_000,
+  })
+}
+
+export function useOrder(id: string) {
+  return useQuery<Order | null>({
+    queryKey: queryKeys.order(id),
+    queryFn: async () => {
+      const res = await fetch(`/api/orders/${id}`)
+      if (res.status === 401) return null
+      if (!res.ok) return null
+      const data = await res.json()
+      return (data?.data as Order) ?? null
+    },
+    retry: false,
+    staleTime: 30_000,
+    enabled: !!id,
+  })
+}
+
+export function useCancelOrder() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async (orderId: string) => {
+      const res = await fetch(`/api/orders/${orderId}/cancel`, { method: 'PUT' })
+      const data = await res.json()
+      if (!res.ok) throw new Error(data?.error ?? 'Failed to cancel order')
+      return data
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: queryKeys.orders })
+    },
+  })
+}
diff --git a/frontend/types/cart.ts b/frontend/types/cart.ts
new file mode 100644
index 0000000..e1eb92b
--- /dev/null
+++ b/frontend/types/cart.ts
@@ -0,0 +1,20 @@
+export interface CartItem {
+  id: string
+  cart_id: string
+  product_id: string
+  product_name: string
+  price: number
+  quantity: number
+  subtotal: number
+  created_at: string
+  updated_at: string
+}
+
+export interface Cart {
+  id: string
+  user_id: string
+  items: CartItem[]
+  total: number
+  created_at: string
+  updated_at: string
+}
diff --git a/frontend/types/order.ts b/frontend/types/order.ts
index fca676e..e8de4e7 100644
--- a/frontend/types/order.ts
+++ b/frontend/types/order.ts
@@ -1,6 +1,3 @@
-import type { Product } from './product'
-import type { Address } from './auth'
-
 export type OrderStatus =
   | 'pending'
   | 'confirmed'
@@ -8,45 +5,32 @@ export type OrderStatus =
   | 'shipped'
   | 'delivered'
   | 'cancelled'
-  | 'refunded'
 
 export interface OrderItem {
   id: string
   order_id: string
   product_id: string
-  product?: Product
+  product_name: string
+  price: number
   quantity: number
-  unit_price: number
-  total_price: number
+  subtotal: number
+  created_at: string
 }
 
 export interface Order {
   id: string
   user_id: string
   status: OrderStatus
+  total_amount: number
+  shipping_name: string
+  shipping_address: string
   items: OrderItem[]
-  shipping_address: Address
-  subtotal: number
-  total: number
   created_at: string
   updated_at: string
 }
 
-export interface CartItem {
-  id: string
-  user_id: string
-  product_id: string
-  product?: Product
-  quantity: number
-  created_at: string
-  updated_at: string
-}
-
-export interface CartResponse {
-  items: CartItem[]
-  subtotal: number
-}
-
-export interface CreateOrderRequest {
-  address_id: string
+export interface OrderListMeta {
+  page: number
+  limit: number
+  total: number
 }

From dcebbf4aef5498cb336379ad22c24e4478b50446 Mon Sep 17 00:00:00 2001
From: rezadrian01 <ahmadadrian324@gmail.com>
Date: Sun, 31 May 2026 15:40:20 +0700
Subject: [PATCH 6/8] feat: checkout flow with Stripe Payment Element and async
 payment polling

- Checkout page: shipping form (shipping_name + shipping_address), cart summary sidebar, places order via POST /api/orders on submit
- Pay page (/checkout/[orderId]/pay): polls GET /api/payments/order/:orderId every 2 s until client_secret arrives (Kafka async gap between order creation and Stripe PaymentIntent setup), then mounts Stripe Elements; calls stripe.confirmPayment() with redirect:'if_required' to handle 3DS without full redirect for card payments
- Success page: confirmed/processing states, order reference, links to order detail and shop
- PaymentForm component: PaymentElement with custom Stripe appearance matching the editorial theme (flat theme, gold accent #C9A96E, Geist font)
- BFF route /api/payments/order/[orderId] forwards to gateway with httpOnly access_token
- usePaymentByOrder hook: polling via TanStack Query refetchInterval, stops once client_secret is non-null

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../(shop)/checkout/[orderId]/pay/page.tsx    | 155 ++++++++++
 frontend/app/(shop)/checkout/page.tsx         | 279 ++++++++++++++++++
 frontend/app/(shop)/checkout/success/page.tsx | 137 +++++++++
 .../app/api/payments/order/[orderId]/route.ts |  24 ++
 frontend/components/checkout/payment-form.tsx | 149 ++++++++++
 frontend/lib/hooks/use-payment.ts             |  26 ++
 6 files changed, 770 insertions(+)
 create mode 100644 frontend/app/(shop)/checkout/[orderId]/pay/page.tsx
 create mode 100644 frontend/app/(shop)/checkout/page.tsx
 create mode 100644 frontend/app/(shop)/checkout/success/page.tsx
 create mode 100644 frontend/app/api/payments/order/[orderId]/route.ts
 create mode 100644 frontend/components/checkout/payment-form.tsx
 create mode 100644 frontend/lib/hooks/use-payment.ts

diff --git a/frontend/app/(shop)/checkout/[orderId]/pay/page.tsx b/frontend/app/(shop)/checkout/[orderId]/pay/page.tsx
new file mode 100644
index 0000000..1f0ca29
--- /dev/null
+++ b/frontend/app/(shop)/checkout/[orderId]/pay/page.tsx
@@ -0,0 +1,155 @@
+'use client'
+import { useMemo } from 'react'
+import { useParams } from 'next/navigation'
+import { loadStripe } from '@stripe/stripe-js'
+import { Elements } from '@stripe/react-stripe-js'
+import { PaymentForm } from '@/components/checkout/payment-form'
+import { usePaymentByOrder } from '@/lib/hooks/use-payment'
+import { formatPrice } from '@/lib/utils'
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+const MUTED = 'oklch(0.52 0 0)'
+const CREAM = 'oklch(0.975 0.005 75)'
+
+// Singleton — must be outside component to avoid re-creating on each render
+const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!)
+
+const stripeAppearance = {
+  theme: 'flat' as const,
+  variables: {
+    colorPrimary: '#C9A96E',
+    colorBackground: '#ffffff',
+    colorText: '#1a1a14',
+    colorDanger: '#c0392b',
+    fontFamily: 'Geist, system-ui, sans-serif',
+    borderRadius: '3px',
+    spacingUnit: '4px',
+  },
+  rules: {
+    '.Input': {
+      border: '1px solid #e2e0dc',
+      borderRadius: '3px',
+      padding: '11px 12px',
+      boxShadow: 'none',
+    },
+    '.Input:focus': {
+      border: '1px solid #C9A96E',
+      boxShadow: 'none',
+    },
+    '.Label': {
+      fontWeight: '500',
+      fontSize: '11px',
+      letterSpacing: '0.15em',
+      textTransform: 'uppercase',
+      color: '#7a7875',
+    },
+    '.Tab': {
+      border: '1px solid #e2e0dc',
+      borderRadius: '3px',
+    },
+    '.Tab--selected': {
+      border: '1px solid #C9A96E',
+    },
+  },
+}
+
+function PulsingDot() {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+      <style>{`
+        @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.85)} }
+      `}</style>
+      {[0, 150, 300].map(delay => (
+        <div
+          key={delay}
+          style={{
+            width: '7px',
+            height: '7px',
+            borderRadius: '50%',
+            background: GOLD,
+            animation: `pulse 1.2s ease-in-out infinite`,
+            animationDelay: `${delay}ms`,
+          }}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default function PayPage() {
+  const params = useParams()
+  const orderId = params.orderId as string
+
+  const { data: payment, isLoading } = usePaymentByOrder(orderId)
+
+  const elementsOptions = useMemo(
+    () =>
+      payment?.client_secret
+        ? { clientSecret: payment.client_secret, appearance: stripeAppearance }
+        : null,
+    [payment?.client_secret],
+  )
+
+  return (
+    <div style={{ background: CREAM, minHeight: 'calc(100svh - 60px)' }}>
+      <div style={{ maxWidth: '520px', margin: '0 auto', padding: '4rem 1.5rem' }}>
+        {/* Header */}
+        <div style={{ marginBottom: '2.5rem', textAlign: 'center' }}>
+          <p style={{ fontSize: '0.6rem', letterSpacing: '0.3em', textTransform: 'uppercase', color: GOLD, marginBottom: '0.5rem' }}>
+            Secure Payment
+          </p>
+          <h1 style={{ fontFamily: 'var(--font-cormorant)', fontSize: '2.5rem', fontWeight: 300, color: CHARCOAL, margin: 0, lineHeight: 1 }}>
+            Complete Your Order
+          </h1>
+          {payment && (
+            <p style={{ fontSize: '0.8rem', color: MUTED, marginTop: '0.5rem' }}>
+              Order #{orderId.slice(-8).toUpperCase()} · {formatPrice(payment.amount)}
+            </p>
+          )}
+        </div>
+
+        <div
+          style={{
+            background: '#fff',
+            border: '1px solid oklch(0.9 0 0)',
+            borderRadius: '4px',
+            padding: '2rem',
+          }}
+        >
+          {isLoading || !elementsOptions ? (
+            /* Waiting for Kafka + Stripe PaymentIntent creation */
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1.25rem', padding: '2rem 0' }}>
+              <PulsingDot />
+              <div style={{ textAlign: 'center' }}>
+                <p style={{ fontSize: '0.82rem', fontWeight: 500, color: CHARCOAL, marginBottom: '0.25rem' }}>
+                  Preparing your payment
+                </p>
+                <p style={{ fontSize: '0.72rem', color: MUTED }}>
+                  This takes just a moment…
+                </p>
+              </div>
+            </div>
+          ) : (
+            <Elements stripe={stripePromise} options={elementsOptions}>
+              <PaymentForm orderId={orderId} amount={payment!.amount} />
+            </Elements>
+          )}
+        </div>
+
+        {/* Security note */}
+        <p
+          style={{
+            textAlign: 'center',
+            fontSize: '0.65rem',
+            color: 'oklch(0.72 0 0)',
+            marginTop: '1.25rem',
+            letterSpacing: '0.05em',
+          }}
+        >
+          Payments secured by Stripe · 256-bit SSL encryption
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/app/(shop)/checkout/page.tsx b/frontend/app/(shop)/checkout/page.tsx
new file mode 100644
index 0000000..5354696
--- /dev/null
+++ b/frontend/app/(shop)/checkout/page.tsx
@@ -0,0 +1,279 @@
+'use client'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod/v4'
+import { useCart } from '@/lib/hooks/use-cart'
+import { formatPrice } from '@/lib/utils'
+import { Skeleton } from '@/components/ui/skeleton'
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+const MUTED = 'oklch(0.52 0 0)'
+const CREAM = 'oklch(0.975 0.005 75)'
+
+const schema = z.object({
+  shipping_name: z.string().min(2, 'Full name is required'),
+  shipping_address: z.string().min(5, 'Shipping address is required'),
+})
+type FormValues = z.infer<typeof schema>
+
+const inputStyle: React.CSSProperties = {
+  width: '100%',
+  height: '44px',
+  padding: '0 12px',
+  border: '1px solid oklch(0.88 0 0)',
+  borderRadius: '3px',
+  fontSize: '0.82rem',
+  color: CHARCOAL,
+  background: '#fff',
+  outline: 'none',
+  boxSizing: 'border-box',
+  transition: 'border-color 0.15s',
+}
+
+const labelStyle: React.CSSProperties = {
+  display: 'block',
+  fontSize: '0.65rem',
+  fontWeight: 500,
+  letterSpacing: '0.15em',
+  textTransform: 'uppercase',
+  color: MUTED,
+  marginBottom: '0.4rem',
+}
+
+export default function CheckoutPage() {
+  const router = useRouter()
+  const { data: cart, isLoading } = useCart()
+  const [serverError, setServerError] = useState<string | null>(null)
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<FormValues>({ resolver: zodResolver(schema) })
+
+  const onSubmit = async (values: FormValues) => {
+    setServerError(null)
+    const res = await fetch('/api/orders', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(values),
+    })
+    const data = await res.json()
+    if (!res.ok) {
+      setServerError(data?.error ?? 'Failed to place order. Please try again.')
+      return
+    }
+    const orderId = data?.data?.id
+    if (!orderId) {
+      setServerError('Order created but ID missing. Please check your orders.')
+      return
+    }
+    router.push(`/checkout/${orderId}/pay`)
+  }
+
+  if (isLoading) {
+    return (
+      <div style={{ maxWidth: '1000px', margin: '0 auto', padding: '3rem 1.5rem' }}>
+        <Skeleton style={{ height: '44px', width: '200px', marginBottom: '2.5rem' }} />
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: '3rem' }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
+            <Skeleton style={{ height: '44px' }} />
+            <Skeleton style={{ height: '100px' }} />
+          </div>
+          <Skeleton style={{ height: '300px', borderRadius: '4px' }} />
+        </div>
+      </div>
+    )
+  }
+
+  if (!cart || cart.items.length === 0) {
+    return (
+      <div style={{ maxWidth: '600px', margin: '6rem auto', padding: '0 1.5rem', textAlign: 'center' }}>
+        <p style={{ fontFamily: 'var(--font-cormorant)', fontSize: '1.8rem', fontWeight: 300, color: CHARCOAL, margin: '0 0 0.75rem' }}>
+          Your cart is empty
+        </p>
+        <p style={{ fontSize: '0.82rem', color: MUTED, marginBottom: '1.5rem' }}>
+          Add items to your cart before checking out.
+        </p>
+        <Link href="/products" style={{ display: 'inline-flex', padding: '12px 28px', background: CHARCOAL, color: '#fff', fontSize: '0.7rem', letterSpacing: '0.2em', textTransform: 'uppercase', textDecoration: 'none', borderRadius: '3px' }}>
+          Shop Now
+        </Link>
+      </div>
+    )
+  }
+
+  return (
+    <div style={{ background: CREAM, minHeight: 'calc(100svh - 60px)' }}>
+      <div style={{ maxWidth: '1000px', margin: '0 auto', padding: '3rem 1.5rem' }}>
+        {/* Header */}
+        <div style={{ marginBottom: '2.5rem' }}>
+          <p style={{ fontSize: '0.6rem', letterSpacing: '0.3em', textTransform: 'uppercase', color: GOLD, marginBottom: '0.5rem' }}>
+            Secure Checkout
+          </p>
+          <h1 style={{ fontFamily: 'var(--font-cormorant)', fontSize: '2.8rem', fontWeight: 300, color: CHARCOAL, margin: 0, lineHeight: 1 }}>
+            Checkout
+          </h1>
+        </div>
+
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: '3rem', alignItems: 'start' }}>
+          {/* Left: Shipping form */}
+          <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+            <div>
+              <p style={{ fontFamily: 'var(--font-cormorant)', fontSize: '1.4rem', fontWeight: 400, color: CHARCOAL, margin: '0 0 1.25rem', lineHeight: 1 }}>
+                Shipping Information
+              </p>
+
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                <div>
+                  <label style={labelStyle}>Full Name</label>
+                  <input
+                    {...register('shipping_name')}
+                    placeholder="Jane Doe"
+                    style={inputStyle}
+                    onFocus={e => (e.currentTarget.style.borderColor = GOLD)}
+                    onBlur={e => (e.currentTarget.style.borderColor = errors.shipping_name ? 'oklch(0.6 0.18 25)' : 'oklch(0.88 0 0)')}
+                  />
+                  {errors.shipping_name && (
+                    <p style={{ fontSize: '0.72rem', color: 'oklch(0.55 0.18 25)', marginTop: '4px' }}>
+                      {errors.shipping_name.message}
+                    </p>
+                  )}
+                </div>
+
+                <div>
+                  <label style={labelStyle}>Shipping Address</label>
+                  <textarea
+                    {...register('shipping_address')}
+                    placeholder={'123 Main Street\nNew York, NY 10001\nUnited States'}
+                    rows={3}
+                    style={{
+                      ...inputStyle,
+                      height: 'auto',
+                      padding: '10px 12px',
+                      resize: 'vertical',
+                      fontFamily: 'inherit',
+                      lineHeight: 1.5,
+                    }}
+                    onFocus={e => (e.currentTarget.style.borderColor = GOLD)}
+                    onBlur={e => (e.currentTarget.style.borderColor = errors.shipping_address ? 'oklch(0.6 0.18 25)' : 'oklch(0.88 0 0)')}
+                  />
+                  {errors.shipping_address && (
+                    <p style={{ fontSize: '0.72rem', color: 'oklch(0.55 0.18 25)', marginTop: '4px' }}>
+                      {errors.shipping_address.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {serverError && (
+              <div style={{ padding: '0.75rem 1rem', background: 'oklch(0.97 0.03 25)', border: '1px solid oklch(0.85 0.1 25)', borderRadius: '3px', fontSize: '0.78rem', color: 'oklch(0.45 0.18 25)' }}>
+                {serverError}
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              style={{
+                height: '52px',
+                background: isSubmitting ? 'oklch(0.28 0.01 50)' : CHARCOAL,
+                color: '#fff',
+                fontSize: '0.72rem',
+                fontWeight: 600,
+                letterSpacing: '0.2em',
+                textTransform: 'uppercase',
+                border: 'none',
+                borderRadius: '3px',
+                cursor: isSubmitting ? 'not-allowed' : 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: '0.5rem',
+                transition: 'background 0.2s',
+              }}
+              onMouseEnter={e => { if (!isSubmitting) (e.currentTarget as HTMLElement).style.background = 'oklch(0.22 0.01 50)' }}
+              onMouseLeave={e => { if (!isSubmitting) (e.currentTarget as HTMLElement).style.background = CHARCOAL }}
+            >
+              {isSubmitting ? (
+                <>
+                  <span style={{ display: 'inline-block', width: '14px', height: '14px', border: '2px solid rgba(255,255,255,0.3)', borderTopColor: '#fff', borderRadius: '50%', animation: 'spin 0.7s linear infinite' }} />
+                  Placing Order…
+                </>
+              ) : (
+                'Place Order & Continue to Payment'
+              )}
+            </button>
+
+            <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
+          </form>
+
+          {/* Right: Order summary */}
+          <div
+            style={{
+              border: '1px solid oklch(0.9 0 0)',
+              borderRadius: '4px',
+              overflow: 'hidden',
+              position: 'sticky',
+              top: '80px',
+            }}
+          >
+            <div style={{ padding: '1.25rem', borderBottom: '1px solid oklch(0.9 0 0)' }}>
+              <p style={{ fontFamily: 'var(--font-cormorant)', fontSize: '1.2rem', fontWeight: 400, color: CHARCOAL, margin: 0 }}>
+                Order Summary
+              </p>
+            </div>
+
+            <div style={{ padding: '0 1.25rem', maxHeight: '280px', overflowY: 'auto' }}>
+              {cart.items.map(item => (
+                <div
+                  key={item.id}
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'flex-start',
+                    gap: '0.75rem',
+                    padding: '0.85rem 0',
+                    borderBottom: '1px solid oklch(0.93 0 0)',
+                  }}
+                >
+                  <div>
+                    <p style={{ fontSize: '0.78rem', fontWeight: 500, color: CHARCOAL, marginBottom: '2px' }}>{item.product_name}</p>
+                    <p style={{ fontSize: '0.7rem', color: MUTED }}>Qty: {item.quantity}</p>
+                  </div>
+                  <span style={{ fontSize: '0.78rem', fontWeight: 600, color: GOLD, whiteSpace: 'nowrap' }}>
+                    {formatPrice(item.subtotal)}
+                  </span>
+                </div>
+              ))}
+            </div>
+
+            <div style={{ padding: '1.25rem', background: 'oklch(0.97 0 0)' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem', fontSize: '0.78rem', color: MUTED }}>
+                <span>Subtotal</span>
+                <span>{formatPrice(cart.total)}</span>
+              </div>
+              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.75rem', fontSize: '0.78rem', color: MUTED }}>
+                <span>Shipping</span>
+                <span style={{ color: cart.total >= 150 ? 'oklch(0.5 0.14 145)' : MUTED }}>
+                  {cart.total >= 150 ? 'Free' : formatPrice(9.99)}
+                </span>
+              </div>
+              <div style={{ height: '1px', background: 'oklch(0.88 0 0)', marginBottom: '0.75rem' }} />
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <span style={{ fontSize: '0.8rem', fontWeight: 600, color: CHARCOAL, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Total</span>
+                <span style={{ fontSize: '1.1rem', fontWeight: 700, color: GOLD }}>
+                  {formatPrice(cart.total >= 150 ? cart.total : cart.total + 9.99)}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/app/(shop)/checkout/success/page.tsx b/frontend/app/(shop)/checkout/success/page.tsx
new file mode 100644
index 0000000..9e12c40
--- /dev/null
+++ b/frontend/app/(shop)/checkout/success/page.tsx
@@ -0,0 +1,137 @@
+import Link from 'next/link'
+import type { Metadata } from 'next'
+import { CheckCircle } from 'lucide-react'
+
+export const metadata: Metadata = { title: 'Order Confirmed' }
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+const MUTED = 'oklch(0.52 0 0)'
+const CREAM = 'oklch(0.975 0.005 75)'
+
+export default async function CheckoutSuccessPage({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string>>
+}) {
+  const { orderId, status } = await searchParams
+  const isProcessing = status === 'processing'
+
+  return (
+    <div
+      style={{
+        background: CREAM,
+        minHeight: 'calc(100svh - 60px)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '3rem 1.5rem',
+      }}
+    >
+      <div
+        style={{
+          maxWidth: '480px',
+          width: '100%',
+          textAlign: 'center',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: '1.5rem',
+        }}
+      >
+        {/* Icon */}
+        <div
+          style={{
+            width: '72px',
+            height: '72px',
+            borderRadius: '50%',
+            border: `1px solid ${GOLD}`,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: GOLD,
+          }}
+        >
+          <CheckCircle size={32} strokeWidth={1.2} />
+        </div>
+
+        {/* Gold separator line */}
+        <div style={{ width: '2rem', height: '1px', background: GOLD }} />
+
+        {/* Heading */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+          <p style={{ fontSize: '0.6rem', letterSpacing: '0.3em', textTransform: 'uppercase', color: GOLD }}>
+            {isProcessing ? 'Payment Processing' : 'Order Confirmed'}
+          </p>
+          <h1
+            style={{
+              fontFamily: 'var(--font-cormorant)',
+              fontSize: '3rem',
+              fontWeight: 300,
+              color: CHARCOAL,
+              margin: 0,
+              lineHeight: 1,
+            }}
+          >
+            {isProcessing ? 'Thank you.' : 'Thank you.'}
+          </h1>
+        </div>
+
+        {/* Message */}
+        <p style={{ fontSize: '0.85rem', color: MUTED, lineHeight: 1.7, maxWidth: '360px' }}>
+          {isProcessing
+            ? 'Your payment is being processed. You will receive a confirmation email once it clears.'
+            : 'Your order has been placed and payment confirmed. You will receive a confirmation email shortly.'}
+        </p>
+
+        {orderId && (
+          <p style={{ fontSize: '0.72rem', color: MUTED }}>
+            Order reference: <span style={{ fontWeight: 500, color: CHARCOAL }}>#{orderId.slice(-8).toUpperCase()}</span>
+          </p>
+        )}
+
+        {/* Actions */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', width: '100%', maxWidth: '280px', paddingTop: '0.5rem' }}>
+          {orderId && (
+            <Link
+              href={`/orders/${orderId}`}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '48px',
+                background: CHARCOAL,
+                color: '#fff',
+                fontSize: '0.7rem',
+                letterSpacing: '0.2em',
+                textTransform: 'uppercase',
+                textDecoration: 'none',
+                borderRadius: '3px',
+              }}
+            >
+              View Order
+            </Link>
+          )}
+          <Link
+            href="/products"
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              height: '44px',
+              fontSize: '0.7rem',
+              letterSpacing: '0.12em',
+              textTransform: 'uppercase',
+              color: MUTED,
+              textDecoration: 'none',
+              border: '1px solid oklch(0.88 0 0)',
+              borderRadius: '3px',
+            }}
+          >
+            Continue Shopping
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/app/api/payments/order/[orderId]/route.ts b/frontend/app/api/payments/order/[orderId]/route.ts
new file mode 100644
index 0000000..89189ae
--- /dev/null
+++ b/frontend/app/api/payments/order/[orderId]/route.ts
@@ -0,0 +1,24 @@
+import { cookies } from 'next/headers'
+import { NextRequest } from 'next/server'
+
+const BASE = process.env.API_URL!
+
+async function token() {
+  return (await cookies()).get('access_token')?.value
+}
+
+export async function GET(
+  _: NextRequest,
+  { params }: { params: Promise<{ orderId: string }> },
+) {
+  const t = await token()
+  if (!t) return Response.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const { orderId } = await params
+  const res = await fetch(`${BASE}/payments/order/${orderId}`, {
+    headers: { Authorization: `Bearer ${t}` },
+    cache: 'no-store',
+  })
+  const data = await res.json()
+  return Response.json(data, { status: res.status })
+}
diff --git a/frontend/components/checkout/payment-form.tsx b/frontend/components/checkout/payment-form.tsx
new file mode 100644
index 0000000..8924fd0
--- /dev/null
+++ b/frontend/components/checkout/payment-form.tsx
@@ -0,0 +1,149 @@
+'use client'
+import { useState } from 'react'
+import { useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js'
+import { useRouter } from 'next/navigation'
+import { formatPrice } from '@/lib/utils'
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+const MUTED = 'oklch(0.52 0 0)'
+
+interface Props {
+  orderId: string
+  amount: number
+}
+
+export function PaymentForm({ orderId, amount }: Props) {
+  const stripe = useStripe()
+  const elements = useElements()
+  const router = useRouter()
+  const [error, setError] = useState<string | null>(null)
+  const [processing, setProcessing] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    if (!stripe || !elements) return
+
+    setProcessing(true)
+    setError(null)
+
+    const { error: submitErr } = await elements.submit()
+    if (submitErr) {
+      setError(submitErr.message ?? 'Payment error')
+      setProcessing(false)
+      return
+    }
+
+    const { error: confirmErr, paymentIntent } = await stripe.confirmPayment({
+      elements,
+      redirect: 'if_required',
+      confirmParams: {
+        return_url: `${window.location.origin}/checkout/success?orderId=${orderId}`,
+      },
+    })
+
+    if (confirmErr) {
+      setError(confirmErr.message ?? 'Payment failed')
+      setProcessing(false)
+      return
+    }
+
+    if (paymentIntent?.status === 'succeeded') {
+      router.push(`/checkout/success?orderId=${orderId}`)
+    } else if (paymentIntent?.status === 'processing') {
+      router.push(`/checkout/success?orderId=${orderId}&status=processing`)
+    } else {
+      setError('Unexpected payment status. Please try again.')
+      setProcessing(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+      <div>
+        <p
+          style={{
+            fontSize: '0.62rem',
+            letterSpacing: '0.25em',
+            textTransform: 'uppercase',
+            color: MUTED,
+            marginBottom: '1rem',
+          }}
+        >
+          Payment Details
+        </p>
+        <PaymentElement
+          options={{
+            layout: 'tabs',
+            fields: {
+              billingDetails: { name: 'auto' },
+            },
+          }}
+        />
+      </div>
+
+      {error && (
+        <div
+          style={{
+            padding: '0.75rem 1rem',
+            background: 'oklch(0.97 0.03 25)',
+            border: '1px solid oklch(0.85 0.1 25)',
+            borderRadius: '3px',
+            fontSize: '0.78rem',
+            color: 'oklch(0.45 0.18 25)',
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      <div style={{ height: '1px', background: 'oklch(0.9 0 0)' }} />
+
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingBottom: '0.25rem' }}>
+        <span style={{ fontSize: '0.8rem', color: MUTED }}>Total due</span>
+        <span style={{ fontSize: '1.15rem', fontWeight: 700, color: GOLD }}>{formatPrice(amount)}</span>
+      </div>
+
+      <button
+        type="submit"
+        disabled={!stripe || processing}
+        style={{
+          height: '52px',
+          background: !stripe || processing ? 'oklch(0.28 0.01 50)' : CHARCOAL,
+          color: '#fff',
+          fontSize: '0.72rem',
+          fontWeight: 600,
+          letterSpacing: '0.2em',
+          textTransform: 'uppercase',
+          border: 'none',
+          borderRadius: '3px',
+          cursor: !stripe || processing ? 'not-allowed' : 'pointer',
+          transition: 'background 0.2s',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '0.5rem',
+        }}
+        onMouseEnter={e => {
+          if (stripe && !processing)
+            (e.currentTarget as HTMLElement).style.background = 'oklch(0.22 0.01 50)'
+        }}
+        onMouseLeave={e => {
+          if (stripe && !processing)
+            (e.currentTarget as HTMLElement).style.background = CHARCOAL
+        }}
+      >
+        {processing ? (
+          <>
+            <span style={{ display: 'inline-block', width: '14px', height: '14px', border: '2px solid rgba(255,255,255,0.3)', borderTopColor: '#fff', borderRadius: '50%', animation: 'spin 0.7s linear infinite' }} />
+            Processing…
+          </>
+        ) : (
+          'Confirm Payment'
+        )}
+      </button>
+
+      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
+    </form>
+  )
+}
diff --git a/frontend/lib/hooks/use-payment.ts b/frontend/lib/hooks/use-payment.ts
new file mode 100644
index 0000000..e1d8b17
--- /dev/null
+++ b/frontend/lib/hooks/use-payment.ts
@@ -0,0 +1,26 @@
+'use client'
+import { useQuery } from '@tanstack/react-query'
+import { queryKeys } from '@/lib/query-keys'
+import type { Payment } from '@/types/payment'
+
+export interface PaymentCheckout extends Payment {
+  client_secret?: string
+}
+
+export function usePaymentByOrder(orderId: string) {
+  return useQuery<PaymentCheckout | null>({
+    queryKey: queryKeys.paymentByOrder(orderId),
+    queryFn: async () => {
+      const res = await fetch(`/api/payments/order/${orderId}`)
+      if (!res.ok) return null
+      const json = await res.json()
+      return (json?.data as PaymentCheckout) ?? null
+    },
+    enabled: !!orderId,
+    retry: false,
+    staleTime: 0,
+    // Poll every 2 s until client_secret arrives (Kafka async gap)
+    refetchInterval: (query) =>
+      query.state.data?.client_secret ? false : 2000,
+  })
+}

From 28b1a317b6353200199fb0b8a54842459fb24995 Mon Sep 17 00:00:00 2001
From: rezadrian01 <ahmadadrian324@gmail.com>
Date: Sun, 31 May 2026 15:45:49 +0700
Subject: [PATCH 7/8] feat: profile page with account details, password change,
 and address management
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bug fixes:
- /api/auth/me BFF now unwraps the { success, data } envelope and maps backend `name` to frontend `full_name`; useCurrentUser reads the mapped object directly instead of guessing the shape
- Address type corrected to match backend AddressResponse: uses `postal_code` (not `zip_code`), optional fields typed as `string | null`, removed `user_id`/`updated_at` which the backend doesn't include

New BFF routes:
- PUT /api/profile — maps full_name→name outbound and name→full_name inbound
- GET/POST /api/addresses, PUT/DELETE /api/addresses/[id] — proxy to /users/me/addresses with httpOnly cookie auth

Profile page (/profile):
- Two-column layout: circular monogram avatar sidebar + form content area
- Account details form: name and email with save-only-if-dirty guard
- Password change form: new password + confirm, validated with Zod refine
- Addresses section: card grid with inline edit expand, delete with confirm, add-new inline form, default badge with gold star
- All mutations use toast feedback; form validation via Zod v4 + react-hook-form

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/app/(shop)/profile/page.tsx         | 389 +++++++++++++++++++
 frontend/app/api/addresses/[id]/route.ts     |  42 ++
 frontend/app/api/addresses/route.ts          |  34 ++
 frontend/app/api/auth/me/route.ts            |  17 +-
 frontend/app/api/profile/route.ts            |  38 ++
 frontend/components/profile/address-card.tsx | 131 +++++++
 frontend/components/profile/address-form.tsx | 163 ++++++++
 frontend/lib/hooks/use-auth.ts               |   2 +-
 frontend/lib/hooks/use-profile.ts            |  86 ++++
 frontend/types/auth.ts                       |   9 +-
 10 files changed, 902 insertions(+), 9 deletions(-)
 create mode 100644 frontend/app/(shop)/profile/page.tsx
 create mode 100644 frontend/app/api/addresses/[id]/route.ts
 create mode 100644 frontend/app/api/addresses/route.ts
 create mode 100644 frontend/app/api/profile/route.ts
 create mode 100644 frontend/components/profile/address-card.tsx
 create mode 100644 frontend/components/profile/address-form.tsx
 create mode 100644 frontend/lib/hooks/use-profile.ts

diff --git a/frontend/app/(shop)/profile/page.tsx b/frontend/app/(shop)/profile/page.tsx
new file mode 100644
index 0000000..69a95ca
--- /dev/null
+++ b/frontend/app/(shop)/profile/page.tsx
@@ -0,0 +1,389 @@
+'use client'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod/v4'
+import { toast } from 'sonner'
+import { Plus } from 'lucide-react'
+import { useCurrentUser } from '@/lib/hooks/use-auth'
+import { useUpdateProfile, useAddresses, useAddAddress } from '@/lib/hooks/use-profile'
+import { AddressCard } from '@/components/profile/address-card'
+import { AddressForm, type AddressFormValues } from '@/components/profile/address-form'
+import { Skeleton } from '@/components/ui/skeleton'
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+const MUTED = 'oklch(0.52 0 0)'
+const CREAM = 'oklch(0.975 0.005 75)'
+
+// ── Schemas ────────────────────────────────────────────────────────────────────
+
+const profileSchema = z.object({
+  full_name: z.string().min(2, 'Name must be at least 2 characters'),
+  email: z.email('Valid email required'),
+})
+type ProfileValues = z.infer<typeof profileSchema>
+
+const passwordSchema = z
+  .object({
+    password: z.string().min(8, 'Minimum 8 characters'),
+    confirm: z.string().min(8, 'Minimum 8 characters'),
+  })
+  .refine(d => d.password === d.confirm, {
+    message: 'Passwords do not match',
+    path: ['confirm'],
+  })
+type PasswordValues = z.infer<typeof passwordSchema>
+
+// ── Shared input style ─────────────────────────────────────────────────────────
+
+const inputStyle: React.CSSProperties = {
+  width: '100%',
+  height: '42px',
+  padding: '0 12px',
+  border: '1px solid oklch(0.88 0 0)',
+  borderRadius: '3px',
+  fontSize: '0.82rem',
+  color: CHARCOAL,
+  background: '#fff',
+  outline: 'none',
+  boxSizing: 'border-box',
+  transition: 'border-color 0.15s',
+}
+const labelStyle: React.CSSProperties = {
+  display: 'block',
+  fontSize: '0.63rem',
+  fontWeight: 500,
+  letterSpacing: '0.15em',
+  textTransform: 'uppercase',
+  color: MUTED,
+  marginBottom: '0.35rem',
+}
+
+function SectionHeading({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ marginBottom: '1.5rem' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+        <div style={{ width: '1.5rem', height: '1px', background: GOLD }} />
+        <p style={{ fontSize: '0.6rem', letterSpacing: '0.3em', textTransform: 'uppercase', color: GOLD }}>
+          {children}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+// ── Profile details form ───────────────────────────────────────────────────────
+
+function ProfileDetailsForm() {
+  const { data: user } = useCurrentUser()
+  const update = useUpdateProfile()
+
+  const { register, handleSubmit, formState: { errors, isSubmitting, isDirty } } = useForm<ProfileValues>({
+    resolver: zodResolver(profileSchema),
+    values: { full_name: user?.full_name ?? '', email: user?.email ?? '' },
+  })
+
+  const onSubmit = async (values: ProfileValues) => {
+    try {
+      await update.mutateAsync(values)
+      toast.success('Profile updated')
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : 'Failed to update profile')
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.85rem' }}>
+        <div>
+          <label style={labelStyle}>Full Name</label>
+          <input
+            {...register('full_name')}
+            style={inputStyle}
+            onFocus={e => (e.currentTarget.style.borderColor = GOLD)}
+            onBlur={e => (e.currentTarget.style.borderColor = errors.full_name ? 'oklch(0.6 0.18 25)' : 'oklch(0.88 0 0)')}
+          />
+          {errors.full_name && <p style={{ fontSize: '0.7rem', color: 'oklch(0.55 0.18 25)', marginTop: '3px' }}>{errors.full_name.message}</p>}
+        </div>
+        <div>
+          <label style={labelStyle}>Email</label>
+          <input
+            {...register('email')}
+            type="email"
+            style={inputStyle}
+            onFocus={e => (e.currentTarget.style.borderColor = GOLD)}
+            onBlur={e => (e.currentTarget.style.borderColor = errors.email ? 'oklch(0.6 0.18 25)' : 'oklch(0.88 0 0)')}
+          />
+          {errors.email && <p style={{ fontSize: '0.7rem', color: 'oklch(0.55 0.18 25)', marginTop: '3px' }}>{errors.email.message}</p>}
+        </div>
+      </div>
+
+      <button
+        type="submit"
+        disabled={isSubmitting || !isDirty}
+        style={{
+          alignSelf: 'flex-start',
+          height: '40px',
+          padding: '0 20px',
+          background: isSubmitting || !isDirty ? 'oklch(0.88 0 0)' : CHARCOAL,
+          color: isSubmitting || !isDirty ? MUTED : '#fff',
+          fontSize: '0.7rem',
+          fontWeight: 600,
+          letterSpacing: '0.15em',
+          textTransform: 'uppercase',
+          border: 'none',
+          borderRadius: '3px',
+          cursor: isSubmitting || !isDirty ? 'not-allowed' : 'pointer',
+          transition: 'background 0.2s',
+        }}
+      >
+        {isSubmitting ? 'Saving…' : 'Save Changes'}
+      </button>
+    </form>
+  )
+}
+
+// ── Password change form ───────────────────────────────────────────────────────
+
+function PasswordForm() {
+  const update = useUpdateProfile()
+
+  const { register, handleSubmit, reset, formState: { errors, isSubmitting } } = useForm<PasswordValues>({
+    resolver: zodResolver(passwordSchema),
+  })
+
+  const onSubmit = async (values: PasswordValues) => {
+    try {
+      await update.mutateAsync({ password: values.password })
+      toast.success('Password updated')
+      reset()
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : 'Failed to update password')
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.85rem' }}>
+        <div>
+          <label style={labelStyle}>New Password</label>
+          <input
+            {...register('password')}
+            type="password"
+            placeholder="••••••••"
+            style={inputStyle}
+            onFocus={e => (e.currentTarget.style.borderColor = GOLD)}
+            onBlur={e => (e.currentTarget.style.borderColor = errors.password ? 'oklch(0.6 0.18 25)' : 'oklch(0.88 0 0)')}
+          />
+          {errors.password && <p style={{ fontSize: '0.7rem', color: 'oklch(0.55 0.18 25)', marginTop: '3px' }}>{errors.password.message}</p>}
+        </div>
+        <div>
+          <label style={labelStyle}>Confirm Password</label>
+          <input
+            {...register('confirm')}
+            type="password"
+            placeholder="••••••••"
+            style={inputStyle}
+            onFocus={e => (e.currentTarget.style.borderColor = GOLD)}
+            onBlur={e => (e.currentTarget.style.borderColor = errors.confirm ? 'oklch(0.6 0.18 25)' : 'oklch(0.88 0 0)')}
+          />
+          {errors.confirm && <p style={{ fontSize: '0.7rem', color: 'oklch(0.55 0.18 25)', marginTop: '3px' }}>{errors.confirm.message}</p>}
+        </div>
+      </div>
+
+      <button
+        type="submit"
+        disabled={isSubmitting}
+        style={{
+          alignSelf: 'flex-start',
+          height: '40px',
+          padding: '0 20px',
+          background: isSubmitting ? 'oklch(0.28 0.01 50)' : CHARCOAL,
+          color: '#fff',
+          fontSize: '0.7rem',
+          fontWeight: 600,
+          letterSpacing: '0.15em',
+          textTransform: 'uppercase',
+          border: 'none',
+          borderRadius: '3px',
+          cursor: isSubmitting ? 'not-allowed' : 'pointer',
+        }}
+      >
+        {isSubmitting ? 'Saving…' : 'Update Password'}
+      </button>
+    </form>
+  )
+}
+
+// ── Addresses section ──────────────────────────────────────────────────────────
+
+function AddressesSection() {
+  const [adding, setAdding] = useState(false)
+  const { data: addresses = [], isLoading } = useAddresses()
+  const addAddress = useAddAddress()
+
+  const handleAdd = async (values: AddressFormValues) => {
+    try {
+      await addAddress.mutateAsync(values)
+      toast.success('Address added')
+      setAdding(false)
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : 'Failed to add address')
+    }
+  }
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.25rem' }}>
+        <SectionHeading>Saved Addresses</SectionHeading>
+        <button
+          onClick={() => setAdding(a => !a)}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.4rem',
+            height: '34px',
+            padding: '0 14px',
+            background: adding ? 'oklch(0.88 0 0)' : 'none',
+            border: `1px solid ${adding ? 'oklch(0.88 0 0)' : CHARCOAL}`,
+            borderRadius: '3px',
+            fontSize: '0.68rem',
+            fontWeight: 500,
+            letterSpacing: '0.1em',
+            textTransform: 'uppercase',
+            color: adding ? MUTED : CHARCOAL,
+            cursor: 'pointer',
+          }}
+        >
+          <Plus size={13} />
+          {adding ? 'Cancel' : 'Add New'}
+        </button>
+      </div>
+
+      {adding && (
+        <div style={{ border: `1px solid ${GOLD}`, borderRadius: '4px', padding: '1.25rem', marginBottom: '1rem', background: 'oklch(0.99 0.002 80)' }}>
+          <p style={{ fontSize: '0.62rem', letterSpacing: '0.2em', textTransform: 'uppercase', color: GOLD, marginBottom: '1rem' }}>
+            New Address
+          </p>
+          <AddressForm onSubmit={handleAdd} onCancel={() => setAdding(false)} />
+        </div>
+      )}
+
+      {isLoading ? (
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.85rem' }}>
+          {[1, 2].map(i => <Skeleton key={i} style={{ height: '110px', borderRadius: '4px' }} />)}
+        </div>
+      ) : addresses.length === 0 && !adding ? (
+        <div style={{ padding: '2.5rem', textAlign: 'center', border: '1px dashed oklch(0.88 0 0)', borderRadius: '4px' }}>
+          <p style={{ fontFamily: 'var(--font-cormorant)', fontSize: '1.3rem', fontWeight: 300, color: CHARCOAL, marginBottom: '0.5rem' }}>
+            No saved addresses
+          </p>
+          <p style={{ fontSize: '0.78rem', color: MUTED }}>Add an address to speed up checkout.</p>
+        </div>
+      ) : (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: '0.85rem' }}>
+          {addresses.map(addr => <AddressCard key={addr.id} address={addr} />)}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ── Page ───────────────────────────────────────────────────────────────────────
+
+export default function ProfilePage() {
+  const { data: user, isLoading } = useCurrentUser()
+
+  const initials = user?.full_name
+    ? user.full_name.split(' ').map((w: string) => w[0]).slice(0, 2).join('').toUpperCase()
+    : '?'
+
+  return (
+    <div style={{ background: CREAM, minHeight: 'calc(100svh - 60px)' }}>
+      <div style={{ maxWidth: '1000px', margin: '0 auto', padding: '3rem 1.5rem' }}>
+
+        {/* Page header */}
+        <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: '3rem', alignItems: 'start' }}>
+
+          {/* Left sidebar — avatar */}
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1rem', paddingTop: '0.5rem' }}>
+            <div
+              style={{
+                width: '100px',
+                height: '100px',
+                borderRadius: '50%',
+                border: `1px solid ${GOLD}`,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                background: CHARCOAL,
+              }}
+            >
+              <span style={{ fontFamily: 'var(--font-cormorant)', fontSize: '2.5rem', fontWeight: 300, color: 'oklch(0.95 0.01 70)', letterSpacing: '0.05em' }}>
+                {isLoading ? '' : initials}
+              </span>
+            </div>
+
+            {isLoading ? (
+              <>
+                <Skeleton style={{ height: '18px', width: '120px' }} />
+                <Skeleton style={{ height: '13px', width: '150px' }} />
+              </>
+            ) : (
+              <>
+                <p style={{ fontFamily: 'var(--font-cormorant)', fontSize: '1.2rem', fontWeight: 400, color: CHARCOAL, textAlign: 'center', lineHeight: 1.2 }}>
+                  {user?.full_name}
+                </p>
+                <p style={{ fontSize: '0.72rem', color: MUTED, textAlign: 'center' }}>{user?.email}</p>
+                {user?.role === 'admin' && (
+                  <span style={{ fontSize: '0.58rem', fontWeight: 600, letterSpacing: '0.2em', textTransform: 'uppercase', color: GOLD, padding: '3px 8px', border: `1px solid ${GOLD}`, borderRadius: '2px' }}>
+                    Admin
+                  </span>
+                )}
+              </>
+            )}
+          </div>
+
+          {/* Right: forms */}
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '2.5rem' }}>
+
+            {/* Account details */}
+            <section>
+              <SectionHeading>Account Details</SectionHeading>
+              {isLoading ? (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.85rem' }}>
+                    <Skeleton style={{ height: '62px' }} />
+                    <Skeleton style={{ height: '62px' }} />
+                  </div>
+                  <Skeleton style={{ height: '40px', width: '130px' }} />
+                </div>
+              ) : (
+                <ProfileDetailsForm />
+              )}
+            </section>
+
+            {/* Divider */}
+            <div style={{ height: '1px', background: 'oklch(0.9 0 0)' }} />
+
+            {/* Password */}
+            <section>
+              <SectionHeading>Change Password</SectionHeading>
+              <PasswordForm />
+            </section>
+
+            {/* Divider */}
+            <div style={{ height: '1px', background: 'oklch(0.9 0 0)' }} />
+
+            {/* Addresses */}
+            <section>
+              <AddressesSection />
+            </section>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/app/api/addresses/[id]/route.ts b/frontend/app/api/addresses/[id]/route.ts
new file mode 100644
index 0000000..62fa016
--- /dev/null
+++ b/frontend/app/api/addresses/[id]/route.ts
@@ -0,0 +1,42 @@
+import { cookies } from 'next/headers'
+import { NextRequest } from 'next/server'
+
+const BASE = process.env.API_URL!
+
+async function token() {
+  return (await cookies()).get('access_token')?.value
+}
+
+export async function PUT(
+  req: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const t = await token()
+  if (!t) return Response.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const { id } = await params
+  const body = await req.json()
+  const res = await fetch(`${BASE}/users/me/addresses/${id}`, {
+    method: 'PUT',
+    headers: { Authorization: `Bearer ${t}`, 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  const data = await res.json()
+  return Response.json(data, { status: res.status })
+}
+
+export async function DELETE(
+  _: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const t = await token()
+  if (!t) return Response.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const { id } = await params
+  const res = await fetch(`${BASE}/users/me/addresses/${id}`, {
+    method: 'DELETE',
+    headers: { Authorization: `Bearer ${t}` },
+  })
+  const data = await res.json()
+  return Response.json(data, { status: res.status })
+}
diff --git a/frontend/app/api/addresses/route.ts b/frontend/app/api/addresses/route.ts
new file mode 100644
index 0000000..f7770d0
--- /dev/null
+++ b/frontend/app/api/addresses/route.ts
@@ -0,0 +1,34 @@
+import { cookies } from 'next/headers'
+import { NextRequest } from 'next/server'
+
+const BASE = process.env.API_URL!
+
+async function token() {
+  return (await cookies()).get('access_token')?.value
+}
+
+export async function GET() {
+  const t = await token()
+  if (!t) return Response.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const res = await fetch(`${BASE}/users/me/addresses`, {
+    headers: { Authorization: `Bearer ${t}` },
+    cache: 'no-store',
+  })
+  const data = await res.json()
+  return Response.json(data, { status: res.status })
+}
+
+export async function POST(req: NextRequest) {
+  const t = await token()
+  if (!t) return Response.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const body = await req.json()
+  const res = await fetch(`${BASE}/users/me/addresses`, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${t}`, 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  const data = await res.json()
+  return Response.json(data, { status: res.status })
+}
diff --git a/frontend/app/api/auth/me/route.ts b/frontend/app/api/auth/me/route.ts
index 7a1b076..513afe0 100644
--- a/frontend/app/api/auth/me/route.ts
+++ b/frontend/app/api/auth/me/route.ts
@@ -1,14 +1,27 @@
 import { cookies } from 'next/headers'
 
+const BASE = process.env.API_URL!
+
 export async function GET() {
   const token = (await cookies()).get('access_token')?.value
   if (!token) return Response.json(null, { status: 401 })
 
-  const res = await fetch(`${process.env.API_URL}/users/me`, {
+  const res = await fetch(`${BASE}/users/me`, {
     headers: { Authorization: `Bearer ${token}` },
     cache: 'no-store',
   })
 
   if (!res.ok) return Response.json(null, { status: res.status })
-  return Response.json(await res.json())
+
+  const json = await res.json()
+  const u = json?.data
+  if (!u) return Response.json(null, { status: 404 })
+
+  // Backend uses `name`; frontend expects `full_name`
+  return Response.json({
+    id: u.id,
+    email: u.email,
+    full_name: u.name,
+    role: u.role,
+  })
 }
diff --git a/frontend/app/api/profile/route.ts b/frontend/app/api/profile/route.ts
new file mode 100644
index 0000000..eda8960
--- /dev/null
+++ b/frontend/app/api/profile/route.ts
@@ -0,0 +1,38 @@
+import { cookies } from 'next/headers'
+import { NextRequest } from 'next/server'
+
+const BASE = process.env.API_URL!
+
+async function token() {
+  return (await cookies()).get('access_token')?.value
+}
+
+// PUT /api/profile — update name, email, or password
+export async function PUT(req: NextRequest) {
+  const t = await token()
+  if (!t) return Response.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const body = await req.json()
+  // Map frontend `full_name` → backend `name`
+  const { full_name, ...rest } = body
+  const backendBody: Record<string, unknown> = { ...rest }
+  if (full_name !== undefined) backendBody.name = full_name
+
+  const res = await fetch(`${BASE}/users/me`, {
+    method: 'PUT',
+    headers: { Authorization: `Bearer ${t}`, 'Content-Type': 'application/json' },
+    body: JSON.stringify(backendBody),
+  })
+
+  const json = await res.json()
+  if (!res.ok) return Response.json(json, { status: res.status })
+
+  const u = json?.data
+  if (!u) return Response.json(json, { status: res.status })
+
+  // Map backend `name` → frontend `full_name`
+  return Response.json({
+    success: true,
+    data: { id: u.id, email: u.email, full_name: u.name, role: u.role },
+  })
+}
diff --git a/frontend/components/profile/address-card.tsx b/frontend/components/profile/address-card.tsx
new file mode 100644
index 0000000..c117297
--- /dev/null
+++ b/frontend/components/profile/address-card.tsx
@@ -0,0 +1,131 @@
+'use client'
+import { useState } from 'react'
+import { Pencil, Trash2, Star } from 'lucide-react'
+import { toast } from 'sonner'
+import { useDeleteAddress, useUpdateAddress } from '@/lib/hooks/use-profile'
+import { AddressForm, type AddressFormValues } from './address-form'
+import type { Address } from '@/types/auth'
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+const MUTED = 'oklch(0.52 0 0)'
+
+interface Props {
+  address: Address
+}
+
+export function AddressCard({ address }: Props) {
+  const [editing, setEditing] = useState(false)
+  const updateMutation = useUpdateAddress()
+  const deleteMutation = useDeleteAddress()
+
+  const handleUpdate = async (values: AddressFormValues) => {
+    try {
+      await updateMutation.mutateAsync({ id: address.id, ...values })
+      toast.success('Address updated')
+      setEditing(false)
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : 'Failed to update')
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!confirm('Delete this address?')) return
+    try {
+      await deleteMutation.mutateAsync(address.id)
+      toast.success('Address removed')
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : 'Failed to delete')
+    }
+  }
+
+  const lines = [
+    address.street,
+    [address.city, address.state, address.postal_code].filter(Boolean).join(', '),
+    address.country,
+  ].filter(Boolean)
+
+  if (editing) {
+    return (
+      <div
+        style={{
+          border: `1px solid ${GOLD}`,
+          borderRadius: '4px',
+          padding: '1.25rem',
+          background: 'oklch(0.99 0.002 80)',
+        }}
+      >
+        <p style={{ fontSize: '0.62rem', letterSpacing: '0.2em', textTransform: 'uppercase', color: GOLD, marginBottom: '1rem' }}>
+          Edit Address
+        </p>
+        <AddressForm
+          initial={address}
+          onSubmit={handleUpdate}
+          onCancel={() => setEditing(false)}
+          submitLabel="Update Address"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div
+      style={{
+        border: address.is_default ? `1px solid ${GOLD}` : '1px solid oklch(0.9 0 0)',
+        borderRadius: '4px',
+        padding: '1.1rem 1.25rem',
+        position: 'relative',
+        opacity: deleteMutation.isPending ? 0.5 : 1,
+        transition: 'opacity 0.15s',
+      }}
+    >
+      {/* Header row */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '0.6rem' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+          {address.label && (
+            <span style={{ fontSize: '0.68rem', fontWeight: 600, letterSpacing: '0.15em', textTransform: 'uppercase', color: CHARCOAL }}>
+              {address.label}
+            </span>
+          )}
+          {address.is_default && (
+            <span style={{ display: 'flex', alignItems: 'center', gap: '3px', fontSize: '0.6rem', color: GOLD }}>
+              <Star size={10} fill="currentColor" />
+              Default
+            </span>
+          )}
+        </div>
+
+        <div style={{ display: 'flex', gap: '0.4rem' }}>
+          <button
+            onClick={() => setEditing(true)}
+            style={{ background: 'none', border: 'none', cursor: 'pointer', color: MUTED, padding: '4px', display: 'flex' }}
+            onMouseEnter={e => ((e.currentTarget as HTMLElement).style.color = CHARCOAL)}
+            onMouseLeave={e => ((e.currentTarget as HTMLElement).style.color = MUTED)}
+            aria-label="Edit"
+          >
+            <Pencil size={14} />
+          </button>
+          <button
+            onClick={handleDelete}
+            disabled={deleteMutation.isPending}
+            style={{ background: 'none', border: 'none', cursor: 'pointer', color: MUTED, padding: '4px', display: 'flex' }}
+            onMouseEnter={e => ((e.currentTarget as HTMLElement).style.color = 'oklch(0.5 0.18 25)')}
+            onMouseLeave={e => ((e.currentTarget as HTMLElement).style.color = MUTED)}
+            aria-label="Delete"
+          >
+            <Trash2 size={14} />
+          </button>
+        </div>
+      </div>
+
+      {/* Address lines */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1px' }}>
+        {lines.map((line, i) => (
+          <p key={i} style={{ fontSize: '0.8rem', color: i === 0 ? CHARCOAL : MUTED, margin: 0 }}>
+            {line}
+          </p>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/components/profile/address-form.tsx b/frontend/components/profile/address-form.tsx
new file mode 100644
index 0000000..012fd9b
--- /dev/null
+++ b/frontend/components/profile/address-form.tsx
@@ -0,0 +1,163 @@
+'use client'
+import { useEffect } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod/v4'
+import type { Address } from '@/types/auth'
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+const MUTED = 'oklch(0.52 0 0)'
+
+const schema = z.object({
+  label: z.string().optional(),
+  street: z.string().min(1, 'Street is required'),
+  city: z.string().min(1, 'City is required'),
+  state: z.string().optional(),
+  country: z.string().min(1, 'Country is required'),
+  postal_code: z.string().optional(),
+  is_default: z.boolean(),
+})
+export type AddressFormValues = z.infer<typeof schema>
+
+const inputStyle: React.CSSProperties = {
+  width: '100%',
+  height: '40px',
+  padding: '0 10px',
+  border: '1px solid oklch(0.88 0 0)',
+  borderRadius: '3px',
+  fontSize: '0.8rem',
+  color: CHARCOAL,
+  background: '#fff',
+  outline: 'none',
+  boxSizing: 'border-box',
+  transition: 'border-color 0.15s',
+}
+const labelStyle: React.CSSProperties = {
+  display: 'block',
+  fontSize: '0.62rem',
+  fontWeight: 500,
+  letterSpacing: '0.15em',
+  textTransform: 'uppercase',
+  color: MUTED,
+  marginBottom: '0.3rem',
+}
+
+interface Props {
+  initial?: Address
+  onSubmit: (values: AddressFormValues) => Promise<void>
+  onCancel: () => void
+  submitLabel?: string
+}
+
+export function AddressForm({ initial, onSubmit, onCancel, submitLabel = 'Save Address' }: Props) {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<AddressFormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      label: initial?.label ?? '',
+      street: initial?.street ?? '',
+      city: initial?.city ?? '',
+      state: initial?.state ?? '',
+      country: initial?.country ?? '',
+      postal_code: initial?.postal_code ?? '',
+      is_default: initial?.is_default ?? false,
+    },
+  })
+
+  useEffect(() => {
+    if (initial) reset({
+      label: initial.label ?? '',
+      street: initial.street,
+      city: initial.city,
+      state: initial.state ?? '',
+      country: initial.country,
+      postal_code: initial.postal_code ?? '',
+      is_default: initial.is_default,
+    })
+  }, [initial, reset])
+
+  const field = (name: keyof AddressFormValues, label: string, placeholder = '') => (
+    <div>
+      <label style={labelStyle}>{label}</label>
+      <input
+        {...register(name as 'street')}
+        placeholder={placeholder}
+        style={inputStyle}
+        onFocus={e => (e.currentTarget.style.borderColor = GOLD)}
+        onBlur={e => (e.currentTarget.style.borderColor = (errors as Record<string, unknown>)[name] ? 'oklch(0.6 0.18 25)' : 'oklch(0.88 0 0)')}
+      />
+      {(errors as Record<string, { message?: string }>)[name] && (
+        <p style={{ fontSize: '0.7rem', color: 'oklch(0.55 0.18 25)', marginTop: '3px' }}>
+          {(errors as Record<string, { message?: string }>)[name]?.message}
+        </p>
+      )}
+    </div>
+  )
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '0.85rem' }}>
+      {field('label', 'Label', 'Home, Office…')}
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem' }}>
+        {field('street', 'Street *', '123 Main St')}
+        {field('city', 'City *', 'New York')}
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '0.75rem' }}>
+        {field('state', 'State', 'NY')}
+        {field('postal_code', 'Postal Code', '10001')}
+        {field('country', 'Country *', 'United States')}
+      </div>
+
+      <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }}>
+        <input type="checkbox" {...register('is_default')} style={{ accentColor: GOLD }} />
+        <span style={{ fontSize: '0.78rem', color: MUTED }}>Set as default address</span>
+      </label>
+
+      <div style={{ display: 'flex', gap: '0.75rem', paddingTop: '0.25rem' }}>
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          style={{
+            height: '40px',
+            padding: '0 20px',
+            background: isSubmitting ? 'oklch(0.28 0.01 50)' : CHARCOAL,
+            color: '#fff',
+            fontSize: '0.7rem',
+            fontWeight: 600,
+            letterSpacing: '0.15em',
+            textTransform: 'uppercase',
+            border: 'none',
+            borderRadius: '3px',
+            cursor: isSubmitting ? 'not-allowed' : 'pointer',
+          }}
+        >
+          {isSubmitting ? 'Saving…' : submitLabel}
+        </button>
+        <button
+          type="button"
+          onClick={onCancel}
+          style={{
+            height: '40px',
+            padding: '0 16px',
+            background: 'none',
+            color: MUTED,
+            fontSize: '0.7rem',
+            letterSpacing: '0.15em',
+            textTransform: 'uppercase',
+            border: '1px solid oklch(0.88 0 0)',
+            borderRadius: '3px',
+            cursor: 'pointer',
+          }}
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  )
+}
diff --git a/frontend/lib/hooks/use-auth.ts b/frontend/lib/hooks/use-auth.ts
index b418273..585451e 100644
--- a/frontend/lib/hooks/use-auth.ts
+++ b/frontend/lib/hooks/use-auth.ts
@@ -11,7 +11,7 @@ export function useCurrentUser() {
       const res = await fetch('/api/auth/me')
       if (!res.ok) return null
       const data = await res.json()
-      return data?.user ?? data ?? null
+      return data ?? null
     },
     retry: false,
     staleTime: 5 * 60_000,
diff --git a/frontend/lib/hooks/use-profile.ts b/frontend/lib/hooks/use-profile.ts
new file mode 100644
index 0000000..21b0cf8
--- /dev/null
+++ b/frontend/lib/hooks/use-profile.ts
@@ -0,0 +1,86 @@
+'use client'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { queryKeys } from '@/lib/query-keys'
+import type { User, Address } from '@/types/auth'
+
+// ── Profile ────────────────────────────────────────────────────────────────────
+
+export function useUpdateProfile() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async (body: { full_name?: string; email?: string; password?: string }) => {
+      const res = await fetch('/api/profile', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+      const json = await res.json()
+      if (!res.ok) throw new Error(json?.error ?? json?.message ?? 'Failed to update profile')
+      return json.data as User
+    },
+    onSuccess: (updated) => {
+      qc.setQueryData(queryKeys.me, updated)
+    },
+  })
+}
+
+// ── Addresses ──────────────────────────────────────────────────────────────────
+
+export function useAddresses() {
+  return useQuery<Address[]>({
+    queryKey: queryKeys.addresses,
+    queryFn: async () => {
+      const res = await fetch('/api/addresses')
+      if (!res.ok) return []
+      const json = await res.json()
+      return (json?.data as Address[]) ?? []
+    },
+    retry: false,
+    staleTime: 60_000,
+  })
+}
+
+export function useAddAddress() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async (body: Omit<Address, 'id'>) => {
+      const res = await fetch('/api/addresses', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+      const json = await res.json()
+      if (!res.ok) throw new Error(json?.error ?? 'Failed to add address')
+      return json.data as Address
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: queryKeys.addresses }),
+  })
+}
+
+export function useUpdateAddress() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async ({ id, ...body }: Partial<Address> & { id: string }) => {
+      const res = await fetch(`/api/addresses/${id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+      const json = await res.json()
+      if (!res.ok) throw new Error(json?.error ?? 'Failed to update address')
+      return json.data as Address
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: queryKeys.addresses }),
+  })
+}
+
+export function useDeleteAddress() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async (id: string) => {
+      const res = await fetch(`/api/addresses/${id}`, { method: 'DELETE' })
+      if (!res.ok) throw new Error('Failed to delete address')
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: queryKeys.addresses }),
+  })
+}
diff --git a/frontend/types/auth.ts b/frontend/types/auth.ts
index 3986fc0..b770a35 100644
--- a/frontend/types/auth.ts
+++ b/frontend/types/auth.ts
@@ -28,14 +28,11 @@ export interface AuthResponse {
 
 export interface Address {
   id: string
-  user_id: string
-  label: string
+  label?: string | null
   street: string
   city: string
-  state: string
-  zip_code: string
+  state?: string | null
   country: string
+  postal_code?: string | null
   is_default: boolean
-  created_at: string
-  updated_at: string
 }

From cd64cf361bd8370fd61979d7b6d8b1caee0ea157 Mon Sep 17 00:00:00 2001
From: rezadrian01 <ahmadadrian324@gmail.com>
Date: Sun, 31 May 2026 16:01:04 +0700
Subject: [PATCH 8/8] =?UTF-8?q?feat:=20Admin=20panel=20=E2=80=94=20product?=
 =?UTF-8?q?s,=20categories,=20and=20inventory=20management?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Admin layout and sidebar:
- `app/admin/layout.tsx` — Server Component that decodes the JWT, redirects
  non-admins to / and unauthenticated users to /login (defence-in-depth;
  proxy.ts already guards /admin at the edge)
- `components/admin/admin-sidebar.tsx` — sticky dark sidebar with gold
  active-link indicator; usePathname for exact/prefix matching

Dashboard (app/admin/page.tsx):
- Stat cards: total products and category count
- "Recent Products" table (last 6, newest first) with status badges

Products CRUD:
- `/admin/products` — SSR paginated table, Pencil edit link, DeleteProductButton
  (client island that calls DELETE BFF and calls router.refresh())
- `/admin/products/new` — server page fetches categories, passes as props to
  ProductForm client component (avoids client-side category fetch)
- `/admin/products/[id]/edit` — server page fetches product + categories,
  pre-populates ProductForm
- `components/admin/product-form.tsx` — react-hook-form + Zod; fixed the
  z.coerce.number() Resolver type incompatibility by switching to z.number()
  with valueAsNumber: true on the input registration

Categories:
- `/admin/categories` — fully client-side; useCategories fetches from public
  endpoint; useCreateCategory POSTs via BFF; list auto-refreshes via
  invalidateQueries

Inventory:
- `/admin/inventory` — SSR fetches product list, passes to InventoryTable
  client component; each InventoryRow uses useInventory() per-product query
  (lazy stock fetch, deduped/cached by TanStack Query) and useUpdateInventory
  mutation to call PUT /api/admin/inventory/:productId

BFF routes (all read httpOnly access_token cookie):
- POST /api/admin/products — create product
- PUT/DELETE /api/admin/products/[id] — update/delete product
- POST /api/admin/categories — create category
- GET/PUT /api/admin/inventory/[productId] — read and set stock

Fixed lib/validations/product.ts:
- Added image_url optional field
- Changed is_active from z.boolean().optional().default(true) → z.boolean()
  (default now lives in useForm defaultValues; avoids Resolver type mismatch)
- Changed price from z.coerce.number() → z.number() with valueAsNumber: true
  registration (same Zod v4 + react-hook-form Resolver incompatibility fix)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/app/admin/categories/page.tsx        | 253 ++++++++++++++++++
 .../app/admin/inventory/inventory-table.tsx   | 229 ++++++++++++++++
 frontend/app/admin/inventory/page.tsx         |  21 ++
 frontend/app/admin/layout.tsx                 |  30 +++
 frontend/app/admin/page.tsx                   | 196 ++++++++++++++
 .../app/admin/products/[id]/edit/page.tsx     |  70 +++++
 frontend/app/admin/products/new/page.tsx      |  46 ++++
 frontend/app/admin/products/page.tsx          | 222 +++++++++++++++
 frontend/app/api/admin/categories/route.ts    |  22 ++
 .../api/admin/inventory/[productId]/route.ts  |  41 +++
 frontend/app/api/admin/products/[id]/route.ts |  42 +++
 frontend/app/api/admin/products/route.ts      |  22 ++
 frontend/components/admin/admin-sidebar.tsx   | 104 +++++++
 .../admin/delete-product-button.tsx           |  51 ++++
 frontend/components/admin/product-form.tsx    | 221 +++++++++++++++
 frontend/lib/hooks/use-admin.ts               | 132 +++++++++
 frontend/lib/validations/product.ts           |   5 +-
 17 files changed, 1705 insertions(+), 2 deletions(-)
 create mode 100644 frontend/app/admin/categories/page.tsx
 create mode 100644 frontend/app/admin/inventory/inventory-table.tsx
 create mode 100644 frontend/app/admin/inventory/page.tsx
 create mode 100644 frontend/app/admin/layout.tsx
 create mode 100644 frontend/app/admin/page.tsx
 create mode 100644 frontend/app/admin/products/[id]/edit/page.tsx
 create mode 100644 frontend/app/admin/products/new/page.tsx
 create mode 100644 frontend/app/admin/products/page.tsx
 create mode 100644 frontend/app/api/admin/categories/route.ts
 create mode 100644 frontend/app/api/admin/inventory/[productId]/route.ts
 create mode 100644 frontend/app/api/admin/products/[id]/route.ts
 create mode 100644 frontend/app/api/admin/products/route.ts
 create mode 100644 frontend/components/admin/admin-sidebar.tsx
 create mode 100644 frontend/components/admin/delete-product-button.tsx
 create mode 100644 frontend/components/admin/product-form.tsx
 create mode 100644 frontend/lib/hooks/use-admin.ts

diff --git a/frontend/app/admin/categories/page.tsx b/frontend/app/admin/categories/page.tsx
new file mode 100644
index 0000000..737143a
--- /dev/null
+++ b/frontend/app/admin/categories/page.tsx
@@ -0,0 +1,253 @@
+'use client'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod/v4'
+import { toast } from 'sonner'
+import { Plus, Tag } from 'lucide-react'
+import { useCategories, useCreateCategory } from '@/lib/hooks/use-admin'
+import { Skeleton } from '@/components/ui/skeleton'
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+const MUTED = 'oklch(0.52 0 0)'
+
+const schema = z.object({
+  name: z.string().min(1, 'Name is required'),
+  description: z.string().optional(),
+})
+type FormValues = z.infer<typeof schema>
+
+const inputStyle: React.CSSProperties = {
+  width: '100%',
+  height: '40px',
+  padding: '0 12px',
+  border: '1px solid oklch(0.88 0 0)',
+  borderRadius: '3px',
+  fontSize: '0.82rem',
+  color: CHARCOAL,
+  background: '#fff',
+  outline: 'none',
+  boxSizing: 'border-box',
+  transition: 'border-color 0.15s',
+}
+const labelStyle: React.CSSProperties = {
+  display: 'block',
+  fontSize: '0.63rem',
+  fontWeight: 500,
+  letterSpacing: '0.15em',
+  textTransform: 'uppercase',
+  color: MUTED,
+  marginBottom: '0.3rem',
+}
+
+function NewCategoryForm({ onDone }: { onDone: () => void }) {
+  const create = useCreateCategory()
+  const { register, handleSubmit, reset, formState: { errors, isSubmitting } } = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: { name: '', description: '' },
+  })
+
+  const onSubmit = async (values: FormValues) => {
+    try {
+      await create.mutateAsync({ name: values.name, description: values.description || undefined })
+      toast.success('Category created')
+      reset()
+      onDone()
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : 'Failed to create category')
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.85rem' }}>
+        <div>
+          <label style={labelStyle}>Category Name *</label>
+          <input
+            {...register('name')}
+            style={inputStyle}
+            placeholder="e.g. Watches"
+            onFocus={e => (e.currentTarget.style.borderColor = GOLD)}
+            onBlur={e => (e.currentTarget.style.borderColor = errors.name ? 'oklch(0.6 0.18 25)' : 'oklch(0.88 0 0)')}
+          />
+          {errors.name && <p style={{ fontSize: '0.7rem', color: 'oklch(0.55 0.18 25)', marginTop: '3px' }}>{errors.name.message}</p>}
+        </div>
+        <div>
+          <label style={labelStyle}>Description</label>
+          <input
+            {...register('description')}
+            style={inputStyle}
+            placeholder="Optional description"
+            onFocus={e => (e.currentTarget.style.borderColor = GOLD)}
+            onBlur={e => (e.currentTarget.style.borderColor = 'oklch(0.88 0 0)')}
+          />
+        </div>
+      </div>
+
+      <div style={{ display: 'flex', gap: '0.75rem' }}>
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          style={{
+            height: '40px',
+            padding: '0 20px',
+            background: isSubmitting ? 'oklch(0.28 0.01 50)' : CHARCOAL,
+            color: '#fff',
+            fontSize: '0.7rem',
+            fontWeight: 600,
+            letterSpacing: '0.15em',
+            textTransform: 'uppercase',
+            border: 'none',
+            borderRadius: '3px',
+            cursor: isSubmitting ? 'not-allowed' : 'pointer',
+          }}
+        >
+          {isSubmitting ? 'Creating…' : 'Create Category'}
+        </button>
+        <button
+          type="button"
+          onClick={() => { reset(); onDone() }}
+          style={{
+            height: '40px',
+            padding: '0 16px',
+            background: 'none',
+            color: MUTED,
+            fontSize: '0.7rem',
+            letterSpacing: '0.15em',
+            textTransform: 'uppercase',
+            border: '1px solid oklch(0.88 0 0)',
+            borderRadius: '3px',
+            cursor: 'pointer',
+          }}
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  )
+}
+
+export default function AdminCategoriesPage() {
+  const [creating, setCreating] = useState(false)
+  const { data: categories = [], isLoading } = useCategories()
+
+  return (
+    <div style={{ padding: '2.5rem' }}>
+      {/* Header */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '2rem' }}>
+        <div>
+          <p style={{ fontSize: '0.58rem', letterSpacing: '0.3em', textTransform: 'uppercase', color: GOLD, margin: 0 }}>
+            Management
+          </p>
+          <h1 style={{
+            fontFamily: 'var(--font-cormorant)',
+            fontSize: '2.75rem',
+            fontWeight: 300,
+            color: CHARCOAL,
+            margin: '0.25rem 0 0',
+            lineHeight: 1,
+          }}>
+            Categories
+          </h1>
+        </div>
+
+        <button
+          onClick={() => setCreating(c => !c)}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.4rem',
+            height: '40px',
+            padding: '0 18px',
+            background: creating ? 'oklch(0.88 0 0)' : CHARCOAL,
+            color: creating ? MUTED : '#fff',
+            fontSize: '0.7rem',
+            fontWeight: 600,
+            letterSpacing: '0.12em',
+            textTransform: 'uppercase',
+            border: 'none',
+            borderRadius: '3px',
+            cursor: 'pointer',
+          }}
+        >
+          <Plus size={14} /> {creating ? 'Cancel' : 'New Category'}
+        </button>
+      </div>
+
+      {/* Create form */}
+      {creating && (
+        <div style={{
+          background: '#fff',
+          border: `1px solid ${GOLD}`,
+          borderRadius: '4px',
+          padding: '1.5rem',
+          marginBottom: '1.5rem',
+        }}>
+          <p style={{ fontSize: '0.6rem', letterSpacing: '0.25em', textTransform: 'uppercase', color: GOLD, marginBottom: '1rem' }}>
+            New Category
+          </p>
+          <NewCategoryForm onDone={() => setCreating(false)} />
+        </div>
+      )}
+
+      {/* List */}
+      {isLoading ? (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
+          {[1, 2, 3].map(i => <Skeleton key={i} style={{ height: '68px', borderRadius: '4px' }} />)}
+        </div>
+      ) : categories.length === 0 ? (
+        <div style={{
+          padding: '3.5rem',
+          textAlign: 'center',
+          border: '1px dashed oklch(0.88 0 0)',
+          borderRadius: '4px',
+          background: '#fff',
+        }}>
+          <Tag size={28} color="oklch(0.82 0 0)" strokeWidth={1} style={{ marginBottom: '0.75rem' }} />
+          <p style={{ fontFamily: 'var(--font-cormorant)', fontSize: '1.4rem', fontWeight: 300, color: CHARCOAL, marginBottom: '0.4rem' }}>
+            No categories yet
+          </p>
+          <p style={{ fontSize: '0.8rem', color: MUTED }}>Create your first category to organise products.</p>
+        </div>
+      ) : (
+        <div style={{ background: '#fff', border: '1px solid oklch(0.91 0 0)', borderRadius: '4px', overflow: 'hidden' }}>
+          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+            <thead>
+              <tr style={{ borderBottom: '1px solid oklch(0.93 0 0)' }}>
+                {['Name', 'Description', 'Created'].map(h => (
+                  <th key={h} style={{
+                    padding: '0.75rem 1.1rem',
+                    textAlign: 'left',
+                    fontSize: '0.6rem',
+                    letterSpacing: '0.2em',
+                    textTransform: 'uppercase',
+                    color: MUTED,
+                    fontWeight: 500,
+                  }}>
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {categories.map(cat => (
+                <tr key={cat.id} style={{ borderBottom: '1px solid oklch(0.96 0 0)' }}>
+                  <td style={{ padding: '0.9rem 1.1rem', fontSize: '0.85rem', color: CHARCOAL, fontWeight: 450 }}>
+                    {cat.name}
+                  </td>
+                  <td style={{ padding: '0.9rem 1.1rem', fontSize: '0.8rem', color: MUTED }}>
+                    {cat.description ?? '—'}
+                  </td>
+                  <td style={{ padding: '0.9rem 1.1rem', fontSize: '0.78rem', color: MUTED }}>
+                    {new Date(cat.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/app/admin/inventory/inventory-table.tsx b/frontend/app/admin/inventory/inventory-table.tsx
new file mode 100644
index 0000000..cecffc8
--- /dev/null
+++ b/frontend/app/admin/inventory/inventory-table.tsx
@@ -0,0 +1,229 @@
+'use client'
+import { useState } from 'react'
+import Link from 'next/link'
+import { toast } from 'sonner'
+import { useInventory, useUpdateInventory } from '@/lib/hooks/use-admin'
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+const MUTED = 'oklch(0.52 0 0)'
+
+function InventoryRow({ product }: { product: any }) {
+  const [qty, setQty] = useState('')
+  const { data: inv, isLoading } = useInventory(product.id)
+  const update = useUpdateInventory()
+
+  const handleSave = async () => {
+    const value = parseInt(qty, 10)
+    if (isNaN(value) || value < 0) {
+      toast.error('Enter a valid non-negative quantity')
+      return
+    }
+    try {
+      await update.mutateAsync({ productId: product.id, quantity: value })
+      toast.success(`Stock updated to ${value}`)
+      setQty('')
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : 'Failed to update stock')
+    }
+  }
+
+  const currentQty = inv?.total_quantity
+  const available = inv?.available_quantity
+  const reserved = inv?.reserved_quantity
+
+  return (
+    <tr style={{ borderBottom: '1px solid oklch(0.96 0 0)' }}>
+      <td style={{ padding: '0.9rem 1.1rem' }}>
+        <Link
+          href={`/admin/products/${product.id}/edit`}
+          style={{ textDecoration: 'none', fontSize: '0.85rem', color: CHARCOAL, fontWeight: 450 }}
+        >
+          {product.name}
+        </Link>
+      </td>
+
+      {/* Current stock */}
+      <td style={{ padding: '0.9rem 1.1rem' }}>
+        {isLoading ? (
+          <span style={{ fontSize: '0.78rem', color: 'oklch(0.8 0 0)' }}>Loading…</span>
+        ) : inv ? (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '1px' }}>
+            <span style={{ fontSize: '1rem', fontFamily: 'var(--font-cormorant)', color: CHARCOAL }}>
+              {currentQty}
+            </span>
+            <span style={{ fontSize: '0.68rem', color: MUTED }}>
+              {available} avail · {reserved} reserved
+            </span>
+          </div>
+        ) : (
+          <span style={{ fontSize: '0.78rem', color: MUTED }}>—</span>
+        )}
+      </td>
+
+      {/* Update form */}
+      <td style={{ padding: '0.9rem 1.1rem' }}>
+        <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+          <input
+            type="number"
+            min="0"
+            value={qty}
+            onChange={e => setQty(e.target.value)}
+            placeholder={currentQty !== undefined ? String(currentQty) : '0'}
+            style={{
+              width: '90px',
+              height: '36px',
+              padding: '0 10px',
+              border: '1px solid oklch(0.88 0 0)',
+              borderRadius: '3px',
+              fontSize: '0.82rem',
+              color: CHARCOAL,
+              background: '#fff',
+              outline: 'none',
+              boxSizing: 'border-box',
+            }}
+            onFocus={e => (e.currentTarget.style.borderColor = GOLD)}
+            onBlur={e => (e.currentTarget.style.borderColor = 'oklch(0.88 0 0)')}
+          />
+          <button
+            onClick={handleSave}
+            disabled={update.isPending || !qty}
+            style={{
+              height: '36px',
+              padding: '0 14px',
+              background: update.isPending || !qty ? 'oklch(0.88 0 0)' : CHARCOAL,
+              color: update.isPending || !qty ? MUTED : '#fff',
+              fontSize: '0.68rem',
+              fontWeight: 600,
+              letterSpacing: '0.12em',
+              textTransform: 'uppercase',
+              border: 'none',
+              borderRadius: '3px',
+              cursor: update.isPending || !qty ? 'not-allowed' : 'pointer',
+              transition: 'background 0.15s',
+            }}
+          >
+            {update.isPending ? '…' : 'Set'}
+          </button>
+        </div>
+      </td>
+    </tr>
+  )
+}
+
+interface Props {
+  products: any[]
+  meta: { total: number; page: number; limit: number; total_pages: number }
+  page: number
+}
+
+export function InventoryTable({ products, meta, page }: Props) {
+  const prevPage = page > 1 ? page - 1 : null
+  const nextPage = page < (meta.total_pages ?? 1) ? page + 1 : null
+
+  return (
+    <div style={{ padding: '2.5rem' }}>
+      {/* Header */}
+      <div style={{ marginBottom: '2rem' }}>
+        <p style={{ fontSize: '0.58rem', letterSpacing: '0.3em', textTransform: 'uppercase', color: GOLD, margin: 0 }}>
+          Management
+        </p>
+        <h1 style={{
+          fontFamily: 'var(--font-cormorant)',
+          fontSize: '2.75rem',
+          fontWeight: 300,
+          color: CHARCOAL,
+          margin: '0.25rem 0 0',
+          lineHeight: 1,
+        }}>
+          Inventory
+        </h1>
+        <p style={{ fontSize: '0.78rem', color: MUTED, marginTop: '0.5rem' }}>
+          Set the total stock quantity per product. Reserved quantities are automatically tracked by the order system.
+        </p>
+      </div>
+
+      {/* Table */}
+      <div style={{ background: '#fff', border: '1px solid oklch(0.91 0 0)', borderRadius: '4px', overflow: 'hidden', marginBottom: '1.5rem' }}>
+        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+          <thead>
+            <tr style={{ borderBottom: '1px solid oklch(0.93 0 0)' }}>
+              {['Product', 'Current Stock', 'Set New Quantity'].map(h => (
+                <th key={h} style={{
+                  padding: '0.75rem 1.1rem',
+                  textAlign: 'left',
+                  fontSize: '0.6rem',
+                  letterSpacing: '0.2em',
+                  textTransform: 'uppercase',
+                  color: MUTED,
+                  fontWeight: 500,
+                }}>
+                  {h}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {products.length === 0 ? (
+              <tr>
+                <td colSpan={3} style={{ padding: '3rem', textAlign: 'center', fontSize: '0.9rem', color: MUTED }}>
+                  No products found.{' '}
+                  <Link href="/admin/products/new" style={{ color: GOLD, textDecoration: 'none' }}>
+                    Create a product first.
+                  </Link>
+                </td>
+              </tr>
+            ) : products.map((p: any) => (
+              <InventoryRow key={p.id} product={p} />
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      {(prevPage || nextPage) && (
+        <div style={{ display: 'flex', justifyContent: 'center', gap: '0.5rem' }}>
+          {prevPage ? (
+            <Link
+              href={`/admin/inventory?page=${prevPage}`}
+              style={{
+                height: '36px',
+                padding: '0 16px',
+                display: 'flex',
+                alignItems: 'center',
+                border: '1px solid oklch(0.88 0 0)',
+                borderRadius: '3px',
+                fontSize: '0.78rem',
+                color: CHARCOAL,
+                textDecoration: 'none',
+              }}
+            >
+              ← Previous
+            </Link>
+          ) : null}
+          <span style={{ height: '36px', padding: '0 16px', display: 'flex', alignItems: 'center', fontSize: '0.78rem', color: MUTED }}>
+            Page {page} of {meta.total_pages ?? 1}
+          </span>
+          {nextPage ? (
+            <Link
+              href={`/admin/inventory?page=${nextPage}`}
+              style={{
+                height: '36px',
+                padding: '0 16px',
+                display: 'flex',
+                alignItems: 'center',
+                border: '1px solid oklch(0.88 0 0)',
+                borderRadius: '3px',
+                fontSize: '0.78rem',
+                color: CHARCOAL,
+                textDecoration: 'none',
+              }}
+            >
+              Next →
+            </Link>
+          ) : null}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/app/admin/inventory/page.tsx b/frontend/app/admin/inventory/page.tsx
new file mode 100644
index 0000000..67d9169
--- /dev/null
+++ b/frontend/app/admin/inventory/page.tsx
@@ -0,0 +1,21 @@
+import type { Metadata } from 'next'
+import { serverFetch } from '@/lib/api/server'
+import { InventoryTable } from './inventory-table'
+
+export const metadata: Metadata = { title: 'Inventory' }
+
+export default async function AdminInventoryPage({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string>>
+}) {
+  const sp = await searchParams
+  const page = Math.max(1, Number(sp.page ?? 1))
+
+  const raw = await serverFetch<unknown>(`/products?page=${page}&limit=20&sort=newest`).catch(() => null)
+  const inner = (raw as any)?.data ?? raw
+  const products: any[] = (inner as any)?.products ?? []
+  const meta = (inner as any)?.meta ?? { total: 0, page, limit: 20, total_pages: 1 }
+
+  return <InventoryTable products={products} meta={meta} page={page} />
+}
diff --git a/frontend/app/admin/layout.tsx b/frontend/app/admin/layout.tsx
new file mode 100644
index 0000000..8aca242
--- /dev/null
+++ b/frontend/app/admin/layout.tsx
@@ -0,0 +1,30 @@
+import { cookies } from 'next/headers'
+import { redirect } from 'next/navigation'
+import type { Metadata } from 'next'
+import { AdminSidebar } from '@/components/admin/admin-sidebar'
+
+export const metadata: Metadata = {
+  title: { default: 'Admin | Auron', template: '%s | Admin — Auron' },
+}
+
+export default async function AdminLayout({ children }: { children: React.ReactNode }) {
+  const token = (await cookies()).get('access_token')?.value
+
+  if (!token) redirect('/login?callbackUrl=/admin')
+
+  try {
+    const payload = JSON.parse(atob(token.split('.')[1]))
+    if (payload.role !== 'admin') redirect('/')
+  } catch {
+    redirect('/login')
+  }
+
+  return (
+    <div style={{ display: 'flex', minHeight: '100svh', background: 'oklch(0.975 0.005 75)' }}>
+      <AdminSidebar />
+      <main style={{ flex: 1, minWidth: 0, overflow: 'auto' }}>
+        {children}
+      </main>
+    </div>
+  )
+}
diff --git a/frontend/app/admin/page.tsx b/frontend/app/admin/page.tsx
new file mode 100644
index 0000000..4077298
--- /dev/null
+++ b/frontend/app/admin/page.tsx
@@ -0,0 +1,196 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { Package, Tag, ArrowRight } from 'lucide-react'
+import { serverFetch } from '@/lib/api/server'
+import { getCategories } from '@/lib/api/products'
+import type { Category } from '@/types/product'
+
+export const metadata: Metadata = { title: 'Dashboard' }
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+const MUTED = 'oklch(0.52 0 0)'
+
+function statusBadge(active: boolean) {
+  return (
+    <span style={{
+      fontSize: '0.62rem',
+      fontWeight: 500,
+      letterSpacing: '0.12em',
+      textTransform: 'uppercase',
+      color: active ? 'oklch(0.42 0.12 145)' : MUTED,
+      background: active ? 'oklch(0.94 0.04 145)' : 'oklch(0.95 0 0)',
+      padding: '2px 7px',
+      borderRadius: '2px',
+    }}>
+      {active ? 'Active' : 'Inactive'}
+    </span>
+  )
+}
+
+export default async function AdminDashboard() {
+  const [productsRaw, categories] = await Promise.all([
+    serverFetch<unknown>('/products?limit=6&sort=newest').catch(() => null),
+    getCategories().catch((): Category[] => []),
+  ])
+
+  // Handle both wrapped { data: { products, meta } } and flat { products, meta } responses
+  const inner = (productsRaw as any)?.data ?? productsRaw
+  const products = (inner as any)?.products ?? []
+  const total: number = (inner as any)?.meta?.total ?? products.length
+
+  const stats = [
+    { label: 'Total Products', value: total, icon: Package, href: '/admin/products' },
+    { label: 'Categories', value: categories.length, icon: Tag, href: '/admin/categories' },
+  ]
+
+  return (
+    <div style={{ padding: '2.5rem' }}>
+      {/* Header */}
+      <div style={{ marginBottom: '2.5rem' }}>
+        <p style={{ fontSize: '0.58rem', letterSpacing: '0.3em', textTransform: 'uppercase', color: GOLD, marginBottom: '0.4rem', margin: 0 }}>
+          Overview
+        </p>
+        <h1 style={{
+          fontFamily: 'var(--font-cormorant)',
+          fontSize: '2.75rem',
+          fontWeight: 300,
+          color: CHARCOAL,
+          margin: '0.25rem 0 0',
+          lineHeight: 1,
+        }}>
+          Dashboard
+        </h1>
+      </div>
+
+      {/* Stat cards */}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 260px)', gap: '1rem', marginBottom: '3rem' }}>
+        {stats.map(({ label, value, icon: Icon, href }) => (
+          <Link key={label} href={href} style={{ textDecoration: 'none' }}>
+            <div style={{
+              background: '#fff',
+              border: '1px solid oklch(0.91 0 0)',
+              borderRadius: '4px',
+              padding: '1.5rem',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '1.25rem',
+              transition: 'border-color 0.15s',
+            }}>
+              <div style={{
+                width: '44px',
+                height: '44px',
+                background: 'oklch(0.97 0.01 80)',
+                borderRadius: '4px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexShrink: 0,
+              }}>
+                <Icon size={20} color={GOLD} strokeWidth={1.5} />
+              </div>
+              <div>
+                <p style={{
+                  fontFamily: 'var(--font-cormorant)',
+                  fontSize: '2.25rem',
+                  fontWeight: 400,
+                  color: CHARCOAL,
+                  margin: 0,
+                  lineHeight: 1,
+                }}>
+                  {value}
+                </p>
+                <p style={{ fontSize: '0.7rem', color: MUTED, marginTop: '0.2rem', letterSpacing: '0.05em' }}>
+                  {label}
+                </p>
+              </div>
+            </div>
+          </Link>
+        ))}
+      </div>
+
+      {/* Recent Products table */}
+      <div>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
+          <p style={{
+            fontSize: '0.6rem',
+            letterSpacing: '0.28em',
+            textTransform: 'uppercase',
+            color: MUTED,
+            margin: 0,
+          }}>
+            Recent Products
+          </p>
+          <Link
+            href="/admin/products"
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '0.3rem',
+              fontSize: '0.7rem',
+              color: GOLD,
+              textDecoration: 'none',
+              letterSpacing: '0.08em',
+            }}
+          >
+            View all <ArrowRight size={12} />
+          </Link>
+        </div>
+
+        <div style={{ background: '#fff', border: '1px solid oklch(0.91 0 0)', borderRadius: '4px', overflow: 'hidden' }}>
+          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+            <thead>
+              <tr style={{ borderBottom: '1px solid oklch(0.93 0 0)' }}>
+                {['Name', 'Price', 'Status', 'Added'].map(h => (
+                  <th key={h} style={{
+                    padding: '0.75rem 1.1rem',
+                    textAlign: 'left',
+                    fontSize: '0.6rem',
+                    letterSpacing: '0.2em',
+                    textTransform: 'uppercase',
+                    color: MUTED,
+                    fontWeight: 500,
+                  }}>
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {products.length === 0 ? (
+                <tr>
+                  <td colSpan={4} style={{ padding: '2.5rem', textAlign: 'center', fontSize: '0.85rem', color: MUTED }}>
+                    No products yet —{' '}
+                    <Link href="/admin/products/new" style={{ color: GOLD, textDecoration: 'none' }}>
+                      create one
+                    </Link>
+                  </td>
+                </tr>
+              ) : products.map((p: any) => (
+                <tr key={p.id} style={{ borderBottom: '1px solid oklch(0.96 0 0)' }}>
+                  <td style={{ padding: '0.9rem 1.1rem' }}>
+                    <Link
+                      href={`/admin/products/${p.id}/edit`}
+                      style={{ textDecoration: 'none', fontSize: '0.85rem', color: CHARCOAL, fontWeight: 450 }}
+                    >
+                      {p.name}
+                    </Link>
+                  </td>
+                  <td style={{ padding: '0.9rem 1.1rem', fontSize: '0.82rem', color: CHARCOAL }}>
+                    ${Number(p.price).toFixed(2)}
+                  </td>
+                  <td style={{ padding: '0.9rem 1.1rem' }}>
+                    {statusBadge(p.is_active)}
+                  </td>
+                  <td style={{ padding: '0.9rem 1.1rem', fontSize: '0.78rem', color: MUTED }}>
+                    {new Date(p.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/app/admin/products/[id]/edit/page.tsx b/frontend/app/admin/products/[id]/edit/page.tsx
new file mode 100644
index 0000000..fc4b895
--- /dev/null
+++ b/frontend/app/admin/products/[id]/edit/page.tsx
@@ -0,0 +1,70 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { ChevronRight } from 'lucide-react'
+import { serverFetch } from '@/lib/api/server'
+import { getCategories } from '@/lib/api/products'
+import { ProductForm } from '@/components/admin/product-form'
+import type { Product } from '@/types/product'
+
+export const metadata: Metadata = { title: 'Edit Product' }
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+const MUTED = 'oklch(0.52 0 0)'
+
+export default async function EditProductPage({
+  params,
+}: {
+  params: Promise<{ id: string }>
+}) {
+  const { id } = await params
+
+  const [raw, categories] = await Promise.all([
+    serverFetch<unknown>(`/products/${id}`),
+    getCategories().catch(() => []),
+  ])
+
+  const product: Product = ((raw as any)?.data ?? raw) as Product
+
+  return (
+    <div style={{ padding: '2.5rem' }}>
+      {/* Breadcrumb */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', marginBottom: '2rem', fontSize: '0.72rem', color: MUTED }}>
+        <Link href="/admin/products" style={{ color: MUTED, textDecoration: 'none' }}>Products</Link>
+        <ChevronRight size={12} />
+        <span style={{ color: CHARCOAL }}>Edit</span>
+      </div>
+
+      <div style={{ marginBottom: '2rem' }}>
+        <p style={{ fontSize: '0.58rem', letterSpacing: '0.3em', textTransform: 'uppercase', color: GOLD, margin: 0 }}>
+          Edit
+        </p>
+        <h1 style={{
+          fontFamily: 'var(--font-cormorant)',
+          fontSize: '2.75rem',
+          fontWeight: 300,
+          color: CHARCOAL,
+          margin: '0.25rem 0 0',
+          lineHeight: 1,
+        }}>
+          {product.name}
+        </h1>
+      </div>
+
+      <div style={{ background: '#fff', border: '1px solid oklch(0.91 0 0)', borderRadius: '4px', padding: '2rem' }}>
+        <ProductForm
+          categories={categories}
+          productId={id}
+          defaultValues={{
+            name: product.name,
+            description: product.description,
+            category_id: product.category_id,
+            price: product.price,
+            image_url: product.image_url ?? '',
+            is_active: product.is_active,
+          }}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/app/admin/products/new/page.tsx b/frontend/app/admin/products/new/page.tsx
new file mode 100644
index 0000000..914d293
--- /dev/null
+++ b/frontend/app/admin/products/new/page.tsx
@@ -0,0 +1,46 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { ChevronRight } from 'lucide-react'
+import { getCategories } from '@/lib/api/products'
+import { ProductForm } from '@/components/admin/product-form'
+
+export const metadata: Metadata = { title: 'New Product' }
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+const MUTED = 'oklch(0.52 0 0)'
+
+export default async function NewProductPage() {
+  const categories = await getCategories().catch(() => [])
+
+  return (
+    <div style={{ padding: '2.5rem' }}>
+      {/* Breadcrumb */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', marginBottom: '2rem', fontSize: '0.72rem', color: MUTED }}>
+        <Link href="/admin/products" style={{ color: MUTED, textDecoration: 'none' }}>Products</Link>
+        <ChevronRight size={12} />
+        <span style={{ color: CHARCOAL }}>New Product</span>
+      </div>
+
+      <div style={{ marginBottom: '2rem' }}>
+        <p style={{ fontSize: '0.58rem', letterSpacing: '0.3em', textTransform: 'uppercase', color: GOLD, margin: 0 }}>
+          Create
+        </p>
+        <h1 style={{
+          fontFamily: 'var(--font-cormorant)',
+          fontSize: '2.75rem',
+          fontWeight: 300,
+          color: CHARCOAL,
+          margin: '0.25rem 0 0',
+          lineHeight: 1,
+        }}>
+          New Product
+        </h1>
+      </div>
+
+      <div style={{ background: '#fff', border: '1px solid oklch(0.91 0 0)', borderRadius: '4px', padding: '2rem' }}>
+        <ProductForm categories={categories} />
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/app/admin/products/page.tsx b/frontend/app/admin/products/page.tsx
new file mode 100644
index 0000000..6e00e10
--- /dev/null
+++ b/frontend/app/admin/products/page.tsx
@@ -0,0 +1,222 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { Plus, Pencil } from 'lucide-react'
+import { serverFetch } from '@/lib/api/server'
+import { getCategories } from '@/lib/api/products'
+import { DeleteProductButton } from '@/components/admin/delete-product-button'
+
+export const metadata: Metadata = { title: 'Products' }
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+const MUTED = 'oklch(0.52 0 0)'
+
+export default async function AdminProductsPage({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string>>
+}) {
+  const sp = await searchParams
+  const page = Math.max(1, Number(sp.page ?? 1))
+
+  const [raw, categories] = await Promise.all([
+    serverFetch<unknown>(`/products?page=${page}&limit=20&sort=newest`).catch(() => null),
+    getCategories().catch(() => []),
+  ])
+
+  const inner = (raw as any)?.data ?? raw
+  const products: any[] = (inner as any)?.products ?? []
+  const meta = (inner as any)?.meta ?? { total: 0, page, limit: 20, total_pages: 1 }
+  const categoryMap: Record<string, string> = Object.fromEntries(categories.map(c => [c.id, c.name]))
+
+  const prevPage = page > 1 ? page - 1 : null
+  const nextPage = page < (meta.total_pages ?? 1) ? page + 1 : null
+
+  return (
+    <div style={{ padding: '2.5rem' }}>
+      {/* Header */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '2rem' }}>
+        <div>
+          <p style={{ fontSize: '0.58rem', letterSpacing: '0.3em', textTransform: 'uppercase', color: GOLD, margin: 0 }}>
+            Management
+          </p>
+          <h1 style={{
+            fontFamily: 'var(--font-cormorant)',
+            fontSize: '2.75rem',
+            fontWeight: 300,
+            color: CHARCOAL,
+            margin: '0.25rem 0 0',
+            lineHeight: 1,
+          }}>
+            Products
+          </h1>
+        </div>
+
+        <Link
+          href="/admin/products/new"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.4rem',
+            height: '40px',
+            padding: '0 18px',
+            background: CHARCOAL,
+            color: '#fff',
+            textDecoration: 'none',
+            fontSize: '0.7rem',
+            fontWeight: 600,
+            letterSpacing: '0.12em',
+            textTransform: 'uppercase',
+            borderRadius: '3px',
+          }}
+        >
+          <Plus size={14} /> New Product
+        </Link>
+      </div>
+
+      {/* Count */}
+      <p style={{ fontSize: '0.75rem', color: MUTED, marginBottom: '1rem' }}>
+        {meta.total} product{meta.total !== 1 ? 's' : ''}
+      </p>
+
+      {/* Table */}
+      <div style={{ background: '#fff', border: '1px solid oklch(0.91 0 0)', borderRadius: '4px', overflow: 'hidden', marginBottom: '1.5rem' }}>
+        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+          <thead>
+            <tr style={{ borderBottom: '1px solid oklch(0.93 0 0)' }}>
+              {['Name', 'Category', 'Price', 'Status', ''].map((h, i) => (
+                <th
+                  key={i}
+                  style={{
+                    padding: '0.75rem 1.1rem',
+                    textAlign: 'left',
+                    fontSize: '0.6rem',
+                    letterSpacing: '0.2em',
+                    textTransform: 'uppercase',
+                    color: MUTED,
+                    fontWeight: 500,
+                    width: h === '' ? '80px' : undefined,
+                  }}
+                >
+                  {h}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {products.length === 0 ? (
+              <tr>
+                <td colSpan={5} style={{ padding: '3rem', textAlign: 'center', fontSize: '0.9rem', color: MUTED }}>
+                  No products found.{' '}
+                  <Link href="/admin/products/new" style={{ color: GOLD, textDecoration: 'none' }}>
+                    Create your first product.
+                  </Link>
+                </td>
+              </tr>
+            ) : products.map((p: any) => (
+              <tr
+                key={p.id}
+                style={{
+                  borderBottom: '1px solid oklch(0.96 0 0)',
+                  transition: 'background 0.1s',
+                }}
+                onMouseEnter={e => ((e.currentTarget as HTMLElement).style.background = 'oklch(0.985 0 0)')}
+                onMouseLeave={e => ((e.currentTarget as HTMLElement).style.background = 'transparent')}
+              >
+                <td style={{ padding: '0.9rem 1.1rem' }}>
+                  <span style={{ fontSize: '0.85rem', color: CHARCOAL, fontWeight: 450 }}>{p.name}</span>
+                </td>
+                <td style={{ padding: '0.9rem 1.1rem', fontSize: '0.8rem', color: MUTED }}>
+                  {categoryMap[p.category_id] ?? '—'}
+                </td>
+                <td style={{ padding: '0.9rem 1.1rem', fontSize: '0.82rem', color: CHARCOAL }}>
+                  ${Number(p.price).toFixed(2)}
+                </td>
+                <td style={{ padding: '0.9rem 1.1rem' }}>
+                  <span style={{
+                    fontSize: '0.62rem',
+                    fontWeight: 500,
+                    letterSpacing: '0.12em',
+                    textTransform: 'uppercase',
+                    color: p.is_active ? 'oklch(0.42 0.12 145)' : MUTED,
+                    background: p.is_active ? 'oklch(0.94 0.04 145)' : 'oklch(0.95 0 0)',
+                    padding: '2px 7px',
+                    borderRadius: '2px',
+                  }}>
+                    {p.is_active ? 'Active' : 'Inactive'}
+                  </span>
+                </td>
+                <td style={{ padding: '0.9rem 1.1rem' }}>
+                  <div style={{ display: 'flex', gap: '0.25rem', justifyContent: 'flex-end' }}>
+                    <Link
+                      href={`/admin/products/${p.id}/edit`}
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        background: 'none',
+                        border: 'none',
+                        cursor: 'pointer',
+                        color: MUTED,
+                        padding: '4px',
+                        textDecoration: 'none',
+                      }}
+                      aria-label={`Edit ${p.name}`}
+                    >
+                      <Pencil size={14} />
+                    </Link>
+                    <DeleteProductButton productId={p.id} productName={p.name} />
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      {(prevPage || nextPage) && (
+        <div style={{ display: 'flex', justifyContent: 'center', gap: '0.5rem' }}>
+          {prevPage ? (
+            <Link
+              href={`/admin/products?page=${prevPage}`}
+              style={{
+                height: '36px',
+                padding: '0 16px',
+                display: 'flex',
+                alignItems: 'center',
+                border: '1px solid oklch(0.88 0 0)',
+                borderRadius: '3px',
+                fontSize: '0.78rem',
+                color: CHARCOAL,
+                textDecoration: 'none',
+              }}
+            >
+              ← Previous
+            </Link>
+          ) : null}
+          <span style={{ height: '36px', padding: '0 16px', display: 'flex', alignItems: 'center', fontSize: '0.78rem', color: MUTED }}>
+            Page {page} of {meta.total_pages ?? 1}
+          </span>
+          {nextPage ? (
+            <Link
+              href={`/admin/products?page=${nextPage}`}
+              style={{
+                height: '36px',
+                padding: '0 16px',
+                display: 'flex',
+                alignItems: 'center',
+                border: '1px solid oklch(0.88 0 0)',
+                borderRadius: '3px',
+                fontSize: '0.78rem',
+                color: CHARCOAL,
+                textDecoration: 'none',
+              }}
+            >
+              Next →
+            </Link>
+          ) : null}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/app/api/admin/categories/route.ts b/frontend/app/api/admin/categories/route.ts
new file mode 100644
index 0000000..3c4a147
--- /dev/null
+++ b/frontend/app/api/admin/categories/route.ts
@@ -0,0 +1,22 @@
+import { cookies } from 'next/headers'
+import { NextRequest } from 'next/server'
+
+const BASE = process.env.API_URL!
+
+async function token() {
+  return (await cookies()).get('access_token')?.value
+}
+
+export async function POST(req: NextRequest) {
+  const t = await token()
+  if (!t) return Response.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const body = await req.json()
+  const res = await fetch(`${BASE}/categories`, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${t}`, 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  const data = await res.json()
+  return Response.json(data, { status: res.status })
+}
diff --git a/frontend/app/api/admin/inventory/[productId]/route.ts b/frontend/app/api/admin/inventory/[productId]/route.ts
new file mode 100644
index 0000000..b3b8b33
--- /dev/null
+++ b/frontend/app/api/admin/inventory/[productId]/route.ts
@@ -0,0 +1,41 @@
+import { cookies } from 'next/headers'
+import { NextRequest } from 'next/server'
+
+const BASE = process.env.API_URL!
+
+async function token() {
+  return (await cookies()).get('access_token')?.value
+}
+
+export async function GET(
+  _: NextRequest,
+  { params }: { params: Promise<{ productId: string }> },
+) {
+  const t = await token()
+  if (!t) return Response.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const { productId } = await params
+  const res = await fetch(`${BASE}/inventory/${productId}`, {
+    headers: { Authorization: `Bearer ${t}` },
+  })
+  const data = await res.json()
+  return Response.json(data, { status: res.status })
+}
+
+export async function PUT(
+  req: NextRequest,
+  { params }: { params: Promise<{ productId: string }> },
+) {
+  const t = await token()
+  if (!t) return Response.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const { productId } = await params
+  const body = await req.json()
+  const res = await fetch(`${BASE}/inventory/${productId}`, {
+    method: 'PUT',
+    headers: { Authorization: `Bearer ${t}`, 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  const data = await res.json()
+  return Response.json(data, { status: res.status })
+}
diff --git a/frontend/app/api/admin/products/[id]/route.ts b/frontend/app/api/admin/products/[id]/route.ts
new file mode 100644
index 0000000..5d4d4f7
--- /dev/null
+++ b/frontend/app/api/admin/products/[id]/route.ts
@@ -0,0 +1,42 @@
+import { cookies } from 'next/headers'
+import { NextRequest } from 'next/server'
+
+const BASE = process.env.API_URL!
+
+async function token() {
+  return (await cookies()).get('access_token')?.value
+}
+
+export async function PUT(
+  req: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const t = await token()
+  if (!t) return Response.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const { id } = await params
+  const body = await req.json()
+  const res = await fetch(`${BASE}/products/${id}`, {
+    method: 'PUT',
+    headers: { Authorization: `Bearer ${t}`, 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  const data = await res.json()
+  return Response.json(data, { status: res.status })
+}
+
+export async function DELETE(
+  _: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const t = await token()
+  if (!t) return Response.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const { id } = await params
+  const res = await fetch(`${BASE}/products/${id}`, {
+    method: 'DELETE',
+    headers: { Authorization: `Bearer ${t}` },
+  })
+  const data = await res.json().catch(() => ({}))
+  return Response.json(data, { status: res.status })
+}
diff --git a/frontend/app/api/admin/products/route.ts b/frontend/app/api/admin/products/route.ts
new file mode 100644
index 0000000..0963581
--- /dev/null
+++ b/frontend/app/api/admin/products/route.ts
@@ -0,0 +1,22 @@
+import { cookies } from 'next/headers'
+import { NextRequest } from 'next/server'
+
+const BASE = process.env.API_URL!
+
+async function token() {
+  return (await cookies()).get('access_token')?.value
+}
+
+export async function POST(req: NextRequest) {
+  const t = await token()
+  if (!t) return Response.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const body = await req.json()
+  const res = await fetch(`${BASE}/products`, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${t}`, 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  const data = await res.json()
+  return Response.json(data, { status: res.status })
+}
diff --git a/frontend/components/admin/admin-sidebar.tsx b/frontend/components/admin/admin-sidebar.tsx
new file mode 100644
index 0000000..fbf8fc4
--- /dev/null
+++ b/frontend/components/admin/admin-sidebar.tsx
@@ -0,0 +1,104 @@
+'use client'
+import { usePathname } from 'next/navigation'
+import Link from 'next/link'
+import { LayoutDashboard, Package, Tag, Boxes } from 'lucide-react'
+
+const GOLD = 'oklch(0.75 0.12 85)'
+
+const navItems = [
+  { href: '/admin', label: 'Dashboard', icon: LayoutDashboard, exact: true },
+  { href: '/admin/products', label: 'Products', icon: Package, exact: false },
+  { href: '/admin/categories', label: 'Categories', icon: Tag, exact: false },
+  { href: '/admin/inventory', label: 'Inventory', icon: Boxes, exact: false },
+] as const
+
+export function AdminSidebar() {
+  const pathname = usePathname()
+
+  return (
+    <aside
+      style={{
+        width: '220px',
+        minHeight: '100vh',
+        background: 'oklch(0.14 0.01 50)',
+        display: 'flex',
+        flexDirection: 'column',
+        flexShrink: 0,
+        position: 'sticky',
+        top: 0,
+        alignSelf: 'flex-start',
+      }}
+    >
+      {/* Logo */}
+      <div style={{ padding: '1.75rem 1.5rem 1.25rem', borderBottom: '1px solid oklch(0.22 0.01 50)' }}>
+        <Link href="/admin" style={{ textDecoration: 'none' }}>
+          <p style={{
+            fontFamily: 'var(--font-cormorant)',
+            fontSize: '1.65rem',
+            fontWeight: 300,
+            color: GOLD,
+            letterSpacing: '0.15em',
+            lineHeight: 1,
+            margin: 0,
+          }}>
+            AURON
+          </p>
+          <p style={{
+            fontSize: '0.55rem',
+            letterSpacing: '0.35em',
+            textTransform: 'uppercase',
+            color: 'oklch(0.48 0.04 80)',
+            marginTop: '3px',
+          }}>
+            Admin
+          </p>
+        </Link>
+      </div>
+
+      {/* Nav */}
+      <nav style={{ padding: '0.5rem 0', flex: 1 }}>
+        {navItems.map(({ href, label, icon: Icon, exact }) => {
+          const isActive = exact ? pathname === href : pathname.startsWith(href)
+          return (
+            <Link
+              key={href}
+              href={href}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '0.6rem',
+                padding: '0.7rem 1.5rem',
+                textDecoration: 'none',
+                fontSize: '0.73rem',
+                fontWeight: isActive ? 500 : 400,
+                letterSpacing: '0.05em',
+                color: isActive ? GOLD : 'oklch(0.6 0 0)',
+                background: isActive ? 'oklch(0.19 0.01 50)' : 'transparent',
+                borderLeft: `2px solid ${isActive ? GOLD : 'transparent'}`,
+                transition: 'color 0.15s, background 0.15s, border-color 0.15s',
+              }}
+            >
+              <Icon size={15} strokeWidth={1.5} />
+              {label}
+            </Link>
+          )
+        })}
+      </nav>
+
+      {/* Back to shop */}
+      <div style={{ padding: '1.25rem 1.5rem', borderTop: '1px solid oklch(0.22 0.01 50)' }}>
+        <Link
+          href="/"
+          style={{
+            fontSize: '0.68rem',
+            color: 'oklch(0.45 0 0)',
+            textDecoration: 'none',
+            letterSpacing: '0.08em',
+          }}
+        >
+          ← Back to Shop
+        </Link>
+      </div>
+    </aside>
+  )
+}
diff --git a/frontend/components/admin/delete-product-button.tsx b/frontend/components/admin/delete-product-button.tsx
new file mode 100644
index 0000000..fa159f4
--- /dev/null
+++ b/frontend/components/admin/delete-product-button.tsx
@@ -0,0 +1,51 @@
+'use client'
+import { useRouter } from 'next/navigation'
+import { Trash2 } from 'lucide-react'
+import { toast } from 'sonner'
+import { useDeleteProduct } from '@/lib/hooks/use-admin'
+
+const MUTED = 'oklch(0.52 0 0)'
+
+interface Props {
+  productId: string
+  productName: string
+}
+
+export function DeleteProductButton({ productId, productName }: Props) {
+  const router = useRouter()
+  const deleteMutation = useDeleteProduct()
+
+  const handleDelete = async () => {
+    if (!confirm(`Delete "${productName}"? This action cannot be undone.`)) return
+    try {
+      await deleteMutation.mutateAsync(productId)
+      toast.success('Product deleted')
+      router.refresh()
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : 'Failed to delete')
+    }
+  }
+
+  return (
+    <button
+      onClick={handleDelete}
+      disabled={deleteMutation.isPending}
+      style={{
+        background: 'none',
+        border: 'none',
+        cursor: deleteMutation.isPending ? 'not-allowed' : 'pointer',
+        color: MUTED,
+        padding: '4px',
+        display: 'flex',
+        alignItems: 'center',
+        opacity: deleteMutation.isPending ? 0.5 : 1,
+        transition: 'color 0.15s',
+      }}
+      onMouseEnter={e => ((e.currentTarget as HTMLElement).style.color = 'oklch(0.5 0.18 25)')}
+      onMouseLeave={e => ((e.currentTarget as HTMLElement).style.color = MUTED)}
+      aria-label={`Delete ${productName}`}
+    >
+      <Trash2 size={14} />
+    </button>
+  )
+}
diff --git a/frontend/components/admin/product-form.tsx b/frontend/components/admin/product-form.tsx
new file mode 100644
index 0000000..4c3e61b
--- /dev/null
+++ b/frontend/components/admin/product-form.tsx
@@ -0,0 +1,221 @@
+'use client'
+import { useRouter } from 'next/navigation'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { toast } from 'sonner'
+import { productSchema, type ProductFormValues } from '@/lib/validations/product'
+import { useCreateProduct, useUpdateProduct } from '@/lib/hooks/use-admin'
+import type { Category } from '@/types/product'
+
+const GOLD = 'oklch(0.75 0.12 85)'
+const CHARCOAL = 'oklch(0.14 0.01 50)'
+const MUTED = 'oklch(0.52 0 0)'
+
+const inputStyle: React.CSSProperties = {
+  width: '100%',
+  height: '42px',
+  padding: '0 12px',
+  border: '1px solid oklch(0.88 0 0)',
+  borderRadius: '3px',
+  fontSize: '0.82rem',
+  color: CHARCOAL,
+  background: '#fff',
+  outline: 'none',
+  boxSizing: 'border-box',
+  transition: 'border-color 0.15s',
+}
+const labelStyle: React.CSSProperties = {
+  display: 'block',
+  fontSize: '0.63rem',
+  fontWeight: 500,
+  letterSpacing: '0.15em',
+  textTransform: 'uppercase',
+  color: MUTED,
+  marginBottom: '0.35rem',
+}
+const errStyle: React.CSSProperties = {
+  fontSize: '0.7rem',
+  color: 'oklch(0.55 0.18 25)',
+  marginTop: '3px',
+}
+
+interface Props {
+  categories: Category[]
+  defaultValues?: Partial<ProductFormValues>
+  productId?: string
+}
+
+export function ProductForm({ categories, defaultValues, productId }: Props) {
+  const router = useRouter()
+  const create = useCreateProduct()
+  const update = useUpdateProduct()
+  const isEditing = !!productId
+
+  const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm<ProductFormValues>({
+    resolver: zodResolver(productSchema),
+    defaultValues: {
+      name: '',
+      description: '',
+      category_id: '',
+      price: 0,
+      image_url: '',
+      is_active: true,
+      ...defaultValues,
+    },
+  })
+
+  const onSubmit = async (values: ProductFormValues) => {
+    const payload = {
+      ...values,
+      image_url: values.image_url?.trim() || undefined,
+    }
+    try {
+      if (isEditing) {
+        await update.mutateAsync({ id: productId, ...payload })
+        toast.success('Product updated')
+      } else {
+        await create.mutateAsync(payload)
+        toast.success('Product created')
+      }
+      router.push('/admin/products')
+      router.refresh()
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : 'Failed to save product')
+    }
+  }
+
+  const focusGold = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) =>
+    (e.currentTarget.style.borderColor = GOLD)
+  const blurReset = (hasErr: boolean) => (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) =>
+    (e.currentTarget.style.borderColor = hasErr ? 'oklch(0.6 0.18 25)' : 'oklch(0.88 0 0)')
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem', maxWidth: '740px' }}>
+
+      {/* Name */}
+      <div>
+        <label style={labelStyle}>Product Name *</label>
+        <input
+          {...register('name')}
+          style={inputStyle}
+          onFocus={focusGold}
+          onBlur={blurReset(!!errors.name)}
+        />
+        {errors.name && <p style={errStyle}>{errors.name.message}</p>}
+      </div>
+
+      {/* Category + Price */}
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+        <div>
+          <label style={labelStyle}>Category *</label>
+          <select
+            {...register('category_id')}
+            style={{ ...inputStyle, cursor: 'pointer', appearance: 'auto' }}
+            onFocus={focusGold}
+            onBlur={blurReset(!!errors.category_id)}
+          >
+            <option value="">Select category…</option>
+            {categories.map(c => (
+              <option key={c.id} value={c.id}>{c.name}</option>
+            ))}
+          </select>
+          {errors.category_id && <p style={errStyle}>{errors.category_id.message}</p>}
+        </div>
+
+        <div>
+          <label style={labelStyle}>Price (USD) *</label>
+          <input
+            {...register('price', { valueAsNumber: true })}
+            type="number"
+            step="0.01"
+            min="0"
+            style={inputStyle}
+            onFocus={focusGold}
+            onBlur={blurReset(!!errors.price)}
+          />
+          {errors.price && <p style={errStyle}>{errors.price.message}</p>}
+        </div>
+      </div>
+
+      {/* Description */}
+      <div>
+        <label style={labelStyle}>Description *</label>
+        <textarea
+          {...register('description')}
+          rows={4}
+          style={{ ...inputStyle, height: 'auto', padding: '10px 12px', resize: 'vertical', lineHeight: 1.65 }}
+          onFocus={focusGold}
+          onBlur={blurReset(!!errors.description)}
+        />
+        {errors.description && <p style={errStyle}>{errors.description.message}</p>}
+      </div>
+
+      {/* Image URL */}
+      <div>
+        <label style={labelStyle}>Image URL</label>
+        <input
+          {...register('image_url')}
+          type="text"
+          placeholder="https://…"
+          style={inputStyle}
+          onFocus={focusGold}
+          onBlur={blurReset(!!errors.image_url)}
+        />
+        {errors.image_url && <p style={errStyle}>{errors.image_url.message}</p>}
+      </div>
+
+      {/* Active toggle */}
+      <label style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', cursor: 'pointer' }}>
+        <input
+          type="checkbox"
+          {...register('is_active')}
+          style={{ accentColor: GOLD, width: '15px', height: '15px' }}
+        />
+        <span style={{ fontSize: '0.8rem', color: CHARCOAL }}>Active — visible in the shop</span>
+      </label>
+
+      {/* Actions */}
+      <div style={{ display: 'flex', gap: '0.75rem', paddingTop: '0.5rem' }}>
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          style={{
+            height: '42px',
+            padding: '0 28px',
+            background: isSubmitting ? 'oklch(0.28 0.01 50)' : CHARCOAL,
+            color: '#fff',
+            fontSize: '0.7rem',
+            fontWeight: 600,
+            letterSpacing: '0.15em',
+            textTransform: 'uppercase',
+            border: 'none',
+            borderRadius: '3px',
+            cursor: isSubmitting ? 'not-allowed' : 'pointer',
+            transition: 'background 0.2s',
+          }}
+        >
+          {isSubmitting ? 'Saving…' : (isEditing ? 'Update Product' : 'Create Product')}
+        </button>
+
+        <button
+          type="button"
+          onClick={() => router.push('/admin/products')}
+          style={{
+            height: '42px',
+            padding: '0 20px',
+            background: 'none',
+            color: MUTED,
+            fontSize: '0.7rem',
+            letterSpacing: '0.15em',
+            textTransform: 'uppercase',
+            border: '1px solid oklch(0.88 0 0)',
+            borderRadius: '3px',
+            cursor: 'pointer',
+          }}
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  )
+}
diff --git a/frontend/lib/hooks/use-admin.ts b/frontend/lib/hooks/use-admin.ts
new file mode 100644
index 0000000..66dc2b6
--- /dev/null
+++ b/frontend/lib/hooks/use-admin.ts
@@ -0,0 +1,132 @@
+'use client'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { queryKeys } from '@/lib/query-keys'
+import type { Product, Category } from '@/types/product'
+import type { ProductFormValues } from '@/lib/validations/product'
+
+export interface InventoryData {
+  product_id: string
+  total_quantity: number
+  available_quantity: number
+  reserved_quantity: number
+}
+
+// ── Products ───────────────────────────────────────────────────────────────────
+
+export function useCreateProduct() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async (body: ProductFormValues) => {
+      const res = await fetch('/api/admin/products', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+      const json = await res.json()
+      if (!res.ok) throw new Error(json?.error ?? json?.message ?? 'Failed to create product')
+      return (json?.data ?? json) as Product
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: queryKeys.products() }),
+  })
+}
+
+export function useUpdateProduct() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async ({ id, ...body }: ProductFormValues & { id: string }) => {
+      const res = await fetch(`/api/admin/products/${id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+      const json = await res.json()
+      if (!res.ok) throw new Error(json?.error ?? json?.message ?? 'Failed to update product')
+      return (json?.data ?? json) as Product
+    },
+    onSuccess: (_, { id }) => {
+      qc.invalidateQueries({ queryKey: queryKeys.products() })
+      qc.invalidateQueries({ queryKey: queryKeys.product(id) })
+    },
+  })
+}
+
+export function useDeleteProduct() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async (id: string) => {
+      const res = await fetch(`/api/admin/products/${id}`, { method: 'DELETE' })
+      if (!res.ok) throw new Error('Failed to delete product')
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: queryKeys.products() }),
+  })
+}
+
+// ── Categories ─────────────────────────────────────────────────────────────────
+
+export function useCategories() {
+  return useQuery<Category[]>({
+    queryKey: queryKeys.categories,
+    queryFn: async () => {
+      const base = process.env.NEXT_PUBLIC_API_URL ?? ''
+      const res = await fetch(`${base}/categories`)
+      if (!res.ok) return []
+      const json = await res.json()
+      if (Array.isArray(json)) return json
+      if (Array.isArray(json?.data?.categories)) return json.data.categories
+      if (Array.isArray(json?.categories)) return json.categories
+      return []
+    },
+    staleTime: 60_000,
+  })
+}
+
+export function useCreateCategory() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async (body: { name: string; description?: string }) => {
+      const res = await fetch('/api/admin/categories', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+      const json = await res.json()
+      if (!res.ok) throw new Error(json?.error ?? json?.message ?? 'Failed to create category')
+      return (json?.data ?? json) as Category
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: queryKeys.categories }),
+  })
+}
+
+// ── Inventory ──────────────────────────────────────────────────────────────────
+
+export function useInventory(productId: string) {
+  return useQuery<InventoryData | null>({
+    queryKey: queryKeys.inventory(productId),
+    queryFn: async () => {
+      const res = await fetch(`/api/admin/inventory/${productId}`)
+      if (!res.ok) return null
+      const json = await res.json()
+      return (json?.data ?? json) as InventoryData | null
+    },
+    staleTime: 30_000,
+  })
+}
+
+export function useUpdateInventory() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async ({ productId, quantity }: { productId: string; quantity: number }) => {
+      const res = await fetch(`/api/admin/inventory/${productId}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ quantity }),
+      })
+      const json = await res.json()
+      if (!res.ok) throw new Error(json?.error ?? json?.message ?? 'Failed to update inventory')
+      return (json?.data ?? json) as InventoryData
+    },
+    onSuccess: (_, { productId }) => {
+      qc.invalidateQueries({ queryKey: queryKeys.inventory(productId) })
+    },
+  })
+}
diff --git a/frontend/lib/validations/product.ts b/frontend/lib/validations/product.ts
index 38a6c29..4422819 100644
--- a/frontend/lib/validations/product.ts
+++ b/frontend/lib/validations/product.ts
@@ -4,8 +4,9 @@ export const productSchema = z.object({
   name: z.string().min(1, 'Name is required').max(500),
   description: z.string().min(1, 'Description is required'),
   category_id: z.string().min(1, 'Category is required'),
-  price: z.coerce.number().positive('Price must be greater than 0'),
-  is_active: z.boolean().optional().default(true),
+  price: z.number().positive('Price must be greater than 0'),
+  image_url: z.string().optional(),
+  is_active: z.boolean(),
 })
 
 export type ProductFormValues = z.infer<typeof productSchema>