@contractspec/example.saas-boilerplate 1.57.0 → 1.59.0

package/dist/browser/ui/SaasDashboard.js

@@ -0,0 +1,988 @@
+// src/ui/hooks/useProjectList.ts
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+function useProjectList(options = {}) {
+  const { handlers, projectId } = useTemplateRuntime();
+  const { saas } = handlers;
+  const [data, setData] = useState(null);
+  const [subscription, setSubscription] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [page, setPage] = useState(1);
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const [projectsResult, subscriptionResult] = await Promise.all([
+        saas.listProjects({
+          projectId,
+          status: options.status === "all" ? undefined : options.status,
+          search: options.search,
+          limit: options.limit ?? 20,
+          offset: (page - 1) * (options.limit ?? 20)
+        }),
+        saas.getSubscription({ projectId })
+      ]);
+      setData({
+        items: projectsResult.items,
+        total: projectsResult.total
+      });
+      setSubscription(subscriptionResult);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Unknown error"));
+    } finally {
+      setLoading(false);
+    }
+  }, [saas, projectId, options.status, options.search, options.limit, page]);
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+  const stats = useMemo(() => {
+    if (!data)
+      return null;
+    const items = data.items;
+    return {
+      total: data.total,
+      activeCount: items.filter((p) => p.status === "ACTIVE").length,
+      draftCount: items.filter((p) => p.status === "DRAFT").length,
+      projectLimit: 10,
+      usagePercent: Math.min(data.total / 10 * 100, 100)
+    };
+  }, [data]);
+  return {
+    data,
+    subscription,
+    loading,
+    error,
+    stats,
+    page,
+    refetch: fetchData,
+    nextPage: () => setPage((p) => p + 1),
+    prevPage: () => page > 1 && setPage((p) => p - 1)
+  };
+}
+
+// src/ui/hooks/useProjectMutations.ts
+import { useCallback as useCallback2, useState as useState2 } from "react";
+import { useTemplateRuntime as useTemplateRuntime2 } from "@contractspec/lib.example-shared-ui";
+function useProjectMutations(options = {}) {
+  const { handlers, projectId } = useTemplateRuntime2();
+  const { saas } = handlers;
+  const [createState, setCreateState] = useState2({
+    loading: false,
+    error: null,
+    data: null
+  });
+  const [updateState, setUpdateState] = useState2({
+    loading: false,
+    error: null,
+    data: null
+  });
+  const [deleteState, setDeleteState] = useState2({
+    loading: false,
+    error: null,
+    data: null
+  });
+  const createProject = useCallback2(async (input) => {
+    setCreateState({ loading: true, error: null, data: null });
+    try {
+      const result = await saas.createProject(input, {
+        projectId,
+        organizationId: "demo-org"
+      });
+      setCreateState({ loading: false, error: null, data: result });
+      options.onSuccess?.();
+      return result;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error("Failed to create project");
+      setCreateState({ loading: false, error, data: null });
+      options.onError?.(error);
+      return null;
+    }
+  }, [saas, projectId, options]);
+  const updateProject = useCallback2(async (input) => {
+    setUpdateState({ loading: true, error: null, data: null });
+    try {
+      const result = await saas.updateProject(input);
+      setUpdateState({ loading: false, error: null, data: result });
+      options.onSuccess?.();
+      return result;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error("Failed to update project");
+      setUpdateState({ loading: false, error, data: null });
+      options.onError?.(error);
+      return null;
+    }
+  }, [saas, options]);
+  const deleteProject = useCallback2(async (id) => {
+    setDeleteState({ loading: true, error: null, data: null });
+    try {
+      await saas.deleteProject(id);
+      setDeleteState({
+        loading: false,
+        error: null,
+        data: { success: true }
+      });
+      options.onSuccess?.();
+      return true;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error("Failed to delete project");
+      setDeleteState({ loading: false, error, data: null });
+      options.onError?.(error);
+      return false;
+    }
+  }, [saas, options]);
+  const archiveProject = useCallback2(async (id) => {
+    return updateProject({ id, status: "ARCHIVED" });
+  }, [updateProject]);
+  const activateProject = useCallback2(async (id) => {
+    return updateProject({ id, status: "ACTIVE" });
+  }, [updateProject]);
+  return {
+    createProject,
+    updateProject,
+    deleteProject,
+    archiveProject,
+    activateProject,
+    createState,
+    updateState,
+    deleteState,
+    isLoading: createState.loading || updateState.loading || deleteState.loading
+  };
+}
+
+// src/ui/modals/CreateProjectModal.tsx
+import { useState as useState3 } from "react";
+import { Button, Input } from "@contractspec/lib.design-system";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+var TIERS = [
+  { value: "FREE", label: "Free" },
+  { value: "PRO", label: "Pro" },
+  { value: "ENTERPRISE", label: "Enterprise" }
+];
+function CreateProjectModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  isLoading = false
+}) {
+  const [name, setName] = useState3("");
+  const [description, setDescription] = useState3("");
+  const [tier, setTier] = useState3("FREE");
+  const [error, setError] = useState3(null);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    if (!name.trim()) {
+      setError("Project name is required");
+      return;
+    }
+    try {
+      await onSubmit({
+        name: name.trim(),
+        description: description.trim() || undefined,
+        tier
+      });
+      setName("");
+      setDescription("");
+      setTier("FREE");
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create project");
+    }
+  };
+  if (!isOpen)
+    return null;
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "fixed inset-0 z-50 flex items-center justify-center",
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "bg-background/80 absolute inset-0 backdrop-blur-sm",
+        onClick: onClose,
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ")
+            onClose();
+        },
+        "aria-label": "Close modal"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "bg-card border-border relative z-10 w-full max-w-md rounded-xl border p-6 shadow-xl",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "mb-4 text-xl font-semibold",
+            children: "Create New Project"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("form", {
+            onSubmit: handleSubmit,
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("label", {
+                    htmlFor: "project-name",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Project Name *"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV(Input, {
+                    id: "project-name",
+                    value: name,
+                    onChange: (e) => setName(e.target.value),
+                    placeholder: "e.g., My Awesome Project",
+                    disabled: isLoading
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("label", {
+                    htmlFor: "project-description",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Description"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("textarea", {
+                    id: "project-description",
+                    value: description,
+                    onChange: (e) => setDescription(e.target.value),
+                    placeholder: "Describe what this project is about...",
+                    rows: 3,
+                    disabled: isLoading,
+                    className: "border-input bg-background focus:ring-ring w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("label", {
+                    htmlFor: "project-tier",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Tier"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("select", {
+                    id: "project-tier",
+                    value: tier,
+                    onChange: (e) => setTier(e.target.value),
+                    disabled: isLoading,
+                    className: "border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50",
+                    children: TIERS.map((t) => /* @__PURE__ */ jsxDEV("option", {
+                      value: t.value,
+                      children: t.label
+                    }, t.value, false, undefined, this))
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              error && /* @__PURE__ */ jsxDEV("div", {
+                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "flex justify-end gap-3 pt-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV(Button, {
+                    type: "button",
+                    variant: "ghost",
+                    onPress: onClose,
+                    disabled: isLoading,
+                    children: "Cancel"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV(Button, {
+                    type: "submit",
+                    disabled: isLoading,
+                    children: isLoading ? "Creating..." : "Create Project"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/ui/modals/ProjectActionsModal.tsx
+import { useEffect as useEffect2, useState as useState4 } from "react";
+import { Button as Button2, Input as Input2 } from "@contractspec/lib.design-system";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+function ProjectActionsModal({
+  isOpen,
+  project,
+  onClose,
+  onUpdate,
+  onArchive,
+  onActivate,
+  onDelete,
+  isLoading = false
+}) {
+  const [mode, setMode] = useState4("menu");
+  const [name, setName] = useState4("");
+  const [description, setDescription] = useState4("");
+  const [error, setError] = useState4(null);
+  const resetForm = () => {
+    setMode("menu");
+    setError(null);
+    if (project) {
+      setName(project.name);
+      setDescription(project.description ?? "");
+    }
+  };
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+  useEffect2(() => {
+    if (project) {
+      setName(project.name);
+      setDescription(project.description ?? "");
+    }
+  }, [project]);
+  const handleEdit = async () => {
+    if (!project)
+      return;
+    setError(null);
+    if (!name.trim()) {
+      setError("Project name is required");
+      return;
+    }
+    try {
+      await onUpdate({
+        id: project.id,
+        name: name.trim(),
+        description: description.trim() || undefined
+      });
+      handleClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to update project");
+    }
+  };
+  const handleArchive = async () => {
+    if (!project)
+      return;
+    setError(null);
+    try {
+      await onArchive(project.id);
+      handleClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to archive project");
+    }
+  };
+  const handleActivate = async () => {
+    if (!project)
+      return;
+    setError(null);
+    try {
+      await onActivate(project.id);
+      handleClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to activate project");
+    }
+  };
+  const handleDelete = async () => {
+    if (!project)
+      return;
+    setError(null);
+    try {
+      await onDelete(project.id);
+      handleClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete project");
+    }
+  };
+  if (!isOpen || !project)
+    return null;
+  return /* @__PURE__ */ jsxDEV2("div", {
+    className: "fixed inset-0 z-50 flex items-center justify-center",
+    children: [
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "bg-background/80 absolute inset-0 backdrop-blur-sm",
+        onClick: handleClose,
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ")
+            handleClose();
+        },
+        "aria-label": "Close modal"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "bg-card border-border relative z-10 w-full max-w-md rounded-xl border p-6 shadow-xl",
+        children: [
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "border-border mb-4 border-b pb-4",
+            children: [
+              /* @__PURE__ */ jsxDEV2("h2", {
+                className: "text-xl font-semibold",
+                children: project.name
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("p", {
+                className: "text-muted-foreground text-sm",
+                children: [
+                  project.tier,
+                  " · ",
+                  project.status
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          mode === "menu" && /* @__PURE__ */ jsxDEV2("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV2(Button2, {
+                className: "w-full justify-start",
+                variant: "ghost",
+                onPress: () => setMode("edit"),
+                children: [
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: "mr-2",
+                    children: "✏️"
+                  }, undefined, false, undefined, this),
+                  " Edit Project"
+                ]
+              }, undefined, true, undefined, this),
+              project.status === "ACTIVE" || project.status === "DRAFT" ? /* @__PURE__ */ jsxDEV2(Button2, {
+                className: "w-full justify-start",
+                variant: "ghost",
+                onPress: () => setMode("archive"),
+                children: [
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: "mr-2",
+                    children: "\uD83D\uDCE6"
+                  }, undefined, false, undefined, this),
+                  " Archive Project"
+                ]
+              }, undefined, true, undefined, this) : project.status === "ARCHIVED" ? /* @__PURE__ */ jsxDEV2(Button2, {
+                className: "w-full justify-start",
+                variant: "ghost",
+                onPress: handleActivate,
+                disabled: isLoading,
+                children: [
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: "mr-2",
+                    children: "\uD83D\uDD04"
+                  }, undefined, false, undefined, this),
+                  " Restore Project"
+                ]
+              }, undefined, true, undefined, this) : null,
+              /* @__PURE__ */ jsxDEV2(Button2, {
+                className: "w-full justify-start text-red-500 hover:text-red-600",
+                variant: "ghost",
+                onPress: () => setMode("delete"),
+                children: [
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: "mr-2",
+                    children: "\uD83D\uDDD1️"
+                  }, undefined, false, undefined, this),
+                  " Delete Project"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "border-border border-t pt-3",
+                children: /* @__PURE__ */ jsxDEV2(Button2, {
+                  className: "w-full",
+                  variant: "outline",
+                  onPress: handleClose,
+                  children: "Close"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          mode === "edit" && /* @__PURE__ */ jsxDEV2("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV2("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV2("label", {
+                    htmlFor: "edit-name",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Project Name *"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2(Input2, {
+                    id: "edit-name",
+                    value: name,
+                    onChange: (e) => setName(e.target.value),
+                    disabled: isLoading
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV2("label", {
+                    htmlFor: "edit-description",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Description"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("textarea", {
+                    id: "edit-description",
+                    value: description,
+                    onChange: (e) => setDescription(e.target.value),
+                    rows: 3,
+                    disabled: isLoading,
+                    className: "border-input bg-background focus:ring-ring w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              error && /* @__PURE__ */ jsxDEV2("div", {
+                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "flex justify-end gap-3 pt-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV2(Button2, {
+                    variant: "ghost",
+                    onPress: () => setMode("menu"),
+                    disabled: isLoading,
+                    children: "Back"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2(Button2, {
+                    onPress: handleEdit,
+                    disabled: isLoading,
+                    children: isLoading ? "Saving..." : "Save Changes"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          mode === "archive" && /* @__PURE__ */ jsxDEV2("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV2("p", {
+                className: "text-muted-foreground",
+                children: [
+                  "Are you sure you want to archive",
+                  " ",
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: "text-foreground font-medium",
+                    children: project.name
+                  }, undefined, false, undefined, this),
+                  "?"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV2("p", {
+                className: "text-muted-foreground text-sm",
+                children: "Archived projects can be restored later."
+              }, undefined, false, undefined, this),
+              error && /* @__PURE__ */ jsxDEV2("div", {
+                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "flex justify-end gap-3 pt-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV2(Button2, {
+                    variant: "ghost",
+                    onPress: () => setMode("menu"),
+                    disabled: isLoading,
+                    children: "Cancel"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2(Button2, {
+                    onPress: handleArchive,
+                    disabled: isLoading,
+                    children: isLoading ? "Archiving..." : "\uD83D\uDCE6 Archive"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          mode === "delete" && /* @__PURE__ */ jsxDEV2("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV2("p", {
+                className: "text-muted-foreground",
+                children: [
+                  "Are you sure you want to delete",
+                  " ",
+                  /* @__PURE__ */ jsxDEV2("span", {
+                    className: "text-foreground font-medium",
+                    children: project.name
+                  }, undefined, false, undefined, this),
+                  "?"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV2("p", {
+                className: "text-destructive text-sm",
+                children: "This action cannot be undone."
+              }, undefined, false, undefined, this),
+              error && /* @__PURE__ */ jsxDEV2("div", {
+                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "flex justify-end gap-3 pt-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV2(Button2, {
+                    variant: "ghost",
+                    onPress: () => setMode("menu"),
+                    disabled: isLoading,
+                    children: "Cancel"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2(Button2, {
+                    variant: "destructive",
+                    onPress: handleDelete,
+                    disabled: isLoading,
+                    children: isLoading ? "Deleting..." : "\uD83D\uDDD1️ Delete"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/ui/SaasDashboard.tsx
+import { useState as useState5, useCallback as useCallback3 } from "react";
+import {
+  StatCard,
+  StatCardGroup,
+  StatusChip,
+  EntityCard,
+  EmptyState,
+  LoaderBlock,
+  ErrorState,
+  Button as Button3
+} from "@contractspec/lib.design-system";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+"use client";
+function getStatusTone(status) {
+  switch (status) {
+    case "ACTIVE":
+      return "success";
+    case "DRAFT":
+      return "neutral";
+    case "ARCHIVED":
+      return "warning";
+    default:
+      return "neutral";
+  }
+}
+function SaasDashboard() {
+  const [activeTab, setActiveTab] = useState5("projects");
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState5(false);
+  const [selectedProject, setSelectedProject] = useState5(null);
+  const [isProjectActionsOpen, setIsProjectActionsOpen] = useState5(false);
+  const { data, subscription, loading, error, stats, refetch } = useProjectList();
+  const mutations = useProjectMutations({
+    onSuccess: () => {
+      refetch();
+    }
+  });
+  const handleProjectClick = useCallback3((project) => {
+    setSelectedProject(project);
+    setIsProjectActionsOpen(true);
+  }, []);
+  const tabs = [
+    { id: "projects", label: "Projects", icon: "\uD83D\uDCC1" },
+    { id: "billing", label: "Billing", icon: "\uD83D\uDCB3" },
+    { id: "settings", label: "Settings", icon: "⚙️" }
+  ];
+  if (loading && !data) {
+    return /* @__PURE__ */ jsxDEV3(LoaderBlock, {
+      label: "Loading dashboard..."
+    }, undefined, false, undefined, this);
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxDEV3(ErrorState, {
+      title: "Failed to load dashboard",
+      description: error.message,
+      onRetry: refetch,
+      retryLabel: "Retry"
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: "space-y-6",
+    children: [
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "flex items-center justify-between",
+        children: [
+          /* @__PURE__ */ jsxDEV3("h2", {
+            className: "text-2xl font-bold",
+            children: "SaaS Dashboard"
+          }, undefined, false, undefined, this),
+          activeTab === "projects" && /* @__PURE__ */ jsxDEV3(Button3, {
+            onPress: () => setIsCreateModalOpen(true),
+            children: [
+              /* @__PURE__ */ jsxDEV3("span", {
+                className: "mr-2",
+                children: "+"
+              }, undefined, false, undefined, this),
+              " New Project"
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      stats && subscription && /* @__PURE__ */ jsxDEV3(StatCardGroup, {
+        children: [
+          /* @__PURE__ */ jsxDEV3(StatCard, {
+            label: "Projects",
+            value: stats.total.toString()
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3(StatCard, {
+            label: "Active",
+            value: stats.activeCount.toString()
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3(StatCard, {
+            label: "Draft",
+            value: stats.draftCount.toString()
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3(StatCard, {
+            label: "Plan",
+            value: subscription.plan,
+            hint: subscription.status
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("nav", {
+        className: "bg-muted flex gap-1 rounded-lg p-1",
+        role: "tablist",
+        children: tabs.map((tab) => /* @__PURE__ */ jsxDEV3("button", {
+          type: "button",
+          role: "tab",
+          "aria-selected": activeTab === tab.id,
+          onClick: () => setActiveTab(tab.id),
+          className: `flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors ${activeTab === tab.id ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+          children: [
+            /* @__PURE__ */ jsxDEV3("span", {
+              children: tab.icon
+            }, undefined, false, undefined, this),
+            tab.label
+          ]
+        }, tab.id, true, undefined, this))
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "min-h-[400px]",
+        role: "tabpanel",
+        children: [
+          activeTab === "projects" && /* @__PURE__ */ jsxDEV3(ProjectsTab, {
+            data,
+            onProjectClick: handleProjectClick
+          }, undefined, false, undefined, this),
+          activeTab === "billing" && /* @__PURE__ */ jsxDEV3(BillingTab, {
+            subscription
+          }, undefined, false, undefined, this),
+          activeTab === "settings" && /* @__PURE__ */ jsxDEV3(SettingsTab, {}, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3(CreateProjectModal, {
+        isOpen: isCreateModalOpen,
+        onClose: () => setIsCreateModalOpen(false),
+        onSubmit: async (input) => {
+          await mutations.createProject(input);
+        },
+        isLoading: mutations.createState.loading
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV3(ProjectActionsModal, {
+        isOpen: isProjectActionsOpen,
+        project: selectedProject,
+        onClose: () => {
+          setIsProjectActionsOpen(false);
+          setSelectedProject(null);
+        },
+        onUpdate: async (input) => {
+          await mutations.updateProject(input);
+        },
+        onArchive: async (projectId) => {
+          await mutations.archiveProject(projectId);
+        },
+        onActivate: async (projectId) => {
+          await mutations.activateProject(projectId);
+        },
+        onDelete: async (projectId) => {
+          await mutations.deleteProject(projectId);
+        },
+        isLoading: mutations.isLoading
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function ProjectsTab({ data, onProjectClick }) {
+  if (!data?.items.length) {
+    return /* @__PURE__ */ jsxDEV3(EmptyState, {
+      title: "No projects yet",
+      description: "Create your first project to get started."
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: "space-y-4",
+    children: /* @__PURE__ */ jsxDEV3("div", {
+      className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
+      children: data.items.map((project) => /* @__PURE__ */ jsxDEV3(EntityCard, {
+        cardTitle: project.name,
+        cardSubtitle: project.tier,
+        meta: /* @__PURE__ */ jsxDEV3("p", {
+          className: "text-muted-foreground text-sm",
+          children: project.description
+        }, undefined, false, undefined, this),
+        chips: /* @__PURE__ */ jsxDEV3(StatusChip, {
+          tone: getStatusTone(project.status),
+          label: project.status
+        }, undefined, false, undefined, this),
+        footer: /* @__PURE__ */ jsxDEV3("div", {
+          className: "flex w-full items-center justify-between",
+          children: [
+            /* @__PURE__ */ jsxDEV3("span", {
+              className: "text-muted-foreground text-xs",
+              children: project.updatedAt.toLocaleDateString()
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV3(Button3, {
+              variant: "ghost",
+              size: "sm",
+              onPress: () => onProjectClick?.(project),
+              children: "Actions"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, project.id, false, undefined, this))
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function BillingTab({ subscription }) {
+  if (!subscription)
+    return null;
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: "space-y-6",
+    children: [
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "border-border bg-card rounded-xl border p-6",
+        children: [
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "flex items-start justify-between",
+            children: [
+              /* @__PURE__ */ jsxDEV3("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV3("h3", {
+                    className: "text-lg font-semibold",
+                    children: [
+                      subscription.plan,
+                      " Plan"
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV3("p", {
+                    className: "text-muted-foreground text-sm",
+                    children: [
+                      "Current period:",
+                      " ",
+                      subscription.currentPeriodStart.toLocaleDateString(),
+                      " -",
+                      " ",
+                      subscription.currentPeriodEnd.toLocaleDateString()
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV3("p", {
+                    className: "text-muted-foreground text-sm",
+                    children: [
+                      "Billing cycle: ",
+                      subscription.billingCycle
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV3(StatusChip, {
+                tone: "success",
+                label: subscription.status
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "mt-4 flex gap-3",
+            children: [
+              /* @__PURE__ */ jsxDEV3(Button3, {
+                variant: "outline",
+                onPress: () => alert("Upgrade clicked!"),
+                children: "Upgrade Plan"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3(Button3, {
+                variant: "ghost",
+                onPress: () => alert("Manage Billing clicked!"),
+                children: "Manage Billing"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      subscription.cancelAtPeriodEnd && /* @__PURE__ */ jsxDEV3("div", {
+        className: "border-border bg-destructive/10 text-destructive rounded-xl border p-4",
+        children: /* @__PURE__ */ jsxDEV3("p", {
+          className: "text-sm font-medium",
+          children: "⚠️ Your subscription will be cancelled at the end of the current period."
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function SettingsTab() {
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: "space-y-6",
+    children: /* @__PURE__ */ jsxDEV3("div", {
+      className: "border-border bg-card rounded-xl border p-6",
+      children: [
+        /* @__PURE__ */ jsxDEV3("h3", {
+          className: "mb-4 text-lg font-semibold",
+          children: "Organization Settings"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV3("div", {
+          className: "space-y-4",
+          children: [
+            /* @__PURE__ */ jsxDEV3("div", {
+              children: [
+                /* @__PURE__ */ jsxDEV3("label", {
+                  htmlFor: "org-name",
+                  className: "text-sm font-medium",
+                  children: "Organization Name"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV3("input", {
+                  id: "org-name",
+                  type: "text",
+                  defaultValue: "Demo Organization",
+                  className: "border-input bg-background mt-1 block w-full rounded-md border px-3 py-2"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV3("div", {
+              children: [
+                /* @__PURE__ */ jsxDEV3("label", {
+                  htmlFor: "timezone",
+                  className: "text-sm font-medium",
+                  children: "Default Timezone"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV3("select", {
+                  id: "timezone",
+                  className: "border-input bg-background mt-1 block w-full rounded-md border px-3 py-2",
+                  children: [
+                    /* @__PURE__ */ jsxDEV3("option", {
+                      children: "UTC"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV3("option", {
+                      children: "America/New_York"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV3("option", {
+                      children: "Europe/London"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV3("option", {
+                      children: "Asia/Tokyo"
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ jsxDEV3("div", {
+              className: "pt-2",
+              children: /* @__PURE__ */ jsxDEV3(Button3, {
+                onPress: () => alert("Settings saved!"),
+                children: "Save Settings"
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+export {
+  SaasDashboard
+};