Grupos y dependencias postgres

src/services/httpService.js

@@ -61,7 +61,7 @@ const HttpService = {
     };
   },
   get: async (url, auth = true) => {
-    debugger;
+    // debugger;
     let token = null;
     if (auth) token = await getCurrentToken();
     const response = await fetch(apiUrl + url, {

src/views/administracion/dependencias/DependenciaDetalle.js

@@ -1,19 +1,21 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { Form, Button, Row, Col, Input, Modal, Table, Typography, Select } from "antd";
 import { SaveOutlined, PlusOutlined, CloseCircleOutlined } from "@ant-design/icons";
-import { useQuery, useModels } from "../../../hooks";
+import { useQuery, useModels, useModel } from "../../../hooks";
 import { useHistory } from "react-router-dom";
-import { firestore } from "../../../services/firebase";
+// import { firestore } from "../../../services/firebase";
 import { ViewLoading } from "../../../components";
 import { DefaultLayout } from "../../../components/layouts";
-import { addDoc, collection, doc, getDoc, updateDoc } from "firebase/firestore";
+// import { addDoc, collection, doc, getDoc, updateDoc } from "firebase/firestore";
 import HttpService from "../../../services/httpService";
+import { emptyRequest } from "../../../constants/requests";
+import { respuestas } from "../../../utilities";
 
 const { Title } = Typography;
 
 const DependenciaDetalle = () => {
 
-  const firebaseCollection = "dependencias";
+  // const firebaseCollection = "dependencias";
   const query = useQuery();
   const history = useHistory();
   const { TextArea } = Input;
@@ -23,8 +25,8 @@ const DependenciaDetalle = () => {
   const url = "/administracion/dependencias";
   const [form] = Form.useForm();
 
-  const [dependencia, setDependencia] = useState([]);
-  const [cargandoDependencia, setCargandoDependencia] = useState(true);
+  // const [dependencia, setDependencia] = useState([]);
+  // const [cargandoDependencia, setCargandoDependencia] = useState(true);
   const [guadandoCargando, setGuardandoCargando] = useState(false);
   const [buscarValue, setBuscarValue] = useState('');
   const [requestUsuarios, setRequestUsuarios] = useState({});
@@ -32,7 +34,15 @@ const DependenciaDetalle = () => {
   const [miembros, setMiembros] = useState([]);
   const [miembrosLoading, setMiembrosLoading] = useState(false);
   const [usuario, setUsuario] = useState(null);
+  const [miembro, setMiembro] = useState(null);
   const [lideres, setLideres] = useState([]);
+  const [request, setRequest] = useState(emptyRequest);
+
+  const requestParams = useMemo(() => ({
+    name: 'v1/dependencia',
+    id: id,
+    expand: 'lideres,usuarios'
+  }), [id]);
 
   const usuarioExtraParams = React.useMemo(() => ({ q: buscarValue }), [buscarValue])
   const usuariosParams = React.useMemo(() => ({
@@ -43,6 +53,11 @@ const DependenciaDetalle = () => {
     extraParams: usuarioExtraParams
   }), [usuarioExtraParams])
 
+  const {
+    model,
+    modelLoading
+  } = useModel(request);
+
   const [
     models,
     modelsLoading, , ,
@@ -51,16 +66,24 @@ const DependenciaDetalle = () => {
   const columnasMiembros = [
     { title: 'Nombre', dataIndex: 'nombre', key: 'nombre', },
     { title: 'Correo', dataIndex: 'email', key: 'email', },
+    {
+      title: '', dataIndex: 'id', key: 'id', render: (text) =>
+        <Button
+          danger
+          icon={<CloseCircleOutlined />}
+          onClick={() => setMiembros(miembros.filter(l => l.id !== text))}
+        />
+    },
   ]
 
   const columnasLideres = [
     { title: 'Nombre', dataIndex: 'nombre', key: 'nombre', },
     {
-      title: '', dataIndex: 'uid', key: 'uid', render: (text) =>
+      title: '', dataIndex: 'id', key: 'id', render: (text) =>
         <Button
           danger
           icon={<CloseCircleOutlined />}
-          onClick={() => setLideres(lideres.filter(l => l.uid !== text))}
+          onClick={() => setLideres(lideres.filter(l => l.id !== text))}
         />
     },
   ]
@@ -74,55 +97,47 @@ const DependenciaDetalle = () => {
     setTimer(newTimer);
   };
 
-  React.useEffect(() => {
-    setRequestUsuarios(usuariosParams);
-    return () => setRequestUsuarios({});
-  }, [usuariosParams]);
-
-  React.useEffect(() => {
-    if (editando && id) {
-      const getMiembros = async () => {
-        setMiembrosLoading(true);
-        const response = await HttpService.get(`v1/usuario?ordenar=nombre-asc&idDependencia=${id}&limite=-1`);
-        if (!response.isError) {
-          setMiembros(response.resultado);
-          setMiembrosLoading(false);
-        }
-      }
-      getMiembros();
-    }
-  }, [editando, id]);
-
   const onFinish = async (values) => {
     try {
       setGuardandoCargando(true);
 
       let body = {
         ...values,
-        timestamp: editando ? dependencia?.timestamp : new Date(),
-        estatus: editando ? dependencia?.estatus : true,
+        // timestamp: editando ? dependencia?.timestamp : new Date(),
+        // estatus: editando ? dependencia?.estatus : true,
         sincronizado: null,
-        usuarios: lideres.map(l => ({
-          uid: l.uid,
+        lideres: lideres.map(l => ({
+          id: l.id,
           nombre: l.nombre,
         })),
+        usuarios: miembros.map(l => ({
+          id: l.id,
+          nombre: l.nombre,
+        }))
       };
-      // comentario prueba
 
-      // Agregamos o editamos el documento grupo
       if (editando) {
-        await updateDoc(doc(firestore, firebaseCollection, id), body);
-      } else {
-        await addDoc(collection(firestore, firebaseCollection), body);
+        body.id = model?.id;
       }
 
-      Modal.success({
-        title: "Éxito",
-        content: "Dependencia guardado correctamente",
-      });
+      const res = await HttpService.post('v1/dependencia', body);
+      respuestas(res);
+      if (res?.status === 200) {
+        Modal.success({
+          title: "Éxito",
+          content: "Dependencia guardada correctamente",
+        });
 
-      history.push(url);
+        history.push(url);
+      }
+      // comentario prueba
 
+      // Agregamos o editamos el documento grupo
+      /* if (editando) {
+        await updateDoc(doc(firestore, firebaseCollection, id), body);
+      } else {
+        await addDoc(collection(firestore, firebaseCollection), body);
+      } */
     } catch (error) {
       Modal.warning({
         title: "Atención",
@@ -143,6 +158,30 @@ const DependenciaDetalle = () => {
   };
 
   useEffect(() => {
+    setRequest(requestParams);
+    return () => setRequest({});
+  }, [requestParams]);
+
+  useEffect(() => {
+    setRequestUsuarios(usuariosParams);
+    return () => setRequestUsuarios({});
+  }, [usuariosParams]);
+
+  /* useEffect(() => {
+    if (editando && id) {
+      const getMiembros = async () => {
+        setMiembrosLoading(true);
+        const response = await HttpService.get(`v1/usuario?ordenar=nombre-asc&idDependencia=${id}&limite=-1`);
+        if (!response.isError) {
+          setMiembros(response.resultado);
+          setMiembrosLoading(false);
+        }
+      }
+      getMiembros();
+    }
+  }, [editando, id]); */
+
+  /* useEffect(() => {
     let mounted = true;
     if (mounted && editando) {
       try {
@@ -164,19 +203,25 @@ const DependenciaDetalle = () => {
       }
     }
     return () => (mounted = false);
-  }, [editando, id]);
+  }, [editando, id]); */
 
   useEffect(() => {
-    let mounted = true;
-    if (mounted && editando) {
+    if (model && editando) {
       form.setFieldsValue({
-        ...dependencia,
+        ...model,
       });
+
+      if (model?.lideres) {
+        setLideres(model?.lideres);
+      }
+
+      if (model?.usuarios) {
+        setMiembros(model?.usuarios);
+      }
     }
-    return () => (mounted = false);
-  }, [dependencia, editando, form]);
+  }, [editando, form, model]);
 
-  if (cargandoDependencia && editando) return <ViewLoading />;
+  if (modelLoading && editando) return <ViewLoading />;
 
   return (
     <DefaultLayout title={titulo} multipleButtonData={[]}>
@@ -223,6 +268,61 @@ const DependenciaDetalle = () => {
         <Row gutter={10}>
           <Col className="gutter-row" span={12}>
             <Title level={4}>Miembros</Title>
+            <Row>
+              <Col span={22}>
+                <Form.Item
+                  label="Usuarios"
+                  rules={[{
+                    required: true,
+                    message: 'Selecciona un usuario!',
+                  }]}
+                  hasFeedback
+                >
+                  <Select
+                    showSearch
+                    onSearch={onSearchUsuarios}
+                    allowClear
+                    placeholder="Elige a un usuario"
+                    optionFilterProp="children"
+                    filterOption={(input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase())}
+                    loading={modelsLoading}
+                    onChange={(_, item) => {
+                      setMiembro(item);
+                      console.log("item", item);
+                    }}
+                    options={models?.length > 0 && models?.map(i => ({
+                      ...i,
+                      value: i.id,
+                      label: i.nombre
+                    }))}
+                    value={miembro}
+                  />
+                </Form.Item>
+              </Col>
+              <Col span={2}>
+                <Form.Item label="&nbsp;">
+                  <Button
+                    type="default"
+                    icon={<PlusOutlined />}
+                    shape="circle"
+                    size="middle"
+                    style={{
+                      // marginTop: 70,
+                      marginLeft: 10
+                    }}
+                    onClick={() => {
+                      if (miembro) {
+                        //agregar sólo si no existe en el array, con esto evitamos duplicados
+                        if (!miembros.find(i => i.id === miembro.id)) {
+                          setMiembros([...miembros, miembro]);
+                          setMiembro(null);
+                        }
+                      }
+                    }}
+                  />
+                </Form.Item>
+              </Col>
+            </Row>
             <Table
               columns={columnasMiembros}
               dataSource={miembros}
@@ -267,7 +367,7 @@ const DependenciaDetalle = () => {
                     }}
                     options={models?.length > 0 && models?.map(i => ({
                       ...i,
-                      value: i.uid,
+                      value: i.id,
                       label: i.nombre
                     }))}
                     value={usuario}
@@ -287,7 +387,7 @@ const DependenciaDetalle = () => {
                   onClick={() => {
                     if (usuario) {
                       //agregar sólo si no existe en el array, con esto evitamos duplicados
-                      if (!lideres.find(i => i.uid === usuario.uid)) {
+                      if (!lideres.find(i => i.id === usuario.id)) {
                         setLideres([...lideres, usuario]);
                         setUsuario(null);
                       }
@@ -300,7 +400,7 @@ const DependenciaDetalle = () => {
               columns={columnasLideres}
               dataSource={lideres}
               size="small"
-              rowKey="uid"
+              rowKey="id"
               pagination={
                 lideres.length > 10
                   ? {

src/views/administracion/dependencias/DependenciasListado.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { Modal, Divider } from 'antd';
 import { useHistory } from 'react-router-dom';
 import { EditOutlined, DeleteOutlined, PlusCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
@@ -7,6 +7,7 @@ import { ActionsButton } from '../../../components';
 import { SimpleTableLayout } from '../../../components/layouts';
 import Tabla from '../../../components/Tabla';
 import HttpService from '../../../services/httpService';
+import { respuestas } from '../../../utilities';
 
 const DependenciasListado = () => {
 
@@ -15,6 +16,8 @@ const DependenciasListado = () => {
   const history = useHistory();
   const { confirm } = Modal;
 
+  const tablaRef = useRef(null);
+
   const [searchInput, setSearchInput] = useState('');
 
   const defaultText = prop => prop || <span style={{ color: '#c7c3c3' }}>---</span>;
@@ -75,12 +78,16 @@ const DependenciasListado = () => {
       content: '¿Seguro que desea eliminar este registro?',
       onOk: async () => {
         try {
-          await HttpService.post('v1/dependencia/delete', { id: item.id });
+          const res = await HttpService.post('v1/dependencia/eliminar', { id: item.id });
+          respuestas(res);
+          if (res?.status === 200) {
+            tablaRef.current.refresh();
+          }
         } catch (error) {
           console.log('error al eliminar: ', error);
         }
       },
-      onCancel() {},
+      onCancel() { },
     });
   };
 
@@ -100,6 +107,7 @@ const DependenciasListado = () => {
         columns={columns}
         extraParams={{ q: searchInput }}
         scroll={{ x: "30vw" }}
+        innerRef={tablaRef}
       />
     </SimpleTableLayout>
   );

src/views/administracion/grupos/GruposDetalle.js

@@ -1,16 +1,19 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { Form, Button, Row, Col, Input, Modal, Table, message } from "antd";
 import { SaveOutlined, UserOutlined, WhatsAppOutlined, ArrowLeftOutlined, AlertOutlined } from "@ant-design/icons";
 import moment from "moment";
-import { useQuery } from "../../../hooks";
+import { useModel, useModels, useQuery } from "../../../hooks";
 import { useHistory } from "react-router-dom";
 import { firestore } from "../../../services/firebase";
 import { ViewLoading } from "../../../components";
 import { DefaultLayout } from "../../../components/layouts";
 import { addDoc, collection, doc, getDoc, getDocs, updateDoc, where, query as firebaseQuery } from "firebase/firestore";
+import { emptyRequest } from "../../../constants/requests";
+import HttpService from "../../../services/httpService";
+import { respuestas } from "../../../utilities";
 
 const GruposDetalle = () => {
-  
+
   const query = useQuery();
   const history = useHistory();
   const { TextArea } = Input;
@@ -21,17 +24,43 @@ const GruposDetalle = () => {
   const [form] = Form.useForm();
 
   const [grupo, setGrupo] = useState([]);
-  const [cargandoGrupo, setCargandoGrupo] = useState(true);
+  // const [cargandoGrupo, setCargandoGrupo] = useState(true);
   const [guadandoCargando, setGuardandoCargando] = useState(false);
-  const [cargandoUsuarios, setCargandoUsuarios] = useState(false);
-  const [usuarios, setUsuarios] = useState(null);
+  // const [cargandoUsuarios, setCargandoUsuarios] = useState(false);
+  // const [usuarios, setUsuarios] = useState(null);
   const [visible, setVisible] = useState(false);
   const [idsUsuariosGrupo, setIdsUsuariosGrupo] = useState([]);
   const [usuariosEnGrupo, setUsuariosEnGrupo] = useState([]);
   const [cargandoAviso, setCargandoAviso] = useState(false);
+  const [request, setRequest] = useState(emptyRequest);
+  const [requestUsuarios, setRequestUsuarios] = useState(emptyRequest);
 
   const defaultText = (prop) => prop || <span style={{ color: "#c7c3c3" }}>---</span>;
 
+  const requestParams = useMemo(() => ({
+    name: 'v1/grupo',
+    id: id,
+    expand: 'usuarios'
+  }), [id]);
+
+  const usuariosParams = useMemo(() => ({
+    name: 'v1/usuario',
+    limite: -1
+  }), []);
+
+  const {
+    model,
+    modelLoading
+  } = useModel(request);
+
+  const [
+    usuarios, usuariosLoading,
+    ,
+    ,
+    ,
+    ,
+  ] = useModels(requestUsuarios);
+
   const multipleButtonData = [
     {
       text: "Volver",
@@ -59,18 +88,18 @@ const GruposDetalle = () => {
       dataIndex: "verificado",
       key: "verificado",
       render: (_, item) =>
-        item.verificado === "" ? (
+        !item?.verificado || item?.verificado === "" ? (
           <span style={{ color: "#c7c3c3" }}>---</span>
         ) : (
-          moment(item?.verificado?.toDate()).format("DD-MM-YYYY")
+          moment(item?.verificado).format("DD-MM-YYYY")
         ),
     },
     {
       title: "Registro",
-      dataIndex: "timestamp",
-      key: "timestamp",
+      dataIndex: "creado",
+      key: "creado",
       render: (_, item) =>
-        moment(item?.timestamp?.toDate()).format("DD-MM-YYYY"),
+        item?.creado ? moment(item?.creado).format("DD-MM-YYYY") : null,
     },
     {
       title: "Verificado",
@@ -113,14 +142,30 @@ const GruposDetalle = () => {
         ciudad: ciudad || "",
         descripcion: descripcion || "",
         nombre: nombre || "",
-        timestamp: editando ? grupo?.timestamp : new Date(),
-        estatus: editando ? grupo?.estatus : true,
+        usuarios: usuariosEnGrupo
+        // timestamp: editando ? grupo?.timestamp : new Date(),
+        // estatus: editando ? grupo?.estatus : true,
       };
 
-      let docRef = null;
+      if (editando) {
+        body.id = model?.id;
+      }
+
+      const res = await HttpService.post('v1/grupo', body);
+      respuestas(res);
+      if (res?.status === 200) {
+        Modal.success({
+          title: "Éxito",
+          content: "Grupo guardado correctamente",
+        });
+
+        history.push(url);
+      }
+
+      // let docRef = null;
 
       // Agregamos o editamos el documento grupo
-      if (editando) {
+      /* if (editando) {
         await updateDoc(doc(firestore, "grupos", id), body);
       } else {
         docRef = await addDoc(collection(firestore, "grupos"), body);
@@ -165,14 +210,7 @@ const GruposDetalle = () => {
         }
 
         await actualizarUsuario(usuario);
-      }
-
-      Modal.success({
-        title: "Éxito",
-        content: "Grupo guardado correctamente",
-      });
-
-      history.push(url);
+      } */
     } catch (error) {
       Modal.warning({
         title: "Atención",
@@ -213,11 +251,11 @@ const GruposDetalle = () => {
 
         let tieneFb = false;
         let tieneIg = false;
-        let tieneTw = false; 
+        let tieneTw = false;
 
-        if(u?.facebookVerificado) tieneFb = true;
-        if(u?.instagramVerificado) tieneIg = true;
-        if(u?.twitterVerificado) tieneTw = true;
+        if (u?.facebookVerificado) tieneFb = true;
+        if (u?.instagramVerificado) tieneIg = true;
+        if (u?.twitterVerificado) tieneTw = true;
 
         const usuario = {
           uid: u?.uid,
@@ -245,12 +283,12 @@ const GruposDetalle = () => {
 
       let c = 0;
       querySnapshot.forEach((doc) => {
-        if(doc.data().plantilla === plantilla) {
+        if (doc.data().plantilla === plantilla) {
           c++
         }
       });
 
-      if(c > 0) {
+      if (c > 0) {
         message.info("Ya hay un recordatorio de este evento.")
         return
       }
@@ -268,7 +306,11 @@ const GruposDetalle = () => {
 
   // Obtener usuarios
   useEffect(() => {
-    try {
+    setRequestUsuarios(usuariosParams);
+    return () => {
+      setRequestUsuarios(emptyRequest);
+    }
+    /* try {
       setCargandoUsuarios(true);
       setTimeout(async () => {
         const querySnapshot = await getDocs(collection(firestore, "usuarios"));
@@ -284,17 +326,21 @@ const GruposDetalle = () => {
           }
         });
         setUsuariosEnGrupo(_arr);
-        setUsuarios(docs.sort( (a,b) => b?.nombre > a?.nombre ? -1 : 1));
+        setUsuarios(docs.sort((a, b) => b?.nombre > a?.nombre ? -1 : 1));
       }, 0);
     } catch (error) {
       console.log("error al cargar usuarios:", error);
     } finally {
       setCargandoUsuarios(false);
-    }
-  }, [id]);
+    } */
+  }, [usuariosParams]);
 
   useEffect(() => {
-    let mounted = true;
+    setRequest(requestParams);
+    return () => {
+      setRequest(emptyRequest);
+    }
+    /* let mounted = true;
     if (mounted && editando) {
       try {
         setTimeout(async () => {
@@ -308,11 +354,21 @@ const GruposDetalle = () => {
         setCargandoGrupo(false);
       }
     }
-    return () => (mounted = false);
-  }, [editando, id]);
+    return () => (mounted = false); */
+  }, [requestParams]);
 
   useEffect(() => {
-    let mounted = true;
+    if (editando && model) {
+      form.setFieldsValue({
+        ...model
+      });
+
+      if (model?.usuarios) {
+        setUsuariosEnGrupo(model?.usuarios);
+        setIdsUsuariosGrupo(model?.usuarios?.map((u) => u.id));
+      }
+    }
+    /* let mounted = true;
     if (mounted && editando) {
       if (usuariosEnGrupo.length > 0) {
         setIdsUsuariosGrupo(usuariosEnGrupo?.map((item) => item.id));
@@ -322,10 +378,12 @@ const GruposDetalle = () => {
         ...grupo,
       });
     }
-    return () => (mounted = false);
-  }, [editando, form, grupo, usuariosEnGrupo]);
+    return () => (mounted = false); */
+  }, [editando, form, model]);
+
+  if (modelLoading && editando) return <ViewLoading />;
 
-  if (cargandoGrupo && editando) return <ViewLoading />;
+  console.log('usuariosEnGrupo: ', usuariosEnGrupo)
 
   return (
     <DefaultLayout title={titulo} multipleButtonData={multipleButtonData}>
@@ -346,11 +404,11 @@ const GruposDetalle = () => {
             ...rowSelection,
           }}
           rowKey={"id"}
-          loading={cargandoUsuarios}
+          loading={usuariosLoading}
           size="small"
           columns={columns}
           pagination={false}
-          dataSource={ usuarios }
+          dataSource={usuarios}
         />
       </Modal>
 

src/views/administracion/grupos/GruposListado.js

@@ -1,20 +1,23 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Table, Modal } from 'antd';
 import { useHistory } from 'react-router-dom';
-import { 
+import {
   EditOutlined,
-  DeleteOutlined, 
+  DeleteOutlined,
   FileExcelOutlined,
   PlusCircleOutlined,
-  ExclamationCircleOutlined, 
-} 
-from "@ant-design/icons";
+  ExclamationCircleOutlined,
+}
+  from "@ant-design/icons";
 import moment from 'moment';
 import { firestore } from "../../../services/firebase";
 import exportarExcelJS from '../../../services/exportarExcel';
 import { ActionsButton } from '../../../components';
 import { SimpleTableLayout } from '../../../components/layouts'
 import { collection, onSnapshot, doc, updateDoc, getDocs, query, where } from "firebase/firestore";
+import Tabla from '../../../components/Tabla';
+import HttpService from '../../../services/httpService';
+import { respuestas } from '../../../utilities';
 
 const GruposListado = () => {
 
@@ -23,11 +26,13 @@ const GruposListado = () => {
   const history = useHistory();
   const { confirm } = Modal;
 
-  const [ reporteCargando, setReporteCargando ] = useState(false)
-  const [ cargandoGrupos, setCargandoGrupos ] = useState(true);
-  const [ grupos, setGrupos ] = useState([]);
-  const [ filteredResults, setFilteredResults ] = useState([]);
-  const [ searchInput, setSearchInput ] = useState('');
+  const tablaRef = useRef(null);
+
+  const [reporteCargando, setReporteCargando] = useState(false)
+  const [cargandoGrupos, setCargandoGrupos] = useState(true);
+  const [grupos, setGrupos] = useState([]);
+  const [filteredResults, setFilteredResults] = useState([]);
+  const [searchInput, setSearchInput] = useState('');
 
   const defaultText = prop => prop || <span style={{ color: '#c7c3c3' }}>---</span>;
 
@@ -38,12 +43,12 @@ const GruposListado = () => {
       key: "id",
       align: "center",
       width: 100,
-      render: (_, item ) => (
+      render: (_, item) => (
         <ActionsButton
           key={item}
           options={[
             {
-              disabled: reporteCargando, 
+              disabled: reporteCargando,
               name: "Descargar reporte",
               icon: <FileExcelOutlined />,
               onClick: () => obtenerReporte(item)
@@ -51,7 +56,7 @@ const GruposListado = () => {
             {
               name: "Editar",
               icon: <EditOutlined />,
-              onClick: () => history.push(url+'/detalle?id='+item.id)
+              onClick: () => history.push(url + '/detalle?id=' + item.id)
             },
             {
               name: "Eliminar",
@@ -79,17 +84,17 @@ const GruposListado = () => {
     },
     {
       title: "Creado",
-      dataIndex: "timestamp",
-      key: "timestamp",
+      dataIndex: "creado",
+      key: "creado",
       render: (_, item) => (
-        moment(item?.timestamp?.toDate()).format('DD-MM-YYYY')
+        moment(item?.creado).format('DD-MM-YYYY')
       ),
     },
   ];
-  
+
   const multipleButtonData = [{
     text: "Agregar",
-    to: () => history.push(url+'/nuevo'),
+    to: () => history.push(url + '/nuevo'),
     icon: <PlusCircleOutlined />,
     props: { disabled: false, type: 'primary', }
   }];
@@ -100,10 +105,10 @@ const GruposListado = () => {
       setReporteCargando(true);
       const idGrupo = item?.id;
 
-      const q = query( collection(firestore, "usuarios"), where('grupos', 'array-contains-any', [idGrupo]));
+      const q = query(collection(firestore, "usuarios"), where('grupos', 'array-contains-any', [idGrupo]));
       const querySnapshot = await getDocs(q);
       const docs = []
-      
+
       querySnapshot.forEach((doc) => {
         const data = doc.data();
         docs.push({
@@ -127,7 +132,7 @@ const GruposListado = () => {
         { title: 'Verificado', key: 'verificado' },
       ];
 
-      await exportarExcelJS(columnas, docs, 'reporte grupos', "Reporte Yager", 'Grupos', '/LAUD-Logotipo.png',"")
+      await exportarExcelJS(columnas, docs, 'reporte grupos', "Reporte Yager", 'Grupos', '/LAUD-Logotipo.png', "")
 
 
     } catch (error) {
@@ -139,7 +144,7 @@ const GruposListado = () => {
     } finally {
       setReporteCargando(false)
     }
-    
+
   };
 
   const eliminarRegistro = async (item) => {
@@ -149,61 +154,73 @@ const GruposListado = () => {
       content: '¿Seguro que desea eliminar este registro?',
       onOk: async () => {
         try {
-          await updateDoc(doc(firestore, "grupos", item.id), {estatus: false}); 
+          // await updateDoc(doc(firestore, "grupos", item.id), { estatus: false });
+          const res = await HttpService.post('v1/grupo/eliminar', { id: item?.id });
+          respuestas(res);
+          if (res?.status === 200) {
+            tablaRef.current.refresh();
+          }
         } catch (error) {
           console.log('error al eliminar: ', error);
         }
       },
-      onCancel() {},
+      onCancel() { },
     });
   };
 
-  const onSearch = (searchValue) =>  {
+  const onSearch = (searchValue) => {
     setSearchInput(searchValue);
-    if( searchValue !== '' ){
+    if (searchValue !== '') {
       const filteredData = grupos.filter((item) => {
         return Object.values(item).join('').toLowerCase().includes(searchValue.toLowerCase());
       })
       setFilteredResults(filteredData);
-    }else{
+    } else {
       setFilteredResults(grupos)
     }
   };
 
   // Grupos
-  useEffect (() => {  
+  useEffect(() => {
     try {
-      onSnapshot( collection(firestore, "grupos"), (querySnapshot) => {
-         const docs = [];
-         querySnapshot.forEach((doc) => {
-          if( doc.data().estatus ) {
-            docs.push({ ...doc.data(), id:doc.id });
+      onSnapshot(collection(firestore, "grupos"), (querySnapshot) => {
+        const docs = [];
+        querySnapshot.forEach((doc) => {
+          if (doc.data().estatus) {
+            docs.push({ ...doc.data(), id: doc.id });
           }
-         });
-         setGrupos(docs);
-       })
-     } catch (error) {
-       console.log('error al cargar eventos de firebase: ', error);
-     } finally {
-       setCargandoGrupos(false);
-     }
-  }, [] );
+        });
+        setGrupos(docs);
+      })
+    } catch (error) {
+      console.log('error al cargar eventos de firebase: ', error);
+    } finally {
+      setCargandoGrupos(false);
+    }
+  }, []);
 
 
   return (
-    <SimpleTableLayout 
+    <SimpleTableLayout
       title={titulo}
       multipleButtonData={multipleButtonData}
       onSearchClicked={onSearch}
     >
-      <Table
+      <Tabla
+        nameURL={"v1/grupo"}
+        columns={columns}
+        extraParams={{ q: searchInput }}
+        scroll={{ x: "30vw" }}
+        innerRef={tablaRef}
+      />
+      {/* <Table
         dataSource={searchInput.length > 1 ? filteredResults : grupos}
         rowKey="id"
         loading={cargandoGrupos}
         columns={columns}
         size='small'
         scroll={{ x: 700 }}
-      />
+      /> */}
     </SimpleTableLayout>
   )
 }