add: nuevos componentes dashboard

chechojgb · chechojgb · commit 6cf366da85c1 · 2025-08-30T22:35:16.000-05:00
Se pasaron los componentes maquetados a funcionar correctamente, solo falta el analisis historico por semana.
diff --git a/app/Http/Controllers/DashboardController.php b/app/Http/Controllers/DashboardController.php
@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\BlMovimiento;
 use App\Models\BLPedido;
 use App\Models\BlProducto;
 use Illuminate\Http\Request;
@@ -33,32 +34,42 @@ public function index()
         $rankingProductos = BLPedido::with(['items.empaque.producto'])
             ->get()
             ->flatMap(function ($pedido) {
-                return $pedido->items->map(function ($item) {
-                    $cantidad = $item->cantidad_empaques ;
-                    return [
-                        'producto_id' => $item->empaque->producto->id,
-                        'nombre' => $item->empaque->producto->descripcion,
-                        'cantidad' => $cantidad,
-                    ];
-                });
+                return $pedido->items
+                    ->filter(fn($item) => $item->empaque)
+                    ->map(function ($item) {
+                        $cantidad = $item->empaque->cantidad_por_empaque;
+
+                        return [
+                            'producto_id' => $item->empaque->producto->id,
+                            'nombre'       => $item->empaque->producto->descripcion,
+                            'cantidad'     => $cantidad,
+                        ];
+                    });
             })
             ->groupBy('producto_id')
             ->map(function ($items, $productoId) {
                 return [
-                    'id' => $productoId,
-                    'nombre' => $items->first()['nombre'],
-                    'cantidad' => $items->sum('cantidad'),
+                    'id'      => $productoId,
+                    'nombre'  => $items->first()['nombre'],
+                    'cantidad'=> $items->sum('cantidad'),
                 ];
             })
             ->sortByDesc('cantidad')
             ->values()
-            ->take(5); // top 5
-
+            ->take(5);
+        
+        $pedidosEspera = BLPedido::get()
+            ->where('estado', 'pendiente');
+        $movimientos = BlMovimiento::with(['empaque.producto'])->get()
+            ->take(6);
+        // dd($movimientos);
 
         return Inertia::render('dashboard', [
             'productos' => $productos,
             'user' => $user,
-            'pedidos' => $rankingProductos
+            'pedidos' => $rankingProductos,
+            'pedidosEspera' => $pedidosEspera,
+            'movimientos' => $movimientos
         ]);
     }
 }
diff --git a/resources/js/components/BL/MovimientosRecientes.jsx b/resources/js/components/BL/MovimientosRecientes.jsx
@@ -1,52 +1,53 @@
 import { ArrowDownCircle, ArrowUpCircle } from 'lucide-react';
 
-const movimientos = [
-  {
-    tipo: 'Entrada',
-    producto: 'Botón Z6',
-    cantidad: 500,
-    fecha: '2025-08-02',
-    icono: <ArrowDownCircle className="text-green-600 w-5 h-5" />,
-  },
-  {
-    tipo: 'Salida',
-    producto: 'Botón R4',
-    cantidad: 300,
-    fecha: '2025-08-02',
-    icono: <ArrowUpCircle className="text-red-600 w-5 h-5" />,
-  },
-  {
-    tipo: 'Entrada',
-    producto: 'Botón L2',
-    cantidad: 200,
-    fecha: '2025-08-01',
-    icono: <ArrowDownCircle className="text-green-600 w-5 h-5" />,
-  },
-  {
-    tipo: 'Salida',
-    producto: 'Botón M1',
-    cantidad: 100,
-    fecha: '2025-07-31',
-    icono: <ArrowUpCircle className="text-red-600 w-5 h-5" />,
-  },
-  {
-    tipo: 'Entrada',
-    producto: 'Botón Z1',
-    cantidad: 200,
-    fecha: '2025-08-01',
-    icono: <ArrowDownCircle className="text-green-600 w-5 h-5" />,
-  },
-  {
-    tipo: 'Entrada',
-    producto: 'Botón Z1',
-    cantidad: 1000,
-    fecha: '2025-08-02',
-    icono: <ArrowDownCircle className="text-green-600 w-5 h-5" />,
-  },
-  // Puedes duplicar más para probar el scroll
-];
+// const movimientos = [
+//   {
+//     tipo: 'Entrada',
+//     producto: 'Botón Z6',
+//     cantidad: 500,
+//     fecha: '2025-08-02',
+//     icono: <ArrowDownCircle className="text-green-600 w-5 h-5" />,
+//   },
+//   {
+//     tipo: 'Salida',
+//     producto: 'Botón R4',
+//     cantidad: 300,
+//     fecha: '2025-08-02',
+//     icono: <ArrowUpCircle className="text-red-600 w-5 h-5" />,
+//   },
+//   {
+//     tipo: 'Entrada',
+//     producto: 'Botón L2',
+//     cantidad: 200,
+//     fecha: '2025-08-01',
+//     icono: <ArrowDownCircle className="text-green-600 w-5 h-5" />,
+//   },
+//   {
+//     tipo: 'Salida',
+//     producto: 'Botón M1',
+//     cantidad: 100,
+//     fecha: '2025-07-31',
+//     icono: <ArrowUpCircle className="text-red-600 w-5 h-5" />,
+//   },
+//   {
+//     tipo: 'Entrada',
+//     producto: 'Botón Z1',
+//     cantidad: 200,
+//     fecha: '2025-08-01',
+//     icono: <ArrowDownCircle className="text-green-600 w-5 h-5" />,
+//   },
+//   {
+//     tipo: 'Entrada',
+//     producto: 'Botón Z1',
+//     cantidad: 1000,
+//     fecha: '2025-08-02',
+//     icono: <ArrowDownCircle className="text-green-600 w-5 h-5" />,
+//   },
+//   // Puedes duplicar más para probar el scroll
+// ];
 
-export default function MovimientosRecientesBL() {
+export default function MovimientosRecientesBL({movimientos}) {
+  console.log('movimientos',movimientos);
   return (
     <div className="relative flex flex-col h-full p-5">
       {/* Header */}
@@ -57,23 +58,35 @@ export default function MovimientosRecientesBL() {
       {/* Lista scrollable */}
       <div className="flex-1 overflow-y-auto pr-1">
         <ul className="space-y-4 text-sm text-gray-800 dark:text-gray-300">
-          {movimientos.map((mov, i) => (
-            <li key={i} className="flex items-center justify-between">
-              <div className="flex items-center gap-3">
-                <div className="bg-gray-100 dark:bg-gray-800 p-2 rounded-full">
-                  {mov.icono}
-                </div>
-                <div>
-                  <p className="font-medium">{mov.tipo}: {mov.producto}</p>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">
-                    Cantidad: {mov.cantidad}
-                  </p>
+          {Object.values(movimientos).map((mov, i) => {
+            let icono;
+            if (mov.tipo === "entrada") {
+              icono = <ArrowUpCircle className="text-green-600 w-5 h-5" />;
+            } else {
+              icono = <ArrowDownCircle className="text-red-600 w-5 h-5" />;
+            }
+
+            return (
+              <li key={i} className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <div className="bg-gray-100 dark:bg-gray-800 p-2 rounded-full">
+                    {icono}
+                  </div>
+                  <div>
+                    <p className="font-medium">
+                      {mov.tipo}: {mov?.empaque?.producto?.descripcion}
+                    </p>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">
+                      Fecha: {mov.created_at.slice(0, 10)}
+                    </p>
+                  </div>
                 </div>
-              </div>
-              <div className="text-xs text-gray-500 dark:text-gray-400">{mov.fecha}</div>
-            </li>
-          ))}
+                <div className="text-xs text-gray-500 dark:text-gray-400">{mov.fecha}</div>
+              </li>
+            );
+          })}
         </ul>
+
       </div>
     </div>
   );
diff --git a/resources/js/components/BL/OrdenesPendientesBL.jsx b/resources/js/components/BL/OrdenesPendientesBL.jsx
@@ -3,28 +3,30 @@ import { useLoadStatus } from '../context/loadContext';
 import { themeByProject } from '../utils/theme';
 import { usePage } from '@inertiajs/react';
 
-const ordenes = [
-  {
-    numero: 'ORD-1001',
-    cliente: 'Confecciones Diana',
-    fecha: '2025-08-02',
-    estado: 'Pendiente',
-  },
-  {
-    numero: 'ORD-1002',
-    cliente: 'Boutique La Estrella',
-    fecha: '2025-08-01',
-    estado: 'Pendiente',
-  },
-  {
-    numero: 'ORD-1003',
-    cliente: 'Fábrica El Botonazo',
-    fecha: '2025-07-31',
-    estado: 'Pendiente',
-  },
-];
+// const ordenes = [
+//   {
+//     numero: 'ORD-1001',
+//     cliente: 'Confecciones Diana',
+//     fecha: '2025-08-02',
+//     estado: 'Pendiente',
+//   },
+//   {
+//     numero: 'ORD-1002',
+//     cliente: 'Boutique La Estrella',
+//     fecha: '2025-08-01',
+//     estado: 'Pendiente',
+//   },
+//   {
+//     numero: 'ORD-1003',
+//     cliente: 'Fábrica El Botonazo',
+//     fecha: '2025-07-31',
+//     estado: 'Pendiente',
+//   },
+// ];
 
-export default function OrdenesPendientesBL() {
+export default function OrdenesPendientesBL({ordenes}) {
+  console.log(ordenes);
+  
     const { props } = usePage();
     const proyecto = props?.auth?.user?.proyecto || 'AZZU';
     const theme = themeByProject[proyecto];
@@ -35,7 +37,7 @@ export default function OrdenesPendientesBL() {
       </h3>
 
       <ul className="space-y-4">
-        {ordenes.map((orden, index) => (
+        {Object.values(ordenes).map((orden, index) => (
           <li
             key={index}
             className="flex items-center justify-between bg-gray-50 dark:bg-gray-800 p-4 rounded-lg shadow-sm"
@@ -46,8 +48,8 @@ export default function OrdenesPendientesBL() {
                 <Clock className="w-5 h-5" />
               </div>
               <div>
-                <p className="font-medium text-gray-800 dark:text-gray-100">{orden.numero}</p>
-                <p className="text-sm text-gray-500 dark:text-gray-400">{orden.cliente}</p>
+                <p className="font-medium text-gray-800 dark:text-gray-100">ORD-{orden.id}</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">{orden.fecha_pedido}</p>
               </div>
             </div>
             <div className="text-right text-sm text-gray-500 dark:text-gray-400">
diff --git a/resources/js/components/BL/RankingBotonesVendidosBL.jsx b/resources/js/components/BL/RankingBotonesVendidosBL.jsx
@@ -1,16 +1,8 @@
 import { Medal } from 'lucide-react';
 
-const botonesVendidos = [
-  { nombre: 'Botón Z6', cantidad: 1200 },
-  { nombre: 'Botón R4', cantidad: 950 },
-  { nombre: 'Botón M1', cantidad: 800 },
-  { nombre: 'Botón L2', cantidad: 650 },
-  { nombre: 'Botón N8', cantidad: 500 },
-];
-
 const coloresRanking = ['text-yellow-500', 'text-gray-400', 'text-orange-700'];
 
-export default function RankingBotonesVendidosBL() {
+export default function RankingBotonesVendidosBL({ pedidos }) {
   return (
     <div className="relative p-4 h-full">
       <h3 className="text-base font-semibold text-gray-900 dark:text-white mb-4">
@@ -27,9 +19,9 @@ export default function RankingBotonesVendidosBL() {
             </tr>
           </thead>
           <tbody>
-            {botonesVendidos.map((boton, index) => (
+            {pedidos.map((boton, index) => (
               <tr
-                key={index}
+                key={boton.id}
                 className={`${
                   index % 2 === 0
                     ? 'bg-gray-50 dark:bg-gray-800'
diff --git a/resources/js/components/welcome/dashboard.jsx b/resources/js/components/welcome/dashboard.jsx
@@ -19,9 +19,9 @@ const breadcrumbs = [
     },
 ];
 
-export default function Dashboard({user, productos, pedidos}) {    
-    console.log(pedidos);
-    
+export default function Dashboard({user, productos, pedidos, pedidosEspera, movimientos}) {    
+    // console.log('movimientos',movimientos);
+        
     return (
         <AppLayout breadcrumbs={[{ title: 'Dashboard', href: '/dashboard' }]}>
             <Head title="Dashboard" />
@@ -67,7 +67,7 @@ export default function Dashboard({user, productos, pedidos}) {
 
                     {/* Panel 30% */}
                     <div className="border-sidebar-border/70 dark:border-sidebar-border relative overflow-hidden rounded-xl border min-h-[300px]">
-                        <MovimientosRecientesBL/>
+                        <MovimientosRecientesBL movimientos={movimientos}/>
                     </div>
                     </div>
 
@@ -76,10 +76,10 @@ export default function Dashboard({user, productos, pedidos}) {
                             <StockActualProductosBL productosStock={productos}/>
                         </div>
                         <div className="border-sidebar-border/70 dark:border-sidebar-border relative overflow-hidden rounded-xl border">
-                            <RankingBotonesVendidosBL/>
+                            <RankingBotonesVendidosBL pedidos={pedidos}/>
                         </div>
                         <div className="border-sidebar-border/70 dark:border-sidebar-border relative overflow-hidden rounded-xl border ">
-                            <OrdenesPendientesBL/>
+                            <OrdenesPendientesBL ordenes={pedidosEspera}/>
                         </div>
                     </div>
                     </>
diff --git a/resources/js/pages/dashboard.jsx b/resources/js/pages/dashboard.jsx
@@ -1,10 +1,10 @@
 import { LoadProvider } from '@/components/context/loadContext';
 import Dashboard from '@/components/welcome/dashboard';
 
-export default function MainApp({user, productos, pedidos}) {
+export default function MainApp({user, productos, pedidos, pedidosEspera, movimientos}) {
   return (
     <LoadProvider total={5}>
-      <Dashboard user={user} productos={productos} pedidos={pedidos}/>
+      <Dashboard user={user} productos={productos} pedidos={pedidos} pedidosEspera={pedidosEspera} movimientos={movimientos}/>
     </LoadProvider>
   );
 }
