feat: Lakehouse — every table Ava reads, with counts; claims gets total, search and filters
- /lakehouse: one card per Databricks table from the lakehouse_tables stats view (rows, date span, dollars); reference tables open a plain row view - /claims: exact total (stats view when unfiltered; platform count, capped at 10,000, when filtered), search on claim id / provider / CPT, dropdown filters fed by the API's distinct values, service-date range - sidebar: 'Lakehouse' replaces 'Claims'; claims pages light it too - pairs with 13_lakehouse.sql (rdbms templates + record views) Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
parent
5e0649fb7e
commit
1c81912b17
@ -6,6 +6,7 @@ import { QueueScreen } from './screens/QueueScreen';
|
||||
import { CaseScreen } from './screens/CaseScreen';
|
||||
import { RunReviewScreen } from './screens/RunReviewScreen';
|
||||
import { ClaimsScreen } from './screens/ClaimsScreen';
|
||||
import { LakehouseScreen, LakehouseTableScreen } from './screens/LakehouseScreen';
|
||||
|
||||
/**
|
||||
* Routes.
|
||||
@ -27,6 +28,8 @@ export function App() {
|
||||
<Route path="/c/:id" element={<CaseScreen />} />
|
||||
<Route path="/review" element={<RunReviewScreen />} />
|
||||
<Route path="/claims" element={<ClaimsScreen />} />
|
||||
<Route path="/lakehouse" element={<LakehouseScreen />} />
|
||||
<Route path="/lakehouse/:table" element={<LakehouseTableScreen />} />
|
||||
{/* Awaiting Review is the landing page, not "all cases": it is the
|
||||
queue with work in it, and the one the console exists to serve. */}
|
||||
<Route path="/" element={<Navigate to="/q/review" replace />} />
|
||||
|
||||
@ -34,12 +34,18 @@ export interface RecordViewField {
|
||||
}
|
||||
|
||||
export interface RecordViewResponse {
|
||||
config: { fields: RecordViewField[] };
|
||||
config: {
|
||||
fields: RecordViewField[];
|
||||
/** Distinct values per `is_filter` field, narrowed by the active filters.
|
||||
* Date fields come back as timestamps; the console ignores those. */
|
||||
filter_options?: Record<string, unknown[]>;
|
||||
};
|
||||
data?: Row[];
|
||||
records?: Row[];
|
||||
total?: number;
|
||||
page?: number;
|
||||
limit?: number;
|
||||
pagination?: { page: number; limit: number; total_count: number; total_pages: number; total_is_capped?: boolean };
|
||||
}
|
||||
|
||||
/** A record-view row. Values are whatever the column's data_type implies. */
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { NavLink, Outlet, useNavigate } from 'react-router-dom';
|
||||
import { NavLink, Outlet, useLocation, useNavigate } from 'react-router-dom';
|
||||
import { Database, LogOut, Radar } from 'lucide-react';
|
||||
import { useZino } from '../api/provider';
|
||||
import { QUEUES, prettyRole } from '../api/config';
|
||||
@ -19,6 +19,8 @@ import { Button } from '../components/core';
|
||||
* it is a worse failure than showing a button that comes back "not permitted".
|
||||
*/
|
||||
export function Shell() {
|
||||
const { pathname } = useLocation();
|
||||
const onLakehouse = pathname.startsWith('/lakehouse') || pathname.startsWith('/claims');
|
||||
const { user, logout } = useZino();
|
||||
const navigate = useNavigate();
|
||||
|
||||
@ -90,26 +92,23 @@ export function Shell() {
|
||||
</NavLink>
|
||||
</li>
|
||||
))}
|
||||
{/* The data itself, after the pipeline: every claim in the lakehouse. */}
|
||||
{/* The data itself, after the pipeline: every table Ava reads. Claims
|
||||
pages live under it, so they light this entry too. */}
|
||||
<li className="shrink-0 lg:mt-3 lg:shrink lg:border-t lg:border-line lg:pt-3">
|
||||
<NavLink
|
||||
to="/claims"
|
||||
className={({ isActive }) =>
|
||||
to="/lakehouse"
|
||||
className={() =>
|
||||
`block rounded-md px-3 py-2 transition-colors ${
|
||||
isActive ? 'bg-brand text-brand-fg' : 'text-muted hover:bg-panel2 hover:text-ink'
|
||||
onLakehouse ? 'bg-brand text-brand-fg' : 'text-muted hover:bg-panel2 hover:text-ink'
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<span className="inline-flex items-center gap-1.5 text-[13px] font-semibold whitespace-nowrap">
|
||||
<Database className="h-3.5 w-3.5" /> Claims
|
||||
<Database className="h-3.5 w-3.5" /> Lakehouse
|
||||
</span>
|
||||
<span className={`hidden text-[11px] lg:block ${isActive ? 'text-brand-fg/70' : 'text-faint'}`}>
|
||||
The lakehouse, row by row
|
||||
<span className={`hidden text-[11px] lg:block ${onLakehouse ? 'text-brand-fg/70' : 'text-faint'}`}>
|
||||
Every table Ava reads
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -1,37 +1,39 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import { ChevronLeft, ChevronRight, Database, X } from 'lucide-react';
|
||||
import { ArrowLeft, ChevronLeft, ChevronRight, Database, Search, X } from 'lucide-react';
|
||||
import { useQuery, useZino } from '../api/provider';
|
||||
import { LAKEHOUSE } from '../api/config';
|
||||
import type { Tone } from '../api/config';
|
||||
import type { RecordFilter, Row } from '../api/types';
|
||||
import { Badge, ErrorNote, Spinner } from '../components/core';
|
||||
import { Badge, ErrorNote, Input, Select, Spinner } from '../components/core';
|
||||
import { CARC, money, num, shortDate, str } from '../format';
|
||||
|
||||
/**
|
||||
* The claims table — the lakehouse rows themselves, read-only.
|
||||
*
|
||||
* Reached two ways: from the sidebar (unfiltered, newest first) and from a
|
||||
* finding's numbers ("216 claims" → the exact rows Ava counted). The URL IS
|
||||
* Reached three ways: from the Lakehouse overview, from the sidebar, and from
|
||||
* a finding's numbers ("216 claims" → the exact rows Ava counted). The URL IS
|
||||
* the filter set, so a link can be copied into an email and lands on the same
|
||||
* rows. Everything is server-side: paging, filtering and the total come from
|
||||
* /view/recordview against the Databricks-backed record view.
|
||||
* rows. Everything is server-side: paging, filtering, search and the total
|
||||
* come from /view/recordview against the Databricks-backed record view, and
|
||||
* the dropdown options are the distinct values the platform returns for the
|
||||
* current filter set.
|
||||
*/
|
||||
|
||||
const PAGE = 50;
|
||||
|
||||
/** URL param → record-view column, with the control shape it compiles to. */
|
||||
/** URL param → record-view column. */
|
||||
const DIMS: Array<{ key: string; col: string; label: string }> = [
|
||||
{ key: 'payer', col: 'payer', label: 'Insurer' },
|
||||
{ key: 'department', col: 'department', label: 'Department' },
|
||||
{ key: 'code', col: 'denial_reason_code', label: 'Reason code' },
|
||||
{ key: 'category', col: 'denial_category', label: 'Denial category' },
|
||||
{ key: 'status', col: 'status', label: 'Status' },
|
||||
{ key: 'code', col: 'denial_reason_code', label: 'Reason code' },
|
||||
{ key: 'appeal', col: 'appeal_status', label: 'Appeal' },
|
||||
{ key: 'site', col: 'site', label: 'Site' },
|
||||
{ key: 'desk', col: 'registration_desk', label: 'Desk' },
|
||||
{ key: 'provider', col: 'provider', label: 'Provider' },
|
||||
{ key: 'cpt', col: 'procedure_code', label: 'CPT' },
|
||||
{ key: 'category', col: 'denial_category', label: 'Denial category' },
|
||||
];
|
||||
const RANGES: Array<{ from: string; to: string; col: string; label: string }> = [
|
||||
{ from: 'from', to: 'to', col: 'service_date', label: 'Service date' },
|
||||
@ -39,39 +41,17 @@ const RANGES: Array<{ from: string; to: string; col: string; label: string }> =
|
||||
{ from: 'dl_from', to: 'dl_to', col: 'appeal_deadline', label: 'Appeal deadline' },
|
||||
];
|
||||
|
||||
const STATUS_TONE: Record<string, Tone> = {
|
||||
paid: 'emerald',
|
||||
partial: 'amber',
|
||||
denied: 'rose',
|
||||
pending: 'slate',
|
||||
};
|
||||
const APPEAL_LABEL: Record<string, string> = {
|
||||
not_filed: 'not filed',
|
||||
filed: 'filed',
|
||||
overturned: 'overturned',
|
||||
upheld: 'upheld',
|
||||
};
|
||||
const STATUS_TONE: Record<string, Tone> = { paid: 'emerald', partial: 'amber', denied: 'rose', pending: 'slate' };
|
||||
const APPEAL_LABEL: Record<string, string> = { not_filed: 'not filed', filed: 'filed', overturned: 'overturned', upheld: 'upheld' };
|
||||
|
||||
export function ClaimsScreen() {
|
||||
const { client } = useZino();
|
||||
const [params] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
const page = Math.max(1, Number(params.get('page') ?? '1') || 1);
|
||||
|
||||
// The filter set, in the order the chips show it.
|
||||
const chips = useMemo(() => {
|
||||
const out: Array<{ label: string; value: string; remove: string[] }> = [];
|
||||
for (const d of DIMS) {
|
||||
const v = params.get(d.key);
|
||||
if (v) out.push({ label: d.label, value: d.col === 'appeal_status' ? (APPEAL_LABEL[v] ?? v) : v, remove: [d.key] });
|
||||
}
|
||||
for (const r of RANGES) {
|
||||
const a = params.get(r.from);
|
||||
const b = params.get(r.to);
|
||||
if (a || b) out.push({ label: r.label, value: a && b ? `${shortDate(a)} – ${shortDate(b)}` : a ? `from ${shortDate(a)}` : `to ${shortDate(b)}`, remove: [r.from, r.to] });
|
||||
}
|
||||
return out;
|
||||
}, [params]);
|
||||
const search = params.get('q') ?? '';
|
||||
const [draft, setDraft] = useState(search);
|
||||
useEffect(() => setDraft(search), [search]);
|
||||
|
||||
const filters = useMemo<RecordFilter[]>(() => {
|
||||
const f: RecordFilter[] = [];
|
||||
@ -86,57 +66,137 @@ export function ClaimsScreen() {
|
||||
}
|
||||
return f;
|
||||
}, [params]);
|
||||
const filtered = filters.length > 0 || !!search;
|
||||
|
||||
const key = params.toString();
|
||||
const q = useQuery(
|
||||
() => client.recordView('dni-rv-claims', { page, limit: PAGE, filters, sortBy: 'service_date', sortDir: 'desc' }),
|
||||
() => client.recordView('dni-rv-claims', { page, limit: PAGE, filters, search, sortBy: 'service_date', sortDir: 'desc' }),
|
||||
[key],
|
||||
);
|
||||
const rows: Row[] = q.data?.records ?? q.data?.data ?? [];
|
||||
const total = q.data?.total ?? null;
|
||||
const pages = total != null ? Math.max(1, Math.ceil(total / PAGE)) : null;
|
||||
// The platform caps its count at 10,000; the stats view has the exact
|
||||
// table size, which is the number to show when nothing is filtered.
|
||||
const stats = useQuery(() => client.rows('dni-rv-lakehouse-tables', { limit: 10 }), [], !filtered);
|
||||
const exact = stats.data?.find((r) => str(r.table_name) === 'claims');
|
||||
|
||||
const rows: Row[] = q.data?.data ?? q.data?.records ?? [];
|
||||
const pg = q.data?.pagination;
|
||||
const total = !filtered && exact ? (num(exact.row_count) ?? null) : (pg?.total_count ?? q.data?.total ?? null);
|
||||
const capped = filtered && !!pg?.total_is_capped;
|
||||
const pages = total != null ? Math.max(1, Math.ceil(total / PAGE)) : (pg?.total_pages ?? null);
|
||||
const options = q.data?.config?.filter_options ?? {};
|
||||
const billedOnPage = rows.reduce((t, r) => t + (num(r.billed_amount) ?? 0), 0);
|
||||
|
||||
function go(next: URLSearchParams) {
|
||||
next.delete('page');
|
||||
navigate(`/claims${next.toString() ? `?${next}` : ''}`);
|
||||
}
|
||||
function drop(keys: string[]) {
|
||||
function set(k: string, v: string) {
|
||||
const next = new URLSearchParams(params);
|
||||
for (const k of keys) next.delete(k);
|
||||
next.delete('page');
|
||||
if (v) next.set(k, v);
|
||||
else next.delete(k);
|
||||
go(next);
|
||||
}
|
||||
function setPage(n: number) {
|
||||
const next = new URLSearchParams(params);
|
||||
if (n <= 1) next.delete('page');
|
||||
else next.set('page', String(n));
|
||||
go(next);
|
||||
navigate(`/claims?${next}`);
|
||||
}
|
||||
const opts = (col: string, labels?: Record<string, string>) =>
|
||||
((options[col] ?? []) as unknown[]).map(String).filter(Boolean).map((v) => ({ value: v, label: labels?.[v] ?? v }));
|
||||
|
||||
// Active filters as removable chips, in display order.
|
||||
const chips: Array<{ label: string; value: string; remove: string[] }> = [];
|
||||
for (const d of DIMS) {
|
||||
const v = params.get(d.key);
|
||||
if (v) chips.push({ label: d.label, value: d.col === 'appeal_status' ? (APPEAL_LABEL[v] ?? v) : v, remove: [d.key] });
|
||||
}
|
||||
for (const r of RANGES) {
|
||||
const a = params.get(r.from);
|
||||
const b = params.get(r.to);
|
||||
if (a || b) chips.push({ label: r.label, value: a && b ? `${shortDate(a)} – ${shortDate(b)}` : a ? `from ${shortDate(a)}` : `to ${shortDate(b)}`, remove: [r.from, r.to] });
|
||||
}
|
||||
if (search) chips.push({ label: 'Search', value: search, remove: ['q'] });
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-6xl space-y-4">
|
||||
<div className="flex flex-wrap items-end gap-3">
|
||||
<div className="min-w-0 flex-1">
|
||||
<Link to="/lakehouse" className="inline-flex items-center gap-1 text-xs text-muted hover:text-ink">
|
||||
<ArrowLeft className="h-3.5 w-3.5" /> Lakehouse
|
||||
</Link>
|
||||
<h1 className="text-xl font-semibold text-ink">Claims</h1>
|
||||
<p className="mt-0.5 inline-flex items-center gap-1.5 text-xs text-faint">
|
||||
<Database className="h-3.5 w-3.5" />
|
||||
Read-only · {LAKEHOUSE.platform} · {LAKEHOUSE.catalog}.{LAKEHOUSE.schema}.claims
|
||||
</p>
|
||||
</div>
|
||||
<p className="tnum text-sm text-muted">
|
||||
{total == null ? '' : `${total.toLocaleString('en-US')} claim${total === 1 ? '' : 's'}`}
|
||||
{rows.length > 0 && total != null && total > rows.length ? ` · ${money(billedOnPage)} billed on this page` : rows.length > 0 ? ` · ${money(billedOnPage)} billed` : ''}
|
||||
<div className="text-right">
|
||||
<p className="tnum text-[22px] leading-none font-bold text-ink">
|
||||
{total == null ? '—' : `${total.toLocaleString('en-US')}${capped ? '+' : ''}`}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-muted">
|
||||
{filtered ? 'claims match' : 'claims in the table'}
|
||||
{rows.length > 0 ? ` · ${money(billedOnPage)} billed on this page` : ''}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ---------- Search + filters. Options are the platform's own distinct values. ---------- */}
|
||||
<div className="lift rounded-xl border border-line bg-panel px-4 py-3">
|
||||
<form
|
||||
className="flex flex-wrap items-center gap-2"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
set('q', draft.trim());
|
||||
}}
|
||||
>
|
||||
<div className="relative min-w-[16rem] flex-1">
|
||||
<Search className="pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 text-faint" />
|
||||
<div className="[&_input]:pl-8">
|
||||
<Input value={draft} onChange={setDraft} placeholder="Search claim id, provider or CPT…" />
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" className="rounded-md border border-line px-3 py-2 text-sm text-ink hover:bg-panel2">
|
||||
Search
|
||||
</button>
|
||||
</form>
|
||||
<div className="mt-3 grid gap-2 sm:grid-cols-3 lg:grid-cols-5">
|
||||
<Select value={params.get('payer') ?? ''} onChange={(v) => set('payer', v)} options={opts('payer')} placeholder="All insurers" />
|
||||
<Select value={params.get('department') ?? ''} onChange={(v) => set('department', v)} options={opts('department')} placeholder="All departments" />
|
||||
<Select value={params.get('status') ?? ''} onChange={(v) => set('status', v)} options={opts('status')} placeholder="Any status" />
|
||||
<Select
|
||||
value={params.get('code') ?? ''}
|
||||
onChange={(v) => set('code', v)}
|
||||
options={opts('denial_reason_code').map((o) => ({ ...o, label: CARC[o.value] ? `${o.value} · ${CARC[o.value]}` : o.value }))}
|
||||
placeholder="Any reason code"
|
||||
/>
|
||||
<Select value={params.get('appeal') ?? ''} onChange={(v) => set('appeal', v)} options={opts('appeal_status', APPEAL_LABEL)} placeholder="Any appeal status" />
|
||||
<Select value={params.get('site') ?? ''} onChange={(v) => set('site', v)} options={opts('site')} placeholder="All sites" />
|
||||
<Select value={params.get('desk') ?? ''} onChange={(v) => set('desk', v)} options={opts('registration_desk')} placeholder="All desks" />
|
||||
<Select value={params.get('provider') ?? ''} onChange={(v) => set('provider', v)} options={opts('provider')} placeholder="All providers" />
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="shrink-0 text-[11px] text-faint">Service</span>
|
||||
<Input type="date" value={params.get('from') ?? ''} onChange={(v) => set('from', v)} />
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="shrink-0 text-[11px] text-faint">to</span>
|
||||
<Input type="date" value={params.get('to') ?? ''} onChange={(v) => set('to', v)} />
|
||||
</div>
|
||||
</div>
|
||||
{chips.length > 0 && (
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<div className="mt-3 flex flex-wrap items-center gap-2 border-t border-line pt-3">
|
||||
{chips.map((c) => (
|
||||
<button
|
||||
key={c.label}
|
||||
onClick={() => drop(c.remove)}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const next = new URLSearchParams(params);
|
||||
for (const k of c.remove) next.delete(k);
|
||||
go(next);
|
||||
}}
|
||||
title="Remove filter"
|
||||
className="inline-flex items-center gap-1.5 rounded-full border border-line bg-panel px-3 py-1 text-xs text-ink hover:border-brand/60"
|
||||
className="inline-flex items-center gap-1.5 rounded-full border border-line bg-panel2/60 px-3 py-1 text-xs text-ink hover:border-brand/60"
|
||||
>
|
||||
<span className="text-faint">{c.label}</span>
|
||||
<span className="font-semibold">{c.value}</span>
|
||||
@ -148,6 +208,7 @@ export function ClaimsScreen() {
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{q.error && <ErrorNote>{q.error}</ErrorNote>}
|
||||
|
||||
@ -195,8 +256,7 @@ export function ClaimsScreen() {
|
||||
<Td>
|
||||
{code ? (
|
||||
<span title={CARC[code] ?? str(r.denial_reason_desc)}>
|
||||
<span className="tnum font-semibold">{code}</span>{' '}
|
||||
<span className="text-muted">{str(r.denial_reason_desc)}</span>
|
||||
<span className="tnum font-semibold">{code}</span> <span className="text-muted">{str(r.denial_reason_desc)}</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-faint">—</span>
|
||||
@ -214,7 +274,8 @@ export function ClaimsScreen() {
|
||||
{pages != null && pages > 1 && (
|
||||
<div className="flex items-center justify-between border-t border-line px-4 py-2.5 text-xs text-muted">
|
||||
<span className="tnum">
|
||||
Page {page} of {pages.toLocaleString('en-US')}
|
||||
Page {page.toLocaleString('en-US')} of {pages.toLocaleString('en-US')}
|
||||
{capped ? ' (count capped by the platform at 10,000)' : ''}
|
||||
</span>
|
||||
<span className="inline-flex gap-1">
|
||||
<PageBtn disabled={page <= 1} onClick={() => setPage(page - 1)} label="Previous page">
|
||||
|
||||
161
src/screens/LakehouseScreen.tsx
Normal file
161
src/screens/LakehouseScreen.tsx
Normal file
@ -0,0 +1,161 @@
|
||||
import { Link, useParams } from 'react-router-dom';
|
||||
import { ArrowLeft, ArrowRight, Database } from 'lucide-react';
|
||||
import { useQuery, useZino } from '../api/provider';
|
||||
import { LAKEHOUSE } from '../api/config';
|
||||
import type { Row } from '../api/types';
|
||||
import { ErrorNote, Spinner } from '../components/core';
|
||||
import { money, num, pct, shortDate, str } from '../format';
|
||||
|
||||
/**
|
||||
* Everything Ava reads, in one place.
|
||||
*
|
||||
* The overview is the `lakehouse_tables` stats view: one card per table with
|
||||
* its row count and date span, straight from Databricks. `claims` opens the
|
||||
* claims explorer; the four reference tables open a plain table view of every
|
||||
* row (they are small — 4 to 24 rows).
|
||||
*/
|
||||
|
||||
const TABLES: Record<string, { rv: string; title: string; blurb: string }> = {
|
||||
claims: { rv: 'dni-rv-claims', title: 'Claims', blurb: 'One row per submitted insurance claim. The table Ava sweeps every morning.' },
|
||||
payers: { rv: 'dni-rv-payers', title: 'Insurers', blurb: 'Plan type, appeal window and the Northlake contract manager for each insurer.' },
|
||||
departments: { rv: 'dni-rv-departments', title: 'Departments', blurb: 'Department × site directory with each director.' },
|
||||
payer_policy_updates: { rv: 'dni-rv-policy-updates', title: 'Insurer bulletins', blurb: 'Policy changes insurers announced, with effective dates — where Ava looks for the cause of a spike.' },
|
||||
finance_monthly_summary: { rv: 'dni-rv-finance-monthly', title: 'Finance monthly summary', blurb: 'What finance reports each month. Ava reconciles the claims table against it before analysing anything.' },
|
||||
};
|
||||
const ORDER = ['claims', 'payers', 'departments', 'payer_policy_updates', 'finance_monthly_summary'];
|
||||
|
||||
export function LakehouseScreen() {
|
||||
const { client } = useZino();
|
||||
const stats = useQuery(() => client.rows('dni-rv-lakehouse-tables', { limit: 20 }), []);
|
||||
const byName = new Map((stats.data ?? []).map((r) => [str(r.table_name), r]));
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-5xl space-y-4">
|
||||
<header>
|
||||
<h1 className="text-xl font-semibold text-ink">Lakehouse</h1>
|
||||
<p className="mt-0.5 inline-flex items-center gap-1.5 text-sm text-muted">
|
||||
<Database className="h-3.5 w-3.5" />
|
||||
{LAKEHOUSE.platform} · {LAKEHOUSE.catalog}.{LAKEHOUSE.schema} · read-only. The tables Ava reads, exactly as she reads them.
|
||||
</p>
|
||||
</header>
|
||||
{stats.error && <ErrorNote>{stats.error}</ErrorNote>}
|
||||
{stats.loading && !stats.data ? (
|
||||
<Spinner label="Reading the lakehouse…" />
|
||||
) : (
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
{ORDER.map((name) => {
|
||||
const t = TABLES[name];
|
||||
const s = byName.get(name);
|
||||
const rows = num(s?.row_count);
|
||||
const from = str(s?.from_date).slice(0, 10);
|
||||
const to = str(s?.to_date).slice(0, 10);
|
||||
const billed = num(s?.billed);
|
||||
const to_ = name === 'claims' ? '/claims' : `/lakehouse/${name}`;
|
||||
return (
|
||||
<Link
|
||||
key={name}
|
||||
to={to_}
|
||||
className={`lift block rounded-xl border border-line bg-panel px-5 py-4 transition-colors hover:border-brand/60 ${name === 'claims' ? 'sm:col-span-2' : ''}`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-[11px] font-semibold tracking-wide text-faint uppercase">{name}</p>
|
||||
<p className="mt-0.5 text-base font-semibold text-ink">{t.title}</p>
|
||||
<p className="mt-1 text-sm text-muted">{t.blurb}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="tnum text-[26px] leading-none font-bold text-ink">{rows == null ? '—' : rows.toLocaleString('en-US')}</p>
|
||||
<p className="mt-1 text-[11px] text-faint">rows</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted">
|
||||
{from && to && (
|
||||
<span>
|
||||
{shortDate(from)} – {shortDate(to)}
|
||||
</span>
|
||||
)}
|
||||
{billed != null && billed > 0 && <span>{money(billed)} billed</span>}
|
||||
{name === 'claims' && num(s?.denied) != null && (
|
||||
<span>
|
||||
{num(s?.denied)!.toLocaleString('en-US')} denied · {num(s?.pending)?.toLocaleString('en-US')} pending
|
||||
</span>
|
||||
)}
|
||||
<span className="ml-auto inline-flex items-center gap-1 text-brand">
|
||||
{name === 'claims' ? 'Explore' : 'Open'} <ArrowRight className="h-3.5 w-3.5" />
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Every row of one small reference table. */
|
||||
export function LakehouseTableScreen() {
|
||||
const { table = '' } = useParams();
|
||||
const { client } = useZino();
|
||||
const t = TABLES[table];
|
||||
const q = useQuery(() => client.recordView(t.rv, { limit: 200 }), [table], !!t);
|
||||
if (!t) return <ErrorNote>No such table.</ErrorNote>;
|
||||
const rows: Row[] = q.data?.data ?? q.data?.records ?? [];
|
||||
const fields = (q.data?.config?.fields ?? []).filter((f) => f.field_key !== '_pk_value');
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-5xl space-y-4">
|
||||
<div>
|
||||
<Link to="/lakehouse" className="inline-flex items-center gap-1 text-xs text-muted hover:text-ink">
|
||||
<ArrowLeft className="h-3.5 w-3.5" /> Lakehouse
|
||||
</Link>
|
||||
<h1 className="text-xl font-semibold text-ink">{t.title}</h1>
|
||||
<p className="mt-0.5 inline-flex items-center gap-1.5 text-xs text-faint">
|
||||
<Database className="h-3.5 w-3.5" />
|
||||
{LAKEHOUSE.catalog}.{LAKEHOUSE.schema}.{table} · {rows.length.toLocaleString('en-US')} rows
|
||||
</p>
|
||||
</div>
|
||||
{q.error && <ErrorNote>{q.error}</ErrorNote>}
|
||||
<div className="lift overflow-hidden rounded-xl border border-line bg-panel">
|
||||
{q.loading && !q.data ? (
|
||||
<Spinner label="Reading the lakehouse…" />
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-[13px]">
|
||||
<thead>
|
||||
<tr className="text-left text-[11px] font-semibold tracking-wide text-faint uppercase">
|
||||
{fields.map((f) => (
|
||||
<th key={f.field_key} className={`border-b border-line px-3 py-2.5 ${isNumeric(f.data_type) ? 'text-right' : ''}`}>
|
||||
{f.output_label}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-line">
|
||||
{rows.map((r, i) => (
|
||||
<tr key={i} className="hover:bg-panel2/60">
|
||||
{fields.map((f) => (
|
||||
<td key={f.field_key} className={`px-3 py-2 align-top text-ink ${isNumeric(f.data_type) ? 'tnum text-right' : ''}`}>
|
||||
{cell(r[f.field_key], f.field_key, f.data_type)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const isNumeric = (t: string) => /int|decimal|number|bigint/i.test(t);
|
||||
function cell(v: unknown, key: string, type: string): string {
|
||||
if (v == null || v === '') return '—';
|
||||
if (type === 'date') return shortDate(str(v).slice(0, 10));
|
||||
if (/rate/.test(key)) return pct((num(v) ?? 0) * 100, 1);
|
||||
if (/amount|billed|paid/.test(key)) return money(v);
|
||||
if (isNumeric(type)) return (num(v) ?? 0).toLocaleString('en-US');
|
||||
return str(v);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user