List, create, inspect, edit, archive, and delete domain records.
"use client";
import {ThemeProvider as LibraryDemoThemeProvider} from "next-themes";
"use client";
import { useState } from "react";
import {
ResourceManager,
ResourceManagerAction,
ResourceManagerActions,
ResourceManagerBody,
ResourceManagerDelete,
ResourceManagerDescription,
ResourceManagerDetails,
ResourceManagerEmpty,
ResourceManagerForm,
ResourceManagerHeader,
ResourceManagerHeading,
ResourceManagerInspector,
ResourceManagerInspectorHeader,
ResourceManagerInspectorTitle,
ResourceManagerList,
ResourceManagerRecord,
ResourceManagerRecordMeta,
ResourceManagerRecordStatus,
ResourceManagerRecordTitle,
ResourceManagerTitle,
ResourceManagerToolbar,
type ResourceManagerVariant,
} from "@/components/ui/uai-resource-manager";
import {
ConfirmationDialogActions,
ConfirmationDialogCancel,
ConfirmationDialogConfirm,
ConfirmationDialogContent,
ConfirmationDialogDescription,
ConfirmationDialogTitle,
ConfirmationDialogTrigger,
} from "@/components/ui/uai-resource-manager-utils/src-components-ui-uai-confirmation-dialog";
import {
DataTableToolbarButton,
DataTableToolbarSearch,
} from "@/components/ui/uai-resource-manager-utils/src-components-ui-uai-data-table-toolbar";
import {
DescriptionListDetails,
DescriptionListItem,
DescriptionListTerm,
} from "@/components/ui/uai-resource-manager-utils/src-components-ui-uai-description-list";
import {
EmptyStateContent,
EmptyStateDescription,
EmptyStateHeader,
EmptyStateTitle,
} from "@/components/ui/uai-resource-manager-utils/src-components-ui-uai-empty-state";
import { FormField, FormFieldInput, FormFieldLabel } from "@/components/ui/uai-resource-manager-utils/src-components-ui-uai-form-field";
type Supplier = {
id: string;
name: string;
owner: string;
region: string;
renewal: string;
spend: string;
archived: boolean;
};
const initialSuppliers: Supplier[] = [
{
id: "SUP-1042",
name: "Northwind Freight",
owner: "Priya Raman",
region: "Rotterdam, NL",
renewal: "Jan 14, 2027",
spend: "$184,200",
archived: false,
},
{
id: "SUP-1057",
name: "Halden Packaging",
owner: "Marcus Lee",
region: "Gothenburg, SE",
renewal: "Nov 2, 2026",
spend: "$62,950",
archived: false,
},
{
id: "SUP-1063",
name: "Cobre Components",
owner: "Ana Duarte",
region: "Monterrey, MX",
renewal: "Mar 30, 2027",
spend: "$97,410",
archived: false,
},
{
id: "SUP-0988",
name: "Lindqvist Textiles",
owner: "Priya Raman",
region: "Tampere, FI",
renewal: "Ended Aug 31, 2026",
spend: "$0",
archived: true,
},
];
export function ResourceManagerPreview({
variant = "split",
}: {
variant?: ResourceManagerVariant;
}) {
const [suppliers, setSuppliers] = useState(initialSuppliers);
const [selected, setSelected] = useState("SUP-1042");
const [search, setSearch] = useState("");
const [showArchived, setShowArchived] = useState(false);
const [editing, setEditing] = useState(false);
const [draft, setDraft] = useState({ name: "", owner: "" });
const query = search.trim().toLowerCase();
const visible = suppliers.filter(
(supplier) =>
(showArchived || !supplier.archived) &&
`${supplier.name} ${supplier.id}`.toLowerCase().includes(query),
);
const current = suppliers.find((supplier) => supplier.id === selected);
const update = (patch: Partial<Supplier>) =>
setSuppliers((list) =>
list.map((supplier) => (supplier.id === selected ? { ...supplier, ...patch } : supplier)),
);
const inspect = (id: string) => {
setSelected(id);
setEditing(false);
};
const create = () => {
const id = `SUP-${1100 + suppliers.length}`;
const name = "New supplier";
setSuppliers((list) => [
{ id, name, owner: "Unassigned", region: "—", renewal: "—", spend: "$0", archived: false },
...list,
]);
setSelected(id);
setDraft({ name, owner: "Unassigned" });
setEditing(true);
};
return (
<ResourceManager variant={variant} value={selected} onValueChange={inspect}>
<ResourceManagerHeader>
<ResourceManagerHeading>
<ResourceManagerTitle>Suppliers</ResourceManagerTitle>
<ResourceManagerDescription>
{suppliers.filter((supplier) => !supplier.archived).length} active contracts ·
Procurement EU
</ResourceManagerDescription>
</ResourceManagerHeading>
<ResourceManagerActions>
<ResourceManagerAction emphasis="primary" onClick={create}>
New supplier
</ResourceManagerAction>
</ResourceManagerActions>
</ResourceManagerHeader>
<ResourceManagerToolbar search={search} onSearchChange={setSearch}>
<DataTableToolbarSearch label="Search suppliers" placeholder="Search by name or ID…" />
<DataTableToolbarButton
aria-pressed={showArchived}
onClick={() => setShowArchived((value) => !value)}
>
Show archived
</DataTableToolbarButton>
</ResourceManagerToolbar>
<ResourceManagerBody>
{visible.length ? (
<ResourceManagerList aria-label="Suppliers">
{visible.map((supplier) => (
<ResourceManagerRecord key={supplier.id} value={supplier.id}>
<ResourceManagerRecordTitle>{supplier.name}</ResourceManagerRecordTitle>
<ResourceManagerRecordMeta>
{supplier.id} · {supplier.spend}
</ResourceManagerRecordMeta>
<ResourceManagerRecordStatus
tone={
supplier.archived
? "neutral"
: supplier.renewal.startsWith("Nov")
? "warning"
: "success"
}
>
{supplier.archived
? "Archived"
: supplier.renewal.startsWith("Nov")
? "Renews soon"
: "Active"}
</ResourceManagerRecordStatus>
</ResourceManagerRecord>
))}
</ResourceManagerList>
) : (
<ResourceManagerEmpty style={{ flex: "999 1 320px" }}>
<EmptyStateContent>
<EmptyStateHeader>
<EmptyStateTitle>No suppliers match “{search}”</EmptyStateTitle>
<EmptyStateDescription>
Check the spelling or include archived suppliers.
</EmptyStateDescription>
</EmptyStateHeader>
</EmptyStateContent>
</ResourceManagerEmpty>
)}
{current ? (
<ResourceManagerInspector>
<ResourceManagerInspectorHeader>
<ResourceManagerInspectorTitle>{current.name}</ResourceManagerInspectorTitle>
{editing ? null : (
<ResourceManagerActions>
<ResourceManagerAction
onClick={() => {
setDraft({ name: current.name, owner: current.owner });
setEditing(true);
}}
>
Edit
</ResourceManagerAction>
<ResourceManagerAction onClick={() => update({ archived: !current.archived })}>
{current.archived ? "Restore" : "Archive"}
</ResourceManagerAction>
<ResourceManagerDelete>
<ConfirmationDialogTrigger>Delete</ConfirmationDialogTrigger>
<ConfirmationDialogContent>
<ConfirmationDialogTitle>Delete {current.name}?</ConfirmationDialogTitle>
<ConfirmationDialogDescription>
<p style={{ margin: 0 }}>
Purchase orders keep their history, but the supplier record and its
contacts are removed.
</p>
</ConfirmationDialogDescription>
<ConfirmationDialogActions>
<ConfirmationDialogCancel>Keep supplier</ConfirmationDialogCancel>
<ConfirmationDialogConfirm
onClick={() => {
setSuppliers((list) => list.filter((item) => item.id !== current.id));
setSelected("");
}}
>
Delete supplier
</ConfirmationDialogConfirm>
</ConfirmationDialogActions>
</ConfirmationDialogContent>
</ResourceManagerDelete>
</ResourceManagerActions>
)}
</ResourceManagerInspectorHeader>
{editing ? (
<ResourceManagerForm
onSubmit={(event) => {
event.preventDefault();
update({ name: draft.name.trim() || current.name, owner: draft.owner });
setEditing(false);
}}
>
<FormField
variant={variant === "compact" ? "compact" : "outlined"}
value={draft.name}
onValueChange={(name) => setDraft((value) => ({ ...value, name }))}
required
>
<FormFieldLabel>Supplier name</FormFieldLabel>
<FormFieldInput name="name" />
</FormField>
<FormField
variant={variant === "compact" ? "compact" : "outlined"}
value={draft.owner}
onValueChange={(owner) => setDraft((value) => ({ ...value, owner }))}
>
<FormFieldLabel>Account owner</FormFieldLabel>
<FormFieldInput name="owner" />
</FormField>
<ResourceManagerActions>
<ResourceManagerAction type="submit" emphasis="primary">
Save changes
</ResourceManagerAction>
<ResourceManagerAction onClick={() => setEditing(false)}>
Cancel
</ResourceManagerAction>
</ResourceManagerActions>
</ResourceManagerForm>
) : (
<ResourceManagerDetails>
<DescriptionListItem>
<DescriptionListTerm>Supplier ID</DescriptionListTerm>
<DescriptionListDetails>{current.id}</DescriptionListDetails>
</DescriptionListItem>
<DescriptionListItem>
<DescriptionListTerm>Account owner</DescriptionListTerm>
<DescriptionListDetails>{current.owner}</DescriptionListDetails>
</DescriptionListItem>
<DescriptionListItem>
<DescriptionListTerm>Region</DescriptionListTerm>
<DescriptionListDetails>{current.region}</DescriptionListDetails>
</DescriptionListItem>
<DescriptionListItem>
<DescriptionListTerm>Contract renewal</DescriptionListTerm>
<DescriptionListDetails>{current.renewal}</DescriptionListDetails>
</DescriptionListItem>
<DescriptionListItem>
<DescriptionListTerm>Spend, last 12 months</DescriptionListTerm>
<DescriptionListDetails>{current.spend}</DescriptionListDetails>
</DescriptionListItem>
</ResourceManagerDetails>
)}
</ResourceManagerInspector>
) : null}
</ResourceManagerBody>
</ResourceManager>
);
}
function SourceSpecimen(){return <ResourceManagerPreview/>}
export default function LibraryRegistryPreview(){return <LibraryDemoThemeProvider defaultTheme="dark" enableSystem={false}><div data-component-demo data-demo-theme="dark" data-theme="dark" className="dark" style={{background:"var(--background)",color:"var(--foreground)"}}><div className="relative w-full min-w-0 max-w-5xl min-h-[400px] flex items-center justify-center"><SourceSpecimen/></div></div></LibraryDemoThemeProvider>}