=== FILE: ConfigView.jsx ===

=== FILE: FacturacionView.jsx ===

=== FILE: InicioView.jsx ===
Line 34: const menuItems = data.menu || data.menuItems || [];
  const tables = data.tables || [];

=== FILE: LoginView.jsx ===

=== FILE: MenuView.jsx ===
Line 661: menuItems = [],
  onAddCategory,
  onRenameCategory,
  onDeleteCategory,
  showToast
  }) => {
  const [newCatName, setNewCatName] = useState("");
Line 1455: menuItems = [],
  onSaveProduct,
  onDeleteProduct,
  onToggleActive,
  onQuickAdjustStock,
  onOpenSqliteRecords,
  onRenameCategory,
  onDeleteCategory,
  showToast
  }) => {
  const [selectedCategoryTab, setSelectedCategoryTab] = useState("Todos");
Line 1516: const allCategoryTabs = useMemo(() => {
  return ["Todos", ...allAvailableCategories, ...(hasUncategorized ? ["Sin Categoría"] : [])];
Line 1853: menuItems={menuItems}
  onAddCategory={handleAddCategory}
  onRenameCategory={handleRenameCategory}
  onDeleteCategory={handleDeleteCategory}
  showToast={showToast}
  />
  </div>
  );
  };
  
  // ──────────────────────────────────────────────────────────────────────────
  // VISTA: CONFIGURACIÓN INTEGRAL & FACTURACIÓN ELECTRÓNICA SUNAT
  // ──────────────────────────────────────────────────────────────────────────

=== FILE: MesasView.jsx ===

=== FILE: PersonalView.jsx ===
Line 550: className={`px-4 py-2 text-xs sm:text-sm font-bold rounded-xl transition-colors ${activeTab === "perfil" ? "bg-orange-500 text-white shadow-md shadow-orange-500/20" : "text-slate-400 hover:text-white"
  }`}
  >
  Datos Personales
  </button>
  <button
  onClick={() => setActiveTab("pagos")}
  className={`px-4 py-2 text-xs sm:text-sm font-bold rounded-xl transition-colors ${activeTab === "pagos" ? "bg-orange-500 text-white shadow-md shadow-orange-500/20" : "text-slate-400 hover:text-white"
  }`}
  >
  Historial de Pagos ({history.length})
  </button>
  <button
  onClick={() => setActiveTab("horario")}
  className={`px-4 py-2 text-xs sm:text-sm font-bold rounded-xl transition-colors ${activeTab === "horario" ? "bg-orange-500 text-white shadow-md shadow-orange-500/20" : "text-slate-400 hover:text-white"
  }`}
  >
  Jornada & Horario
  </button>
  </div>
  </div>
  
  {/* Content Body */}
  <div className="flex-1 overflow-y-auto p-7 space-y-5">
  {activeTab === "perfil" && (
  <div className="space-y-4">
Line 557: className={`px-4 py-2 text-xs sm:text-sm font-bold rounded-xl transition-colors ${activeTab === "pagos" ? "bg-orange-500 text-white shadow-md shadow-orange-500/20" : "text-slate-400 hover:text-white"
  }`}
  >
  Historial de Pagos ({history.length})
  </button>
  <button
  onClick={() => setActiveTab("horario")}
  className={`px-4 py-2 text-xs sm:text-sm font-bold rounded-xl transition-colors ${activeTab === "horario" ? "bg-orange-500 text-white shadow-md shadow-orange-500/20" : "text-slate-400 hover:text-white"
  }`}
  >
  Jornada & Horario
  </button>
  </div>
  </div>
  
  {/* Content Body */}
  <div className="flex-1 overflow-y-auto p-7 space-y-5">
  {activeTab === "perfil" && (
  <div className="space-y-4">
  <div className="p-5 rounded-2xl bg-slate-900/80 border border-slate-800 space-y-3.5">
  <p className="text-xs font-bold uppercase tracking-wider text-slate-400">Información de Contacto</p>
  <div className="grid grid-cols-2 gap-4 text-sm">
  <div>
  <span className="text-slate-500 text-xs">Teléfono Móvil:</span>
  <p className="text-white font-semibold mt-0.5">{employee.phone || "No registrado"}</p>
  </div>
Line 564: className={`px-4 py-2 text-xs sm:text-sm font-bold rounded-xl transition-colors ${activeTab === "horario" ? "bg-orange-500 text-white shadow-md shadow-orange-500/20" : "text-slate-400 hover:text-white"
  }`}
  >
  Jornada & Horario
  </button>
  </div>
  </div>
  
  {/* Content Body */}
  <div className="flex-1 overflow-y-auto p-7 space-y-5">
  {activeTab === "perfil" && (
  <div className="space-y-4">
  <div className="p-5 rounded-2xl bg-slate-900/80 border border-slate-800 space-y-3.5">
  <p className="text-xs font-bold uppercase tracking-wider text-slate-400">Información de Contacto</p>
  <div className="grid grid-cols-2 gap-4 text-sm">
  <div>
  <span className="text-slate-500 text-xs">Teléfono Móvil:</span>
  <p className="text-white font-semibold mt-0.5">{employee.phone || "No registrado"}</p>
  </div>
  <div>
  <span className="text-slate-500 text-xs">Correo Electrónico:</span>
  <p className="text-white font-semibold mt-0.5">{employee.email || "No registrado"}</p>
  </div>
  <div className="col-span-2">
  <span className="text-slate-500 text-xs">Dirección Residencial:</span>
  <p className="text-white font-semibold mt-0.5">{employee.address || "Av. Las Flores 341, Lima"}</p>
Line 574: {activeTab === "perfil" && (
  <div className="space-y-4">
  <div className="p-5 rounded-2xl bg-slate-900/80 border border-slate-800 space-y-3.5">
  <p className="text-xs font-bold uppercase tracking-wider text-slate-400">Información de Contacto</p>
  <div className="grid grid-cols-2 gap-4 text-sm">
  <div>
  <span className="text-slate-500 text-xs">Teléfono Móvil:</span>
  <p className="text-white font-semibold mt-0.5">{employee.phone || "No registrado"}</p>
  </div>
  <div>
  <span className="text-slate-500 text-xs">Correo Electrónico:</span>
  <p className="text-white font-semibold mt-0.5">{employee.email || "No registrado"}</p>
  </div>
  <div className="col-span-2">
  <span className="text-slate-500 text-xs">Dirección Residencial:</span>
  <p className="text-white font-semibold mt-0.5">{employee.address || "Av. Las Flores 341, Lima"}</p>
  </div>
  </div>
  </div>
  
  <div className="p-5 rounded-2xl bg-slate-900/80 border border-slate-800 space-y-3.5">
  <p className="text-xs font-bold uppercase tracking-wider text-slate-400">Condiciones Laborales</p>
  <div className="grid grid-cols-2 gap-4 text-sm">
  <div>
  <span className="text-slate-500 text-xs">Sueldo Base Mensual:</span>
  <p className="text-emerald-400 font-extrabold text-lg mt-0.5">{formatCurrency(employee.baseSalary)}</p>
Line 610: {activeTab === "pagos" && (
  <div className="space-y-5">
  {/* Barra de progreso de sueldo */}
  <div className="p-5 rounded-2xl bg-slate-900/80 border border-slate-800 space-y-3">
  <div className="flex justify-between items-center text-sm">
  <span className="text-slate-400 font-semibold">Sueldo Pagado este Periodo</span>
  <span className="font-extrabold text-white text-base">{percentPaid}% ({formatCurrency(totalPaid)} / {formatCurrency(baseSalary)})</span>
  </div>
  <div className="w-full bg-slate-800 rounded-full h-3 overflow-hidden">
  <div
  className="h-full bg-gradient-to-r from-orange-500 to-emerald-400 rounded-full transition-all duration-500"
  style={{ width: `${percentPaid}%` }}
  ></div>
  </div>
  <div className="flex justify-between text-xs sm:text-sm text-slate-400 pt-1">
  <span>Pendiente: <strong className="text-amber-400 font-bold">{formatCurrency(pendingAmount)}</strong></span>
  <button
  onClick={() => setPayModalOpen(true)}
  className="text-orange-400 hover:text-orange-300 font-bold flex items-center gap-1"
  >
  + Registrar Pago
  </button>
  </div>
  </div>
  
  {/* Historial de pagos */}
Line 662: {activeTab === "horario" && (
  <div className="space-y-3.5">
  <p className="text-xs font-bold uppercase tracking-wider text-slate-400">Jornada Semanal Asignada</p>
  {employee.schedule ? (
  <div className="space-y-2 text-sm">
  {Object.entries(employee.schedule).map(([day, val]) => (