@viliha/vui-ui 1.1.8 → 1.3.0

package/template/app/(app)/system/countries/countries-table.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import {
+  BookmarkIcon as Flag,
+  CodeIcon as Hash,
+  GlobeIcon as Globe,
+} from "@radix-ui/react-icons";
+
+import { RecordView, type RecordField } from "@viliha/vui-ui/record-view";
+import { countries, type Country } from "@/lib/mock-data";
+
+const fields: RecordField<Country>[] = [
+  { key: "name", label: "Name", editable: true, required: true, group: "General", hideInTable: true },
+  { key: "code", label: "Code", icon: Hash, editable: true, group: "General" },
+  { key: "region", label: "Region", icon: Globe, editable: true, width: 220, group: "General" },
+];
+
+export function CountriesTable() {
+  return (
+    <RecordView
+      title="Countries"
+      singular="Country"
+      icon={Flag}
+      fields={fields}
+      initialData={countries}
+      getPrimary={(row) => ({
+        title: row.name,
+        subtitle: row.code,
+        initials: row.code.slice(0, 2).toUpperCase(),
+      })}
+      makeEmptyRow={() => ({ id: Date.now(), name: "", code: "", region: "" })}
+    />
+  );
+}

package/template/app/(app)/system/countries/page.tsx

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

package/template/app/(app)/system/currencies/currencies-table.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import {
+  CodeIcon as Hash,
+  TokensIcon as Banknote,
+  TokensIcon as Coins,
+} from "@radix-ui/react-icons";
+
+import { RecordView, type RecordField } from "@viliha/vui-ui/record-view";
+import { currencies, type Currency } from "@/lib/mock-data";
+
+const fields: RecordField<Currency>[] = [
+  { key: "name", label: "Name", editable: true, required: true, group: "General", hideInTable: true },
+  { key: "code", label: "Code", icon: Hash, editable: true, group: "General" },
+  { key: "symbol", label: "Symbol", icon: Banknote, editable: true, group: "General" },
+];
+
+export function CurrenciesTable() {
+  return (
+    <RecordView
+      title="Currencies"
+      singular="Currency"
+      icon={Coins}
+      fields={fields}
+      initialData={currencies}
+      getPrimary={(row) => ({
+        title: row.name,
+        subtitle: row.code,
+        initials: row.code.slice(0, 2).toUpperCase(),
+      })}
+      makeEmptyRow={() => ({ id: Date.now(), name: "", code: "", symbol: "" })}
+    />
+  );
+}

package/template/app/(app)/system/currencies/page.tsx

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

package/template/app/(app)/system/languages/languages-table.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import {
+  CodeIcon as Hash,
+  TextIcon as LanguagesIcon,
+} from "@radix-ui/react-icons";
+
+import { RecordView, type RecordField } from "@viliha/vui-ui/record-view";
+import { languages, type Language } from "@/lib/mock-data";
+
+const fields: RecordField<Language>[] = [
+  { key: "name", label: "Name", editable: true, required: true, group: "General", hideInTable: true },
+  { key: "code", label: "Code", icon: Hash, editable: true, group: "General" },
+];
+
+export function LanguagesTable() {
+  return (
+    <RecordView
+      title="Languages"
+      singular="Language"
+      icon={LanguagesIcon}
+      fields={fields}
+      initialData={languages}
+      getPrimary={(row) => ({
+        title: row.name,
+        subtitle: row.code,
+        initials: row.code.slice(0, 2).toUpperCase(),
+      })}
+      makeEmptyRow={() => ({ id: Date.now(), name: "", code: "" })}
+    />
+  );
+}

package/template/app/(app)/system/languages/page.tsx

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

package/template/app/(app)/system/regions/page.tsx

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

package/template/app/(app)/system/regions/regions-table.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import {
+  CodeIcon as Hash,
+  GlobeIcon as Globe,
+} from "@radix-ui/react-icons";
+
+import { RecordView, type RecordField } from "@viliha/vui-ui/record-view";
+import { regions, type Region } from "@/lib/mock-data";
+
+const fields: RecordField<Region>[] = [
+  { key: "name", label: "Name", editable: true, required: true, group: "General", hideInTable: true },
+  { key: "code", label: "Code", icon: Hash, editable: true, group: "General" },
+];
+
+export function RegionsTable() {
+  return (
+    <RecordView
+      title="Regions"
+      singular="Region"
+      icon={Globe}
+      fields={fields}
+      initialData={regions}
+      getPrimary={(row) => ({
+        title: row.name,
+        subtitle: row.code,
+        initials: row.code.slice(0, 2).toUpperCase(),
+      })}
+      makeEmptyRow={() => ({ id: Date.now(), name: "", code: "" })}
+    />
+  );
+}

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

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

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

@@ -0,0 +1,97 @@
+"use client";
+
+import {
+  CardStackIcon as CreditCard,
+  CodeIcon as Hash,
+  DotFilledIcon as CircleDot,
+  EnvelopeClosedIcon as Mail,
+  TokensIcon as Banknote,
+} from "@radix-ui/react-icons";
+
+import { Badge } from "@viliha/vui-ui/badge";
+import { RecordView, type RecordField } from "@viliha/vui-ui/record-view";
+
+type Payment = {
+  id: string;
+  amount: number;
+  status: "pending" | "processing" | "success" | "failed";
+  email: string;
+};
+
+const data: Payment[] = [
+  { id: "p_001", amount: 199, status: "success", email: "ava@example.com" },
+  { id: "p_002", amount: 49, status: "pending", email: "haruto@example.com" },
+  { id: "p_003", amount: 899, status: "processing", email: "lena@example.com" },
+  { id: "p_004", amount: 1299, status: "success", email: "chidi@example.com" },
+  { id: "p_005", amount: 12, status: "failed", email: "mia@example.com" },
+];
+
+const statusVariant: Record<
+  Payment["status"],
+  "success" | "warning" | "secondary" | "destructive"
+> = {
+  success: "success",
+  processing: "secondary",
+  pending: "warning",
+  failed: "destructive",
+};
+
+const fields: RecordField<Payment>[] = [
+  { key: "email", label: "Email", icon: Mail, editable: true, required: true, copyable: true, width: 240, group: "General", hideInTable: true },
+  {
+    key: "id",
+    label: "Payment ID",
+    icon: Hash,
+    group: "General",
+    render: (row) => <span className="font-mono">{row.id}</span>,
+  },
+  {
+    key: "status",
+    label: "Status",
+    icon: CircleDot,
+    group: "General",
+    render: (row) => (
+      <Badge variant={statusVariant[row.status]} className="capitalize">
+        {row.status}
+      </Badge>
+    ),
+  },
+  {
+    key: "amount",
+    label: "Amount",
+    icon: Banknote,
+    align: "right",
+    group: "System",
+    render: (row) => (
+      <span className="tabular-nums">
+        {new Intl.NumberFormat("en-US", {
+          style: "currency",
+          currency: "USD",
+        }).format(row.amount)}
+      </span>
+    ),
+  },
+];
+
+export function UsersTable() {
+  return (
+    <RecordView
+      title="Payments"
+      singular="Payment"
+      icon={CreditCard}
+      fields={fields}
+      initialData={data}
+      getPrimary={(row) => ({
+        title: row.email,
+        subtitle: row.id,
+        initials: row.email.slice(0, 2).toUpperCase(),
+      })}
+      makeEmptyRow={(): Payment => ({
+        id: `p_${Date.now()}`,
+        amount: 0,
+        status: "pending",
+        email: "",
+      })}
+    />
+  );
+}