Portfolio card

"use client"

import * as React from "react"
import { DashboardGrid } from "@/components/candor/dashboard-grid"
import { DataTable, type DataTableColumn } from "@/components/candor/data-table"
import { PortfolioCard, type PortfolioEstimate, type PortfolioStatus } from "@/components/candor/portfolio-card"
import { ToggleGroup, ToggleGroupItem } from "@/components/candor/ui/toggle-group"

type Client = {
  id: string
  name: string
  hue: 1 | 2 | 3 | 4 | 5
  status: PortfolioStatus
  // The same count each workspace's own home page and navigation show.
  needsYou: number | null
  mode: string
  summary: string
  health: string
  environments: string
  open: string
  estimate: PortfolioEstimate
}

const clients: Client[] = [
  { id: "harbour", name: "Harbour Foods", hue: 2, status: { word: "Healthy", tone: "success" }, needsYou: 2, mode: "Solo", summary: "Two workstreams running. The licence review found seats nobody has used in 90 days.", health: "84", environments: "4", open: "4", estimate: { value: "$22k a year", basis: "18 idle seats at list price" } },
  { id: "acme", name: "Acme Robotics", hue: 3, status: { word: "Needs work", tone: "warning" }, needsYou: 1, mode: "Team", summary: "Work arrives from their tracker and ships as pull requests into their repository.", health: "72", environments: "5", open: "6", estimate: { value: "$43k a year", basis: "unused add-ons at list price" } },
  { id: "meridian", name: "Meridian Clinics", hue: 4, status: { word: "Connection expired", tone: "destructive" }, needsYou: null, mode: "Solo", summary: "Read-only review delivered. No model key connected, so agents are off until one is.", health: "61", environments: "1", open: "0", estimate: { value: "$83k a year", basis: "duplicate licences at list price" } },
  { id: "coastal", name: "Coastal Credit", hue: 1, status: { word: "Healthy", tone: "success" }, needsYou: 0, mode: "Solo", summary: "Quiet. The next review is scheduled for the spring release.", health: "91", environments: "2", open: "0", estimate: { value: "$5k a year", basis: "4 idle seats at list price" } },
]

const columns: DataTableColumn<Client>[] = [
  { id: "name", label: "Client", value: (c) => c.name, render: (c) => <a href={`#${c.id}`} className="underline underline-offset-2">{c.name}</a> },
  { id: "status", label: "Status", value: (c) => c.status.word },
  { id: "needs", label: "Needs you", value: (c) => c.needsYou, numeric: true, render: (c) => (c.needsYou === null ? "Not checked" : c.needsYou === 0 ? "All clear" : String(c.needsYou)) },
  { id: "health", label: "Health", value: (c) => Number(c.health), numeric: true },
  { id: "estimate", label: "Reclaimable (estimate)", value: (c) => c.estimate.value, render: (c) => `${c.estimate.value}, estimate from ${c.estimate.basis}` },
]

export default function Example() {
  const [view, setView] = React.useState("cards")
  return (
    <div className="flex flex-col gap-4">
      <ToggleGroup type="single" variant="outline" size="sm" value={view} onValueChange={(v) => v && setView(v)} aria-label="Show clients as" className="self-end">
        <ToggleGroupItem value="cards">Cards</ToggleGroupItem>
        <ToggleGroupItem value="list">List</ToggleGroupItem>
      </ToggleGroup>
      {view === "cards" ? (
        <DashboardGrid minTileWidth={280} className="w-full">
          {clients.map((c) => (
            <PortfolioCard
              key={c.id}
              name={c.name}
              href={`#${c.id}`}
              hue={c.hue}
              status={c.status}
              needsYou={c.needsYou}
              mode={c.mode}
              summary={c.summary}
              figures={[
                { label: "Health", value: c.health },
                { label: "Environments", value: c.environments },
                { label: "Open", value: c.open },
              ]}
              estimate={c.estimate}
            />
          ))}
        </DashboardGrid>
      ) : (
        <DataTable<Client> title="Clients" columns={columns} rows={clients} rowId={(c) => c.id} />
      )}
    </div>
  )
}