{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "medical-profile", "title": "Medical Profile", "description": "Patient status, sleep, movement, appointments, and care-team alerts.", "dependencies": [ "@tanstack/react-table@^8.21.3", "lucide-react@^1.33.0" ], "registryDependencies": [ "https://components.exe.xyz/r/activity-rings-card.json", "https://components.exe.xyz/r/app-shell.json", "https://components.exe.xyz/r/avatar.json", "https://components.exe.xyz/r/breadcrumb.json", "https://components.exe.xyz/r/button.json", "https://components.exe.xyz/r/chip.json", "https://components.exe.xyz/r/dashboard-view-state.json", "https://components.exe.xyz/r/icon-button.json", "https://components.exe.xyz/r/important-alerts-card.json", "https://components.exe.xyz/r/input.json", "https://components.exe.xyz/r/medical-dashboard-views.json", "https://components.exe.xyz/r/most-active-days-card.json", "https://components.exe.xyz/r/notification-center.json", "https://components.exe.xyz/r/patient-info-card.json", "https://components.exe.xyz/r/popover.json", "https://components.exe.xyz/r/select.json", "https://components.exe.xyz/r/sidebar.json", "https://components.exe.xyz/r/sleep-score-card.json", "https://components.exe.xyz/r/stat-cards.json", "https://components.exe.xyz/r/steps-card.json", "https://components.exe.xyz/r/table.json" ], "files": [ { "path": "src/components/templates/medical-profile.tsx", "content": "\"use client\"\n\nimport { useMemo, useState } from \"react\"\nimport {\n flexRender,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n} from \"@tanstack/react-table\"\nimport type { ColumnDef, SortingState } from \"@tanstack/react-table\"\nimport { Bell, Menu } from \"lucide-react\"\n\nimport { ActivityRingsCard } from \"@/components/charts/activity-rings-card\"\nimport {\n demoActiveDays,\n formatActiveDate,\n MostActiveDaysCard,\n} from \"@/components/charts/most-active-days-card\"\nimport { SleepScoreCard } from \"@/components/charts/sleep-score-card\"\nimport { StepsCard } from \"@/components/charts/steps-card\"\nimport { ImportantAlertsCard } from \"@/components/blocks/important-alerts-card\"\nimport type { ImportantAlert } from \"@/components/blocks/important-alerts-card\"\nimport { NotificationCenter } from \"@/components/blocks/notification-center\"\nimport type { InboxNotification } from \"@/components/blocks/notification-center\"\nimport { PatientInfoCard } from \"@/components/blocks/patient-info-card\"\nimport { StatCard, StatCardRow } from \"@/components/blocks/stat-cards\"\nimport { Sidebar } from \"@/components/blocks/sidebar\"\n\nimport { AppShell } from \"@/components/templates/app-shell\"\nimport {\n AnalyticsView,\n CalendarView,\n InboxView,\n ProfileView,\n ProjectsView,\n dashboardNavItems,\n viewTitle,\n} from \"@/components/templates/dashboard-views\"\nimport { useDashboardView } from \"@/lib/use-dashboard-view\"\nimport { Avatar, AvatarFallback } from \"@/components/ui/avatar\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport { Chip } from \"@/components/ui/chip\"\nimport { IconButton } from \"@/components/ui/icon-button\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/components/ui/table\"\n\nexport const medicalPatient = {\n name: \"Mertcan Esmergül\",\n initials: \"ME\",\n details: [\n { label: \"Date of Birth\", value: \"28 July, 1997\" },\n { label: \"Gender\", value: \"Male\" },\n { label: \"Blood Type\", value: \"A rh+\" },\n { label: \"GP\", value: \"Doctor Mattheus Clarkson\" },\n ],\n}\n\nexport const medicalAlerts: ImportantAlert[] = [\n {\n id: \"a1\",\n tone: \"warning\",\n title: \"High Heart rate\",\n body: \"Resting pulse peaked at 148 bpm during the morning loop.\",\n dateLabel: \"8:59 AM 12 June\",\n },\n {\n id: \"a2\",\n tone: \"info\",\n title: \"Medical ID updated\",\n body: \"Emergency contact and blood type were saved.\",\n dateLabel: \"9 June\",\n },\n {\n id: \"a3\",\n tone: \"success\",\n title: \"Lab results ready\",\n body: \"Lipid panel is available to review.\",\n dateLabel: \"11 June\",\n },\n {\n id: \"a4\",\n tone: \"info\",\n title: \"Medication reminder\",\n body: \"Metoprolol 25 mg, evening dose.\",\n dateLabel: \"12 June\",\n },\n {\n id: \"a5\",\n tone: \"warning\",\n title: \"Irregular sleep\",\n body: \"Under 5 hours for two nights in a row.\",\n dateLabel: \"13 June\",\n },\n {\n id: \"a6\",\n tone: \"error\",\n title: \"Low blood oxygen\",\n body: \"Spot check read 93% at rest.\",\n dateLabel: \"14 June\",\n },\n {\n id: \"a7\",\n tone: \"info\",\n title: \"Appointment moved\",\n body: \"Follow-up with Dr Clarkson is now 18 July.\",\n dateLabel: \"15 June\",\n },\n {\n id: \"a8\",\n tone: \"success\",\n title: \"Prescription filled\",\n body: \"Pharmacy confirmed the weekly pack.\",\n dateLabel: \"15 June\",\n },\n {\n id: \"a9\",\n tone: \"warning\",\n title: \"Weight trend\",\n body: \"Up 1.4 kg versus the prior week.\",\n dateLabel: \"16 June\",\n },\n {\n id: \"a10\",\n tone: \"info\",\n title: \"Vaccination due\",\n body: \"Influenza shot is scheduled for next week.\",\n dateLabel: \"16 June\",\n },\n {\n id: \"a11\",\n tone: \"success\",\n title: \"Steps goal met\",\n body: \"Seven-day average cleared 8,000.\",\n dateLabel: \"16 June\",\n },\n {\n id: \"a12\",\n tone: \"info\",\n title: \"Chart note added\",\n body: \"GP left a note on recovery pace.\",\n dateLabel: \"16 June\",\n },\n]\n\nexport type PatientRow = {\n name: string\n initials: string\n admitted: string\n status:\n \"Stable\" | \"Under observation\" | \"Critical\" | \"Recovering\" | \"In treatment\"\n conditions: string[]\n next: string\n}\n\nexport const medicalPatients: PatientRow[] = [\n {\n name: \"Mertcan Esmergül\",\n initials: \"ME\",\n admitted: \"12 Jun 2026\",\n status: \"Recovering\",\n conditions: [\"Hypertension\"],\n next: \"18 Jul 2026\",\n },\n {\n name: \"Ada Fenwick\",\n initials: \"AF\",\n admitted: \"02 May 2026\",\n status: \"Stable\",\n conditions: [\"Asthma\"],\n next: \"22 Jul 2026\",\n },\n {\n name: \"Jules Reed\",\n initials: \"JR\",\n admitted: \"28 Jun 2026\",\n status: \"Under observation\",\n conditions: [\"Diabetes\"],\n next: \"09 Jul 2026\",\n },\n {\n name: \"Nia Cole\",\n initials: \"NC\",\n admitted: \"04 Jul 2026\",\n status: \"In treatment\",\n conditions: [\"Hypertension\", \"Diabetes\"],\n next: \"11 Jul 2026\",\n },\n {\n name: \"Sora Bell\",\n initials: \"SB\",\n admitted: \"19 Jun 2026\",\n status: \"Critical\",\n conditions: [\"Asthma\"],\n next: \"08 Jul 2026\",\n },\n {\n name: \"Dev Malik\",\n initials: \"DM\",\n admitted: \"11 May 2026\",\n status: \"Stable\",\n conditions: [\"Diabetes\"],\n next: \"30 Jul 2026\",\n },\n {\n name: \"Rina Costa\",\n initials: \"RC\",\n admitted: \"07 Jul 2026\",\n status: \"In treatment\",\n conditions: [\"Hypertension\"],\n next: \"14 Jul 2026\",\n },\n {\n name: \"Theo Okafor\",\n initials: \"TO\",\n admitted: \"21 Apr 2026\",\n status: \"Recovering\",\n conditions: [\"Asthma\", \"Diabetes\"],\n next: \"19 Jul 2026\",\n },\n]\n\nexport const medicalActivity = demoActiveDays(2026)\n\nconst inbox: InboxNotification[] = [\n {\n id: \"n1\",\n category: \"system\",\n group: \"Today\",\n title: \"Lab results ready\",\n description: \"Lipid panel for Mertcan Esmergül.\",\n timestamp: \"12m\",\n unread: true,\n status: \"success\",\n },\n {\n id: \"n2\",\n category: \"mentions\",\n group: \"Today\",\n title: \"Dr Clarkson mentioned you\",\n description: \"Please confirm the 18 July follow-up.\",\n timestamp: \"1h\",\n unread: true,\n avatar: { initials: \"MC\" },\n },\n {\n id: \"n3\",\n category: \"activity\",\n group: \"Yesterday\",\n title: \"High heart-rate alert closed\",\n timestamp: \"1d\",\n status: \"information\",\n },\n]\n\nconst statusChip: Record = {\n Stable:\n \"border-transparent bg-[color-mix(in_srgb,var(--chart-2)_16%,transparent)] text-[var(--chart-2)]\",\n \"Under observation\":\n \"border-transparent bg-[color-mix(in_srgb,var(--chart-4)_18%,transparent)] text-[var(--chart-4)]\",\n Critical: \"border-transparent bg-destructive/10 text-destructive\",\n Recovering: \"border-border bg-card text-foreground\",\n \"In treatment\": \"border-transparent bg-primary/10 text-primary\",\n}\n\nfunction ringsForDate(iso: string) {\n if (iso === \"2026-07-10\") {\n return [\n { id: \"move\", label: \"Move\", valueLabel: \"816 kcal\", progress: 0.82 },\n {\n id: \"exercise\",\n label: \"Exercise\",\n valueLabel: \"1h 41m\",\n progress: 0.9,\n },\n { id: \"running\", label: \"Running\", valueLabel: \"5.2 km\", progress: 0.65 },\n ]\n }\n const day = Number(iso.slice(-2))\n const month = Number(iso.slice(5, 7))\n const seed = month * 17 + day * 13\n const kcal = 400 + (seed % 520)\n const minutes = 38 + (seed % 84)\n const km = (2.4 + (seed % 45) / 10).toFixed(1)\n return [\n {\n id: \"move\",\n label: \"Move\",\n valueLabel: `${kcal} kcal`,\n progress: Math.min(1, kcal / 1000),\n },\n {\n id: \"exercise\",\n label: \"Exercise\",\n valueLabel: `${Math.floor(minutes / 60)}h ${minutes % 60}m`,\n progress: Math.min(1, minutes / 100),\n },\n {\n id: \"running\",\n label: \"Running\",\n valueLabel: `${km} km`,\n progress: Math.min(1, Number(km) / 8),\n },\n ]\n}\n\nexport function MedicalProfileTemplate() {\n const { view, go } = useDashboardView(\"medical\")\n const [selectedDate, setSelectedDate] = useState(\"2026-07-10\")\n const [mobileOpen, setMobileOpen] = useState(false)\n const [collapsed, setCollapsed] = useState(false)\n const [weekOffset, setWeekOffset] = useState(0)\n const [statusFilter, setStatusFilter] = useState(\"all\")\n const [reportFiled, setReportFiled] = useState(false)\n const activityTitle = `Activity for ${formatActiveDate(selectedDate)}`\n const weekLabel = weekOffset === 0 ? \"29 Jun to 5 Jul\" : \"22 to 28 Jun\"\n\n function navigate(id: string) {\n go(id)\n setMobileOpen(false)\n }\n\n return (\n \n \n Skip to patients\n \n \n
\n
\n setMobileOpen(true)}\n />\n \n \n \n {\n event.preventDefault()\n navigate(\"home\")\n }}\n >\n Home\n \n \n \n \n {viewTitle(view)}\n \n \n \n \n \n \n \n \n \n \n \n {view === \"medical\" ? (\n
\n \n {\n setReportFiled(true)\n window.setTimeout(() => setReportFiled(false), 1600)\n }}\n >\n {reportFiled ? \"Report filed\" : \"File a report\"}\n \n
\n ) : null}\n
\n
\n

\n {viewTitle(view)}. {view === \"medical\" ? activityTitle : \"\"}\n

\n {view === \"analytics\" ? : null}\n {view === \"calendar\" ? : null}\n {view === \"projects\" ? : null}\n {view === \"inbox\" ? : null}\n {view === \"profile\" ? : null}\n {view === \"home\" ? (\n
\n \n \n \n \n \n \n
\n \n
\n
\n ) : null}\n {view === \"medical\" ? (\n <>\n
*]:min-h-0 [&>*]:overflow-hidden\">\n \n setWeekOffset(-1)}\n onNextRange={() => setWeekOffset(0)}\n className=\"h-full\"\n />\n \n \n \n setWeekOffset(-1)}\n onNextWeek={() => setWeekOffset(0)}\n className=\"h-full max-w-none\"\n />\n
\n \n \n \n \n ) : null}\n
\n
\n \n )\n}\n\nfunction PatientsTable({\n data,\n statusFilter,\n}: {\n data: PatientRow[]\n statusFilter: string\n}) {\n const [sorting, setSorting] = useState([])\n const [globalFilter, setGlobalFilter] = useState(\"\")\n const filtered = useMemo(\n () =>\n statusFilter === \"all\"\n ? data\n : data.filter((row) => row.status === statusFilter),\n [data, statusFilter]\n )\n const columns = useMemo[]>(\n () => [\n {\n accessorKey: \"name\",\n header: \"Patient\",\n cell: ({ row }) => (\n
\n \n {row.original.initials}\n \n {row.original.name}\n
\n ),\n },\n { accessorKey: \"admitted\", header: \"Admission\" },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ getValue }) => {\n const status = getValue() as PatientRow[\"status\"]\n return (\n \n {status}\n \n )\n },\n },\n {\n accessorKey: \"conditions\",\n header: \"Condition\",\n cell: ({ row }) => (\n
\n {row.original.conditions.map((item) => (\n \n {item}\n \n ))}\n
\n ),\n },\n { accessorKey: \"next\", header: \"Next appointment\" },\n ],\n []\n )\n const table = useReactTable({\n data: filtered,\n columns,\n state: { sorting, globalFilter },\n onSortingChange: setSorting,\n onGlobalFilterChange: setGlobalFilter,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n initialState: { pagination: { pageIndex: 0, pageSize: 5 } },\n })\n\n return (\n
\n
\n
\n

Patients

\n

\n {filtered.length} {filtered.length === 1 ? \"patient\" : \"patients\"}\n

\n
\n setGlobalFilter(event.target.value)}\n placeholder=\"Search patients\"\n className=\"max-w-xs rounded-[2px]\"\n aria-label=\"Search patients\"\n />\n
\n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => (\n \n \n {flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n \n ))}\n \n ))}\n \n \n {table.getRowModel().rows.map((row) => (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n ))}\n \n
\n
\n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Previous\n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Next\n \n
\n
\n )\n}\n", "type": "registry:block" } ], "type": "registry:block" }