@viliha/vui-ui 1.1.8 → 1.2.0

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

@@ -0,0 +1,239 @@
+"use client";
+
+import {
+  CubeIcon as Building2,
+  HomeIcon as Home,
+} from "@radix-ui/react-icons";
+
+import { cn } from "@/lib/utils";
+import { Avatar, AvatarFallback } from "@viliha/vui-ui/avatar";
+import { Badge } from "@viliha/vui-ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@viliha/vui-ui/table";
+import { Breadcrumbs } from "@/app/_components/breadcrumbs";
+import { SetPageTitle } from "@/app/_components/set-page-title";
+import { StatCard } from "@/app/_components/stat-card";
+import {
+  employees,
+  organizations,
+  regionBreakdown,
+  stats,
+  type OrganizationStatus,
+} from "@/lib/demo-data";
+
+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" },
+};
+
+const statCards = [
+  stats.organizations,
+  stats.employees,
+  stats.activeMarkets,
+  stats.branches,
+];
+
+export default function HomePage() {
+  const maxRegion = Math.max(
+    ...regionBreakdown.map((entry) => entry.organizations),
+    1,
+  );
+
+  return (
+    <div className="flex h-full flex-col">
+      <SetPageTitle title="Home" icon={Home} />
+
+      {/* Action header — breadcrumbs (left) + overview note (right) */}
+      <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">
+          Overview of organizations, teams, and markets across the platform.
+        </span>
+      </div>
+
+      {/* Scrollable content — padded, card sections (matches the settings layout) */}
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        <div className="flex flex-col gap-4 p-4">
+        {/* Stats — bordered cards */}
+        <section
+          aria-label="Key metrics"
+          className="grid grid-cols-2 gap-4 lg:grid-cols-4"
+        >
+          {statCards.map((stat) => (
+            <StatCard
+              key={stat.label}
+              label={stat.label}
+              value={stat.value}
+              delta={stat.delta}
+              trend={stat.trend}
+              className="rounded-lg border border-border bg-card"
+            />
+          ))}
+        </section>
+
+        {/* Content sections */}
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+          <section className="overflow-hidden rounded-lg border border-border bg-card lg:col-span-2">
+            <SectionHeader>Recent organizations</SectionHeader>
+            {organizations.length === 0 ? (
+              <EmptyState />
+            ) : (
+              <div className="overflow-x-auto">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Organization</TableHead>
+                      <TableHead>Country</TableHead>
+                      <TableHead className="text-right">Branches</TableHead>
+                      <TableHead className="text-right">Employees</TableHead>
+                      <TableHead>Status</TableHead>
+                      <TableHead className="text-right">Updated</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {organizations.map((org) => {
+                      const status = statusBadge[org.status];
+                      return (
+                        <TableRow key={org.id}>
+                          <TableCell>
+                            <div className="flex items-center gap-3">
+                              <Avatar className="size-8">
+                                <AvatarFallback>{org.initials}</AvatarFallback>
+                              </Avatar>
+                              <div className="min-w-0">
+                                <p className="truncate">{org.name}</p>
+                                <p className="truncate text-muted-foreground">
+                                  {org.url}
+                                </p>
+                              </div>
+                            </div>
+                          </TableCell>
+                          <TableCell className="text-muted-foreground">
+                            {org.country}
+                          </TableCell>
+                          <TableCell className="text-right tabular-nums">
+                            {org.branches}
+                          </TableCell>
+                          <TableCell className="text-right tabular-nums">
+                            {org.employees.toLocaleString()}
+                          </TableCell>
+                          <TableCell>
+                            <Badge variant={status.variant}>
+                              {status.label}
+                            </Badge>
+                          </TableCell>
+                          <TableCell className="text-right text-muted-foreground">
+                            {org.updated}
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })}
+                  </TableBody>
+                </Table>
+              </div>
+            )}
+          </section>
+
+          {/* Side column — separate boxes */}
+          <aside className="grid grid-cols-1 content-start gap-4">
+            {/* Region breakdown */}
+            <section className="overflow-hidden rounded-lg border border-border bg-card">
+              <SectionHeader>Organizations by region</SectionHeader>
+              <div className="space-y-3 p-4">
+                {regionBreakdown.map((entry) => (
+                  <div key={entry.region} className="space-y-1">
+                    <div className="flex items-center justify-between">
+                      <span>{entry.region}</span>
+                      <span className="tabular-nums text-muted-foreground">
+                        {entry.organizations}
+                      </span>
+                    </div>
+                    <div className="h-2 overflow-hidden rounded-full bg-muted">
+                      <div
+                        className="h-full rounded-full bg-primary"
+                        style={{
+                          width: `${(entry.organizations / maxRegion) * 100}%`,
+                        }}
+                      />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </section>
+
+            {/* Recently added employees */}
+            <section className="overflow-hidden rounded-lg border border-border bg-card">
+              <SectionHeader>New team members</SectionHeader>
+              <div className="divide-y divide-border">
+                {employees.slice(0, 5).map((person) => (
+                  <div
+                    key={person.id}
+                    className="flex items-center gap-3 px-4 py-3"
+                  >
+                    <Avatar className="size-8">
+                      <AvatarFallback>
+                        {person.firstName[0]}
+                        {person.lastName[0]}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate">
+                        {person.firstName} {person.lastName}
+                      </p>
+                      <p className="truncate text-muted-foreground">
+                        {person.department} · {person.organization}
+                      </p>
+                    </div>
+                    <span
+                      className={cn(
+                        "size-2 shrink-0 rounded-full",
+                        person.isActive
+                          ? "bg-emerald-500"
+                          : "bg-muted-foreground/40",
+                      )}
+                      aria-label={person.isActive ? "Active" : "Inactive"}
+                    />
+                  </div>
+                ))}
+              </div>
+            </section>
+          </aside>
+        </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** Section header bar — same treatment as the datatable sub-toolbar. */
+function SectionHeader({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="border-b border-border bg-muted/40 px-4 py-2 font-medium">
+      {children}
+    </div>
+  );
+}
+
+function EmptyState() {
+  return (
+    <div className="flex flex-col items-center justify-center gap-2 py-12 text-center">
+      <div className="flex size-10 items-center justify-center rounded-full bg-muted">
+        <Building2 className="size-5 text-muted-foreground" aria-hidden="true" />
+      </div>
+      <p className="font-medium">No organizations yet</p>
+      <p className="text-muted-foreground">
+        New tenants will appear here once they are onboarded.
+      </p>
+    </div>
+  );
+}

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

@@ -0,0 +1,55 @@
+"use client";
+
+import {
+  CodeIcon as Hash,
+  CubeIcon as Building,
+  DashboardIcon as LayoutGrid,
+  PersonIcon as Users,
+} from "@radix-ui/react-icons";
+
+import { usePathname } from "next/navigation";
+
+import { RecordView, type RecordField } from "@viliha/vui-ui/record-view";
+import { departments, type Department } from "@/lib/mock-data";
+
+const fields: RecordField<Department>[] = [
+  { key: "title", label: "Title", editable: true, required: true, group: "General", hideInTable: true },
+  { key: "organization", label: "Organization", icon: Building, editable: true, width: 200, group: "General" },
+  { key: "code", label: "Code", icon: Hash, editable: true, group: "General" },
+  {
+    key: "employees",
+    label: "Employees",
+    icon: Users,
+    // No explicit align — auto-aligns center (numeric). See RecordView.
+    group: "System",
+    render: (row) => (
+      <span className="tabular-nums">{row.employees.toLocaleString()}</span>
+    ),
+  },
+];
+
+export function DepartmentsTable() {
+  const pathname = usePathname();
+  return (
+    <RecordView
+      persistKey={pathname}
+      title="Departments"
+      singular="Department"
+      icon={LayoutGrid}
+      fields={fields}
+      initialData={departments}
+      getPrimary={(row) => ({
+        title: row.title,
+        subtitle: row.organization,
+        initials: (row.code || row.title).slice(0, 2).toUpperCase(),
+      })}
+      makeEmptyRow={() => ({
+        id: Date.now(),
+        organization: "",
+        title: "",
+        code: "",
+        employees: 0,
+      })}
+    />
+  );
+}

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

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

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

@@ -0,0 +1,64 @@
+"use client";
+
+import {
+  CodeIcon as Hash,
+  CubeIcon as Building,
+  DotFilledIcon as CircleDot,
+  EnvelopeClosedIcon as Mail,
+  PersonIcon as Users,
+  Share2Icon as Network,
+} from "@radix-ui/react-icons";
+
+import { Badge } from "@viliha/vui-ui/badge";
+import { RecordView, type RecordField } from "@viliha/vui-ui/record-view";
+import { employees, type DemoEmployee } from "@/lib/demo-data";
+
+const fields: RecordField<DemoEmployee>[] = [
+  { key: "firstName", label: "First name", editable: true, required: true, group: "General", hideInTable: true },
+  { key: "lastName", label: "Last name", editable: true, required: true, group: "General", hideInTable: true },
+  { key: "email", label: "Email", icon: Mail, editable: true, copyable: true, width: 240, group: "General" },
+  { key: "code", label: "Code", icon: Hash, editable: true, group: "Work" },
+  { key: "department", label: "Department", editable: true, group: "Work" },
+  { key: "branch", label: "Branch", icon: Network, editable: true, group: "Work" },
+  { key: "organization", label: "Organization", icon: Building, editable: true, width: 180, group: "Work" },
+  {
+    key: "isActive",
+    label: "Status",
+    icon: CircleDot,
+    group: "System",
+    render: (row) =>
+      row.isActive ? (
+        <Badge variant="success">Active</Badge>
+      ) : (
+        <Badge variant="muted">Inactive</Badge>
+      ),
+  },
+];
+
+export function EmployeesTable() {
+  return (
+    <RecordView
+      title="Employees"
+      singular="Employee"
+      icon={Users}
+      fields={fields}
+      initialData={employees}
+      getPrimary={(row) => ({
+        title: `${row.firstName} ${row.lastName}`.trim(),
+        subtitle: row.email,
+        initials: `${row.firstName[0] ?? ""}${row.lastName[0] ?? ""}`.toUpperCase(),
+      })}
+      makeEmptyRow={() => ({
+        id: Date.now(),
+        code: "",
+        firstName: "",
+        lastName: "",
+        email: "",
+        department: "",
+        branch: "",
+        organization: "",
+        isActive: true,
+      })}
+    />
+  );
+}

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

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

package/template/app/(app)/forms/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("/forms");
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}