Tabs

"use client"

import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/keyline/ui/tabs"

const ORDERS = [
  ["DM-4107", "120 cases, copy paper", "Thu 12 Nov"],
  ["DM-4126", "80 cases, copy paper", "Delivered"],
  ["DM-4031", "20 cases, cardstock", "Delivered"],
]

export function ClientAccount() {
  return (
    <Tabs defaultValue="overview">
      <TabsList aria-label="Lackawanna County">
        <TabsTab value="overview">Overview</TabsTab>
        <TabsTab value="orders" count={ORDERS.length}>
          Orders
        </TabsTab>
        <TabsTab value="notes">Notes</TabsTab>
      </TabsList>
      <TabsPanel value="overview" className="grid gap-2 pt-4 text-[14px]">
        <p className="m-0">Lackawanna County has bought from the Scranton branch since 2003, through the purchasing office on North Washington Avenue.</p>
        <p className="m-0 text-kl-ink-2">Account rep: Dwight Schrute. Billing: Angela Martin.</p>
      </TabsPanel>
      <TabsPanel value="orders" className="pt-4">
        <ul className="m-0 grid list-none gap-2 p-0 text-[14px]">
          {ORDERS.map(([id, what, when]) => (
            <li key={id} className="grid grid-cols-[auto_1fr_auto] gap-3">
              <span className="font-kl-mono text-[13px]">{id}</span>
              <span>{what}</span>
              <span className="text-kl-ink-2">{when}</span>
            </li>
          ))}
        </ul>
      </TabsPanel>
      <TabsPanel value="notes" className="pt-4 text-[14px]">
        <p className="m-0">The new purchasing officer prefers calls to email. Deliveries go to the loading dock, not reception.</p>
      </TabsPanel>
    </Tabs>
  )
}

"use client"

import { useState } from "react"
import { Tabs, TabsList, TabsTab } from "@/components/keyline/ui/tabs"

const CALLS = [
  { who: "Lackawanna County", rep: "Dwight", done: true },
  { who: "Blue Cross of Pennsylvania", rep: "Jim", done: false },
  { who: "Harper Collins", rep: "Phyllis", done: true },
  { who: "Mount Airy Casino", rep: "Jim", done: false },
  { who: "Penn Paper Supply", rep: "Stanley", done: false },
]

const VIEWS = [
  { value: "all", label: "All", test: () => true },
  { value: "todo", label: "To call", test: (c: (typeof CALLS)[number]) => !c.done },
  { value: "done", label: "Called", test: (c: (typeof CALLS)[number]) => c.done },
]

export function CallViews() {
  const [view, setView] = useState("todo")
  const shown = CALLS.filter(VIEWS.find((v) => v.value === view)!.test)

  return (
    <div className="grid gap-4">
      {/* no panels: the tabs switch a view of one list */}
      <Tabs value={view} onValueChange={(v) => setView(v as string)}>
        <TabsList aria-label="Calls this week">
          {VIEWS.map((v) => (
            <TabsTab key={v.value} value={v.value} count={CALLS.filter(v.test).length}>
              {v.label}
            </TabsTab>
          ))}
        </TabsList>
      </Tabs>
      <ul aria-label="Calls" className="m-0 grid list-none gap-2 p-0 text-[14px]">
        {shown.map((c) => (
          <li key={c.who}>
            {c.who} <span className="text-kl-ink-3">· {c.rep}</span>
          </li>
        ))}
      </ul>
    </div>
  )
}