Dashboard

front/components/admin/HeadAndFooter.jsx

@@ -29,6 +29,10 @@ import { useRouter } from "next/router";
 import { getSesion, logout } from "../../redux/actions/actionsUser";
 import Swal from "sweetalert2";
 import { useDispatch, useSelector } from "react-redux";
+import HomeIcon from "@mui/icons-material/Home";
+import { Flex } from "@chakra-ui/react";
+
+
 
 // If loading a variable font, you don't need to specify the font weight
 const inter = Inter({
@@ -106,16 +110,19 @@ const HeadFooter = ({ children }) => {
             <Logo measures={21} /> <b className="ml-2">ProjUnity</b>
           </Link>
         </NavbarBrand>
+        <NavbarItem>
+  <Flex alignItems="center" mr={8}>
+    <HomeIcon />
+    <Link
+      disableRipple
+      className="p-0 bg-transparent data-[hover=true]:bg-transparent font-semibold cursor-pointer"
+      href="/admin"
+    >
+      Home
+    </Link>
+  </Flex>
+</NavbarItem>
         <NavbarContent className="hidden sm:flex gap-4" justify="center">
-          <NavbarItem>
-            <Link
-              disableRipple
-              className="p-0 bg-transparent data-[hover=true]:bg-transparent font-semibold cursor-pointer"
-             href="/admin"
-            >
-              Home
-            </Link>
-          </NavbarItem>
           <Dropdown backdrop="blur">
             <NavbarItem>
               <DropdownTrigger>

front/components/admin/transactionDetalles.jsx

@@ -26,23 +26,25 @@ const TransactionDetailsPage = ({ transaction }) => {
 
     // Agregar contenido al PDF
     doc.text("Detalles de la Transacción", 10, 10);
+
+    const imgData = "./components/PROJUNITY.png"; // Reemplaza con la URL de tu imagen
+  doc.addImage(imgData, "PNG", 10, 40, 50, 50);
+
     doc.autoTable({
       head: [["Campo", "Valor"]],
       body: [
         ["Id", transaction.orderId],
         ["Nombre", transaction.nombre],
         ["Fecha", transaction.fecha],
         ["Total", transaction.total],
+        ["Producto", transaction.metodoPago],
         ["Estado del Pago", transaction.estadoPago],
-        ["Método de Pago", transaction.metodoPago],
       ],
     });
 
     // Descargar el PDF
     doc.save("DetallesTransaccion.pdf");
   }
-
-
   return (
     <Box m="8">
       <Flex justify="space-between" mb="4">
@@ -71,6 +73,10 @@ const TransactionDetailsPage = ({ transaction }) => {
             <Td fontWeight="bold">Total:</Td>
             <Td>{transaction.total}</Td>
           </Tr>
+          <Tr>
+            <Td fontWeight="bold">Producto:</Td>
+            <Td>{transaction.metodoPago}</Td>
+          </Tr>
           <Tr>
             <Td fontWeight="bold">Estado del Pago:</Td>
             <Td>
@@ -87,10 +93,6 @@ const TransactionDetailsPage = ({ transaction }) => {
               </Badge>
             </Td>
           </Tr>
-          <Tr>
-            <Td fontWeight="bold">Método de Pago:</Td>
-            <Td>{transaction.metodoPago}</Td>
-          </Tr>
         </Tbody>
       </Table>
       <Link href="/admin">
@@ -104,4 +106,4 @@ const TransactionDetailsPage = ({ transaction }) => {
   );
 };
 
-export default TransactionDetailsPage;
+export default TransactionDetailsPage;

front/package.json

@@ -21,6 +21,7 @@
     "@nextui-org/react": "^2.1.13",
     "@react-email/link": "0.0.5",
     "axios": "^1.5.1",
+    "date-fns": "^2.30.0",
     "formik": "^2.4.5",
     "framer-motion": "^10.16.4",
     "jspdf": "^2.5.1",

front/pages/admin/detallesTransaccion.jsx

@@ -5,28 +5,28 @@ import HeadFooter from "../../components/admin/HeadAndFooter";
 
 const transactionsData = [
     {
-      orderId: "12345",
-      nombre: "Juan Pérez",
-      fecha: "2023-10-15",
-      total: "$50.00",
-      estadoPago: "Aprobado",
-      metodoPago: "Tarjeta de Crédito",
+      orderId: "560",
+      nombre: "Dario",
+      fecha: "22023-10-27 06:42",
+      total: "$67.80",
+      metodoPago: "Laravel",
+      estadoPago: "Created",
     },
     {
-      orderId: "54321",
-      nombre: "María González",
-      fecha: "2023-10-14",
-      total: "$30.00",
-      estadoPago: "Denegado",
-      metodoPago: "Transferencia Mercado Pago",
+      orderId: "559",
+      nombre: "Dario",
+      fecha: "2023-10-27 06:31",
+      total: "$15.00",
+      metodoPago: "WooCommerce",
+      estadoPago: "Created",
     },
     {
-      orderId: "87435",
-      nombre: "Fernando Guevara",
-      fecha: "2023-08-16",
-      total: "$80.00",
-      estadoPago: "Pendiente",
-      metodoPago: "Mercado Pago",
+      orderId: "559",
+      nombre: "Dario",
+      fecha: "2023-10-27 06:31",
+      total: "$67.80",
+      metodoPago: "Laravel",
+      estadoPago: "Created",
     },
     // Agrega más transacciones aquí
   ];

front/pages/admin/gananciasUser.jsx

@@ -50,19 +50,30 @@ const diasDeVenta = [
 export default function GananciasView() {
 
   const dispatch = useDispatch();
-
-  const id = useSelector((state) => state.usersData.sesion.id);
-  console.log(id);
 
-    const userDashboardData = useSelector((state) => state.userDashboard.userDashboardData);
-    console.log(userDashboardData);
-
+  React.useEffect(() => {
+    let sesion = JSON.parse(localStorage.getItem("sesion"));
+    if (sesion.id) {
+      dispatch(getUserDashboard(sesion.id));
+    }
+  }, [dispatch]);
 
-    React.useEffect(() => {
-      dispatch(getUserDashboard(id));
-    }, [dispatch, id]);
+  // const id = useSelector((state) => state.usersData.sesion.id);
+  // console.log(id);
 
+  // React.useEffect(() => {
+  //   if (id) {
+  //   dispatch(getUserDashboard(id));
+  //   }
+  // }, [dispatch, id]);
 
+  const userDashboardData = useSelector(
+    (state) => state.userDashboard.userDashboardData
+  );
+  console.log(userDashboardData);
+
+  const loading = useSelector((state) => state.userDashboard.loading);
+  if (loading) return <Loader />;
 
     // Preparar datos para el gráfico de barras
   const data = [];
@@ -81,9 +92,7 @@ export default function GananciasView() {
     }
     return total;
   }
-  const loading = useSelector((state) => state.projectsData.loading);
-  //* Aqui se maneja el loader
-  if (loading) return <Loader />;
+
   return (
     <HeadFooter>
       <Box

front/pages/admin/gestionProyectos.jsx

@@ -16,42 +16,67 @@ import {
 import HeadFooter from "../../components/admin/HeadAndFooter";
 import Loader from "../../components/layout/loader";
 import { useDispatch, useSelector } from 'react-redux';
+import { getProjects } from "../../redux/actions/actions";
+import { ArrowForwardIcon, ArrowBackIcon } from "@chakra-ui/icons";
 
 
-const projectData = [
-  {
-    id: 1,
-    name: "Proyecto A",
-    owner: "Usuario 1",
-    status: "Activo",
-  },
-  {
-    id: 2,
-    name: "Proyecto B",
-    owner: "Usuario 2",
-    status: "En pausa",
-  },
-  {
-    id: 3,
-    name: "Proyecto C",
-    owner: "Usuario 3",
-    status: "Activo",
-  },
-  // Agrega más proyectos aquí
-];
+// const projectData = [
+//   {
+//     id: 1,
+//     name: "Proyecto A",
+//     owner: "Usuario 1",
+//     status: "Activo",
+//   },
+//   {
+//     id: 2,
+//     name: "Proyecto B",
+//     owner: "Usuario 2",
+//     status: "En pausa",
+//   },
+//   {
+//     id: 3,
+//     name: "Proyecto C",
+//     owner: "Usuario 3",
+//     status: "Activo",
+//   },
+//   // Agrega más proyectos aquí
+// ];
 
 export default function ProjectManagement() {
-  const [searchTerm, setSearchTerm] = useState("");
 
-  const filteredProjects = projectData.filter((project) =>
-    project.name.toLowerCase().includes(searchTerm.toLowerCase())
-  );
+  const dispatch = useDispatch();
+
+  React.useEffect(() => {
+    /* projects.length === 0 && */ dispatch(getProjects());
+    // dispatch(getCategory());
+  }, [dispatch]);
+
+  const projects = useSelector((state) => state.projectsData.projectsFilter);
+  console.log(projects)
 
+  const [searchTerm, setSearchTerm ] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 5;
 
-const loading = useSelector((state) => state.projectsData.loading);
-//* Aqui se maneja el loader
-if (loading) return <Loader />;
+
+  const loading = useSelector((state) => state.projectsData.loading);
+  //* Aqui se maneja el loader
+  if (loading) return <Loader />;
+
+  const filteredProjects = projects.filter((project) =>
+  project.name.toLowerCase().includes(searchTerm.toLowerCase())
+);
 
+// Cálculo del total de páginas para la paginación
+const totalPages = Math.ceil(filteredProjects.length / itemsPerPage);
+
+// Función para obtener los proyectos de la página actual
+const getCurrentPageProjects = () => {
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  return filteredProjects.slice(startIndex, endIndex);
+};
+
   return (
     <HeadFooter>
       <Box m="6">
@@ -79,11 +104,20 @@ if (loading) return <Loader />;
             </Tr>
           </Thead>
           <Tbody bg="gray.200">
-            {filteredProjects.map((project) => (
+            {getCurrentPageProjects()
+            .filter((project) =>
+            project.name.toLowerCase().includes(searchTerm.toLowerCase())
+          )
+            .map((project) => (
               <Tr key={project.id}>
                 <Td>{project.id}</Td>
                 <Td>{project.name}</Td>
-                <Td>{project.owner}</Td>
+                <Td>
+                {project.Users.map((user) => (
+                  <Td key={user.id}>{user.githubUser}</Td>
+
+                ))}
+                  </Td>
                 <Td>{project.status}</Td>
                 <Td>
                   <Link href="/admin/historialUser">
@@ -104,6 +138,27 @@ if (loading) return <Loader />;
             ))}
           </Tbody>
         </Table>
+         {/* Agregar la paginación */}
+         <Flex justify="space-between" mt="4">
+          <Button
+            onClick={() => setCurrentPage((prevPage) => prevPage - 1)}
+            disabled={currentPage === 1}
+            colorScheme="gray"
+            variant='outline'
+            leftIcon={<ArrowBackIcon />}
+          >
+            Anterior
+          </Button>
+          <Button
+            onClick={() => setCurrentPage((prevPage) => prevPage + 1)}
+            disabled={currentPage === totalPages}
+            colorScheme="gray"
+            variant='outline'
+            rightIcon={<ArrowForwardIcon />} 
+          >
+            Siguiente
+          </Button>
+        </Flex>
       </Box>
     </HeadFooter>
   );