Feat: Cambios Varios 2

2026-01-05 10:30:04 -03:00
parent 8bc1308bc5
commit 0fa77e4a98
184 changed files with 11098 additions and 6348 deletions
--- a/frontend/counter-panel/src/components/CashOpeningModal.tsx
+++ b/frontend/counter-panel/src/components/CashOpeningModal.tsx
@@ -0,0 +1,119 @@
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Play, ShieldCheck, Lock, X } from 'lucide-react';
+import api from '../services/api';
+import { useNavigate } from 'react-router-dom'
+import { useToast } from '../context/use-toast';
+
+interface Props {
+  onSuccess: () => void;
+  onCancel?: () => void;
+}
+
+export default function CashOpeningModal({ onSuccess, onCancel }: Props) {
+  const { showToast } = useToast();
+  const [openingBalance, setOpeningBalance] = useState<number>(0);
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+
+  const handleCancel = () => {
+    if (onCancel) {
+      onCancel();
+    } else {
+      navigate('/dashboard');
+    }
+  };
+
+  const handleOpen = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (openingBalance < 0) return;
+
+    setLoading(true);
+    try {
+      // Enviamos el fondo inicial al endpoint que creamos en C#
+      await api.post('/cashsessions/open', openingBalance);
+      showToast("Caja abierta correctamente. ¡Buen turno!", "success");
+      onSuccess();
+    } catch (error) {
+      showToast("Error al abrir la sesión de caja", "error");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-slate-950/80 backdrop-blur-md z-[500] flex items-center justify-center p-4">
+      <motion.div
+        initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }}
+        className="bg-white w-full max-w-md rounded-[2.5rem] shadow-2xl overflow-hidden border border-white/20"
+      >
+        {/* Header (Igual al anterior) */}
+        <div className="p-8 bg-slate-900 text-white relative">
+          <div className="absolute top-0 right-0 p-8 opacity-10"><Lock size={80} /></div>
+          {/* Botón X de cerrar en el header */}
+          
+          <div className="relative z-10">
+            <span className="text-[10px] font-black uppercase tracking-[0.3em] text-blue-400 block mb-2">Inicio de Jornada</span>
+            <h2 className="text-3xl font-black tracking-tight uppercase">Apertura de Caja</h2>
+          </div>
+          <button
+            onClick={handleCancel}
+            className="absolute z-20 top-6 right-6 p-2 hover:bg-white/10 rounded-xl transition-colors text-slate-400 hover:text-white"
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        <form onSubmit={handleOpen} className="p-8 space-y-8">
+          <div className="bg-blue-50 border border-blue-100 p-4 rounded-2xl flex gap-4">
+            <ShieldCheck className="text-blue-600 shrink-0" size={24} />
+            <p className="text-[11px] text-blue-800 font-bold leading-tight uppercase opacity-80">
+              Debe declarar el fondo de inicio (dinero para cambio) recibido de tesorería para habilitar los cobros.
+            </p>
+          </div>
+
+          <div className="space-y-3">
+            <label className="text-[10px] font-black text-slate-500 uppercase tracking-widest ml-1">Fondo Inicial en Efectivo</label>
+            <div className="relative">
+              <div className="absolute left-5 top-1/2 -translate-y-1/2 text-slate-300 font-mono text-2xl font-bold">$</div>
+              <input
+                type="number"
+                required autoFocus
+                min="0"
+                step="0.01"
+                className="w-full pl-12 pr-6 py-6 bg-slate-50 border-2 border-slate-100 rounded-2xl outline-none focus:border-blue-600 focus:bg-white text-3xl font-mono font-black text-slate-900 transition-all shadow-inner"
+                placeholder="0.00"
+                value={openingBalance || ''}
+                onChange={e => setOpeningBalance(parseFloat(e.target.value) || 0)}
+              />
+            </div>
+          </div>
+
+          <button
+            type="submit" disabled={loading}
+            className="w-full py-5 bg-blue-600 text-white font-black uppercase text-xs tracking-[0.2em] rounded-2xl shadow-xl shadow-blue-200 hover:bg-blue-700 transition-all flex items-center justify-center gap-3 active:scale-95"
+          >
+            <Play size={18} fill="currentColor" /> {loading ? 'Procesando...' : 'Iniciar Sesión de Trabajo'}
+          </button>
+
+          <div className="flex gap-4">
+            <button
+              type="button"
+              onClick={handleCancel}
+              className="flex-1 py-5 bg-slate-100 text-slate-500 font-black uppercase text-xs tracking-widest rounded-2xl hover:bg-slate-200 transition-all active:scale-95"
+            >
+              Cancelar
+            </button>
+            <button
+              type="submit"
+              disabled={loading}
+              className="flex-[2] py-5 bg-blue-600 text-white font-black uppercase text-xs tracking-[0.2em] rounded-2xl shadow-xl shadow-blue-200 hover:bg-blue-700 transition-all flex items-center justify-center gap-3 active:scale-95"
+            >
+              <Play size={18} fill="currentColor" /> {loading ? 'Cargando...' : 'Iniciar Turno'}
+            </button>
+          </div>
+        </form>
+      </motion.div>
+    </div>
+  );
+}