From 22b9eb59d2aab4eb13e59521e8b7bc7d3d99e8d7 Mon Sep 17 00:00:00 2001
From: Tyler <tyler@crispygoat.com>
Date: Fri, 19 Jun 2026 19:44:54 -0600
Subject: [PATCH] feat(frontend): refactor Providers page to useProviders +
 primitives

---
 src/pages/Providers.tsx | 121 ++++++++++++++++++++++++----------------
 1 file changed, 74 insertions(+), 47 deletions(-)

diff --git a/src/pages/Providers.tsx b/src/pages/Providers.tsx
index dfe8407..ab2d705 100644
--- a/src/pages/Providers.tsx
+++ b/src/pages/Providers.tsx
@@ -1,9 +1,13 @@
 import { Building2, MapPin, Phone } from "lucide-react";
-import { useAppStore } from "@/store";
+import { Skeleton } from "@/components/ui/skeleton";
+import { EmptyState } from "@/components/ui/empty-state";
+import { ErrorState } from "@/components/ui/error-state";
+import { useProviders } from "@/hooks/useProviders";
 import { fmt } from "@/lib/format";
 
 export function Providers() {
-  const providers = useAppStore((s) => s.providers);
+  const { data, isLoading, isError, error, refetch } = useProviders();
+  const items = data?.items ?? [];
 
   return (
     <div className="space-y-8 animate-fade-in">
@@ -19,60 +23,83 @@ export function Providers() {
         </p>
       </header>
 
-      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-        {providers.map((p) => (
-          <article
-            key={p.npi}
-            className="surface rounded-xl p-6 flex flex-col gap-4 hover:bg-muted/20 transition-colors"
-          >
-            <div className="flex items-start gap-3">
-              <div className="h-10 w-10 rounded-lg bg-muted/60 flex items-center justify-center text-foreground">
-                <Building2 className="h-5 w-5" strokeWidth={1.5} />
-              </div>
-              <div className="min-w-0 flex-1">
-                <h3 className="text-[15px] font-semibold tracking-tight">
-                  {p.name}
-                </h3>
-                <p className="text-[11px] text-muted-foreground num mt-0.5">
-                  NPI {p.npi} · TIN {p.taxId}
-                </p>
-              </div>
-            </div>
+      {isError ? (
+        <ErrorState
+          message="Couldn't load providers from the backend."
+          detail={error instanceof Error ? error.message : String(error)}
+          onRetry={() => refetch()}
+        />
+      ) : null}
 
-            <div className="space-y-1.5 text-[13px] text-muted-foreground">
-              <div className="flex items-center gap-2">
-                <MapPin className="h-3.5 w-3.5" strokeWidth={1.75} />
-                <span>
-                  {p.address}, {p.city}, {p.state} {p.zip}
-                </span>
+      {isLoading ? (
+        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Skeleton key={i} variant="default" height={180} />
+          ))}
+        </div>
+      ) : items.length === 0 ? (
+        <div className="surface rounded-xl">
+          <EmptyState
+            eyebrow="Providers · directory empty"
+            message="Providers appear here as soon as an 837P file is parsed."
+          />
+        </div>
+      ) : (
+        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+          {items.map((p) => (
+            <article
+              key={p.npi}
+              className="surface rounded-xl p-6 flex flex-col gap-4 hover:bg-muted/20 transition-colors"
+            >
+              <div className="flex items-start gap-3">
+                <div className="h-10 w-10 rounded-lg bg-muted/60 flex items-center justify-center text-foreground">
+                  <Building2 className="h-5 w-5" strokeWidth={1.5} />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <h3 className="text-[15px] font-semibold tracking-tight">
+                    {p.name}
+                  </h3>
+                  <p className="text-[11px] text-muted-foreground num mt-0.5">
+                    NPI {p.npi} · TIN {p.taxId}
+                  </p>
+                </div>
               </div>
-              <div className="flex items-center gap-2">
-                <Phone className="h-3.5 w-3.5" strokeWidth={1.75} />
-                <span className="num">{p.phone}</span>
-              </div>
-            </div>
 
-            <div className="grid grid-cols-2 gap-4 pt-4 border-t border-border/40">
-              <div>
-                <div className="text-[11px] uppercase tracking-wider text-muted-foreground">
-                  Claims
+              <div className="space-y-1.5 text-[13px] text-muted-foreground">
+                <div className="flex items-center gap-2">
+                  <MapPin className="h-3.5 w-3.5" strokeWidth={1.75} />
+                  <span>
+                    {p.address}, {p.city}, {p.state} {p.zip}
+                  </span>
                 </div>
-                <div className="display text-[20px] leading-none mt-1.5">
-                  {fmt.num(p.claimCount)}
+                <div className="flex items-center gap-2">
+                  <Phone className="h-3.5 w-3.5" strokeWidth={1.75} />
+                  <span className="num">{p.phone}</span>
                 </div>
               </div>
-              <div>
-                <div className="text-[11px] uppercase tracking-wider text-muted-foreground">
-                  Outstanding AR
+
+              <div className="grid grid-cols-2 gap-4 pt-4 border-t border-border/40">
+                <div>
+                  <div className="text-[11px] uppercase tracking-wider text-muted-foreground">
+                    Claims
+                  </div>
+                  <div className="display text-[20px] leading-none mt-1.5">
+                    {fmt.num(p.claimCount)}
+                  </div>
                 </div>
-                <div className="display text-[20px] leading-none mt-1.5">
-                  {fmt.usd(p.outstandingAr)}
+                <div>
+                  <div className="text-[11px] uppercase tracking-wider text-muted-foreground">
+                    Outstanding AR
+                  </div>
+                  <div className="display text-[20px] leading-none mt-1.5">
+                    {fmt.usd(p.outstandingAr)}
+                  </div>
                 </div>
               </div>
-            </div>
-          </article>
-        ))}
-      </div>
+            </article>
+          ))}
+        </div>
+      )}
     </div>
   );
 }