feat: agregar control de visibilidad del total tarifado

src/components/board/ProjectPricingPanel.tsx

@@ -9,7 +9,6 @@ import { Separator } from "@/components/ui/separator";
 import { Textarea } from "@/components/ui/textarea";
 import { SearchableSelect } from "@/components/board/SearchableSelect";
 import {
-  TARIFF_CATALOG,
   TARIFF_SECTIONS,
   defaultTariffAmount,
   formatTariffRange,
@@ -17,6 +16,7 @@ import {
   type TariffLevel,
   type TariffWorkType,
 } from "@/data/tariff";
+import { useTariffCatalog } from "@/lib/tariffCatalog";
 import type { ProjectPricingItemInput } from "@/lib/store";
 import { cn } from "@/lib/utils";
 
@@ -63,27 +63,32 @@ export function ProjectPricingPanel({ items, onChange, loading, error }: Props)
   const [manualName, setManualName] = useState<string>("");
   const [manualDescription, setManualDescription] = useState<string>("");
   const [manualAmount, setManualAmount] = useState<string>("");
+  const {
+    catalog: tariffCatalog,
+    loading: tariffLoading,
+    error: tariffError,
+  } = useTariffCatalog();
 
   const sectionOptions = TARIFF_SECTIONS.map((option) => option.label);
   const selectedSectionLabel = TARIFF_SECTIONS.find((option) => option.id === section)?.label || "";
 
   const serviceOptions = useMemo(
     () =>
-      TARIFF_CATALOG.filter((item) => item.section === section).map(
-        (item) => `${item.category} · ${item.service}`,
-      ),
-    [section],
+      tariffCatalog
+        .filter((item) => item.section === section)
+        .map((item) => `${item.category} · ${item.service}`),
+    [section, tariffCatalog],
   );
 
   const selectedItem = useMemo(() => {
     const selectedLabel = serviceId;
     return (
-      TARIFF_CATALOG.find(
+      tariffCatalog.find(
         (item) =>
           item.section === section && `${item.category} · ${item.service}` === selectedLabel,
       ) || null
     );
-  }, [section, serviceId]);
+  }, [section, serviceId, tariffCatalog]);
 
   const selectedWorkType = useMemo(() => {
     if (!selectedItem) return null;
@@ -113,7 +118,7 @@ export function ProjectPricingPanel({ items, onChange, loading, error }: Props)
 
   const onServiceChange = (label: string) => {
     setServiceId(label);
-    const item = TARIFF_CATALOG.find(
+    const item = tariffCatalog.find(
       (catalogItem) =>
         catalogItem.section === section &&
         `${catalogItem.category} · ${catalogItem.service}` === label,
@@ -225,16 +230,17 @@ export function ProjectPricingPanel({ items, onChange, loading, error }: Props)
         </div>
       </div>
 
-      {error && (
+      {(error || tariffError) && (
         <div className="mb-3 flex items-start gap-2 rounded-xl border border-amber-300/50 bg-amber-50 px-3 py-2 text-xs text-amber-900">
           <Info className="mt-0.5 h-3.5 w-3.5 flex-shrink-0" />
-          <span>{error}</span>
+          <span>{error || tariffError}</span>
         </div>
       )}
 
-      {loading && (
+
+      {(loading || tariffLoading) && (
         <div className="mb-3 rounded-xl border border-border bg-card px-3 py-2 text-xs text-muted-foreground">
-          Cargando costos guardados…
+          {loading ? "Cargando costos guardados…" : "Cargando tarifario…"}
         </div>
       )}