Scaffold the client dashboard layout

web/package.json

@@ -13,10 +13,10 @@
   },
   "dependencies": {
     "@fontsource-variable/inter": "^5.3.0",
+    "@phosphor-icons/react": "^2.1.10",
     "@tanstack/react-query": "^5.104.0",
     "@tanstack/react-router": "^1.170.40",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.49.0",
     "openapi-fetch": "^0.17.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",

web/src/api/services/services.ts

@@ -0,0 +1,16 @@
+export type ServiceStatus = "active" | "pending" | "suspended";
+
+export type Service = {
+  id: string;
+  name: string;
+  detail: string;
+  status: ServiceStatus;
+};
+
+export const TEMP_SERVICES: Service[] = [
+  { id: "web-01", name: "web-01", detail: "VPS 2G · 2 vCPU · 2 GB", status: "active" },
+  { id: "api-01", name: "api-01", detail: "VPS 4G · 2 vCPU · 4 GB", status: "active" },
+  { id: "postgres", name: "postgres", detail: "VPS 8G · 4 vCPU · 8 GB", status: "active" },
+  { id: "acme-hosting", name: "acme.com", detail: "Web Hosting · Starter", status: "pending" },
+  { id: "staging", name: "staging", detail: "VPS 2G · 2 vCPU · 2 GB", status: "suspended" },
+];

web/src/components/toast/toast-provider.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useRef, useState, type ReactNode } from "react";
-import { X } from "lucide-react";
+import { X } from "@phosphor-icons/react/X";
 
 import { ToastContext, type ToastInput, type ToastStatus } from "@/components/toast/use-toast";
 import { cn } from "@/lib/utils";

web/src/components/ui/checkbox.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { Check } from "lucide-react";
+import { Check } from "@phosphor-icons/react/Check";
 
 type CheckboxProps = {
   label: ReactNode;
@@ -19,7 +19,7 @@ export function Checkbox({ label, checked, error, onCheckedChange }: CheckboxPro
           onChange={(e) => onCheckedChange(e.target.checked)}
           className="peer size-4 cursor-pointer appearance-none border border-input bg-input/30 transition-colors outline-none checked:border-primary checked:bg-primary focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-0"
         />
-        <Check className="pointer-events-none absolute hidden size-3 text-primary-foreground peer-checked:block" strokeWidth={3} />
+        <Check className="pointer-events-none absolute hidden size-3 text-primary-foreground peer-checked:block" weight="bold" />
       </span>
       <span>{label}</span>
     </label>

web/src/components/ui/input.tsx

@@ -1,5 +1,6 @@
 import { useId, useState, type InputHTMLAttributes } from "react";
-import { Eye, EyeOff } from "lucide-react";
+import { Eye } from "@phosphor-icons/react/Eye";
+import { EyeSlash } from "@phosphor-icons/react/EyeSlash";
 
 import { cn } from "@/lib/utils";
 
@@ -35,7 +36,7 @@ export function Input({ error, className, id: idProp, type, ...props }: InputPro
             onClick={() => setRevealed((prev) => !prev)}
             className="absolute top-1/2 right-1 flex size-8 -translate-y-1/2 items-center justify-center text-muted-foreground hover:text-foreground"
           >
-            {revealed ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+            {revealed ? <EyeSlash className="size-4" /> : <Eye className="size-4" />}
           </button>
         )}
       </div>