{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "rental-portfolio",
  "title": "Rental portfolio",
  "description": "A property dashboard in Tiles: portfolio figures, an area chart of income against payouts, a rent-collection dial and recent transfers.",
  "registryDependencies": [
    "utils",
    "@manniche/data-tile",
    "@manniche/chart-kit",
    "@manniche/area-chart",
    "@manniche/dial",
    "@manniche/transaction-list"
  ],
  "files": [
    {
      "path": "registry/manniche/rental-portfolio/rental-portfolio.tsx",
      "content": "// A rental portfolio screen: portfolio figures, income vs payout, rent collection and recent transfers.\nimport { cn } from '@/lib/utils'\nimport { AreaChart, type AreaPoint } from '@/registry/manniche/area-chart/area-chart'\nimport { BigNumber } from '@/registry/manniche/chart-kit/chart-kit'\nimport type { ValueFormat } from '@/registry/manniche/chart-kit/chart-utils'\nimport { DataTile, TileFact } from '@/registry/manniche/data-tile/data-tile'\nimport { Dial, type DialZone } from '@/registry/manniche/dial/dial'\nimport { TransactionList, type Transaction } from '@/registry/manniche/transaction-list/transaction-list'\n\nexport type RentalPortfolioData = {\n  figures: { id: string; title: string; value: number; format?: ValueFormat }[]\n  income: { title: string; points: AreaPoint[]; format?: ValueFormat }\n  collection: { title: string; value: number; zones: DialZone[]; caption: string }\n  transfers: { title: string; items: Transaction[]; today?: string; format?: ValueFormat }\n}\n\nexport type RentalPortfolioLabels = { note?: string }\n\nexport type RentalPortfolioProps = { data: RentalPortfolioData; labels?: RentalPortfolioLabels; className?: string }\n\nexport function RentalPortfolio({ data, labels, className }: RentalPortfolioProps) {\n  const note = labels?.note ?? 'Example data.'\n  return (\n    <div className={cn('@container w-full rounded-2xl bg-background p-3 text-foreground', className)}>\n      <div className=\"grid grid-cols-1 gap-3 @lg:grid-cols-3 @3xl:grid-cols-6\">\n        {data.figures.map((f, i) => (\n          <div key={f.id} className=\"@3xl:col-span-2\">\n            <DataTile className=\"h-full\" title={f.title} inverted={i === 0} density=\"compact\">\n              <TileFact>\n                <BigNumber value={f.value} format={f.format} size=\"lg\" />\n              </TileFact>\n            </DataTile>\n          </div>\n        ))}\n        <div className=\"@lg:col-span-3 @3xl:col-span-4\">\n          <DataTile className=\"h-full\" title={data.income.title} footer={note}>\n            <AreaChart data={data.income.points} label={data.income.title} format={data.income.format} compare />\n          </DataTile>\n        </div>\n        <div className=\"@lg:col-span-3 @3xl:col-span-2\">\n          <DataTile className=\"h-full\" title={data.collection.title} footer={note}>\n            <Dial value={data.collection.value} min={0} max={100} zones={data.collection.zones} label={data.collection.title} caption={data.collection.caption} format={{ suffix: '%' }} />\n          </DataTile>\n        </div>\n        <div className=\"@lg:col-span-3 @3xl:col-span-6\">\n          <DataTile className=\"h-full\" title={data.transfers.title} footer={note}>\n            <TransactionList data={data.transfers.items} label={data.transfers.title} today={data.transfers.today} format={data.transfers.format} />\n          </DataTile>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "templates"
  ],
  "type": "registry:block"
}