Foliohospitality
Guest account with charge, payment and refund lines, period band, minor-unit balance due, tabs slot and callback-driven editing.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/folioDefault
folio-demo.tsx
import type { DateOnly } from "@plott/webkit-time";import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";import { Folio, type FolioLine } from "@/components/ui/folio";
export const demoLines: FolioLine[] = [ { id: "c1", kind: "charge", description: "Room, 3 nights", amountMinor: 36000, at: Date.UTC(2026, 0, 5, 15) }, { id: "c2", kind: "charge", description: "Minibar", amountMinor: 1250, at: Date.UTC(2026, 0, 6, 9) }, { id: "c3", kind: "charge", description: "Late checkout", amountMinor: 2000, voided: true }, { id: "p1", kind: "payment", description: "Deposit", amountMinor: 20000, at: Date.UTC(2026, 0, 1, 10) }, { id: "r1", kind: "refund", description: "Deposit refund", amountMinor: 500 },];
export default function FolioDemo() { const [lines, setLines] = [demoLines, () => {}] as const; void setLines; return ( <Folio title="Room 204" currency="USD" lines={lines} period={{ checkIn: "2026-01-05" as DateOnly, checkOut: "2026-01-08" as DateOnly }} tabs={ <Tabs defaultValue="ledger"> <TabsList> <TabsTrigger value="ledger">Ledger</TabsTrigger> <TabsTrigger value="notes">Notes</TabsTrigger> </TabsList> </Tabs> } onAddCharge={async () => {}} onVoid={async () => {}} /> );}