feature/create-inventory-list-page

.husky/pre-commit

@@ -1 +1 @@
-npm run precommit
+npx lint-staged

.lintstagedrc

@@ -1,10 +1,9 @@
 {
     "*/**/*.{js,jsx,ts,tsx}": [
-        "prettier --write",
-        "eslint --fix",
-        "eslint"
+        "npm run format",
+        "npm run lint:fix"
     ],
     "*/**/*.{json,css,md}": [
-        "prettier --write"
+        "npm run format"
     ]
 }

package.json

@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
-    "@pharmatech/sdk": "^0.4.18",
+    "@pharmatech/sdk": "^0.4.19",
     "@react-pdf/renderer": "^4.3.0",
     "blob-stream": "^0.1.3",
     "cloudinary": "^2.6.0",

src/app/(dashboard)/branches/[id]/edit/page.tsx

@@ -203,7 +203,6 @@ export default function EditBranchPage() {
             helperText={errors.name}
             helperTextColor={Colors.semanticDanger}
             borderSize="1px"
-            borderColor="#E7E7E6"
             onChange={(e) => setName(e.target.value)}
           />
         </div>
@@ -249,7 +248,6 @@ export default function EditBranchPage() {
             helperText={errors.address}
             helperTextColor={Colors.semanticDanger}
             borderSize="1px"
-            borderColor="#E7E7E6"
             onChange={(e) => setAddress(e.target.value)}
           />
         </div>
@@ -263,7 +261,6 @@ export default function EditBranchPage() {
               helperText={errors.latitude}
               helperTextColor={Colors.semanticDanger}
               borderSize="1px"
-              borderColor="#E7E7E6"
               onChange={(e) => setLatitude(e.target.value)}
             />
           </div>
@@ -275,7 +272,6 @@ export default function EditBranchPage() {
               helperText={errors.longitude}
               helperTextColor={Colors.semanticDanger}
               borderSize="1px"
-              borderColor="#E7E7E6"
               onChange={(e) => setLongitude(e.target.value)}
             />
           </div>

src/app/(dashboard)/branches/new/page.tsx

@@ -188,7 +188,6 @@ export default function NewBranchPage() {
             helperText={errors.name}
             helperTextColor={Colors.semanticDanger}
             borderSize="1px"
-            borderColor="#E7E7E6"
             value={name}
             onChange={(e) => setName(e.target.value)}
           />
@@ -233,7 +232,6 @@ export default function NewBranchPage() {
             helperText={errors.address}
             helperTextColor={Colors.semanticDanger}
             borderSize="1px"
-            borderColor="#E7E7E6"
             onChange={(e) => setAddress(e.target.value)}
           />
         </div>
@@ -247,7 +245,6 @@ export default function NewBranchPage() {
               helperText={errors.latitude}
               helperTextColor={Colors.semanticDanger}
               borderSize="1px"
-              borderColor="#E7E7E6"
               onChange={(e) => setLatitude(e.target.value)}
             />
           </div>
@@ -259,7 +256,6 @@ export default function NewBranchPage() {
               helperText={errors.longitude}
               helperTextColor={Colors.semanticDanger}
               borderSize="1px"
-              borderColor="#E7E7E6"
               onChange={(e) => setLongitude(e.target.value)}
             />
           </div>

src/app/(dashboard)/categories/[id]/edit/page.tsx

@@ -152,7 +152,6 @@ export default function EditCategoryPage() {
             helperText={errors.name}
             helperTextColor={Colors.semanticDanger}
             borderSize="1px"
-            borderColor="#d1d5db"
           />
 
           <Input
@@ -166,7 +165,6 @@ export default function EditCategoryPage() {
             helperText={errors.description}
             helperTextColor={Colors.semanticDanger}
             borderSize="1px"
-            borderColor="#d1d5db"
             type="text"
             isTextArea
             rows={4}

src/app/(dashboard)/categories/new/page.tsx

@@ -116,7 +116,6 @@ export default function NewCategoryPage() {
             }}
             helperText={errors.name}
             helperTextColor={Colors.semanticDanger}
-            borderColor="#d1d5db"
             borderSize="1px"
           />
 
@@ -130,7 +129,6 @@ export default function NewCategoryPage() {
             }}
             helperText={errors.description}
             helperTextColor={Colors.semanticDanger}
-            borderColor="#d1d5db"
             type="text"
             borderSize="1px"
             isTextArea

src/app/(dashboard)/coupons/new/page.tsx

@@ -136,7 +136,6 @@ export default function NewCouponPage() {
             helperText={errors.code}
             helperTextColor={Colors.semanticDanger}
             borderSize="1px"
-            borderColor="#E7E7E6"
           />
           <div className="flex flex-col gap-4 md:flex-row md:gap-6">
             <div className="w-full">
@@ -161,7 +160,6 @@ export default function NewCouponPage() {
               helperText={errors.maxUses}
               helperTextColor={Colors.semanticDanger}
               borderSize="1px"
-              borderColor="#E7E7E6"
               type="number"
             />
           </div>
@@ -174,7 +172,6 @@ export default function NewCouponPage() {
               helperText={errors.discount}
               helperTextColor={Colors.semanticDanger}
               borderSize="1px"
-              borderColor="#E7E7E6"
               type="number"
             />
             <Input
@@ -185,7 +182,6 @@ export default function NewCouponPage() {
               helperText={errors.minPurchase}
               helperTextColor={Colors.semanticDanger}
               borderSize="1px"
-              borderColor="#E7E7E6"
               type="number"
             />
           </div>

src/app/(dashboard)/inventories/page.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import React, { useState, useEffect, useCallback } from 'react';
+import TableContainer from '@/components/TableContainer';
+import Dropdown from '@/components/Dropdown';
+import { api } from '@/lib/sdkConfig';
+import { useAuth } from '@/context/AuthContext';
+import {
+  Pagination,
+  BranchResponse,
+  UserRole,
+  InventoryResponse,
+} from '@pharmatech/sdk';
+import { toast } from 'react-toastify';
+import { formatDateSafe } from '@/lib/utils/useFormatDate';
+import InventoryStock from '@/components/Input/InventoryStock';
+
+export default function InventoryListPage() {
+  const { token, user } = useAuth();
+
+  const [inventories, setInventories] = useState<InventoryResponse[]>([]);
+  const [branches, setBranches] = useState<BranchResponse[]>([]);
+  const [selectedBranchId, setSelectedBranchId] = useState<string>('');
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const [itemsPerPage, setItemsPerPage] = useState<number>(10);
+  const [totalItems, setTotalItems] = useState<number>(0);
+
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const branchOptions = ['Todas', ...branches.map((branch) => branch.name)];
+  const handleBranchChange = (label: string) => {
+    const branch = branches.find((branch) => branch.name === label);
+    setSelectedBranchId(branch?.id ?? '');
+    setCurrentPage(1);
+  };
+
+  const fetchBranches = useCallback(async () => {
+    try {
+      const resp = await api.branch.findAll({ page: 1, limit: 100 });
+      setBranches(resp.results);
+    } catch (err: unknown) {
+      console.error('Error fetching Branches:', err);
+      toast.error('No se pudieron cargar las sucursales');
+    }
+  }, []);
+
+  useEffect(() => {
+    if (token && user?.sub && user.role == UserRole.ADMIN) fetchBranches();
+  }, [fetchBranches, token, user?.sub]);
+
+  const fetchInventories = useCallback(async () => {
+    if (!token || !user?.sub) return;
+    setIsLoading(true);
+    setError(null);
+    const params: Parameters<typeof api.inventory.findAll>[0] = {
+      page: currentPage,
+      limit: itemsPerPage,
+    };
+    if (user.role == UserRole.BRANCH_ADMIN) {
+      params.branchId = user.branch?.id;
+    } else {
+      params.branchId = selectedBranchId ? selectedBranchId : undefined;
+    }
+    try {
+      const response: Pagination<InventoryResponse> =
+        await api.inventory.findAll(params);
+      setInventories(response.results);
+      setTotalItems(response.count);
+    } catch (err: unknown) {
+      console.error('Error fetching inventories:', err);
+      toast.error('Error al cargar los inventarios');
+      setError('No se pudieron cargar los inventarios.');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [token, user?.sub, currentPage, itemsPerPage, selectedBranchId]);
+
+  useEffect(() => {
+    fetchInventories();
+  }, [fetchInventories]);
+
+  const totalPages = Math.ceil(totalItems / itemsPerPage);
+
+  const getColumns = () => {
+    const columns = [
+      {
+        key: 'name',
+        label: 'Producto',
+        render: (i: InventoryResponse) => i.productPresentation.product.name,
+      },
+      {
+        key: 'presentation',
+        label: 'Presentación',
+        render: (i: InventoryResponse) =>
+          i.productPresentation.presentation.name,
+      },
+      {
+        key: 'manufacturer',
+        label: 'Marca',
+        render: (i: InventoryResponse) =>
+          i.productPresentation.product.manufacturer.name,
+      },
+      {
+        key: 'updatedAt',
+        label: 'Actualizado el',
+        render: (i: InventoryResponse) => formatDateSafe(i.updatedAt),
+      },
+      {
+        key: 'stockQuantity',
+        label: 'Existencia',
+        render: (i: InventoryResponse) => (
+          <InventoryStock inventoryId={i.id} stock={i.stockQuantity} />
+        ),
+      },
+    ];
+    if (user?.role == UserRole.ADMIN) {
+      columns.unshift({
+        key: 'branch',
+        label: 'Sucursal',
+        render: (i: InventoryResponse) => i.branch.name,
+      });
+    }
+    return columns;
+  };
+
+  const renderDropdown = () => {
+    if (user?.role == UserRole.ADMIN) {
+      return (
+        <Dropdown
+          title="Sucursales"
+          items={branchOptions}
+          onChange={handleBranchChange}
+        />
+      );
+    }
+    return <></>;
+  };
+
+  return (
+    <div
+      className="overflow-y-auto"
+      style={{ maxHeight: 'calc(100vh - 150px)' }}
+    >
+      {error && (
+        <div className="mb-4 rounded bg-red-100 p-2 text-red-700">{error}</div>
+      )}
+
+      <TableContainer<InventoryResponse>
+        title="Inventario"
+        dropdownComponent={renderDropdown()}
+        tableData={inventories}
+        tableColumns={getColumns()}
+        pagination={{
+          currentPage,
+          totalPages,
+          totalItems,
+          itemsPerPage,
+          onPageChange: setCurrentPage,
+          onItemsPerPageChange: (val) => {
+            setItemsPerPage(val);
+            setCurrentPage(1);
+          },
+          itemsPerPageOptions: [5, 10, 15, 20],
+        }}
+        isLoading={isLoading}
+      />
+    </div>
+  );
+}

src/app/(dashboard)/presentations/[id]/edit/page.tsx

@@ -152,7 +152,6 @@ export default function EditPresentationPage() {
             onChange={(e) => setName(e.target.value)}
             helperText={errors.name}
             helperTextColor={Colors.semanticDanger}
-            borderColor="#d1d5db"
             borderSize="1px"
           />
         </div>
@@ -181,7 +180,6 @@ export default function EditPresentationPage() {
               onChange={(e) => setQuantity(e.target.value)}
               helperText={errors.quantity}
               helperTextColor={Colors.semanticDanger}
-              borderColor="#d1d5db"
               type="number"
               borderSize="1px"
             />
@@ -195,7 +193,6 @@ export default function EditPresentationPage() {
             onChange={(e) => setDescription(e.target.value)}
             helperText={errors.description}
             helperTextColor={Colors.semanticDanger}
-            borderColor="#d1d5db"
             type="text"
             borderSize="1px"
             isTextArea

src/app/(dashboard)/presentations/new/page.tsx

@@ -134,7 +134,6 @@ export default function NewPresentationPage() {
             ) => setName(e.target.value)}
             helperText={errors.name}
             helperTextColor={Colors.semanticDanger}
-            borderColor="#d1d5db"
             borderSize="1px"
           />
         </div>
@@ -165,7 +164,6 @@ export default function NewPresentationPage() {
               ) => setQuantity(e.target.value)}
               helperText={errors.quantity}
               helperTextColor={Colors.semanticDanger}
-              borderColor="#d1d5db"
               type="number"
               borderSize="1px"
             />
@@ -181,7 +179,6 @@ export default function NewPresentationPage() {
             ) => setDescription(e.target.value)}
             helperText={errors.description}
             helperTextColor={Colors.semanticDanger}
-            borderColor="#d1d5db"
             type="text"
             borderSize="1px"
             isTextArea