feat(frontend): refactor Providers page to useProviders + primitives

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,8 +23,30 @@ export function Providers() {
         </p>
       </header>
 
+      {isError ? (
+        <ErrorState
+          message="Couldn't load providers from the backend."
+          detail={error instanceof Error ? error.message : String(error)}
+          onRetry={() => refetch()}
+        />
+      ) : null}
+
+      {isLoading ? (
         <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-        {providers.map((p) => (
+          {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"
@@ -73,6 +99,7 @@ export function Providers() {
             </article>
           ))}
         </div>
+      )}
     </div>
   );
 }