@viliha/vui-ui 1.1.8 → 1.2.0

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>
+  );
+}

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

@@ -0,0 +1,263 @@
+"use client";
+
+import * as React from "react";
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  CheckIcon,
+  CubeIcon as Building,
+  LockClosedIcon,
+  RowsIcon,
+} from "@radix-ui/react-icons";
+
+import { Button } from "@viliha/vui-ui/button";
+import { Input } from "@viliha/vui-ui/input";
+import { Select } from "@viliha/vui-ui/select";
+import { Steps, type Step } from "@viliha/vui-ui/steps";
+import { RequiredMark } from "@viliha/vui-ui/required-mark";
+import { Breadcrumbs } from "@/app/_components/breadcrumbs";
+import { SetPageTitle } from "@/app/_components/set-page-title";
+
+/** Label + control on one row (label left), matching the RecordForm add-form. */
+function Field({
+  label,
+  htmlFor,
+  required,
+  hint,
+  children,
+}: {
+  label: string;
+  htmlFor?: string;
+  required?: boolean;
+  hint?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="grid gap-1.5 sm:grid-cols-[140px_1fr] sm:items-center sm:gap-4">
+      <label
+        htmlFor={htmlFor}
+        className="flex items-center gap-1.5 text-sm text-muted-foreground"
+      >
+        {label}
+        {required && <RequiredMark />}
+      </label>
+      <div className="min-w-0">
+        {children}
+        {hint && <p className="mt-1 text-xs text-muted-foreground">{hint}</p>}
+      </div>
+    </div>
+  );
+}
+
+const STEPS: Step[] = [
+  { label: "Organization", description: "Business details" },
+  { label: "Account", description: "Your credentials" },
+  { label: "Review", description: "Confirm details" },
+];
+
+const PLANS = [
+  { value: "free", label: "Free" },
+  { value: "pro", label: "Pro" },
+  { value: "enterprise", label: "Enterprise" },
+];
+
+function slugify(value: string): string {
+  return value
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}
+
+function SectionBar({
+  title,
+  icon: Icon,
+}: {
+  title: string;
+  icon: React.ComponentType<{ className?: string }>;
+}) {
+  return (
+    <h3 className="flex items-center gap-2 border-b border-border bg-muted/40 px-3 py-2 font-semibold text-[var(--button-primary)]">
+      <Icon className="size-4 text-[var(--button-primary)]" />
+      {title}
+    </h3>
+  );
+}
+
+/** A working multi-step wizard built on the Steps indicator. */
+function WizardDemo() {
+  const [step, setStep] = React.useState(0);
+  const [name, setName] = React.useState("");
+  const [slug, setSlug] = React.useState("");
+  const [slugTouched, setSlugTouched] = React.useState(false);
+  const [plan, setPlan] = React.useState("free");
+  const [email, setEmail] = React.useState("");
+  const [done, setDone] = React.useState(false);
+
+  const onName = (value: string) => {
+    setName(value);
+    if (!slugTouched) setSlug(slugify(value));
+  };
+
+  const isLast = step === STEPS.length - 1;
+  const canNext =
+    step === 0 ? name.trim() !== "" : step === 1 ? email.trim() !== "" : true;
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden rounded-lg border border-border bg-card">
+      {/* Stepper — fixed at the top */}
+      <div className="shrink-0 border-b border-border p-4 md:p-6">
+        <Steps steps={STEPS} current={step} />
+      </div>
+      {/* Scrollable form body — scrolls when the step has many fields */}
+      <div className="min-h-0 flex-1 overflow-y-auto p-4 md:p-6">
+        {done ? (
+          <div className="flex flex-col items-center gap-2 py-8 text-center">
+            <span className="grid size-11 place-items-center rounded-full bg-accent">
+              <CheckIcon className="size-5 text-[var(--button-primary)]" />
+            </span>
+            <p className="font-medium">Account created</p>
+            <p className="text-sm text-muted-foreground">
+              {name || "Your organization"} is ready on the {plan} plan.
+            </p>
+            <Button
+              className="mt-2"
+              onClick={() => {
+                setDone(false);
+                setStep(0);
+              }}
+            >
+              Start over
+            </Button>
+          </div>
+        ) : (
+          <div className="overflow-hidden rounded-lg border border-border">
+            {step === 0 && (
+              <>
+                <SectionBar title="Basic Information" icon={Building} />
+                <div className="space-y-4 p-4">
+                  <Field label="Name" htmlFor="s-name" required>
+                    <Input
+                      id="s-name"
+                      value={name}
+                      onChange={(e) => onName(e.target.value)}
+                      placeholder="Organization name"
+                    />
+                  </Field>
+                  <Field
+                    label="Slug"
+                    htmlFor="s-slug"
+                    required
+                    hint="Unique identifier, auto-generated from name"
+                  >
+                    <Input
+                      id="s-slug"
+                      value={slug}
+                      onChange={(e) => {
+                        setSlugTouched(true);
+                        setSlug(e.target.value);
+                      }}
+                      placeholder="organization-slug"
+                      className="font-mono"
+                    />
+                  </Field>
+                  <Field label="Plan" htmlFor="s-plan" required>
+                    <Select
+                      id="s-plan"
+                      ariaLabel="Plan"
+                      value={plan}
+                      onValueChange={setPlan}
+                      options={PLANS}
+                    />
+                  </Field>
+                </div>
+              </>
+            )}
+            {step === 1 && (
+              <>
+                <SectionBar title="Your credentials" icon={LockClosedIcon} />
+                <div className="space-y-4 p-4">
+                  <Field label="Email" htmlFor="s-email" required>
+                    <Input
+                      id="s-email"
+                      type="email"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      placeholder="you@company.com"
+                    />
+                  </Field>
+                </div>
+              </>
+            )}
+            {step === 2 && (
+              <>
+                <SectionBar title="Confirm details" icon={CheckIcon} />
+                <dl className="divide-y divide-border p-4 pt-0">
+                  {[
+                    ["Name", name || "—"],
+                    ["Slug", slug || "—"],
+                    ["Plan", PLANS.find((p) => p.value === plan)?.label ?? plan],
+                    ["Email", email || "—"],
+                  ].map(([label, value]) => (
+                    <div key={label} className="flex items-center gap-3 py-2.5">
+                      <dt className="w-28 shrink-0 text-muted-foreground">
+                        {label}
+                      </dt>
+                      <dd className="min-w-0 flex-1 break-words">{value}</dd>
+                    </div>
+                  ))}
+                </dl>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+
+      {!done && (
+        <div className="flex shrink-0 items-center justify-between border-t border-border bg-muted/40 px-4 py-3">
+          <Button onClick={() => setStep((s) => Math.max(0, s - 1))} disabled={step === 0}>
+            <ArrowLeftIcon className="size-4" />
+            Back
+          </Button>
+          <Button
+            variant="primary"
+            disabled={!canNext}
+            onClick={() => (isLast ? setDone(true) : setStep((s) => s + 1))}
+          >
+            {isLast ? (
+              <>
+                <CheckIcon className="size-4" />
+                Create account
+              </>
+            ) : (
+              <>
+                Next
+                <ArrowRightIcon className="size-4" />
+              </>
+            )}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function StepsPage() {
+  return (
+    <div className="flex h-full flex-col">
+      <SetPageTitle title="Steps" icon={RowsIcon} />
+      <div className="flex h-12 shrink-0 items-center justify-between gap-3 border-b border-border px-4">
+        <Breadcrumbs />
+        <span className="hidden truncate text-muted-foreground md:block">
+          Multi-step wizard built on the <code>Steps</code> component.
+        </span>
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-hidden p-4">
+        <div className="mx-auto h-full w-full max-w-3xl">
+          <WizardDemo />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,14 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Support",
+  description: "A support desk demo — ticket list, detail, status/priority, replies.",
+};
+
+export default function SupportLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}