ParcelSync: DB status card on Export tab + Baza de Date tab with per-category sync

src/modules/parcel-sync/components/parcel-sync-module.tsx

@@ -22,6 +22,8 @@ import {
   RefreshCw,
   Database,
   HardDrive,
+  Clock,
+  ArrowDownToLine,
 } from "lucide-react";
 import { Button } from "@/shared/components/ui/button";
 import { Input } from "@/shared/components/ui/input";
@@ -813,6 +815,59 @@ export function ParcelSyncModule() {
     [siruta, exportingLocal],
   );
 
+  // Sync multiple layers sequentially (for "sync all" / "sync category")
+  const [syncQueue, setSyncQueue] = useState<string[]>([]);
+  const syncQueueRef = useRef<string[]>([]);
+
+  const handleSyncMultiple = useCallback(
+    async (layerIds: string[]) => {
+      if (!siruta || syncingLayer || syncQueue.length > 0) return;
+      syncQueueRef.current = [...layerIds];
+      setSyncQueue([...layerIds]);
+
+      for (const layerId of layerIds) {
+        setSyncingLayer(layerId);
+        setSyncProgress(
+          `Sincronizare ${LAYER_CATALOG.find((l) => l.id === layerId)?.label ?? layerId}…`,
+        );
+        try {
+          const res = await fetch("/api/eterra/sync", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              siruta,
+              layerId,
+              jobId: crypto.randomUUID(),
+            }),
+          });
+          const data = (await res.json()) as {
+            error?: string;
+            newFeatures?: number;
+            removedFeatures?: number;
+            totalLocal?: number;
+          };
+          if (data.error) {
+            setSyncProgress(`Eroare: ${data.error}`);
+          }
+        } catch {
+          setSyncProgress("Eroare rețea");
+        }
+        // Remove from queue
+        syncQueueRef.current = syncQueueRef.current.filter(
+          (id) => id !== layerId,
+        );
+        setSyncQueue([...syncQueueRef.current]);
+      }
+      // Done — refresh status
+      await fetchSyncStatus();
+      setSyncingLayer(null);
+      setSyncProgress("");
+      setSyncQueue([]);
+      syncQueueRef.current = [];
+    },
+    [siruta, syncingLayer, syncQueue.length, fetchSyncStatus],
+  );
+
   /* ════════════════════════════════════════════════════════════ */
   /*  PostGIS setup (one-time)                                     */
   /* ════════════════════════════════════════════════════════════ */
@@ -1052,6 +1107,38 @@ export function ParcelSyncModule() {
       ? Math.round((exportProgress.downloaded / exportProgress.total) * 100)
       : 0;
 
+  // DB status: which layers have data for the current UAT
+  const dbLayersSummary = useMemo(() => {
+    if (!sirutaValid || syncingSiruta !== siruta) return [];
+    return LAYER_CATALOG.filter((l) => (syncLocalCounts[l.id] ?? 0) > 0).map(
+      (l) => {
+        const count = syncLocalCounts[l.id] ?? 0;
+        const lastRun = syncRuns.find(
+          (r) => r.layerId === l.id && r.status === "done",
+        );
+        const lastSynced = lastRun?.completedAt
+          ? new Date(lastRun.completedAt)
+          : null;
+        const ageMs = lastSynced ? Date.now() - lastSynced.getTime() : null;
+        const isFresh = ageMs !== null ? ageMs < 168 * 60 * 60 * 1000 : false;
+        return { ...l, count, lastSynced, isFresh };
+      },
+    );
+  }, [sirutaValid, syncingSiruta, siruta, syncLocalCounts, syncRuns]);
+
+  const dbTotalFeatures = dbLayersSummary.reduce((sum, l) => sum + l.count, 0);
+
+  const relativeTime = (date: Date | null) => {
+    if (!date) return "niciodată";
+    const mins = Math.floor((Date.now() - date.getTime()) / 60_000);
+    if (mins < 1) return "acum";
+    if (mins < 60) return `acum ${mins} min`;
+    const hours = Math.floor(mins / 60);
+    if (hours < 24) return `acum ${hours}h`;
+    const days = Math.floor(hours / 24);
+    return `acum ${days}z`;
+  };
+
   /* ════════════════════════════════════════════════════════════ */
   /*  Render                                                       */
   /* ════════════════════════════════════════════════════════════ */
@@ -1163,6 +1250,10 @@ export function ParcelSyncModule() {
             <Download className="h-4 w-4" />
             Export
           </TabsTrigger>
+          <TabsTrigger value="database" className="gap-1.5">
+            <Database className="h-4 w-4" />
+            Baza de Date
+          </TabsTrigger>
         </TabsList>
       </div>
 
@@ -2042,6 +2133,67 @@ export function ParcelSyncModule() {
       {/*  Tab 3: Export                                           */}
       {/* ═══════════════════════════════════════════════════════ */}
       <TabsContent value="export" className="space-y-4">
+        {/* DB freshness status */}
+        {sirutaValid && dbLayersSummary.length > 0 && (
+          <Card className="border-dashed">
+            <CardContent className="py-3 px-4">
+              <div className="flex items-center gap-3 flex-wrap">
+                <Database className="h-4 w-4 text-muted-foreground shrink-0" />
+                <span className="text-sm text-muted-foreground">
+                  <span className="font-medium text-foreground">
+                    {dbTotalFeatures.toLocaleString("ro-RO")}
+                  </span>{" "}
+                  entități în DB din{" "}
+                  <span className="font-medium text-foreground">
+                    {dbLayersSummary.length}
+                  </span>{" "}
+                  layere
+                </span>
+                {(() => {
+                  const freshCount = dbLayersSummary.filter(
+                    (l) => l.isFresh,
+                  ).length;
+                  const staleCount = dbLayersSummary.length - freshCount;
+                  const oldestSync = dbLayersSummary.reduce(
+                    (oldest, l) => {
+                      if (!l.lastSynced) return oldest;
+                      if (!oldest || l.lastSynced < oldest) return l.lastSynced;
+                      return oldest;
+                    },
+                    null as Date | null,
+                  );
+                  return (
+                    <>
+                      {staleCount === 0 ? (
+                        <Badge
+                          variant="outline"
+                          className="text-emerald-600 border-emerald-200 dark:text-emerald-400 dark:border-emerald-800"
+                        >
+                          <CheckCircle2 className="h-3 w-3 mr-1" />
+                          Proaspete
+                        </Badge>
+                      ) : (
+                        <Badge
+                          variant="outline"
+                          className="text-amber-600 border-amber-200 dark:text-amber-400 dark:border-amber-800"
+                        >
+                          <Clock className="h-3 w-3 mr-1" />
+                          {staleCount} vechi
+                        </Badge>
+                      )}
+                      {oldestSync && (
+                        <span className="text-xs text-muted-foreground">
+                          Ultima sincronizare: {relativeTime(oldestSync)}
+                        </span>
+                      )}
+                    </>
+                  );
+                })()}
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
         {/* Hero buttons */}
         {sirutaValid && session.connected ? (
           <div className="grid gap-3 sm:grid-cols-2">
@@ -2195,6 +2347,216 @@ export function ParcelSyncModule() {
             </Card>
           )}
       </TabsContent>
+
+      {/* ═══════════════════════════════════════════════════════ */}
+      {/*  Tab 4: Baza de Date                                     */}
+      {/* ═══════════════════════════════════════════════════════ */}
+      <TabsContent value="database" className="space-y-4">
+        {!sirutaValid ? (
+          <Card>
+            <CardContent className="py-12 text-center text-muted-foreground">
+              <MapPin className="h-10 w-10 mx-auto mb-3 opacity-30" />
+              <p>Selectează un UAT pentru a vedea datele locale.</p>
+            </CardContent>
+          </Card>
+        ) : dbLayersSummary.length === 0 ? (
+          <Card>
+            <CardContent className="py-12 text-center text-muted-foreground">
+              <Database className="h-10 w-10 mx-auto mb-3 opacity-30" />
+              <p className="font-medium">Nicio dată în baza de date</p>
+              <p className="text-xs mt-1">
+                Folosește tab-ul Export pentru a sincroniza date din eTerra.
+              </p>
+            </CardContent>
+          </Card>
+        ) : (
+          <>
+            {/* Summary + Sync All */}
+            <div className="flex items-center justify-between gap-3 flex-wrap">
+              <div className="flex items-center gap-3">
+                <Database className="h-5 w-5 text-muted-foreground" />
+                <div>
+                  <p className="text-sm font-medium">
+                    {dbTotalFeatures.toLocaleString("ro-RO")} entități din{" "}
+                    {dbLayersSummary.length} layere
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {dbLayersSummary.filter((l) => l.isFresh).length} proaspete,{" "}
+                    {dbLayersSummary.filter((l) => !l.isFresh).length} vechi
+                  </p>
+                </div>
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={
+                    !!syncingLayer || exportingLocal || syncQueue.length > 0
+                  }
+                  onClick={() =>
+                    void handleExportLocal(dbLayersSummary.map((l) => l.id))
+                  }
+                >
+                  {exportingLocal ? (
+                    <Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />
+                  ) : (
+                    <ArrowDownToLine className="h-3.5 w-3.5 mr-1.5" />
+                  )}
+                  Export GPKG
+                </Button>
+                <Button
+                  size="sm"
+                  disabled={
+                    !!syncingLayer || syncQueue.length > 0 || !session.connected
+                  }
+                  onClick={() =>
+                    void handleSyncMultiple(dbLayersSummary.map((l) => l.id))
+                  }
+                >
+                  {syncQueue.length > 0 ? (
+                    <Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />
+                  ) : (
+                    <RefreshCw className="h-3.5 w-3.5 mr-1.5" />
+                  )}
+                  Sync tot
+                </Button>
+              </div>
+            </div>
+
+            {/* Sync progress banner */}
+            {(syncingLayer || syncQueue.length > 0) && syncProgress && (
+              <Card className="border-emerald-200 dark:border-emerald-800">
+                <CardContent className="py-2.5 px-4">
+                  <div className="flex items-center gap-2 text-sm">
+                    <Loader2 className="h-4 w-4 animate-spin text-emerald-600 shrink-0" />
+                    <span>{syncProgress}</span>
+                    {syncQueue.length > 0 && (
+                      <Badge variant="secondary" className="ml-auto text-xs">
+                        {syncQueue.length} rămase
+                      </Badge>
+                    )}
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+
+            {/* Layers grouped by category */}
+            {(
+              Object.entries(LAYER_CATEGORY_LABELS) as [LayerCategory, string][]
+            ).map(([cat, catLabel]) => {
+              const catLayers = dbLayersSummary.filter(
+                (l) => l.category === cat,
+              );
+              if (catLayers.length === 0) return null;
+
+              return (
+                <div key={cat} className="space-y-2">
+                  {/* Category header */}
+                  <div className="flex items-center justify-between">
+                    <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                      {catLabel}
+                      <span className="ml-2 font-normal">
+                        (
+                        {catLayers
+                          .reduce((s, l) => s + l.count, 0)
+                          .toLocaleString("ro-RO")}
+                        )
+                      </span>
+                    </h3>
+                    {catLayers.length > 1 && (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 text-xs"
+                        disabled={
+                          !!syncingLayer ||
+                          syncQueue.length > 0 ||
+                          !session.connected
+                        }
+                        onClick={() =>
+                          void handleSyncMultiple(catLayers.map((l) => l.id))
+                        }
+                      >
+                        <RefreshCw className="h-3 w-3 mr-1" />
+                        Sync categorie
+                      </Button>
+                    )}
+                  </div>
+
+                  {/* Layer rows */}
+                  <Card>
+                    <CardContent className="p-0 divide-y">
+                      {catLayers.map((layer) => (
+                        <div
+                          key={layer.id}
+                          className="flex items-center gap-3 px-4 py-2.5"
+                        >
+                          {/* Layer info */}
+                          <div className="min-w-0 flex-1">
+                            <div className="flex items-center gap-2">
+                              <span className="text-sm font-medium truncate">
+                                {layer.label}
+                              </span>
+                              <Badge
+                                variant="secondary"
+                                className="text-[10px] h-5 shrink-0"
+                              >
+                                {layer.count.toLocaleString("ro-RO")}
+                              </Badge>
+                            </div>
+                            <div className="flex items-center gap-2 mt-0.5">
+                              <span className="text-xs text-muted-foreground">
+                                {relativeTime(layer.lastSynced)}
+                              </span>
+                              {layer.isFresh ? (
+                                <span className="inline-flex h-1.5 w-1.5 rounded-full bg-emerald-500" />
+                              ) : (
+                                <span className="inline-flex h-1.5 w-1.5 rounded-full bg-amber-500" />
+                              )}
+                            </div>
+                          </div>
+
+                          {/* Actions */}
+                          <div className="flex items-center gap-1 shrink-0">
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-7 w-7 p-0"
+                              title="Export GPKG din DB"
+                              disabled={exportingLocal}
+                              onClick={() => void handleExportLocal([layer.id])}
+                            >
+                              <ArrowDownToLine className="h-3.5 w-3.5" />
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-7 w-7 p-0"
+                              title="Re-sincronizare din eTerra"
+                              disabled={
+                                !!syncingLayer ||
+                                syncQueue.length > 0 ||
+                                !session.connected
+                              }
+                              onClick={() => void handleSyncLayer(layer.id)}
+                            >
+                              {syncingLayer === layer.id ? (
+                                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                              ) : (
+                                <RefreshCw className="h-3.5 w-3.5" />
+                              )}
+                            </Button>
+                          </div>
+                        </div>
+                      ))}
+                    </CardContent>
+                  </Card>
+                </div>
+              );
+            })}
+          </>
+        )}
+      </TabsContent>
     </Tabs>
   );
 }