Phase 2

Base app architecture:

    Route groups for customer, staff and owner.
* Reusable design system with around 20 UI components.
* Complete Prisma schema.
* Authentication with email/password and Google.
* Role and permission model.
* Protected routes.
* Clean separation between features, services, components and shared utilities.

src/components/ui/checkbox.tsx

@@ -0,0 +1,36 @@
+import { forwardRef, useId } from "react";
+import type { InputHTMLAttributes, ReactNode } from "react";
+import { cn } from "@/lib/utils/cn";
+
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+  label: ReactNode;
+  description?: ReactNode;
+}
+
+/**
+ * Native checkbox styled via `accent-*` rather than a hand-drawn box — full
+ * built-in keyboard/screen-reader support, no extra ARIA required.
+ */
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ className, label, description, id, ...props }, ref) => {
+    const generatedId = useId();
+    const checkboxId = id ?? generatedId;
+
+    return (
+      <label htmlFor={checkboxId} className="flex cursor-pointer items-start gap-3">
+        <input
+          ref={ref}
+          type="checkbox"
+          id={checkboxId}
+          className={cn("mt-1 h-4 w-4 shrink-0 rounded border-line accent-accent", className)}
+          {...props}
+        />
+        <span>
+          <span className="block text-sm font-bold">{label}</span>
+          {description && <span className="block text-xs text-muted">{description}</span>}
+        </span>
+      </label>
+    );
+  },
+);
+Checkbox.displayName = "Checkbox";