add dirty table in faults

package.json

@@ -17,6 +17,7 @@
     "@mui/x-date-pickers": "^7.18.0",
     "cookiejs": "^2.1.3",
     "dayjs": "^1.11.13",
+    "material-react-table": "^3.0.1",
     "pocketbase": "^0.21.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

pnpm-lock.yaml

@@ -26,6 +26,9 @@ dependencies:
   dayjs:
     specifier: ^1.11.13
     version: 1.11.13
+  material-react-table:
+    specifier: ^3.0.1
+    version: 3.0.1(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@mui/icons-material@6.1.1)(@mui/material@6.1.1)(@mui/x-date-pickers@7.18.0)(react-dom@18.3.1)(react@18.3.1)
   pocketbase:
     specifier: ^0.21.5
     version: 0.21.5
@@ -1114,6 +1117,45 @@ packages:
     dev: true
     optional: true
 
+  /@tanstack/match-sorter-utils@8.19.4:
+    resolution: {integrity: sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==}
+    engines: {node: '>=12'}
+    dependencies:
+      remove-accents: 0.5.0
+    dev: false
+
+  /@tanstack/react-table@8.20.5(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-WEHopKw3znbUZ61s9i0+i9g8drmDo6asTWbrQh8Us63DAk/M0FkmIqERew6P71HI75ksZ2Pxyuf4vvKh9rAkiA==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+    dependencies:
+      '@tanstack/table-core': 8.20.5
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@tanstack/react-virtual@3.10.6(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-xaSy6uUxB92O8mngHZ6CvbhGuqxQ5lIZWCBy+FjhrbHmOwc6BnOnKkYm2FsB1/BpKw/+FVctlMbEtI+F6I1aJg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@tanstack/virtual-core': 3.10.6
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@tanstack/table-core@8.20.5:
+    resolution: {integrity: sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /@tanstack/virtual-core@3.10.6:
+    resolution: {integrity: sha512-1giLc4dzgEKLMx5pgKjL6HlG5fjZMgCjzlKAlpr7yoUtetVPELgER1NtephAI910nMwfPTHNyWKSFmJdHkz2Cw==}
+    dev: false
+
   /@types/babel__core@7.20.5:
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
     dependencies:
@@ -1829,6 +1871,11 @@ packages:
       function-bind: 1.1.2
     dev: false
 
+  /highlight-words@1.2.2:
+    resolution: {integrity: sha512-Mf4xfPXYm8Ay1wTibCrHpNWeR2nUMynMVFkXCi4mbl+TEgmNOe+I4hV7W3OCZcSvzGL6kupaqpfHOemliMTGxQ==}
+    engines: {node: '>= 16', npm: '>= 8'}
+    dev: false
+
   /hoist-non-react-statics@3.3.2:
     resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
     dependencies:
@@ -1968,6 +2015,31 @@ packages:
       yallist: 3.1.1
     dev: true
 
+  /material-react-table@3.0.1(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@mui/icons-material@6.1.1)(@mui/material@6.1.1)(@mui/x-date-pickers@7.18.0)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-RP+bnpsOAH5j6zwP04u9HB37fyqbd6mVv9mkT4IUJC3e3gEqixZmkNdJMVM1ZVHoq7yIaM381xf22mpBVe0IaA==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      '@emotion/react': '>=11.13'
+      '@emotion/styled': '>=11.13'
+      '@mui/icons-material': '>=6'
+      '@mui/material': '>=6'
+      '@mui/x-date-pickers': '>=7.15'
+      react: '>=18.0'
+      react-dom: '>=18.0'
+    dependencies:
+      '@emotion/react': 11.13.3(@types/react@18.3.9)(react@18.3.1)
+      '@emotion/styled': 11.13.0(@emotion/react@11.13.3)(@types/react@18.3.9)(react@18.3.1)
+      '@mui/icons-material': 6.1.1(@mui/material@6.1.1)(@types/react@18.3.9)(react@18.3.1)
+      '@mui/material': 6.1.1(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@types/react@18.3.9)(react-dom@18.3.1)(react@18.3.1)
+      '@mui/x-date-pickers': 7.18.0(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@mui/material@6.1.1)(@mui/system@6.1.1)(@types/react@18.3.9)(dayjs@1.11.13)(react-dom@18.3.1)(react@18.3.1)
+      '@tanstack/match-sorter-utils': 8.19.4
+      '@tanstack/react-table': 8.20.5(react-dom@18.3.1)(react@18.3.1)
+      '@tanstack/react-virtual': 3.10.6(react-dom@18.3.1)(react@18.3.1)
+      highlight-words: 1.2.2
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
   /merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -2211,6 +2283,10 @@ packages:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
     dev: false
 
+  /remove-accents@0.5.0:
+    resolution: {integrity: sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==}
+    dev: false
+
   /resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}

src/components/table/TableLoader.tsx

@@ -0,0 +1,22 @@
+import { Divider, Skeleton } from '@mui/material';
+import { Fragment } from 'react/jsx-runtime';
+
+const TableLoader = ({ count }: { count: number }) => {
+  return (
+    <Fragment>
+      <Skeleton variant='rectangular' width={'100%'} height={'13vh'} />
+      {Array.from({ length: count }).map((_, index) => (
+        <Fragment key={index}>
+          <Divider
+            sx={{
+              marginBottom: '3px',
+            }}
+          />
+          <Skeleton variant='rectangular' width='100%' height='7vh' />
+        </Fragment>
+      ))}
+    </Fragment>
+  );
+};
+
+export default TableLoader;

src/models/fault.interface.ts

@@ -0,0 +1,31 @@
+export interface Fault {
+  avisoLegalConsentimiento: boolean;
+  collectionId: string;
+  collectionName: string;
+  contactoCorreoElectronico: string;
+  contactoNombre: string;
+  contactoTelefono: string;
+  created: string; // ISO 8601 Date string
+  descripcionAveria: string;
+  direccionLinkGoogleMaps: string;
+  direccionPoblacion: string;
+  direccionTexto: string;
+  estado: string;
+  fotos: string[]; // Array of URLs or file paths
+  grupoElectrodependiente: boolean;
+  id: string;
+  idAveria: number;
+  marcaTemporal: string; // ISO 8601 Date string
+  notas: string;
+  sincronizado: boolean;
+  ultimaActualizacion: string; // ISO 8601 Date string
+  updated: string; // ISO 8601 Date string
+}
+
+export interface FaultsResponse {
+  items: Fault[];
+  page: number;
+  perPage: number;
+  totalItems: number;
+  totalPages: number;
+}

src/pages/faults/Faults.tsx

@@ -1,5 +1,66 @@
+import { Fragment, useEffect, useMemo, useState } from 'react';
+import { getFaults } from '../../services/faults/get-faults';
+import { Fault, FaultsResponse } from '../../models/fault.interface';
+import { MRT_ColumnDef, MaterialReactTable } from 'material-react-table';
+import TableLoader from '../../components/table/TableLoader';
+
 const Faults = () => {
-  return <div>Faults</div>;
+  const [faults, setFaults] = useState<Fault[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const columns = useMemo<MRT_ColumnDef<Partial<Fault>>[]>(
+    () => [
+      {
+        accessorKey: 'direccionPoblacion',
+        header: 'Direction',
+        size: 150,
+      },
+      {
+        accessorKey: 'estado',
+        header: 'Status',
+        size: 150,
+      },
+      {
+        accessorKey: 'contactoNombre',
+        header: 'Name',
+        size: 150,
+      },
+
+      {
+        accessorKey: 'contactoTelefono',
+        header: 'Telefono',
+        size: 200,
+      },
+    ],
+    []
+  );
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoading(true);
+      try {
+        const data = (await getFaults()) as FaultsResponse;
+        setFaults(data.items);
+      } catch (error) {
+        console.error(error);
+        setError('Error fetching data');
+      }
+      setLoading(false);
+    };
+
+    fetchData();
+  }, []);
+
+  return (
+    <Fragment>
+      {loading && <TableLoader count={9} />}
+      {error && <p>{error}</p>}
+      {!loading && !error && (
+        <MaterialReactTable columns={columns} data={faults} />
+      )}
+    </Fragment>
+  );
 };
 
 export default Faults;

src/services/faults/get-faults.tsx

@@ -0,0 +1,15 @@
+import PocketBase from 'pocketbase';
+
+export const getFaults = async () => {
+  const pb = new PocketBase(import.meta.env.VITE_BASE_URL_API);
+  const collection = 'averias';
+
+  try {
+    const data = await pb.collection(collection).getList();
+
+    return data;
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
+};