@viliha/vui-ui 1.1.8 → 1.3.0

package/template/app/(app)/markets/markets-table.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import {
+  CubeIcon as Building,
+  GlobeIcon as Compass,
+  RulerHorizontalIcon as Ruler,
+  SewingPinFilledIcon as MapPin,
+} from "@radix-ui/react-icons";
+
+import { RecordView, type RecordField } from "@viliha/vui-ui/record-view";
+import { markets, type Market } from "@/lib/mock-data";
+
+function formatCenter(market: Market): string {
+  if (market.centerLatitude === null || market.centerLongitude === null) {
+    return "—";
+  }
+  return `${market.centerLatitude.toFixed(4)}, ${market.centerLongitude.toFixed(4)}`;
+}
+
+const fields: RecordField<Market>[] = [
+  { key: "name", label: "Name", editable: true, required: true, group: "General", hideInTable: true },
+  { key: "organization", label: "Organization", icon: Building, editable: true, width: 200, group: "General" },
+  {
+    key: "centerLatitude",
+    label: "Center (lat, lng)",
+    icon: Compass,
+    width: 180,
+    group: "System",
+    render: (row) => (
+      <span className="whitespace-nowrap font-mono tabular-nums text-muted-foreground">
+        {formatCenter(row)}
+      </span>
+    ),
+  },
+  {
+    key: "radiusMiles",
+    label: "Radius",
+    icon: Ruler,
+    // No explicit align — auto-aligns center (numeric).
+    group: "System",
+    render: (row) => (
+      <span className="tabular-nums">
+        {row.radiusMiles === null ? (
+          <span className="text-muted-foreground">—</span>
+        ) : (
+          `${row.radiusMiles} mi`
+        )}
+      </span>
+    ),
+  },
+];
+
+export function MarketsTable() {
+  return (
+    <RecordView
+      title="Markets"
+      singular="Market"
+      icon={MapPin}
+      fields={fields}
+      initialData={markets}
+      getPrimary={(row) => ({
+        title: row.name,
+        subtitle: row.organization,
+        initials: row.name.slice(0, 2).toUpperCase(),
+      })}
+      makeEmptyRow={() => ({
+        id: Date.now(),
+        organization: "",
+        name: "",
+        centerLatitude: null,
+        centerLongitude: null,
+        radiusMiles: null,
+      })}
+    />
+  );
+}

package/template/app/(app)/markets/page.tsx

@@ -0,0 +1,13 @@
+import { pageMeta } from "@/lib/seo";
+
+import { MarketsTable } from "./markets-table";
+
+export const metadata = pageMeta("/markets");
+
+export default function MarketsPage() {
+  return (
+    <main className="h-full">
+      <MarketsTable />
+    </main>
+  );
+}

package/template/app/(app)/organizations/edit/page.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { Suspense } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+
+import { RecordForm } from "@viliha/vui-ui/record-view";
+import { SetPageTitle } from "@/app/_components/set-page-title";
+import { orgStore } from "@/lib/org-store";
+import {
+  fields,
+  getPrimary,
+  ORG_FORM_DESCRIPTION,
+  ORG_ICON,
+  ORG_SINGULAR,
+  ORG_TITLE,
+} from "../organizations-config";
+
+function EditOrganizationForm() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const row = orgStore.get(Number(searchParams.get("id")));
+
+  if (!row) {
+    // Unknown id — e.g. a refresh cleared an in-session record.
+    return (
+      <main className="grid h-full place-items-center p-8 text-center text-muted-foreground">
+        <p>
+          Organization not found.{" "}
+          <button
+            type="button"
+            onClick={() => router.push("/organizations")}
+            className="text-[var(--button-primary)] hover:underline"
+          >
+            Back to organizations
+          </button>
+        </p>
+      </main>
+    );
+  }
+
+  return (
+    <main className="h-full">
+      <SetPageTitle title={ORG_TITLE} icon={ORG_ICON} />
+      <RecordForm
+        persistKey={`/organizations/edit?id=${row.id}`}
+        columns={1}
+        fields={fields}
+        row={row}
+        title={ORG_TITLE}
+        singular={ORG_SINGULAR}
+        icon={ORG_ICON}
+        getPrimary={getPrimary}
+        formDescription={ORG_FORM_DESCRIPTION}
+        onHome={() => router.push("/dashboard")}
+        onSave={(saved) => {
+          orgStore.update(saved);
+          router.push("/organizations");
+        }}
+        onCancel={() => router.push("/organizations")}
+      />
+    </main>
+  );
+}
+
+export default function EditOrganizationPage() {
+  // useSearchParams needs a Suspense boundary under static export.
+  return (
+    <Suspense>
+      <EditOrganizationForm />
+    </Suspense>
+  );
+}

package/template/app/(app)/organizations/new/page.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+import { RecordForm } from "@viliha/vui-ui/record-view";
+import { SetPageTitle } from "@/app/_components/set-page-title";
+import { orgStore } from "@/lib/org-store";
+import {
+  fields,
+  getPrimary,
+  makeEmptyRow,
+  ORG_FORM_DESCRIPTION,
+  ORG_ICON,
+  ORG_SINGULAR,
+  ORG_TITLE,
+} from "../organizations-config";
+
+export default function NewOrganizationPage() {
+  const router = useRouter();
+  // Stable draft row (a fresh id per mount) so the form doesn't reset on render.
+  const [row] = useState(makeEmptyRow);
+  return (
+    <main className="h-full">
+      <SetPageTitle title={ORG_TITLE} icon={ORG_ICON} />
+      <RecordForm
+        isNew
+        persistKey="/organizations/new"
+        columns={1}
+        fields={fields}
+        row={row}
+        title={ORG_TITLE}
+        singular={ORG_SINGULAR}
+        icon={ORG_ICON}
+        getPrimary={getPrimary}
+        formDescription={ORG_FORM_DESCRIPTION}
+        onHome={() => router.push("/dashboard")}
+        onSave={(saved) => {
+          orgStore.add(saved);
+          router.push("/organizations");
+        }}
+        onCancel={() => router.push("/organizations")}
+      />
+    </main>
+  );
+}

package/template/app/(app)/organizations/organizations-config.tsx

@@ -0,0 +1,97 @@
+import {
+  CubeIcon as Building2,
+  DotFilledIcon as CircleDot,
+  EnvelopeClosedIcon as Mail,
+  GlobeIcon as Globe,
+  PersonIcon as Users,
+  SewingPinFilledIcon as MapPin,
+  Share2Icon as Network,
+} from "@radix-ui/react-icons";
+
+import { Badge } from "@viliha/vui-ui/badge";
+import { type IconType, type RecordField } from "@viliha/vui-ui/record-view";
+import {
+  type DemoOrganization,
+  type OrganizationStatus,
+} from "@/lib/demo-data";
+
+// Shared organization view config — reused by the table and the create/edit routes.
+export const ORG_TITLE = "Organizations";
+export const ORG_SINGULAR = "Organization";
+export const ORG_ICON: IconType = Building2;
+export const ORG_FORM_DESCRIPTION =
+  "Organizations are the top-level tenants in the system. Each one groups its branches, departments and employees, and owns its billing and locale settings. Fill in the details below to create or update a record.";
+
+const statusBadge: Record<
+  OrganizationStatus,
+  { label: string; variant: "success" | "warning" | "destructive" }
+> = {
+  active: { label: "Active", variant: "success" },
+  trial: { label: "Trial", variant: "warning" },
+  suspended: { label: "Suspended", variant: "destructive" },
+};
+
+export const fields: RecordField<DemoOrganization>[] = [
+  { key: "name", label: "Name", description: "The organization's legal or trading name, shown across the app.", editable: true, required: true, group: "General", hideInTable: true },
+  { key: "url", label: "Domain", description: "Primary web domain, e.g. acme.com — used to group users and match emails.", icon: Globe, editable: true, copyable: true, width: 200, group: "General" },
+  { key: "email", label: "Email", description: "Main contact address for billing and account notices.", icon: Mail, editable: true, required: true, copyable: true, width: 220, group: "General" },
+  { key: "country", label: "Country", description: "Headquarters country. Drives default currency, tax and locale.", icon: MapPin, editable: true, group: "General" },
+  {
+    key: "branches",
+    label: "Branches",
+    description: "Number of physical or regional offices under this organization.",
+    icon: Network,
+    group: "System",
+    render: (row) => <span className="tabular-nums">{row.branches}</span>,
+  },
+  {
+    key: "employees",
+    label: "Employees",
+    description: "Approximate headcount. Used for reporting and plan sizing.",
+    icon: Users,
+    group: "System",
+    render: (row) => (
+      <span className="tabular-nums">{row.employees.toLocaleString()}</span>
+    ),
+  },
+  {
+    key: "status",
+    label: "Status",
+    description: "Account lifecycle: Trial while evaluating, Active once live, Suspended to disable access.",
+    icon: CircleDot,
+    group: "System",
+    options: [
+      { value: "active", label: "Active" },
+      { value: "trial", label: "Trial" },
+      { value: "suspended", label: "Suspended" },
+    ],
+    render: (row) => {
+      const status = statusBadge[row.status];
+      return <Badge variant={status.variant}>{status.label}</Badge>;
+    },
+  },
+];
+
+export function getPrimary(row: DemoOrganization) {
+  return {
+    title: row.name,
+    subtitle: row.url,
+    initials: row.initials || row.name.slice(0, 2).toUpperCase(),
+  };
+}
+
+export function makeEmptyRow(): DemoOrganization {
+  return {
+    id: Date.now(),
+    name: "",
+    url: "",
+    email: "",
+    countryCode: "",
+    country: "",
+    branches: 0,
+    employees: 0,
+    status: "trial",
+    initials: "",
+    updated: "just now",
+  };
+}

package/template/app/(app)/organizations/organizations-table.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+
+import { RecordView } from "@viliha/vui-ui/record-view";
+import { orgStore, useOrganizations } from "@/lib/org-store";
+import {
+  fields,
+  getPrimary,
+  makeEmptyRow,
+  ORG_FORM_DESCRIPTION,
+  ORG_ICON,
+  ORG_SINGULAR,
+  ORG_TITLE,
+} from "./organizations-config";
+
+export function OrganizationsTable() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const rows = useOrganizations();
+  return (
+    <RecordView
+      persistKey={pathname}
+      title={ORG_TITLE}
+      singular={ORG_SINGULAR}
+      icon={ORG_ICON}
+      formMode="page"
+      formColumns={1}
+      onHome={() => router.push("/dashboard")}
+      onCreate={() => router.push("/organizations/new")}
+      onView={(id) => router.push(`/organizations/edit?id=${id}`)}
+      onEdit={(id) => router.push(`/organizations/edit?id=${id}`)}
+      formDescription={ORG_FORM_DESCRIPTION}
+      fields={fields}
+      initialData={rows}
+      data={rows}
+      onDataChange={orgStore.set}
+      getPrimary={getPrimary}
+      makeEmptyRow={makeEmptyRow}
+    />
+  );
+}

package/template/app/(app)/organizations/page.tsx

@@ -0,0 +1,13 @@
+import { pageMeta } from "@/lib/seo";
+
+import { OrganizationsTable } from "./organizations-table";
+
+export const metadata = pageMeta("/organizations");
+
+export default function OrganizationsPage() {
+  return (
+    <main className="h-full">
+      <OrganizationsTable />
+    </main>
+  );
+}

package/template/app/(app)/settings/layout.tsx

@@ -0,0 +1,8 @@
+import { pageMeta } from "@/lib/seo";
+
+// The page is a Client Component and can't export metadata, so it lives here.
+export const metadata = pageMeta("/settings");
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

package/template/app/(app)/settings/page.tsx

@@ -0,0 +1,255 @@
+"use client";
+
+import * as React from "react";
+import {
+  BellIcon,
+  DesktopIcon,
+  GearIcon,
+  MoonIcon,
+  SunIcon,
+} from "@radix-ui/react-icons";
+
+import { cn } from "@/lib/utils";
+import { Avatar, AvatarFallback } from "@viliha/vui-ui/avatar";
+import { Button } from "@viliha/vui-ui/button";
+import { Checkbox } from "@viliha/vui-ui/checkbox";
+import { Input } from "@viliha/vui-ui/input";
+import { Select } from "@viliha/vui-ui/select";
+import { Breadcrumbs } from "@/app/_components/breadcrumbs";
+import { SetPageTitle } from "@/app/_components/set-page-title";
+
+type Theme = "light" | "dark" | "system";
+
+const THEME_OPTIONS: { value: Theme; label: string; icon: typeof SunIcon }[] = [
+  { value: "light", label: "Light", icon: SunIcon },
+  { value: "dark", label: "Dark", icon: MoonIcon },
+  { value: "system", label: "System", icon: DesktopIcon },
+];
+
+function applyTheme(theme: Theme) {
+  const dark =
+    theme === "dark" ||
+    (theme === "system" &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches);
+  document.documentElement.classList.toggle("dark", dark);
+  try {
+    if (theme === "system") localStorage.removeItem("theme");
+    else localStorage.setItem("theme", theme);
+  } catch {
+    // ignore storage failures
+  }
+}
+
+function Section({
+  title,
+  description,
+  className,
+  children,
+}: {
+  title: string;
+  description?: string;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section
+      className={cn("overflow-hidden rounded-lg border border-border", className)}
+    >
+      <div className="border-b border-border bg-muted/40 px-3 py-2">
+        <h2 className="font-semibold text-[var(--button-primary)]">{title}</h2>
+        {description && (
+          <p className="text-sm text-muted-foreground">{description}</p>
+        )}
+      </div>
+      <div className="p-4">{children}</div>
+    </section>
+  );
+}
+
+function Field({
+  label,
+  htmlFor,
+  children,
+}: {
+  label: string;
+  htmlFor?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="grid gap-1.5 sm:grid-cols-[180px_1fr] sm:items-center sm:gap-4">
+      <label htmlFor={htmlFor} className="text-sm text-muted-foreground">
+        {label}
+      </label>
+      <div className="min-w-0 max-w-sm">{children}</div>
+    </div>
+  );
+}
+
+export default function SettingsPage() {
+  const [theme, setTheme] = React.useState<Theme>("system");
+  const [name, setName] = React.useState("Admin User");
+  const [email, setEmail] = React.useState("admin@viliha.example");
+  const [role, setRole] = React.useState("administrator");
+  const [notifyEmail, setNotifyEmail] = React.useState(true);
+  const [notifyDesktop, setNotifyDesktop] = React.useState(false);
+  const [notifyWeekly, setNotifyWeekly] = React.useState(true);
+  const [saved, setSaved] = React.useState(false);
+
+  React.useEffect(() => {
+    try {
+      const stored = localStorage.getItem("theme") as Theme | null;
+      setTheme(stored ?? "system");
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  function chooseTheme(next: Theme) {
+    setTheme(next);
+    applyTheme(next);
+  }
+
+  function save() {
+    setSaved(true);
+    window.setTimeout(() => setSaved(false), 1600);
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      <SetPageTitle title="Settings" icon={GearIcon} />
+
+      {/* Breadcrumb bar — matches the record form pages. */}
+      <div className="flex h-12 shrink-0 items-center border-b border-border px-4">
+        <Breadcrumbs />
+      </div>
+
+      {/* Content — padded, bordered card with a fixed footer (matches the add form). */}
+      <div className="min-h-0 flex-1 overflow-hidden p-4">
+        <div className="flex h-full flex-col overflow-hidden rounded-lg border border-border bg-card">
+          <div className="min-h-0 flex-1 overflow-y-auto p-4 md:p-6">
+            <div className="w-full space-y-4">
+          <Section title="Profile" description="Your personal information.">
+            <div className="space-y-4 sm:max-w-xl">
+              <div className="flex items-center gap-3">
+                <Avatar className="size-12">
+                  <AvatarFallback>AU</AvatarFallback>
+                </Avatar>
+                <Button>Change avatar</Button>
+              </div>
+              <Field label="Name" htmlFor="name">
+                <Input
+                  id="name"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                />
+              </Field>
+              <Field label="Email" htmlFor="email">
+                <Input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                />
+              </Field>
+              <Field label="Role" htmlFor="role">
+                <Select
+                  id="role"
+                  ariaLabel="Role"
+                  value={role}
+                  onValueChange={setRole}
+                  options={[
+                    { value: "administrator", label: "Administrator" },
+                    { value: "manager", label: "Manager" },
+                    { value: "member", label: "Member" },
+                    { value: "viewer", label: "Viewer" },
+                  ]}
+                />
+              </Field>
+            </div>
+          </Section>
+
+          <Section title="Appearance" description="Choose how the app looks.">
+            <div className="grid grid-cols-3 gap-3">
+              {THEME_OPTIONS.map((opt) => {
+                const active = theme === opt.value;
+                const Icon = opt.icon;
+                return (
+                  <button
+                    key={opt.value}
+                    type="button"
+                    onClick={() => chooseTheme(opt.value)}
+                    aria-pressed={active}
+                    className={cn(
+                      "flex flex-col items-center gap-2 rounded-lg border p-4 transition-colors",
+                      active
+                        ? "border-ring bg-accent"
+                        : "border-border hover:bg-accent/50",
+                    )}
+                  >
+                    <Icon className="size-5" />
+                    <span className="text-sm">{opt.label}</span>
+                  </button>
+                );
+              })}
+            </div>
+          </Section>
+
+          <Section
+            title="Notifications"
+            description="Pick what you want to hear about."
+          >
+            <div className="space-y-3">
+              <label
+                htmlFor="notify-email"
+                className="flex items-center gap-2 text-sm"
+              >
+                <Checkbox
+                  id="notify-email"
+                  checked={notifyEmail}
+                  onChange={(e) => setNotifyEmail(e.target.checked)}
+                />
+                <BellIcon className="size-3.5 text-muted-foreground" />
+                Email notifications
+              </label>
+              <label
+                htmlFor="notify-desktop"
+                className="flex items-center gap-2 text-sm"
+              >
+                <Checkbox
+                  id="notify-desktop"
+                  checked={notifyDesktop}
+                  onChange={(e) => setNotifyDesktop(e.target.checked)}
+                />
+                <DesktopIcon className="size-3.5 text-muted-foreground" />
+                Desktop notifications
+              </label>
+              <label
+                htmlFor="notify-weekly"
+                className="flex items-center gap-2 text-sm"
+              >
+                <Checkbox
+                  id="notify-weekly"
+                  checked={notifyWeekly}
+                  onChange={(e) => setNotifyWeekly(e.target.checked)}
+                />
+                Weekly summary email
+              </label>
+            </div>
+          </Section>
+
+            </div>
+          </div>
+          {/* Fixed footer — matches the add form's action bar. */}
+          <div className="flex shrink-0 items-center justify-end gap-2 border-y border-border bg-muted/40 px-4 py-3">
+            {saved && (
+              <span className="text-sm text-muted-foreground">Saved ✓</span>
+            )}
+            <Button variant="primary" onClick={save}>
+              Save changes
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}