diff --git a/.claude/settings.local.json b/.claude/settings.local.json index a4638e3..e0a8599 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -7,7 +7,26 @@ "Bash(git commit:*)", "Bash(git remote add:*)", "Bash(git push:*)", - "Bash(cat:*)" + "Bash(cat:*)", + "Bash(git -C /root/SistemaHotel status)", + "Bash(git -C /root/SistemaHotel add backend/hotel_hacienda/src/db/migrations/001_front_office_tables.sql)", + "Bash(git -C /root/SistemaHotel commit -m \"$\\(cat <<''EOF''\nfeat: add database migration for front-office tables\n\nCo-Authored-By: Claude Opus 4.6 \nEOF\n\\)\")", + "Bash(git -C /root/SistemaHotel check-ignore -v backend/hotel_hacienda/src/db/migrations/001_front_office_tables.sql)", + "Bash(git -C /root/SistemaHotel add backend/hotel_hacienda/src/db/migrations/001_front_office_tables.sql .gitignore)", + "Bash(git -C /root/SistemaHotel log --oneline -3)", + "Bash(npm install:*)", + "Bash(git init:*)", + "Bash(git -C /root/SistemaHotel log --oneline -5)", + "Bash(git -C /root/SistemaHotel diff backend/hotel_hacienda/src/app.js frontend/Frontend-Hotel/src/App.jsx frontend/Frontend-Hotel/src/constants/menuconfig.js)", + "Bash(psql:*)", + "Bash(systemctl is-active:*)", + "Bash(service docker:*)", + "Bash(ip addr:*)", + "Bash(docker compose:*)", + "Bash(apt-get update:*)", + "Bash(apt-get:*)", + "Bash(docker:*)", + "Bash(python3:*)" ] } } diff --git a/backend/hotel_hacienda/package-lock.json b/backend/hotel_hacienda/package-lock.json index c940d9e..8f6861a 100644 --- a/backend/hotel_hacienda/package-lock.json +++ b/backend/hotel_hacienda/package-lock.json @@ -10,11 +10,14 @@ "license": "ISC", "dependencies": { "axios": "^1.13.2", + "bcryptjs": "^2.4.3", + "cookie-parser": "^1.4.7", "cors": "^2.8.5", "csv-parser": "^3.2.0", "dotenv": "^17.2.2", "express": "^5.1.0", "express-validator": "^7.2.1", + "jsonwebtoken": "^9.0.2", "nodemailer": "^7.0.10", "pg": "^8.16.3", "stripe": "^20.1.2", @@ -84,6 +87,12 @@ "dev": true, "license": "MIT" }, + "node_modules/bcryptjs": { + "version": "2.4.3", + "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz", + "integrity": "sha512-V/Hy/X9Vt7f3BbPJEi8BdVFMByHi+jNXrYkW3huaybV/kQ0KJg0Y6PkEMbn+zeT+i+SiKZ/HMqJGIIt4LZDqNQ==", + "license": "MIT" + }, "node_modules/binary-extensions": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", @@ -141,6 +150,12 @@ "node": ">=8" } }, + "node_modules/buffer-equal-constant-time": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz", + "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==", + "license": "BSD-3-Clause" + }, "node_modules/bytes": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", @@ -275,6 +290,25 @@ "node": ">= 0.6" } }, + "node_modules/cookie-parser": { + "version": "1.4.7", + "resolved": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.4.7.tgz", + "integrity": "sha512-nGUvgXnotP3BsjiLX2ypbQnWoGUPIIfHQNZkkC668ntrzGWEZVW70HDEB1qnNGMicPje6EttlIgzo51YSwNQGw==", + "license": "MIT", + "dependencies": { + "cookie": "0.7.2", + "cookie-signature": "1.0.6" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/cookie-parser/node_modules/cookie-signature": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", + "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==", + "license": "MIT" + }, "node_modules/cookie-signature": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz", @@ -382,6 +416,15 @@ "node": ">= 0.4" } }, + "node_modules/ecdsa-sig-formatter": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz", + "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==", + "license": "Apache-2.0", + "dependencies": { + "safe-buffer": "^5.0.1" + } + }, "node_modules/ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", @@ -872,12 +915,97 @@ "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==", "license": "MIT" }, + "node_modules/jsonwebtoken": { + "version": "9.0.3", + "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.3.tgz", + "integrity": "sha512-MT/xP0CrubFRNLNKvxJ2BYfy53Zkm++5bX9dtuPbqAeQpTVe0MQTFhao8+Cp//EmJp244xt6Drw/GVEGCUj40g==", + "license": "MIT", + "dependencies": { + "jws": "^4.0.1", + "lodash.includes": "^4.3.0", + "lodash.isboolean": "^3.0.3", + "lodash.isinteger": "^4.0.4", + "lodash.isnumber": "^3.0.3", + "lodash.isplainobject": "^4.0.6", + "lodash.isstring": "^4.0.1", + "lodash.once": "^4.0.0", + "ms": "^2.1.1", + "semver": "^7.5.4" + }, + "engines": { + "node": ">=12", + "npm": ">=6" + } + }, + "node_modules/jwa": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz", + "integrity": "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==", + "license": "MIT", + "dependencies": { + "buffer-equal-constant-time": "^1.0.1", + "ecdsa-sig-formatter": "1.0.11", + "safe-buffer": "^5.0.1" + } + }, + "node_modules/jws": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.1.tgz", + "integrity": "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==", + "license": "MIT", + "dependencies": { + "jwa": "^2.0.1", + "safe-buffer": "^5.0.1" + } + }, "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "license": "MIT" }, + "node_modules/lodash.includes": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz", + "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==", + "license": "MIT" + }, + "node_modules/lodash.isboolean": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz", + "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==", + "license": "MIT" + }, + "node_modules/lodash.isinteger": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz", + "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==", + "license": "MIT" + }, + "node_modules/lodash.isnumber": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz", + "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==", + "license": "MIT" + }, + "node_modules/lodash.isplainobject": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", + "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==", + "license": "MIT" + }, + "node_modules/lodash.isstring": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz", + "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==", + "license": "MIT" + }, + "node_modules/lodash.once": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz", + "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==", + "license": "MIT" + }, "node_modules/math-intrinsics": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", @@ -1070,7 +1198,6 @@ "resolved": "https://registry.npmjs.org/pg/-/pg-8.16.3.tgz", "integrity": "sha512-enxc1h0jA/aq5oSDMvqyW3q89ra6XIIDZgCX9vkMrnz5DFTw/Ny3Li2lFQ+pt3L6MCgm/5o2o8HW9hiJji+xvw==", "license": "MIT", - "peer": true, "dependencies": { "pg-connection-string": "^2.9.1", "pg-pool": "^3.10.1", @@ -1331,7 +1458,6 @@ "version": "7.7.2", "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz", "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==", - "dev": true, "license": "ISC", "bin": { "semver": "bin/semver.js" diff --git a/backend/hotel_hacienda/src/controllers/guests.controller.js b/backend/hotel_hacienda/src/controllers/guests.controller.js index 61b6ca7..2a2759f 100644 --- a/backend/hotel_hacienda/src/controllers/guests.controller.js +++ b/backend/hotel_hacienda/src/controllers/guests.controller.js @@ -5,11 +5,11 @@ const getGuests = async (req, res) => { const { search, limit = 50, offset = 0 } = req.query; let query = ` SELECT g.*, - r.room_id, rm.name_room, + r.room_id, rm.room_number, r.check_in as current_check_in FROM guests g LEFT JOIN reservations r ON r.guest_id = g.id AND r.status = 'checked_in' - LEFT JOIN rooms rm ON rm.id_room = r.room_id + LEFT JOIN rooms rm ON rm.id = r.room_id `; const params = []; let paramIndex = 1; @@ -38,10 +38,10 @@ const getGuestById = async (req, res) => { try { const { id } = req.params; const guest = await pool.query(` - SELECT g.*, r.room_id, rm.name_room, r.check_in as current_check_in, r.check_out as current_check_out + SELECT g.*, r.room_id, rm.room_number, r.check_in as current_check_in, r.check_out as current_check_out FROM guests g LEFT JOIN reservations r ON r.guest_id = g.id AND r.status = 'checked_in' - LEFT JOIN rooms rm ON rm.id_room = r.room_id + LEFT JOIN rooms rm ON rm.id = r.room_id WHERE g.id = $1 `, [id]); @@ -92,9 +92,9 @@ const getGuestStays = async (req, res) => { try { const { id } = req.params; const result = await pool.query(` - SELECT gs.*, rm.name_room, rm.bed_type + SELECT gs.*, rm.room_number, rm.room_type FROM guest_stays gs - LEFT JOIN rooms rm ON rm.id_room = gs.room_id + LEFT JOIN rooms rm ON rm.id = gs.room_id WHERE gs.guest_id = $1 ORDER BY gs.check_in DESC `, [id]); diff --git a/backend/hotel_hacienda/src/controllers/housekeeping.controller.js b/backend/hotel_hacienda/src/controllers/housekeeping.controller.js index 1408c9a..ee9645e 100644 --- a/backend/hotel_hacienda/src/controllers/housekeeping.controller.js +++ b/backend/hotel_hacienda/src/controllers/housekeeping.controller.js @@ -4,12 +4,12 @@ const getTasks = async (req, res) => { try { const { status, priority, assigned_to } = req.query; let query = ` - SELECT ht.*, rm.name_room, rm.floor, + SELECT ht.*, rm.room_number, rm.floor, CASE WHEN ht.assigned_to IS NOT NULL THEN - (SELECT e.first_name || ' ' || e.last_name FROM employees e WHERE e.id_employee = ht.assigned_to) + (SELECT e.first_name || ' ' || e.last_name FROM employees e WHERE e.id = ht.assigned_to) END as assigned_name FROM housekeeping_tasks ht - LEFT JOIN rooms rm ON rm.id_room = ht.room_id + LEFT JOIN rooms rm ON rm.id = ht.room_id WHERE 1=1 `; const params = []; @@ -62,7 +62,7 @@ const updateTask = async (req, res) => { updates.status = 'completed'; updates.completed_at = new Date(); // Set room to available - await pool.query("UPDATE rooms SET status = 'available' WHERE id_room = $1", [task.room_id]); + await pool.query("UPDATE rooms SET status = 'available' WHERE id = $1", [task.room_id]); await pool.query( 'INSERT INTO room_status_log (room_id, previous_status, new_status, changed_by) VALUES ($1, $2, $3, $4)', [task.room_id, 'cleaning', 'available', req.user?.user_id] @@ -91,10 +91,10 @@ const getStaff = async (req, res) => { // Get employees from housekeeping-related areas // Note: the employees table structure uses stored functions, so we query directly const result = await pool.query(` - SELECT e.id_employee, e.first_name, e.last_name, - (SELECT COUNT(*) FROM housekeeping_tasks ht WHERE ht.assigned_to = e.id_employee AND ht.status = 'in_progress') as active_tasks + SELECT e.id, e.first_name, e.last_name, + (SELECT COUNT(*) FROM housekeeping_tasks ht WHERE ht.assigned_to = e.id AND ht.status = 'in_progress') as active_tasks FROM employees e - WHERE e.status_employee = true + WHERE e.status = 'active' ORDER BY e.first_name LIMIT 50 `); diff --git a/backend/hotel_hacienda/src/controllers/incomehrx.controller.js b/backend/hotel_hacienda/src/controllers/incomehrx.controller.js index cd9d1b1..544e5f3 100644 --- a/backend/hotel_hacienda/src/controllers/incomehrx.controller.js +++ b/backend/hotel_hacienda/src/controllers/incomehrx.controller.js @@ -1,6 +1,6 @@ const pool = require('../db/connection'); const axios = require('axios'); -const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY); +const stripe = process.env.STRIPE_SECRET_KEY ? require('stripe')(process.env.STRIPE_SECRET_KEY) : null; const getFacturas = async (initialDate, finalDate) => { try { const response = await axios.get(process.env.FACTURAS_API_URL, { diff --git a/backend/hotel_hacienda/src/controllers/operational-reports.controller.js b/backend/hotel_hacienda/src/controllers/operational-reports.controller.js index 475f5ff..e0e571b 100644 --- a/backend/hotel_hacienda/src/controllers/operational-reports.controller.js +++ b/backend/hotel_hacienda/src/controllers/operational-reports.controller.js @@ -53,11 +53,11 @@ const getRevenueReport = async (req, res) => { } const result = await pool.query(` - SELECT rm.bed_type as room_type, COALESCE(SUM(r.total_amount), 0) as revenue + SELECT rm.room_type, COALESCE(SUM(r.total_amount), 0) as revenue FROM reservations r - JOIN rooms rm ON rm.id_room = r.room_id + JOIN rooms rm ON rm.id = r.room_id WHERE r.status = 'checked_out' AND r.check_out >= CURRENT_DATE - INTERVAL '${interval}' - GROUP BY rm.bed_type + GROUP BY rm.room_type ORDER BY revenue DESC `); diff --git a/backend/hotel_hacienda/src/controllers/reservations.controller.js b/backend/hotel_hacienda/src/controllers/reservations.controller.js index 5b08b8a..6fb0ca8 100644 --- a/backend/hotel_hacienda/src/controllers/reservations.controller.js +++ b/backend/hotel_hacienda/src/controllers/reservations.controller.js @@ -5,10 +5,10 @@ const getReservations = async (req, res) => { const { status, from_date, to_date, search } = req.query; let query = ` SELECT r.*, g.first_name, g.last_name, g.phone, g.email, - rm.name_room, rm.bed_type + rm.room_number, rm.room_type FROM reservations r JOIN guests g ON g.id = r.guest_id - LEFT JOIN rooms rm ON rm.id_room = r.room_id + LEFT JOIN rooms rm ON rm.id = r.room_id WHERE 1=1 `; const params = []; @@ -128,7 +128,7 @@ const updateReservationStatus = async (req, res) => { // Cascading side effects if (status === 'checked_in') { // Set room to occupied - await pool.query("UPDATE rooms SET status = 'occupied' WHERE id_room = $1", [reservation.room_id]); + await pool.query("UPDATE rooms SET status = 'occupied' WHERE id = $1", [reservation.room_id]); await pool.query( 'INSERT INTO room_status_log (room_id, previous_status, new_status, changed_by) VALUES ($1, $2, $3, $4)', [reservation.room_id, 'available', 'occupied', userId] @@ -142,7 +142,7 @@ const updateReservationStatus = async (req, res) => { if (status === 'checked_out') { // Set room to cleaning - await pool.query("UPDATE rooms SET status = 'cleaning' WHERE id_room = $1", [reservation.room_id]); + await pool.query("UPDATE rooms SET status = 'cleaning' WHERE id = $1", [reservation.room_id]); await pool.query( 'INSERT INTO room_status_log (room_id, previous_status, new_status, changed_by) VALUES ($1, $2, $3, $4)', [reservation.room_id, 'occupied', 'cleaning', userId] @@ -162,7 +162,7 @@ const updateReservationStatus = async (req, res) => { if (status === 'cancelled') { // Free room if it was occupied if (reservation.status === 'checked_in') { - await pool.query("UPDATE rooms SET status = 'available' WHERE id_room = $1", [reservation.room_id]); + await pool.query("UPDATE rooms SET status = 'available' WHERE id = $1", [reservation.room_id]); } } diff --git a/backend/hotel_hacienda/src/controllers/rooms.controller.js b/backend/hotel_hacienda/src/controllers/rooms.controller.js index ff04633..35ba3e0 100644 --- a/backend/hotel_hacienda/src/controllers/rooms.controller.js +++ b/backend/hotel_hacienda/src/controllers/rooms.controller.js @@ -10,9 +10,9 @@ const getRoomsWithStatus = async (req, res) => { res.check_in, res.check_out FROM rooms r - LEFT JOIN reservations res ON res.room_id = r.id_room AND res.status = 'checked_in' + LEFT JOIN reservations res ON res.room_id = r.id AND res.status = 'checked_in' LEFT JOIN guests g ON g.id = res.guest_id - ORDER BY r.floor, r.name_room + ORDER BY r.floor, r.room_number `); res.json({ rooms: result.rows }); } catch (error) { @@ -32,13 +32,13 @@ const updateRoomStatus = async (req, res) => { return res.status(400).json({ message: 'Estado invalido' }); } - const current = await pool.query('SELECT status FROM rooms WHERE id_room = $1', [id]); + const current = await pool.query('SELECT status FROM rooms WHERE id = $1', [id]); if (current.rows.length === 0) { return res.status(404).json({ message: 'Habitacion no encontrada' }); } const previousStatus = current.rows[0].status; - await pool.query('UPDATE rooms SET status = $1 WHERE id_room = $2', [status, id]); + await pool.query('UPDATE rooms SET status = $1 WHERE id = $2', [status, id]); await pool.query( 'INSERT INTO room_status_log (room_id, previous_status, new_status, changed_by) VALUES ($1, $2, $3, $4)', diff --git a/backend/hotel_hacienda/src/controllers/roomservice.controller.js b/backend/hotel_hacienda/src/controllers/roomservice.controller.js index 05de0c1..a57deb6 100644 --- a/backend/hotel_hacienda/src/controllers/roomservice.controller.js +++ b/backend/hotel_hacienda/src/controllers/roomservice.controller.js @@ -4,10 +4,10 @@ const getOrders = async (req, res) => { try { const { status } = req.query; let query = ` - SELECT rso.*, rm.name_room, g.first_name || ' ' || g.last_name as guest_name, + SELECT rso.*, rm.room_number, g.first_name || ' ' || g.last_name as guest_name, json_agg(json_build_object('id', oi.id, 'name', mi.name, 'quantity', oi.quantity, 'price', oi.price, 'notes', oi.notes)) as items FROM room_service_orders rso - LEFT JOIN rooms rm ON rm.id_room = rso.room_id + LEFT JOIN rooms rm ON rm.id = rso.room_id LEFT JOIN guests g ON g.id = rso.guest_id LEFT JOIN order_items oi ON oi.order_id = rso.id LEFT JOIN menu_items mi ON mi.id = oi.menu_item_id @@ -19,7 +19,7 @@ const getOrders = async (req, res) => { } else { query += " WHERE rso.status NOT IN ('delivered', 'cancelled')"; } - query += ' GROUP BY rso.id, rm.name_room, g.first_name, g.last_name ORDER BY rso.created_at DESC'; + query += ' GROUP BY rso.id, rm.room_number, g.first_name, g.last_name ORDER BY rso.created_at DESC'; const result = await pool.query(query, params); res.json({ orders: result.rows }); diff --git a/backend/hotel_hacienda/src/controllers/schedules.controller.js b/backend/hotel_hacienda/src/controllers/schedules.controller.js index 344e272..e1e07e2 100644 --- a/backend/hotel_hacienda/src/controllers/schedules.controller.js +++ b/backend/hotel_hacienda/src/controllers/schedules.controller.js @@ -11,7 +11,7 @@ const getSchedules = async (req, res) => { let query = ` SELECT es.*, e.first_name, e.last_name FROM employee_schedules es - JOIN employees e ON e.id_employee = es.employee_id + JOIN employees e ON e.id = es.employee_id WHERE es.schedule_date BETWEEN $1 AND $2 `; const params = [week_start, weekEnd.toISOString().split('T')[0]]; @@ -67,7 +67,7 @@ const getEmployeeSchedule = async (req, res) => { const getEmployeesForScheduling = async (req, res) => { try { const result = await pool.query( - 'SELECT id_employee, first_name, last_name FROM employees WHERE status_employee = true ORDER BY first_name LIMIT 100' + "SELECT id, first_name, last_name FROM employees WHERE status = 'active' ORDER BY first_name LIMIT 100" ); res.json({ employees: result.rows }); } catch (error) { diff --git a/docker-compose.yml b/docker-compose.yml index 7045d73..1b8efbb 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -36,7 +36,7 @@ services: EMAIL_PORT: 587 EMAIL_USER: ${EMAIL_USER} EMAIL_PASS: ${EMAIL_PASS} - URL_CORS: https://hotel.consultoria-as.com + URL_CORS: http://192.168.10.229:5172 BANXICO_TOKEN: ${BANXICO_TOKEN} depends_on: postgres: @@ -49,7 +49,7 @@ services: ports: - "5172:5172" environment: - VITE_API_BASE_URL: http://backend:4000/api + VITE_API_BASE_URL: http://192.168.10.229:4000/api depends_on: - backend diff --git a/frontend/Frontend-Hotel/package-lock.json b/frontend/Frontend-Hotel/package-lock.json index b0ee15d..2320986 100644 --- a/frontend/Frontend-Hotel/package-lock.json +++ b/frontend/Frontend-Hotel/package-lock.json @@ -11,11 +11,14 @@ "@hookform/resolvers": "^5.2.2", "axios": "^1.11.0", "bootstrap": "^5.3.8", + "i18next": "^23.16.8", + "i18next-browser-languagedetector": "^8.0.4", "multer": "^2.0.2", "prop-types": "^15.8.1", "react": "^19.1.1", "react-dom": "^19.1.1", "react-hook-form": "^7.66.1", + "react-i18next": "^15.4.1", "react-icons": "^5.5.0", "react-router-dom": "^7.8.2", "xlsx": "^0.18.5", @@ -71,7 +74,6 @@ "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -233,6 +235,15 @@ "node": ">=6.0.0" } }, + "node_modules/@babel/runtime": { + "version": "7.28.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz", + "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/template": { "version": "7.27.2", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz", @@ -1518,7 +1529,6 @@ "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/core": "^7.21.3", "@svgr/babel-preset": "8.1.0", @@ -1821,7 +1831,6 @@ "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -1859,7 +1868,6 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -2218,7 +2226,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -2953,7 +2960,6 @@ "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -3622,6 +3628,47 @@ "node": ">= 0.4" } }, + "node_modules/html-parse-stringify": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz", + "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==", + "license": "MIT", + "dependencies": { + "void-elements": "3.1.0" + } + }, + "node_modules/i18next": { + "version": "23.16.8", + "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.16.8.tgz", + "integrity": "sha512-06r/TitrM88Mg5FdUXAKL96dJMzgqLE5dv3ryBAra4KCwD9mJ4ndOTS95ZuymIGoE+2hzfdaMak2X11/es7ZWg==", + "funding": [ + { + "type": "individual", + "url": "https://locize.com" + }, + { + "type": "individual", + "url": "https://locize.com/i18next.html" + }, + { + "type": "individual", + "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project" + } + ], + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.23.2" + } + }, + "node_modules/i18next-browser-languagedetector": { + "version": "8.2.1", + "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.1.tgz", + "integrity": "sha512-bZg8+4bdmaOiApD7N7BPT9W8MLZG+nPTOFlLiJiT8uzKXFjhxw4v2ierCXOwB5sFDMtuA5G4kgYZ0AznZxQ/cw==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.23.2" + } + }, "node_modules/ignore": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", @@ -4685,7 +4732,6 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -4723,7 +4769,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -4804,7 +4849,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz", "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -4814,7 +4858,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz", "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -4827,7 +4870,6 @@ "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.68.0.tgz", "integrity": "sha512-oNN3fjrZ/Xo40SWlHf1yCjlMK417JxoSJVUXQjGdvdRCU07NTFei1i1f8ApUAts+IVh14e4EdakeLEA+BEAs/Q==", "license": "MIT", - "peer": true, "engines": { "node": ">=18.0.0" }, @@ -4839,6 +4881,32 @@ "react": "^16.8.0 || ^17 || ^18 || ^19" } }, + "node_modules/react-i18next": { + "version": "15.7.4", + "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.7.4.tgz", + "integrity": "sha512-nyU8iKNrI5uDJch0z9+Y5XEr34b0wkyYj3Rp+tfbahxtlswxSCjcUL9H0nqXo9IR3/t5Y5PKIA3fx3MfUyR9Xw==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.27.6", + "html-parse-stringify": "^3.0.1" + }, + "peerDependencies": { + "i18next": ">= 23.4.0", + "react": ">= 16.8.0", + "typescript": "^5" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + }, + "typescript": { + "optional": true + } + } + }, "node_modules/react-icons": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz", @@ -5710,7 +5778,6 @@ "integrity": "sha512-ITcnkFeR3+fI8P1wMgItjGrR10170d8auB4EpMLPqmx6uxElH3a/hHGQabSHKdqd4FXWO1nFIp9rRn7JQ34ACQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -5795,6 +5862,15 @@ "vite": ">=2.6.0" } }, + "node_modules/void-elements": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz", + "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/frontend/Frontend-Hotel/src/App.css b/frontend/Frontend-Hotel/src/App.css index b9d355d..85ad7b5 100644 --- a/frontend/Frontend-Hotel/src/App.css +++ b/frontend/Frontend-Hotel/src/App.css @@ -5,38 +5,6 @@ text-align: center; } -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - .read-the-docs { - color: #888; + color: var(--text-muted); } diff --git a/frontend/Frontend-Hotel/src/components/Buttons/Button.css b/frontend/Frontend-Hotel/src/components/Buttons/Button.css index 37d24a8..cd2ac9f 100644 --- a/frontend/Frontend-Hotel/src/components/Buttons/Button.css +++ b/frontend/Frontend-Hotel/src/components/Buttons/Button.css @@ -3,27 +3,26 @@ padding: 10px 20px; font-size: 1rem; font-weight: bold; - border-radius: 999px; /* Súper redondo */ - background-color: #521414; - font-family: 'Roboto', sans-serif; + border-radius: 999px; + background-color: var(--accent-gold); + font-family: var(--font-sans); cursor: pointer; - color: #ffffff; + color: var(--bg-primary); transition: all 0.3s ease; - box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2); + box-shadow: var(--shadow-md); width: 100%; max-width: 400px; text-align: center; - transition: all 0.3s ease; } .btn.primary { - background-color: #4a0d0d; - color: white; + background-color: var(--accent-gold); + color: var(--bg-primary); } .btn.primary:hover { transform: translateY(-2px); - box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.3); + box-shadow: var(--shadow-lg); } .btn.secundary { @@ -32,10 +31,10 @@ font-size: 1.8rem; font-weight: bold; border-radius: 999px; - background-color: #eeeeee; + background-color: var(--bg-elevated); cursor: pointer; - color: #555555; - box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.15); + color: var(--text-primary); + box-shadow: var(--shadow-md); width: 100%; max-width: 400px; text-align: center; @@ -44,7 +43,7 @@ .btn.secundary:hover { transform: translateY(-2px); - box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.2); + box-shadow: var(--shadow-lg); } .button-group { @@ -54,36 +53,3 @@ margin-top: 30px; align-items: center; } - - - - -/* -.button-group { - display: flex; - flex-direction: column; - gap: 20px; - margin-top: 30px; - align-items: center; -} - -.input-field { - background-color: #eeeeee; - color: #555; - font-size: 1.8rem; - font-weight: bold; - border-radius: 999px; - padding: 20px 40px; - box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.15); - border: none; - width: 100%; - max-width: 400px; - text-align: center; - outline: none; -} - -.btn.gray { - background-color: #ccc; - color: #333; -} - */ diff --git a/frontend/Frontend-Hotel/src/components/Filters/DateRangeFilter.css b/frontend/Frontend-Hotel/src/components/Filters/DateRangeFilter.css index 39b304a..34315b1 100644 --- a/frontend/Frontend-Hotel/src/components/Filters/DateRangeFilter.css +++ b/frontend/Frontend-Hotel/src/components/Filters/DateRangeFilter.css @@ -15,8 +15,8 @@ .date-label { font-size: 14px; font-weight: 600; - color: #333; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + color: var(--text-primary); + font-family: var(--font-sans); white-space: nowrap; } @@ -24,12 +24,12 @@ padding: 10px 16px; border: none; border-radius: 30px; - background-color: white; - box-shadow: 0 0 0 2px #f4f4f4; + background-color: var(--bg-elevated); + box-shadow: 0 0 0 2px var(--border-color); font-size: 14px; - color: #333; + color: var(--text-primary); min-width: 150px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-family: var(--font-sans); font-weight: 600; cursor: pointer; transition: all 0.2s ease; @@ -39,11 +39,11 @@ .date-input:focus { outline: none; - box-shadow: 0 0 0 2px #fcd200; + box-shadow: 0 0 0 2px var(--accent-gold); } .date-input:hover { - box-shadow: 0 0 0 2px #e6e6e6; + box-shadow: 0 0 0 2px var(--accent-gold-muted); } @media (max-width: 768px) { @@ -61,4 +61,3 @@ flex: 1; } } - diff --git a/frontend/Frontend-Hotel/src/components/Filters/Filters.css b/frontend/Frontend-Hotel/src/components/Filters/Filters.css index e8c89d9..1a15286 100644 --- a/frontend/Frontend-Hotel/src/components/Filters/Filters.css +++ b/frontend/Frontend-Hotel/src/components/Filters/Filters.css @@ -1,5 +1,3 @@ -/* src/styles/Filters.css */ - .page-header { display: flex; justify-content: space-between; @@ -8,37 +6,37 @@ } .page-title { - color: #1a1a1a; + color: var(--text-primary); font-size: 28px; font-weight: 700; margin: 0; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + font-family: var(--font-sans); letter-spacing: -0.5px; } .new-payment-btn { - background-color: #FFD700; - color: #800000; + background-color: var(--accent-gold); + color: var(--bg-primary); font-weight: bold; padding: 10px 20px; border-radius: 20px; border: none; cursor: pointer; font-size: 14px; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + font-family: var(--font-sans); transition: all 0.2s ease; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-sm); } .new-payment-btn:hover { - background-color: #fcd200; + background-color: var(--accent-gold-hover); transform: translateY(-1px); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); + box-shadow: var(--shadow-md); } .new-payment-btn:active { transform: translateY(0); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-sm); } .report-page { @@ -55,36 +53,24 @@ input[type="date"] { padding: 10px 16px; border: none; border-radius: 30px; - background-color: white; - box-shadow: 0 0 0 2px #f4f4f4; + background-color: var(--bg-elevated); + box-shadow: 0 0 0 2px var(--border-color); font-size: 14px; - color: #333; + color: var(--text-primary); max-width: 250px; min-width: 150px; width: auto; flex: 0 1 auto; - /* appearance: none; - -webkit-appearance: none; - -moz-appearance: none; */ - /* background-image: url("data:image/svg+xml,%3Csvg fill='gold' viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: right 2px center; - background-size: 18px 18px; */ - font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-family: var(--font-sans); font-weight: bold; cursor: pointer; box-sizing: border-box; - /* display: flex; - justify-content: flex-end; - gap: 10px; - margin-bottom: 15px; */ - } select:focus, input[type="date"]:focus { outline: none; - box-shadow: 0 0 0 2px #fcd200; + box-shadow: 0 0 0 2px var(--accent-gold); } .filters { @@ -100,15 +86,14 @@ input[type="date"]:focus { } .filter-select, .filter-date { - background-color: white; + background-color: var(--bg-elevated); border: none; border-radius: 2rem; padding: 0.5rem 1rem; font-size: 1rem; - color: #333; - box-shadow: 0 0 3px rgba(0,0,0,0.1); + color: var(--text-primary); + box-shadow: var(--shadow-sm); appearance: none; - background-image: url('data:image/svg+xml;utf8,...'); /* usa ícono amarillo aquí */ background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; @@ -116,13 +101,13 @@ input[type="date"]:focus { .filter-select:focus, .filter-date:focus { outline: none; - box-shadow: 0 0 0 2px #FFD700; + box-shadow: 0 0 0 2px var(--accent-gold); } - .status-button { +.status-button { border: 2px solid; padding: 4px 10px; - border-radius: 6px; + border-radius: var(--radius-sm); font-weight: bold; text-transform: uppercase; font-size: 12px; @@ -130,48 +115,48 @@ input[type="date"]:focus { } .status-button.approve { - color: #28a745; - border-color: #28a745; - background-color: #e6fff0; + color: var(--success); + border-color: var(--success); + background-color: rgba(34, 197, 94, 0.12); } .status-button.approved { - color: #28a745; - border-color: #28a745; - background-color: #e6fff0; + color: var(--success); + border-color: var(--success); + background-color: rgba(34, 197, 94, 0.12); } .status-button.reject { - color: #dc3545; - border-color: #dc3545; - background-color: #ffe6e6; + color: var(--error); + border-color: var(--error); + background-color: rgba(239, 68, 68, 0.12); } + .status-button.rejected { - color: #dc3545; - border-color: #dc3545; - background-color: #ffe6e6; + color: var(--error); + border-color: var(--error); + background-color: rgba(239, 68, 68, 0.12); } .status-button.pending { - color: #f0ad4e; - border-color: #f0ad4e; - background-color: #fff7e6; + color: var(--warning); + border-color: var(--warning); + background-color: rgba(234, 179, 8, 0.12); } .status-button.paid { - color: #28a745; - border-color: #28a745; - background-color: #e6fff0; + color: var(--success); + border-color: var(--success); + background-color: rgba(34, 197, 94, 0.12); } - .income-card { - background-color: white; - border-radius: 15px; + background-color: var(--bg-secondary); + border-radius: var(--radius-lg); padding: 15px 20px; min-width: 140px; text-align: center; - box-shadow: 0 1px 4px rgba(0,0,0,0.1); + box-shadow: var(--shadow-sm); align-items: center; } @@ -181,37 +166,26 @@ input[type="date"]:focus { margin-bottom: 20px; } -/* .summary-card { - background: #ffffff; - border-radius: 10px; - padding: 10px 20px; - box-shadow: 0 0 10px rgba(0,0,0,0.1); - font-size: 1rem; - min-width: 160px; -} */ - - .summary-card { - background-color: white; - border-radius: 12px; + background-color: var(--bg-secondary); + border-radius: var(--radius-md); padding: 15px 25px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-sm); min-width: 140px; text-align: center; - color: #333; + color: var(--text-primary); align-items: center; display: block; } -/*Date*/ .date-filter { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 20px; font-size: 14px; - color: #333; - font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + color: var(--text-primary); + font-family: var(--font-sans); font-weight: bold; } @@ -223,17 +197,6 @@ input[type="date"]:focus { display: flex; align-items: center; } -/* -.status-button.approve { - background-color: #8bed92; - border: 1.5px solid #33a544; - color: #33a544; - border-radius: 20px; - padding: 5px 15px; - font-weight: bold; - pointer-events: none; -} */ - .page-filters { display: flex; @@ -245,21 +208,3 @@ input[type="date"]:focus { .approved-page h2 { margin-bottom: 10px; } - - -/* -.status-button { - border: 2px solid #28a745; - color: #28a745; - padding: 4px 10px; - border-radius: 6px; - font-weight: bold; - background-color: #e6fff0; -} - -.status-button.inactive { - border-color: #dc3545; - color: #dc3545; - background-color: #ffe6e6; -} - */ \ No newline at end of file diff --git a/frontend/Frontend-Hotel/src/components/Inputs/Input.css b/frontend/Frontend-Hotel/src/components/Inputs/Input.css index 7233b76..2fbbaef 100644 --- a/frontend/Frontend-Hotel/src/components/Inputs/Input.css +++ b/frontend/Frontend-Hotel/src/components/Inputs/Input.css @@ -2,7 +2,10 @@ width: 100%; padding: 12px; margin: 8px 0; - border-radius: 12px; - border: 1px solid #ccc; + border-radius: var(--radius-md); + border: 1px solid var(--border-color); font-size: 1rem; + background-color: var(--bg-elevated); + color: var(--text-primary); + font-family: var(--font-sans); } diff --git a/frontend/Frontend-Hotel/src/components/Layout2.jsx b/frontend/Frontend-Hotel/src/components/Layout2.jsx index 09e12ed..72728bf 100644 --- a/frontend/Frontend-Hotel/src/components/Layout2.jsx +++ b/frontend/Frontend-Hotel/src/components/Layout2.jsx @@ -5,13 +5,14 @@ import { useNavigate } from 'react-router-dom'; import "../styles/Dashboard.css"; import { AuthContext } from "../context/AuthContext"; import { langContext } from "../context/LenguageContext"; +import { useTheme } from "../context/ThemeContext"; import { FaSignOutAlt } from "react-icons/fa"; import { menuConfig } from "../constants/menuconfig"; export default function Layout() { const { toggleLang, lang } = useContext(langContext); const { user, logout } = useContext(AuthContext); - console.log('user', user); + const { theme, toggleTheme } = useTheme(); const handleLogout = () => { logout(); navigate("/"); @@ -19,7 +20,6 @@ export default function Layout() { const menuConfigWithPermissions = Object.values(menuConfig).map(section => ({ ...section, hidden: - section.label === "Dashboards" ? (user >= 1 && user <= 2 ? false : true) : section.label === "Expenses to be approved" ? (user === 1 || user === 2 ? false : true) : section.label === "Expenses" ? (user >= 1 && user <= 5 ? false : true) : section.label === "Inventory" ? (user >= 1 && user <= 5 ? false : true) : @@ -137,10 +137,15 @@ export default function Layout() { {/* Iconos a la derecha */} -
+
+ -// -// -// -// - - - -//
-//
- -// {/* Submenú (solo si no es página de detalle) */} -// {!isDetailPage && ( -//
-// {activeSubmenu.filter(section => !section.hidden).map((item, index) => ( -// -// isActive ? "submenu-link active" : "submenu-link" -// } -// > -// {item.label} -// -// ))} -//
-// )} -// - - -// {/* Página actual */} -//
-// -//
-// -// -// ); -// } diff --git a/frontend/Frontend-Hotel/src/components/Modals/ConfirmationModal.css b/frontend/Frontend-Hotel/src/components/Modals/ConfirmationModal.css index 9435d40..e876332 100644 --- a/frontend/Frontend-Hotel/src/components/Modals/ConfirmationModal.css +++ b/frontend/Frontend-Hotel/src/components/Modals/ConfirmationModal.css @@ -1,12 +1,10 @@ -/* components/Modals/ConfirmationModal.css */ - .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; - background-color: rgba(122, 0, 41, 0.6); + background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; @@ -14,29 +12,30 @@ } .modal { - background: white; + background: var(--bg-secondary); padding: 30px; - border-radius: 6px; + border-radius: var(--radius-sm); width: 450px; max-width: 95%; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); - border: 5px solid #7a0029; + box-shadow: var(--shadow-lg); + border: 2px solid var(--accent-gold); } .modal-header { display: flex; justify-content: space-between; align-items: center; - color: white; - background-color: #7a0029; + color: var(--bg-primary); + background-color: var(--accent-gold); padding: 15px 20px; - border-radius: 5px 5px 0 0; + border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .modal-body { padding: 20px; font-size: 16px; text-align: center; + color: var(--text-primary); } .modal-buttons { @@ -50,24 +49,24 @@ padding: 10px 25px; font-size: 18px; border-radius: 30px; - border: 2px solid #7a0029; + border: 2px solid var(--accent-gold); cursor: pointer; min-width: 100px; } .modal-button.yes { - color: green; - background-color: white; + color: var(--success); + background-color: var(--bg-secondary); } .modal-button.no { - color: #7a0029; - background-color: white; + color: var(--accent-gold); + background-color: var(--bg-secondary); } .close-button { font-size: 24px; - color: white; + color: var(--bg-primary); background: none; border: none; cursor: pointer; diff --git a/frontend/Frontend-Hotel/src/components/Modals/DiscardConfirmModal.css b/frontend/Frontend-Hotel/src/components/Modals/DiscardConfirmModal.css index 439e4a6..aa6b840 100644 --- a/frontend/Frontend-Hotel/src/components/Modals/DiscardConfirmModal.css +++ b/frontend/Frontend-Hotel/src/components/Modals/DiscardConfirmModal.css @@ -13,19 +13,19 @@ } .discard-modal-box { - background: white; + background: var(--bg-secondary); padding: 0; - border-radius: 12px; + border-radius: var(--radius-md); width: 450px; max-width: 90%; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + box-shadow: var(--shadow-lg); animation: slideUp 0.3s ease-out; overflow: hidden; } .discard-modal-header { - background-color: #7a0029; - color: white; + background-color: var(--accent-gold); + color: var(--bg-primary); padding: 20px; text-align: center; } @@ -39,7 +39,7 @@ .discard-modal-body { padding: 24px; text-align: center; - color: #213547; + color: var(--text-primary); font-size: 1rem; line-height: 1.5; } @@ -52,13 +52,13 @@ display: flex; gap: 12px; padding: 20px 24px; - border-top: 1px solid #e2e8f0; + border-top: 1px solid var(--border-color); justify-content: flex-end; } .discard-modal-button { padding: 10px 24px; - border-radius: 8px; + border-radius: var(--radius-sm); font-size: 1rem; font-weight: 600; cursor: pointer; @@ -68,21 +68,21 @@ } .discard-modal-button-cancel { - background-color: #e2e8f0; - color: #4a5568; + background-color: var(--bg-elevated); + color: var(--text-secondary); } .discard-modal-button-cancel:hover { - background-color: #cbd5e0; + background-color: var(--border-color); } .discard-modal-button-confirm { - background-color: #7a0029; - color: white; + background-color: var(--accent-gold); + color: var(--bg-primary); } .discard-modal-button-confirm:hover { - background-color: #5a001f; + background-color: var(--accent-gold-hover); } .discard-modal-button:active { @@ -108,4 +108,3 @@ transform: translateY(0); } } - diff --git a/frontend/Frontend-Hotel/src/components/Modals/Modal.css b/frontend/Frontend-Hotel/src/components/Modals/Modal.css index bfc06cb..d77d926 100644 --- a/frontend/Frontend-Hotel/src/components/Modals/Modal.css +++ b/frontend/Frontend-Hotel/src/components/Modals/Modal.css @@ -12,18 +12,18 @@ } .modal-box { - background: white; + background: var(--bg-secondary); padding: 30px; - border-radius: 10px; + border-radius: var(--radius-md); width: 350px; max-width: 90%; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); + box-shadow: var(--shadow-lg); } .modal-box h3 { margin-top: 0; margin-bottom: 15px; - color: #111; + color: var(--text-primary); text-align: center; } @@ -32,26 +32,27 @@ padding: 12px; margin-bottom: 15px; border: none; - border-radius: 12px; - background: #f1f1f1; + border-radius: var(--radius-md); + background: var(--bg-elevated); font-size: 14px; + color: var(--text-primary); } .btn { width: 100%; padding: 12px; border: none; - border-radius: 6px; + border-radius: var(--radius-sm); font-weight: 600; margin-bottom: 10px; cursor: pointer; } .btn--primary { - background-color: #8b0000; - color: white; + background-color: var(--accent-gold); + color: var(--bg-primary); } .btn--primary:hover { - background-color: #a00000; + background-color: var(--accent-gold-hover); } diff --git a/frontend/Frontend-Hotel/src/components/Navbar/Navbar.css b/frontend/Frontend-Hotel/src/components/Navbar/Navbar.css index 2747eda..75da349 100644 --- a/frontend/Frontend-Hotel/src/components/Navbar/Navbar.css +++ b/frontend/Frontend-Hotel/src/components/Navbar/Navbar.css @@ -1,12 +1,10 @@ -z/* src/styles/Navbar.css */ - .navbar { display: flex; justify-content: space-between; align-items: center; - background-color: #4a0d0d; /* Marrón oscuro */ + background-color: var(--bg-surface); padding: 12px 20px; - color: white; + color: var(--text-primary); } .navbar__brand { @@ -20,13 +18,13 @@ z/* src/styles/Navbar.css */ } .nav__link { - color: white; + color: var(--text-primary); text-decoration: none; font-size: 0.95rem; } .nav__link.active { - border-bottom: 2px solid #f8d47b; /* Amarillo suave */ + border-bottom: 2px solid var(--accent-gold); } .navbar__actions { @@ -37,17 +35,17 @@ z/* src/styles/Navbar.css */ .btn { padding: 6px 12px; border: none; - border-radius: 6px; + border-radius: var(--radius-sm); cursor: pointer; font-size: 0.9rem; } .btn--primary { - background-color: #f8d47b; /* Amarillo */ - color: #4a0d0d; + background-color: var(--accent-gold); + color: var(--bg-primary); } .btn--secondary { - background-color: #ddd; - color: #333; + background-color: var(--bg-elevated); + color: var(--text-primary); } diff --git a/frontend/Frontend-Hotel/src/components/SummaryCard.css b/frontend/Frontend-Hotel/src/components/SummaryCard.css index d6e8a54..4c63cb8 100644 --- a/frontend/Frontend-Hotel/src/components/SummaryCard.css +++ b/frontend/Frontend-Hotel/src/components/SummaryCard.css @@ -1,23 +1,23 @@ .summary-card-enhanced { - background: linear-gradient(145deg, #ffffff, #f8f9fa); - border-radius: 16px; + background: var(--bg-secondary); + border-radius: var(--radius-lg); padding: 20px 24px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + box-shadow: var(--shadow-sm); min-width: 180px; flex: 1; transition: all 0.3s ease; - border: 1px solid rgba(0, 0, 0, 0.05); + border: 1px solid var(--border-color); } .summary-card-enhanced:hover { transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); + box-shadow: var(--shadow-md); } .summary-card-enhanced.primary { - background: linear-gradient(145deg, #ffffff, #f8f9fa); - color: #333; - border: 1px solid rgba(0, 0, 0, 0.05); + background: var(--bg-secondary); + color: var(--text-primary); + border: 1px solid var(--border-color); } .card-header { @@ -32,13 +32,13 @@ text-transform: uppercase; letter-spacing: 0.5px; margin: 0; - color: #666; + color: var(--text-secondary); } .card-amount { font-size: 28px; font-weight: 700; - color: #333; + color: var(--text-primary); margin: 8px 0; line-height: 1.2; } @@ -46,10 +46,10 @@ .card-percentage { font-size: 16px; font-weight: 600; - color: #28a745; + color: var(--success); margin-top: 8px; padding-top: 8px; - border-top: 1px solid rgba(0, 0, 0, 0.1); + border-top: 1px solid var(--border-color); } .card-loading { @@ -62,8 +62,8 @@ .loading-spinner { width: 40px; height: 40px; - border: 4px solid rgba(0, 0, 0, 0.1); - border-top-color: #fcd200; + border: 4px solid var(--border-color); + border-top-color: var(--accent-gold); border-radius: 50%; animation: spin 0.8s linear infinite; } @@ -78,7 +78,7 @@ .summary-card-enhanced { min-width: 150px; } - + .card-amount { font-size: 24px; } @@ -88,13 +88,12 @@ .summary-card-enhanced { min-width: 100%; } - + .card-amount { font-size: 22px; } - + .card-title { font-size: 12px; } } - diff --git a/frontend/Frontend-Hotel/src/components/Table/Table.css b/frontend/Frontend-Hotel/src/components/Table/Table.css index 3179f67..bd82cae 100644 --- a/frontend/Frontend-Hotel/src/components/Table/Table.css +++ b/frontend/Frontend-Hotel/src/components/Table/Table.css @@ -1,167 +1,98 @@ -/* .custom-table { - width: 100%; - border-collapse: collapse; - font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; -} - -.custom-table thead tr { - background-color: #7b001a; - color: white; -} - -.custom-table th, -.custom-table td { - padding: 10px 15px; - border: 2px solid #ffcc00; - text-align: left; -} - -.custom-table tbody tr { - background-color: #ffffff; - color: black; -} - -.status-badge { - padding: 5px 10px; - border-radius: 14px; - font-weight: bold; - display: inline-block; - text-align: center; -} - -.status-badge.active { - color: green; - border: 1px solid green; - background-color: rgba(0, 128, 0, 0.192); -} - -.status-badge.reject { - color: red; - border: 1px solid rgb(190, 4, 4); - background-color: rgba(255, 0, 0, 0.171); -} - -.status-badge.pending { - color: rgb(128, 83, 0); - border: 1px solid rgb(235, 158, 15); - background-color: rgba(248, 176, 42, 0.76); -} - -.status-button.approve { - background-color: #009e2db0; - color: white; - border: none; - padding: 4px 12px; - border-radius: 2px; - font-weight: bold; -} - -.status-button.reject { - background-color: #d80404b0; - color: white; - border: none; - padding: 4px 12px; - border-radius: 2px; - font-weight: bold; -} */ - .custom-table { width: 100%; border-collapse: collapse; - /* font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */ - font-family: 'Franklin Gothic', 'Arial Narrow', Monserrat, sans-serif + font-family: var(--font-sans); } .custom-table thead tr { - background-color: #7b001a; - color: white; + background-color: var(--accent-gold); + color: var(--bg-primary); } -/*Bordes de línea*/ .custom-table th, .custom-table td { padding: 10px 15px; - border: 2px solid #ffcc00; + border: 2px solid var(--accent-gold); text-align: left; } .custom-table tbody tr { - font-family: montserrat; - background-color: #ffffff; - color: #515151; + font-family: var(--font-sans); + background-color: var(--bg-secondary); + color: var(--text-primary); } .status-badge { padding: 5px 10px; - border-radius: 14px; + border-radius: var(--radius-lg); font-weight: bold; display: inline-block; text-align: center; } .status-badge.active { - color: green; - border: 1px solid green; - background-color: rgba(0, 128, 0, 0.192); + color: var(--success); + border: 1px solid var(--success); + background-color: rgba(34, 197, 94, 0.12); } .status-badge.reject { - color: red; - border: 1px solid rgb(190, 4, 4); - background-color: rgba(255, 0, 0, 0.171); + color: var(--error); + border: 1px solid var(--error); + background-color: rgba(239, 68, 68, 0.12); } .status-badge.pending { - color: rgb(128, 83, 0); - border: 1px solid rgb(235, 158, 15); - background-color: rgba(248, 176, 42, 0.76); + color: var(--warning); + border: 1px solid var(--warning); + background-color: rgba(234, 179, 8, 0.12); } .status-badge.paid { - color: green; - border: 1px solid green; - background-color: rgba(0, 128, 0, 0.192); + color: var(--success); + border: 1px solid var(--success); + background-color: rgba(34, 197, 94, 0.12); } .status-button.approve { - background-color: #009e2db0; - color: white; + background-color: var(--success); + color: var(--bg-primary); border: none; padding: 4px 12px; - border-radius: 2px; + border-radius: var(--radius-sm); font-weight: bold; } .status-button.reject { - background-color: #d80404b0; - color: white; + background-color: var(--error); + color: var(--bg-primary); border: none; padding: 4px 12px; - border-radius: 2px; + border-radius: var(--radius-sm); font-weight: bold; } .status-button.pending { - background-color: #e2c000; - color: white; + background-color: var(--warning); + color: var(--bg-primary); border: none; padding: 4px 12px; - border-radius: 2px; + border-radius: var(--radius-sm); font-weight: bold; } .status-button.paid { - background-color: #009e2db0; - color: white; + background-color: var(--success); + color: var(--bg-primary); border: none; padding: 4px 12px; - border-radius: 2px; + border-radius: var(--radius-sm); font-weight: bold; } .add-button { background-color: transparent; - color: #7b001a; + color: var(--accent-gold); font-weight: bold; border: none; cursor: pointer; @@ -172,10 +103,8 @@ text-decoration: underline; } -/*Icono de flecha*/ - .custom-table a:hover { - color: #0055aa; + color: var(--info); } .custom-table a:hover svg { diff --git a/frontend/Frontend-Hotel/src/constants/menuconfig.js b/frontend/Frontend-Hotel/src/constants/menuconfig.js index 0961bc9..dc75106 100644 --- a/frontend/Frontend-Hotel/src/constants/menuconfig.js +++ b/frontend/Frontend-Hotel/src/constants/menuconfig.js @@ -11,20 +11,6 @@ export const menuConfig = { { label: "Guests", spanish_label: "Huespedes", route: "/app/guests" }, ], }, - dashboards: { - label: "Dashboards", - spanish_label: "Tableros", - basePath: "/app/income", - submenu: [ - { label: "Little Hotelier", spanish_label: "Little Hotelier", route: "/app/income" }, - { label: "Hotel P&L", spanish_label: "P&L Hotel", route: "/app/hotelpl" }, - { label: "Room Analysis", spanish_label: "Análisis de Habitaciones", route: "/app/room-analysis" }, - { label: "P&L Restaurant", spanish_label: "P&L Restaurante", route: "/app/restaurantpl" }, - { label: "Restaurant Analysis", spanish_label: "Análisis de Restaurante", route: "/app/restaurant-analysis" }, - // { label: "Budget", spanish_label: "Presupuesto", route: "/app/budget" }, - // { label: "Expenses", spanish_label: "Gastos", route: "/app/expenses" }, - ], - }, housekeeper: { label: "Housekeeper", spanish_label: "Cuidador de Habitaciones", diff --git a/frontend/Frontend-Hotel/src/context/ThemeContext.jsx b/frontend/Frontend-Hotel/src/context/ThemeContext.jsx new file mode 100644 index 0000000..fd1e1bc --- /dev/null +++ b/frontend/Frontend-Hotel/src/context/ThemeContext.jsx @@ -0,0 +1,30 @@ +import React, { createContext, useContext, useState, useEffect } from "react"; + +const ThemeContext = createContext(); + +export function ThemeProvider({ children }) { + const [theme, setTheme] = useState(() => { + return localStorage.getItem("hotel-theme") || "dark"; + }); + + useEffect(() => { + document.documentElement.setAttribute("data-theme", theme); + localStorage.setItem("hotel-theme", theme); + }, [theme]); + + const toggleTheme = () => { + setTheme((prev) => (prev === "dark" ? "light" : "dark")); + }; + + return ( + + {children} + + ); +} + +export function useTheme() { + const ctx = useContext(ThemeContext); + if (!ctx) throw new Error("useTheme must be used within ThemeProvider"); + return ctx; +} diff --git a/frontend/Frontend-Hotel/src/index.css b/frontend/Frontend-Hotel/src/index.css index 11a1f18..5dbf9ac 100644 --- a/frontend/Frontend-Hotel/src/index.css +++ b/frontend/Frontend-Hotel/src/index.css @@ -1,19 +1,21 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); @tailwind base; @tailwind components; @tailwind utilities; +*, +*::before, +*::after { + box-sizing: border-box; +} -:root { - font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - +body { + margin: 0; + padding: 0; + min-width: 320px; + min-height: 100vh; + overflow-x: hidden; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; @@ -22,76 +24,16 @@ a { font-weight: 500; - color: #cc0404de; - text-decoration: inherit; + color: var(--accent-gold); + text-decoration: none; } a:hover { - color: #ff8513; -} - -/* -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; - margin: 0; - padding: 0; - overflow: hidden; - height: 100vh; -} - */ - -body { - margin: 0; - padding: 0; - min-width: 320px; - min-height: 100vh; - height: auto; - overflow-x: hidden; - background-color: #f5f5f5; - display: block; + color: var(--accent-gold-hover); } h1 { - font-size: 3.2em; + font-size: 2.4rem; line-height: 1.1; + font-family: var(--font-display); } - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} - -button:hover { - border-color: #791002; -} - -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - - a:hover { - color: #640f04; - } - - button { - background-color: #f9f9f9; - } -} \ No newline at end of file diff --git a/frontend/Frontend-Hotel/src/main.jsx b/frontend/Frontend-Hotel/src/main.jsx index 2371292..1e5a5b9 100644 --- a/frontend/Frontend-Hotel/src/main.jsx +++ b/frontend/Frontend-Hotel/src/main.jsx @@ -3,20 +3,20 @@ import React from "react"; import ReactDOM from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; import App from "./App.jsx"; -//import { AuthProvider } from "./context/AuthContext.jsx"; import "./styles/global.css"; -import './index.css'; // o './styles/tailwind.css' +import './index.css'; import { AuthProvider } from "./context/AuthContext.jsx"; import { LangProvider } from "./context/LenguageContext.jsx"; - +import { ThemeProvider } from "./context/ThemeContext.jsx"; ReactDOM.createRoot(document.getElementById("root")).render( - - - - - - - - -); \ No newline at end of file + + + + + + + + + +); diff --git a/frontend/Frontend-Hotel/src/pages/Dashboard/HotelPL.css b/frontend/Frontend-Hotel/src/pages/Dashboard/HotelPL.css index 402ca53..eb2d6a3 100644 --- a/frontend/Frontend-Hotel/src/pages/Dashboard/HotelPL.css +++ b/frontend/Frontend-Hotel/src/pages/Dashboard/HotelPL.css @@ -8,7 +8,7 @@ } .page-title { - color: #1a1a1a; + color: var(--text-primary); font-size: 28px; font-weight: 700; margin: 0; @@ -21,14 +21,14 @@ justify-content: center; align-items: center; padding: 60px 20px; - color: #666; + color: var(--text-secondary); } .loading-spinner { width: 40px; height: 40px; - border: 4px solid #f3f3f3; - border-top: 4px solid #5D1A2A; + border: 4px solid var(--border-color); + border-top: 4px solid var(--accent-gold); border-radius: 50%; animation: spin 1s linear infinite; } @@ -46,19 +46,19 @@ } .pl-section { - background-color: white; - border-radius: 8px; + background-color: var(--bg-secondary); + border-radius: var(--radius-sm); padding: 24px; - box-shadow: 0 1px 3px rgba(0,0,0,0.1); - border: 1px solid #e5e7eb; + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-color); } .section-title { margin: 0 0 20px 0; font-size: 22px; font-weight: 600; - color: #374151; - border-bottom: 2px solid #5D1A2A; + color: var(--text-primary); + border-bottom: 2px solid var(--accent-gold); padding-bottom: 10px; } @@ -68,7 +68,7 @@ gap: 16px; align-items: center; margin: 0 0 20px 0; - border-bottom: 2px solid #5D1A2A; + border-bottom: 2px solid var(--accent-gold); padding-bottom: 10px; } @@ -81,7 +81,7 @@ .section-header-percentage { font-size: 16px; font-weight: 700; - color: #5D1A2A; + color: var(--accent-gold); text-align: left; padding-left: 212px; } @@ -111,38 +111,37 @@ .form-label { font-weight: 600; font-size: 16px; - color: #374151; + color: var(--text-primary); min-width: 200px; flex-shrink: 0; } .form-label.label-bold { font-weight: 900; - color: #000; + color: var(--text-primary); font-size: 18px; } - .form-input { width: 100%; padding: 10px 12px; - border: 1px solid #d1d5db; - border-radius: 6px; + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); font-size: 16px; - background-color: #f9fafb; - color: #111827; + background-color: var(--bg-elevated); + color: var(--text-primary); font-weight: 500; box-sizing: border-box; } .form-input:focus { outline: none; - border-color: #5D1A2A; + border-color: var(--accent-gold); } .form-input.highlight { - background-color: #fef3c7; - border-color: #fbbf24; + background-color: var(--accent-gold-muted); + border-color: var(--accent-gold); font-weight: 700; font-size: 15px; } @@ -150,7 +149,7 @@ .no-data-message { text-align: center; padding: 40px 20px; - color: #9ca3af; + color: var(--text-muted); font-size: 14px; } @@ -209,7 +208,6 @@ } } -/* Metrics Grid Styles */ .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); @@ -218,21 +216,21 @@ } .metric-card { - background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); - border-radius: 16px; + background: var(--bg-secondary); + border-radius: var(--radius-lg); padding: 24px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); - border: 1px solid rgba(0, 0, 0, 0.05); + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-color); transition: all 0.2s ease; } .metric-card:hover { - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-md); transform: translateY(-2px); } .metric-card h3 { - color: #1a1a1a; + color: var(--text-primary); font-size: 16px; font-weight: 600; margin: 0 0 16px 0; @@ -251,29 +249,29 @@ .count-value { font-size: 32px; font-weight: 700; - color: #1a1a1a; + color: var(--text-primary); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .currency-value { font-size: 28px; font-weight: 700; - color: #1a1a1a; + color: var(--text-primary); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .total-value { - color: #5D1A2A; + color: var(--accent-gold); font-size: 32px; } .loading-skeleton { width: 120px; height: 40px; - background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); + background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--border-color) 50%, var(--bg-elevated) 75%); background-size: 200% 100%; animation: loading 1.5s infinite; - border-radius: 4px; + border-radius: var(--radius-sm); } @keyframes loading { diff --git a/frontend/Frontend-Hotel/src/pages/Dashboard/Income.css b/frontend/Frontend-Hotel/src/pages/Dashboard/Income.css index 4d102cb..3c0fb49 100644 --- a/frontend/Frontend-Hotel/src/pages/Dashboard/Income.css +++ b/frontend/Frontend-Hotel/src/pages/Dashboard/Income.css @@ -8,7 +8,7 @@ } .page-title { - color: #1a1a1a; + color: var(--text-primary); font-size: 28px; font-weight: 700; margin: 0; @@ -17,12 +17,12 @@ } .summary-section { - background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); - border-radius: 20px; + background: var(--bg-primary); + border-radius: var(--radius-xl); padding: 24px; margin-bottom: 32px; - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); - border: 1px solid rgba(0, 0, 0, 0.05); + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-color); } .summary-cards-wrapper { @@ -32,10 +32,10 @@ } .table-section { - background: white; - border-radius: 16px; + background: var(--bg-secondary); + border-radius: var(--radius-lg); padding: 24px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + box-shadow: var(--shadow-sm); min-height: 400px; } @@ -51,14 +51,14 @@ .loading-spinner-large { width: 60px; height: 60px; - border: 5px solid rgba(0, 0, 0, 0.1); - border-top-color: #fcd200; + border: 5px solid var(--border-color); + border-top-color: var(--accent-gold); border-radius: 50%; animation: spin 0.8s linear infinite; } .table-loading p { - color: #666; + color: var(--text-secondary); font-size: 16px; font-weight: 500; margin: 0; @@ -105,7 +105,7 @@ .summary-section { padding: 16px; - border-radius: 16px; + border-radius: var(--radius-lg); } .summary-cards-wrapper { @@ -115,7 +115,7 @@ .table-section { padding: 16px; - border-radius: 12px; + border-radius: var(--radius-md); } .table-loading { @@ -141,4 +141,3 @@ padding: 12px; } } - diff --git a/frontend/Frontend-Hotel/src/pages/Expenses/EditExpense.css b/frontend/Frontend-Hotel/src/pages/Expenses/EditExpense.css index aa81ec0..fdd1a9b 100644 --- a/frontend/Frontend-Hotel/src/pages/Expenses/EditExpense.css +++ b/frontend/Frontend-Hotel/src/pages/Expenses/EditExpense.css @@ -1,12 +1,13 @@ .new-expense-container { - color: #333; + color: var(--text-primary); + padding: 20px; } .form-card { - background-color: #fff; - border-radius: 10px; - padding: 20px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + background-color: var(--bg-secondary); + border-radius: var(--radius-sm); + padding: 24px; + box-shadow: var(--shadow-sm); } .form-header { @@ -19,33 +20,11 @@ .form-id { font-weight: bold; font-size: 18px; -} - -.back-button { - background-color: #6c757d; - color: #fff; - border: none; - padding: 8px 16px; - border-radius: 4px; - cursor: pointer; - display: flex; - align-items: center; - gap: 5px; - font-size: 14px; - transition: background-color 0.2s; -} - -.back-button:hover { - background-color: #5a6268; -} - -.back-button:active { - background-color: #545b62; + margin-bottom: 10px; } .form-grid { display: grid; - /* grid-template-columns: repeat(3, 1fr); */ grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 30px; @@ -56,72 +35,42 @@ font-size: 14px; margin-bottom: 5px; display: block; - color: #333; + color: var(--text-primary); } .form-grid input, .form-grid select { width: 100%; padding: 6px 4px; - border: 1px solid #ccc; - border-radius: 6px; + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); font-size: 14px; - background-color: #f9f9f9; + background-color: var(--bg-elevated); + color: var(--text-primary); } -.save-button-wrapper { - display: flex; - justify-content: flex-end; - margin-top: 20px; -} - -.save-button { - background-color: #ffcb05; - color: #fff; - padding: 10px 30px; - font-weight: bold; +.back-button { + background-color: var(--bg-elevated); + color: var(--text-primary); border: none; - border-radius: 25px; - font-size: 16px; + padding: 8px 16px; + border-radius: var(--radius-sm); cursor: pointer; - transition: background-color 0.3s ease; + display: flex; + align-items: center; + gap: 5px; + font-size: 14px; + transition: background-color 0.2s; } -.save-button:hover { - background-color: #f4b400; +.back-button:hover { + background-color: var(--bg-surface); } -.product-table-section { - margin-top: 25px; +.back-button:active { + background-color: var(--bg-surface); } - -/*Actualización de New Expense con tabla*/ - -/* src/pages/Expenses/NewExpense.css */ - -.new-expense-container { - padding: 20px; -} - -.form-card { - background-color: #fff; - border-radius: 8px; - padding: 24px; - box-shadow: 0 0 10px rgba(0,0,0,0.1); -} - -.form-id { - font-weight: bold; - margin-bottom: 10px; -} - -/* .form-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 20px; -} */ - .save-button-wrapper { margin-top: 20px; display: flex; @@ -129,13 +78,18 @@ } .save-button { - background-color: #ffc107; /* amarillo/dorado */ - color: #000; /* ajustar según contraste */ + background-color: var(--accent-gold); + color: #000; border: none; padding: 10px 24px; border-radius: 20px; font-weight: bold; cursor: pointer; + transition: background-color 0.3s ease; +} + +.save-button:hover { + background-color: var(--accent-gold-hover); } .product-table-section { @@ -149,34 +103,34 @@ } .product-table th, .product-table td { - border: 1px solid #d4af37; /* dorado */ + border: 1px solid var(--accent-gold); padding: 8px; text-align: center; } .product-table th { - background-color: #800020; /* bordo/morado oscuro, según tus imágenes */ - color: white; + background-color: var(--accent-gold); + color: #000; font-weight: bold; } .add-product-row { cursor: pointer; - color: #d4af37; /* dorado */ + color: var(--accent-gold); text-align: center; padding: 10px; font-style: italic; } .tax-pill { - background-color: white; - border: 1px solid #d4af37; + background-color: var(--bg-secondary); + border: 1px solid var(--accent-gold); border-radius: 12px; padding: 2px 6px; - color: #800020; + color: var(--accent-gold); } .product-table tfoot td { - border-top: 2px solid #d4af37; + border-top: 2px solid var(--accent-gold); padding: 8px; } diff --git a/frontend/Frontend-Hotel/src/pages/Expenses/ExpenseDetail.css b/frontend/Frontend-Hotel/src/pages/Expenses/ExpenseDetail.css index d10e9e8..274049e 100644 --- a/frontend/Frontend-Hotel/src/pages/Expenses/ExpenseDetail.css +++ b/frontend/Frontend-Hotel/src/pages/Expenses/ExpenseDetail.css @@ -1,24 +1,23 @@ - .expense-detail { - background-color: #fff; + background-color: var(--bg-secondary); padding: 2rem; font-family: 'Montserrat'; max-width: 1000px; margin: 2rem auto; - border-radius: 16px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); - border: 1px solid #e0e0e0; + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-color); } .expense-detail h2 { - color: #000; + color: var(--text-primary); margin-bottom: 1.5rem; font-weight: 700; font-size: 1.8rem; } .expense-detail h3 { - color: #000; + color: var(--text-primary); } .expense-detail-grid { @@ -30,13 +29,13 @@ .expense-detail label { font-weight: 600; - color: #000; + color: var(--text-primary); margin-bottom: 0.4rem; display: block; } .expense-detail p { - color: #000; + color: var(--text-primary); } .expense-detail input[type="text"], @@ -45,36 +44,37 @@ width: 90%; max-width: 280px; padding: 10px 14px; - border: 1px solid #ccc; - border-radius: 10px; + border: 1px solid var(--border-color); + border-radius: var(--radius-md); font-size: 14px; font-family: 'Montserrat'; - background-color: #f9f9f9; + background-color: var(--bg-elevated); + color: var(--text-primary); transition: border-color 0.3s ease; } .expense-detail input:focus { outline: none; - border-color: #f1c40f; - background-color: #fff; - box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.2); + border-color: var(--accent-gold); + background-color: var(--bg-secondary); + box-shadow: 0 0 0 2px var(--accent-gold-muted); } .expense-detail button { margin-top: 2rem; padding: 12px 24px; - background-color: #f1c40f; + background-color: var(--accent-gold); border: none; color: #000; font-weight: 700; font-size: 16px; - border-radius: 16px; + border-radius: var(--radius-lg); cursor: pointer; transition: background-color 0.3s ease; } .expense-detail button:hover { - background-color: #d4ac0d; + background-color: var(--accent-gold-hover); } .products-section { @@ -84,43 +84,45 @@ .products-section h3 { margin-bottom: 1rem; font-weight: 700; - color: #333; + color: var(--text-primary); } .product-table { width: 100%; border-collapse: collapse; font-size: 14px; - border: 1px solid #f1c40f; + border: 1px solid var(--accent-gold); } .product-table th, .product-table td { - border: 1px solid #f1c40f; + border: 1px solid var(--accent-gold); padding: 12px; text-align: center; } .product-table th { - background-color: #800020; - color: #fff; + background-color: var(--accent-gold); + color: #000; font-weight: 700; } .product-table td { - background-color: #fff; + background-color: var(--bg-secondary); } .product-table input[type="number"] { width: 80px; padding: 6px; text-align: center; - border-radius: 8px; - border: 1px solid #ccc; + border-radius: var(--radius-sm); + border: 1px solid var(--border-color); + background-color: var(--bg-elevated); + color: var(--text-primary); } .success-message { - color: green; + color: var(--success); margin-top: 1rem; font-weight: 600; } @@ -133,69 +135,5 @@ } .error { - color: red; + color: var(--error); } - - -/* .expense-detail-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: 1.5rem; - margin-bottom: 2rem; -} */ - -/* .expense-detail-container { ->>>>>>> Stashed changes - padding: 2rem; - max-width: 900px; - margin: auto; - background: white; - border-radius: 12px; -} - -.expense-form { - display: flex; - flex-wrap: wrap; - gap: 1.5rem; -} - -.form-group { - flex: 1 1 45%; - display: flex; - flex-direction: column; -} - -label { - margin-bottom: 0.3rem; - font-weight: 600; -} - -input, select { - padding: 0.5rem; - border-radius: 6px; - border: 1px solid #ccc; -} - -.save-button { - margin-top: 1rem; - padding: 0.75rem 2rem; - background-color: #f4b400; - color: white; - border: none; - border-radius: 8px; - cursor: not-allowed; -} - -.amount-warning-banner { - background-color: #fff3cd; - color: #856404; - border: 1px solid #ffeeba; - padding: 1rem; - border-radius: 8px; - margin-bottom: 1rem; - font-weight: 500; -} -.amount-warning-banner::before { - content: "⚠️"; - margin-right: 0.5rem; -} \ No newline at end of file diff --git a/frontend/Frontend-Hotel/src/pages/Expenses/MonthlyPayments.css b/frontend/Frontend-Hotel/src/pages/Expenses/MonthlyPayments.css index 2fbc92d..31d103f 100644 --- a/frontend/Frontend-Hotel/src/pages/Expenses/MonthlyPayments.css +++ b/frontend/Frontend-Hotel/src/pages/Expenses/MonthlyPayments.css @@ -1,10 +1,10 @@ .monthly-payments-page .page-filters { - background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); - border-radius: 16px; + background: var(--bg-elevated); + border-radius: var(--radius-lg); padding: 20px; margin-bottom: 24px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); - border: 1px solid rgba(0, 0, 0, 0.05); + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 12px; @@ -43,7 +43,7 @@ @media (max-width: 768px) { .monthly-payments-page .page-filters { padding: 12px; - border-radius: 12px; + border-radius: var(--radius-md); gap: 10px; } @@ -72,4 +72,4 @@ width: 100%; align-self: stretch; } -} \ No newline at end of file +} diff --git a/frontend/Frontend-Hotel/src/pages/Expenses/MonthlyReport.css b/frontend/Frontend-Hotel/src/pages/Expenses/MonthlyReport.css index df7e485..c009249 100644 --- a/frontend/Frontend-Hotel/src/pages/Expenses/MonthlyReport.css +++ b/frontend/Frontend-Hotel/src/pages/Expenses/MonthlyReport.css @@ -1,10 +1,10 @@ .monthly-report-page .filters-section { - background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); - border-radius: 16px; + background: var(--bg-elevated); + border-radius: var(--radius-lg); padding: 20px; margin-bottom: 24px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); - border: 1px solid rgba(0, 0, 0, 0.05); + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 12px; @@ -36,11 +36,10 @@ padding: 10px 16px; border: none; border-radius: 30px; - background-color: white; - box-shadow: 0 0 0 2px #f4f4f4; + background-color: var(--bg-secondary); + box-shadow: 0 0 0 2px var(--border-color); font-size: 14px; - color: #333; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + color: var(--text-primary); font-weight: 600; cursor: pointer; transition: all 0.2s ease; @@ -50,11 +49,11 @@ .monthly-report-page .filters-row.second-row .clear-filters-btn:focus { outline: none; - box-shadow: 0 0 0 2px #fcd200; + box-shadow: 0 0 0 2px var(--accent-gold); } .monthly-report-page .filters-row.second-row .clear-filters-btn:hover { - box-shadow: 0 0 0 2px #e6e6e6; + box-shadow: 0 0 0 2px var(--border-color); } .monthly-report-page .filters-row .filter-search { @@ -64,11 +63,10 @@ padding: 10px 16px; border: none; border-radius: 30px; - background-color: white; - box-shadow: 0 0 0 2px #f4f4f4; + background-color: var(--bg-secondary); + box-shadow: 0 0 0 2px var(--border-color); font-size: 14px; - color: #333; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + color: var(--text-primary); font-weight: 600; transition: all 0.2s ease; height: 42px; @@ -78,11 +76,11 @@ .monthly-report-page .filters-row .filter-search:focus { outline: none; - box-shadow: 0 0 0 2px #fcd200; + box-shadow: 0 0 0 2px var(--accent-gold); } .monthly-report-page .filters-row .filter-search:hover { - box-shadow: 0 0 0 2px #e6e6e6; + box-shadow: 0 0 0 2px var(--border-color); } .monthly-report-page .date-input-group { @@ -95,21 +93,19 @@ .monthly-report-page .date-label { font-size: 11px; font-weight: 700; - color: #666; + color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .monthly-report-page .date-input { padding: 10px 16px; border: none; border-radius: 30px; - background-color: white; - box-shadow: 0 0 0 2px #f4f4f4; + background-color: var(--bg-secondary); + box-shadow: 0 0 0 2px var(--border-color); font-size: 14px; - color: #333; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + color: var(--text-primary); font-weight: 600; cursor: pointer; transition: all 0.2s ease; @@ -119,17 +115,17 @@ .monthly-report-page .date-input:focus { outline: none; - box-shadow: 0 0 0 2px #fcd200; + box-shadow: 0 0 0 2px var(--accent-gold); } .monthly-report-page .date-input:hover { - box-shadow: 0 0 0 2px #e6e6e6; + box-shadow: 0 0 0 2px var(--border-color); } @media (max-width: 768px) { .monthly-report-page .filters-section { padding: 12px; - border-radius: 12px; + border-radius: var(--radius-md); gap: 10px; } @@ -152,11 +148,10 @@ padding: 10px 16px; border: none; border-radius: 30px; - background-color: white; - box-shadow: 0 0 0 2px #f4f4f4; + background-color: var(--bg-secondary); + box-shadow: 0 0 0 2px var(--border-color); font-size: 14px; - color: #333; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + color: var(--text-primary); font-weight: 600; transition: all 0.2s ease; height: 42px; @@ -166,11 +161,11 @@ .monthly-report-page .filter-search:focus { outline: none; - box-shadow: 0 0 0 2px #fcd200; + box-shadow: 0 0 0 2px var(--accent-gold); } .monthly-report-page .filter-search:hover { - box-shadow: 0 0 0 2px #e6e6e6; + box-shadow: 0 0 0 2px var(--border-color); } @@ -198,11 +193,10 @@ padding: 10px 16px; border: none; border-radius: 30px; - background-color: white; - box-shadow: 0 0 0 2px #f4f4f4; + background-color: var(--bg-secondary); + box-shadow: 0 0 0 2px var(--border-color); font-size: 14px; - color: #333; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + color: var(--text-primary); font-weight: 600; cursor: pointer; transition: all 0.2s ease; @@ -212,10 +206,10 @@ .monthly-report-page .clear-filters-btn:focus { outline: none; - box-shadow: 0 0 0 2px #fcd200; + box-shadow: 0 0 0 2px var(--accent-gold); } .monthly-report-page .clear-filters-btn:hover { - box-shadow: 0 0 0 2px #e6e6e6; + box-shadow: 0 0 0 2px var(--border-color); } -} \ No newline at end of file +} diff --git a/frontend/Frontend-Hotel/src/pages/Expenses/NewExpense.css b/frontend/Frontend-Hotel/src/pages/Expenses/NewExpense.css index 2297537..4dbaf22 100644 --- a/frontend/Frontend-Hotel/src/pages/Expenses/NewExpense.css +++ b/frontend/Frontend-Hotel/src/pages/Expenses/NewExpense.css @@ -3,7 +3,7 @@ } .new-expense-container { - color: #333; + color: var(--text-primary); padding: 20px; } @@ -12,10 +12,10 @@ } .form-card { - background-color: #fff; - border-radius: 10px; + background-color: var(--bg-secondary); + border-radius: var(--radius-md); padding: 24px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-sm); } .form-header { @@ -31,11 +31,11 @@ } .back-button { - background-color: #6c757d; - color: #fff; + background-color: var(--bg-elevated); + color: var(--text-primary); border: none; padding: 8px 16px; - border-radius: 4px; + border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; @@ -45,11 +45,11 @@ } .back-button:hover { - background-color: #5a6268; + background-color: var(--bg-surface); } .back-button:active { - background-color: #545b62; + background-color: var(--bg-surface); } .form-grid { @@ -70,17 +70,18 @@ font-size: 14px; margin-bottom: 5px; display: block; - color: #333; + color: var(--text-primary); } .form-grid input, .form-grid select { width: 100%; padding: 8px 10px; - border: 1px solid #ccc; - border-radius: 6px; + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); font-size: 14px; - background-color: #f9f9f9; + background-color: var(--bg-elevated); + color: var(--text-primary); transition: border-color 0.2s, background-color 0.2s; box-sizing: border-box; -webkit-box-sizing: border-box; @@ -90,13 +91,13 @@ .form-grid input:focus, .form-grid select:focus { outline: none; - border-color: #5D1A2A; - background-color: #fff; + border-color: var(--accent-gold); + background-color: var(--bg-secondary); } .form-grid input:disabled, .form-grid select:disabled { - background-color: #e9ecef; + background-color: var(--bg-surface); cursor: not-allowed; opacity: 0.7; } @@ -132,7 +133,7 @@ margin-bottom: 0 !important; font-weight: bold; font-size: 14px; - color: #333; + color: var(--text-primary); line-height: 1; } @@ -142,7 +143,7 @@ min-width: 14px; min-height: 14px; cursor: pointer; - accent-color: #5D1A2A; + accent-color: var(--accent-gold); flex-shrink: 0; margin: 0; } @@ -154,7 +155,7 @@ } .save-button { - background-color: #ffc107; + background-color: var(--accent-gold); color: #000; padding: 10px 30px; font-weight: bold; @@ -166,7 +167,7 @@ } .save-button:hover { - background-color: #f4b400; + background-color: var(--accent-gold-hover); transform: translateY(-1px); } @@ -175,8 +176,8 @@ } .save-button:disabled { - background-color: #e0e0e0; - color: #999; + background-color: var(--border-color); + color: var(--text-muted); cursor: not-allowed; transform: none; } @@ -192,35 +193,35 @@ } .product-table th, .product-table td { - border: 1px solid #d4af37; + border: 1px solid var(--accent-gold); padding: 8px; text-align: center; } .product-table th { - background-color: #800020; - color: white; + background-color: var(--accent-gold); + color: #000; font-weight: bold; } .add-product-row { cursor: pointer; - color: #d4af37; + color: var(--accent-gold); text-align: center; padding: 10px; font-style: italic; } .tax-pill { - background-color: white; - border: 1px solid #d4af37; + background-color: var(--bg-secondary); + border: 1px solid var(--accent-gold); border-radius: 12px; padding: 2px 6px; - color: #800020; + color: var(--accent-gold); } .product-table tfoot td { - border-top: 2px solid #d4af37; + border-top: 2px solid var(--accent-gold); padding: 8px; } @@ -228,11 +229,11 @@ width: 100%; margin-top: 30px; padding-top: 20px; - border-top: 2px solid #e0e0e0; + border-top: 2px solid var(--border-color); } .add-products h3 { - color: #333; + color: var(--text-primary); font-size: 18px; font-weight: bold; margin-bottom: 15px; diff --git a/frontend/Frontend-Hotel/src/pages/Expenses/NewMonthlyPayment.css b/frontend/Frontend-Hotel/src/pages/Expenses/NewMonthlyPayment.css index 67b13eb..e089038 100644 --- a/frontend/Frontend-Hotel/src/pages/Expenses/NewMonthlyPayment.css +++ b/frontend/Frontend-Hotel/src/pages/Expenses/NewMonthlyPayment.css @@ -1,86 +1,15 @@ .new-expense-container { - color: #333; -} - -.form-card { - background-color: #fff; - border-radius: 10px; - padding: 20px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); -} - -.form-id { - font-weight: bold; - margin-bottom: 20px; - font-size: 24px; -} - -.form-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 15px; - margin-bottom: 30px; -} - -.form-grid label { - font-weight: bold; - font-size: 14px; - margin-bottom: 5px; - display: block; - color: #333; -} - -.form-grid input, -.form-grid select { - width: 100%; - padding: 6px 4px; - border: 1px solid #ccc; - border-radius: 6px; - font-size: 14px; - background-color: #f9f9f9; -} - -.save-button-wrapper { - display: flex; - justify-content: flex-end; - margin-top: 20px; -} - -.save-button { - background-color: #ffcb05; - color: #fff; - padding: 10px 30px; - font-weight: bold; - border: none; - border-radius: 25px; - font-size: 16px; - cursor: pointer; - transition: background-color 0.3s ease; -} - -.save-button:hover { - background-color: #f4b400; -} - -.product-table-section { - margin-top: 25px; -} - - -/*Actualización de New Expense con tabla*/ - -/* src/pages/Expenses/NewExpense.css */ - -.new-expense-container { + color: var(--text-primary); padding: 20px; } .form-card { - background-color: #fff; - border-radius: 8px; + background-color: var(--bg-secondary); + border-radius: var(--radius-md); padding: 24px; - box-shadow: 0 0 10px rgba(0,0,0,0.1); + box-shadow: var(--shadow-md); + border: 1px solid var(--border-color); } .form-grid { @@ -96,13 +25,43 @@ } .save-button { - background-color: #ffc107; /* amarillo/dorado */ - color: #000; /* ajustar según contraste */ + background-color: var(--accent-gold); + color: #000; border: none; padding: 10px 24px; - border-radius: 20px; + border-radius: var(--radius-xl); font-weight: bold; cursor: pointer; + transition: background-color 0.3s ease; +} + +.save-button:hover { + background-color: var(--accent-gold-hover); +} + +.form-id { + font-weight: bold; + margin-bottom: 20px; + font-size: 24px; +} + +.form-grid label { + font-weight: bold; + font-size: 14px; + margin-bottom: 5px; + display: block; + color: var(--text-primary); +} + +.form-grid input, +.form-grid select { + width: 100%; + padding: 6px 4px; + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); + font-size: 14px; + background-color: var(--bg-elevated); + color: var(--text-primary); } .product-table-section { @@ -116,34 +75,34 @@ } .product-table th, .product-table td { - border: 1px solid #d4af37; /* dorado */ + border: 1px solid var(--accent-gold); padding: 8px; text-align: center; } .product-table th { - background-color: #800020; /* bordo/morado oscuro, según tus imágenes */ - color: white; + background-color: var(--accent-gold); + color: #000; font-weight: bold; } .add-product-row { cursor: pointer; - color: #d4af37; /* dorado */ + color: var(--accent-gold); text-align: center; padding: 10px; font-style: italic; } .tax-pill { - background-color: white; - border: 1px solid #d4af37; + background-color: var(--bg-elevated); + border: 1px solid var(--accent-gold); border-radius: 12px; padding: 2px 6px; - color: #800020; + color: var(--accent-gold); } .product-table tfoot td { - border-top: 2px solid #d4af37; + border-top: 2px solid var(--accent-gold); padding: 8px; } diff --git a/frontend/Frontend-Hotel/src/pages/Expenses/NewSuppliers.css b/frontend/Frontend-Hotel/src/pages/Expenses/NewSuppliers.css index 33feabc..4a4adc3 100644 --- a/frontend/Frontend-Hotel/src/pages/Expenses/NewSuppliers.css +++ b/frontend/Frontend-Hotel/src/pages/Expenses/NewSuppliers.css @@ -1,13 +1,14 @@ .new-supplier-container { padding: 20px; - color: #333; + color: var(--text-primary); } .form-card { - background-color: #fff; - border-radius: 10px; + background-color: var(--bg-secondary); + border-radius: var(--radius-md); padding: 20px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-md); + border: 1px solid var(--border-color); } .form-id { @@ -28,16 +29,17 @@ font-size: 14px; margin-bottom: 5px; display: block; - color: #333; + color: var(--text-primary); } .form-grid input { width: 100%; padding: 6px 4px; - border: 1px solid #ccc; - border-radius: 6px; + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); font-size: 14px; - background-color: #f9f9f9; + background-color: var(--bg-elevated); + color: var(--text-primary); } .save-button-wrapper { @@ -47,17 +49,17 @@ } .save-button { - background-color: #ffcb05; - color: #fff; + background-color: var(--accent-gold); + color: #000; padding: 10px 30px; font-weight: bold; border: none; - border-radius: 25px; + border-radius: var(--radius-xl); font-size: 16px; cursor: pointer; transition: background-color 0.3s ease; } .save-button:hover { - background-color: #f4b400; + background-color: var(--accent-gold-hover); } diff --git a/frontend/Frontend-Hotel/src/pages/Expenses/Payments.css b/frontend/Frontend-Hotel/src/pages/Expenses/Payments.css index cb865ff..e194bc4 100644 --- a/frontend/Frontend-Hotel/src/pages/Expenses/Payments.css +++ b/frontend/Frontend-Hotel/src/pages/Expenses/Payments.css @@ -8,8 +8,9 @@ gap: 12px; margin: 20px 0; padding: 15px; - background-color: #f8f9fa; - border-radius: 8px; + background-color: var(--bg-elevated); + border-radius: var(--radius-md); + border: 1px solid var(--border-color); align-items: stretch; } @@ -44,10 +45,11 @@ height: 38px; box-sizing: border-box; padding: 8px 12px; - border: 1px solid #ccc; - border-radius: 4px; + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); font-size: 14px; - background-color: #fff; + background-color: var(--bg-secondary); + color: var(--text-primary); margin: 0; } @@ -56,10 +58,11 @@ height: 38px; box-sizing: border-box; padding: 8px 12px; - border: 1px solid #ccc; + border: 1px solid var(--border-color); border-radius: 30px; font-size: 14px; - background-color: #fff; + background-color: var(--bg-secondary); + color: var(--text-primary); margin: 0; line-height: normal; } @@ -74,31 +77,32 @@ font-weight: bold; font-size: 14px; margin-bottom: 5px; - color: #333; + color: var(--text-primary); } .filter-group select, .filter-group input { padding: 8px 12px; - border: 1px solid #ccc; - border-radius: 4px; + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); font-size: 14px; - background-color: #fff; + background-color: var(--bg-secondary); + color: var(--text-primary); } .filter-group select:focus, .filter-group input:focus { outline: none; - border-color: #007bff; - box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); + border-color: var(--accent-gold); + box-shadow: 0 0 0 2px var(--accent-gold-muted); } .clear-filters-btn { - background-color: #6c757d; - color: white; - border: none; + background-color: var(--bg-elevated); + color: var(--text-secondary); + border: 1px solid var(--border-color); padding: 8px 16px; - border-radius: 4px; + border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; align-self: end; @@ -106,13 +110,14 @@ } .clear-filters-btn:hover { - background-color: #5a6268; + background-color: var(--bg-surface); + color: var(--text-primary); } @media (max-width: 768px) { .page-filters { padding: 12px; - border-radius: 12px; + border-radius: var(--radius-md); gap: 10px; } @@ -134,10 +139,11 @@ height: 38px; box-sizing: border-box; padding: 8px 12px; - border: 1px solid #ccc; - border-radius: 4px; + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); font-size: 14px; - background-color: #fff; + background-color: var(--bg-secondary); + color: var(--text-primary); margin: 0; } @@ -146,10 +152,11 @@ height: 38px; box-sizing: border-box; padding: 8px 12px; - border: 1px solid #ccc; - border-radius: 4px; + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); font-size: 14px; - background-color: #fff; + background-color: var(--bg-secondary); + color: var(--text-primary); margin: 0; line-height: normal; } @@ -182,30 +189,31 @@ } .summary-card { - background-color: #fff; + background-color: var(--bg-secondary); padding: 20px; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + border-radius: var(--radius-md); + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-color); text-align: center; } .summary-card strong { display: block; font-size: 14px; - color: #666; + color: var(--text-secondary); margin-bottom: 10px; } .summary-card div { font-size: 24px; font-weight: bold; - color: #333; + color: var(--text-primary); } .status-badge { padding: 6px 12px; border: none; - border-radius: 4px; + border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; font-weight: bold; @@ -213,43 +221,43 @@ } .status-badge.active { - background-color: #28a745; - color: white; + background-color: rgba(34, 197, 94, 0.15); + color: var(--success); } .status-badge.active:hover { - background-color: #218838; + background-color: rgba(34, 197, 94, 0.25); } .status-badge.reject { - background-color: #dc3545; - color: white; + background-color: rgba(239, 68, 68, 0.15); + color: var(--error); } .status-badge.reject:hover { - background-color: #c82333; + background-color: rgba(239, 68, 68, 0.25); } .status-button { padding: 4px 8px; border: none; - border-radius: 4px; + border-radius: var(--radius-sm); font-size: 12px; font-weight: bold; text-transform: uppercase; } .status-button.approved { - background-color: #28a745; - color: white; + background-color: rgba(34, 197, 94, 0.15); + color: var(--success); } .status-button.pending { - background-color: #ffc107; - color: black; + background-color: rgba(234, 179, 8, 0.15); + color: var(--warning); } .status-button.rejected { - background-color: #dc3545; - color: white; + background-color: rgba(239, 68, 68, 0.15); + color: var(--error); } diff --git a/frontend/Frontend-Hotel/src/pages/Expenses/ReportExpense.css b/frontend/Frontend-Hotel/src/pages/Expenses/ReportExpense.css index 2f0ba40..464a2a5 100644 --- a/frontend/Frontend-Hotel/src/pages/Expenses/ReportExpense.css +++ b/frontend/Frontend-Hotel/src/pages/Expenses/ReportExpense.css @@ -8,19 +8,18 @@ } .page-title { - color: #1a1a1a; + color: var(--text-primary); font-size: 28px; font-weight: 700; margin: 0; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; letter-spacing: -0.5px; } .report-page .filters-section { - background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); - border-radius: 16px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); - border: 1px solid rgba(0, 0, 0, 0.05); + background: var(--bg-elevated); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 12px; @@ -53,11 +52,10 @@ padding: 10px 16px; border: none; border-radius: 30px; - background-color: white; - box-shadow: 0 0 0 2px #f4f4f4; + background-color: var(--bg-secondary); + box-shadow: 0 0 0 2px var(--border-color); font-size: 14px; - color: #333; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + color: var(--text-primary); font-weight: 600; transition: all 0.2s ease; height: 42px; @@ -79,11 +77,10 @@ padding: 10px 16px; border: none; border-radius: 30px; - background-color: white; - box-shadow: 0 0 0 2px #f4f4f4; + background-color: var(--bg-secondary); + box-shadow: 0 0 0 2px var(--border-color); font-size: 14px; - color: #333; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + color: var(--text-primary); font-weight: 600; transition: all 0.2s ease; height: 42px; @@ -92,28 +89,27 @@ } .filter-search::placeholder { - color: #999; + color: var(--text-muted); } .filter-search:focus { outline: none; - box-shadow: 0 0 0 2px #fcd200; + box-shadow: 0 0 0 2px var(--accent-gold); } .filter-search:hover { - box-shadow: 0 0 0 2px #e6e6e6; + box-shadow: 0 0 0 2px var(--border-color); } .filter-select { padding: 10px 16px; border: none; border-radius: 30px; - background-color: white; - box-shadow: 0 0 0 2px #f4f4f4; + background-color: var(--bg-secondary); + box-shadow: 0 0 0 2px var(--border-color); font-size: 14px; - color: #333; + color: var(--text-primary); min-width: 180px; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-weight: 600; cursor: pointer; transition: all 0.2s ease; @@ -123,11 +119,11 @@ .filter-select:focus { outline: none; - box-shadow: 0 0 0 2px #fcd200; + box-shadow: 0 0 0 2px var(--accent-gold); } .filter-select:hover { - box-shadow: 0 0 0 2px #e6e6e6; + box-shadow: 0 0 0 2px var(--border-color); } .date-filter-group { @@ -139,10 +135,9 @@ .date-filter-label { font-size: 11px; font-weight: 700; - color: #666; + color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .date-inputs { @@ -154,12 +149,11 @@ padding: 10px 16px; border: none; border-radius: 30px; - background-color: white; - box-shadow: 0 0 0 2px #f4f4f4; + background-color: var(--bg-secondary); + box-shadow: 0 0 0 2px var(--border-color); font-size: 14px; - color: #333; + color: var(--text-primary); min-width: 145px; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-weight: 600; cursor: pointer; transition: all 0.2s ease; @@ -169,32 +163,31 @@ .date-input:focus { outline: none; - box-shadow: 0 0 0 2px #fcd200; + box-shadow: 0 0 0 2px var(--accent-gold); } .date-input:hover { - box-shadow: 0 0 0 2px #e6e6e6; + box-shadow: 0 0 0 2px var(--border-color); } .clear-filters-btn { padding: 10px 20px; - background-color: white; - border: 2px solid #e0e0e0; + background-color: var(--bg-secondary); + border: 2px solid var(--border-color); border-radius: 30px; cursor: pointer; font-size: 14px; font-weight: 600; - color: #666; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + color: var(--text-secondary); transition: all 0.2s ease; height: 42px; box-sizing: border-box; } .clear-filters-btn:hover { - background-color: #f5f5f5; - border-color: #ccc; - color: #333; + background-color: var(--bg-elevated); + border-color: var(--border-color); + color: var(--text-primary); } .summary-actions-section { @@ -213,19 +206,19 @@ } .info-card { - background: linear-gradient(145deg, #ffffff, #f8f9fa); - border-radius: 16px; + background: var(--bg-secondary); + border-radius: var(--radius-lg); padding: 20px 24px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + box-shadow: var(--shadow-sm); min-width: 180px; flex: 1; transition: all 0.3s ease; - border: 1px solid rgba(0, 0, 0, 0.05); + border: 1px solid var(--border-color); } .info-card:hover { transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); + box-shadow: var(--shadow-md); } .info-card .card-title { @@ -234,22 +227,23 @@ text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 12px 0; - color: #666; + color: var(--text-secondary); } .info-card .card-value { font-size: 28px; font-weight: 700; - color: #333; + color: var(--text-primary); line-height: 1.2; } .table-section { - background: white; - border-radius: 16px; + background: var(--bg-secondary); + border-radius: var(--radius-lg); padding: 24px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-color); min-height: 400px; } @@ -274,7 +268,7 @@ .report-page .filters-section { padding: 12px; - border-radius: 12px; + border-radius: var(--radius-md); gap: 10px; } @@ -297,11 +291,10 @@ padding: 10px 16px; border: none; border-radius: 30px; - background-color: white; - box-shadow: 0 0 0 2px #f4f4f4; + background-color: var(--bg-secondary); + box-shadow: 0 0 0 2px var(--border-color); font-size: 14px; - color: #333; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + color: var(--text-primary); font-weight: 600; transition: all 0.2s ease; height: 42px; @@ -346,7 +339,7 @@ .table-section { padding: 16px; - border-radius: 12px; + border-radius: var(--radius-md); } } @@ -359,4 +352,3 @@ padding: 12px; } } - diff --git a/frontend/Frontend-Hotel/src/pages/ExpensesToBeApproval/Approved.css b/frontend/Frontend-Hotel/src/pages/ExpensesToBeApproval/Approved.css index fbe9461..9b989b6 100644 --- a/frontend/Frontend-Hotel/src/pages/ExpensesToBeApproval/Approved.css +++ b/frontend/Frontend-Hotel/src/pages/ExpensesToBeApproval/Approved.css @@ -8,7 +8,7 @@ } .page-title { - color: #1a1a1a; + color: var(--text-primary); font-size: 28px; font-weight: 700; margin: 0; @@ -17,12 +17,12 @@ } .filters-section { - background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); - border-radius: 16px; + background: var(--bg-primary); + border-radius: var(--radius-lg); padding: 20px; margin-bottom: 24px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); - border: 1px solid rgba(0, 0, 0, 0.05); + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-color); display: flex; justify-content: center; flex-wrap: wrap; @@ -38,10 +38,10 @@ padding: 10px 16px; border: none; border-radius: 30px; - background-color: white; - box-shadow: 0 0 0 2px #f4f4f4; + background-color: var(--bg-elevated); + box-shadow: 0 0 0 2px var(--border-color); font-size: 14px; - color: #333; + color: var(--text-primary); min-width: 200px; max-width: 300px; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; @@ -54,26 +54,26 @@ } .filter-search::placeholder { - color: #999; + color: var(--text-muted); } .filter-search:focus { outline: none; - box-shadow: 0 0 0 2px #fcd200; + box-shadow: 0 0 0 2px var(--accent-gold); } .filter-search:hover { - box-shadow: 0 0 0 2px #e6e6e6; + box-shadow: 0 0 0 2px var(--border-color); } .filter-select { padding: 10px 16px; border: none; border-radius: 30px; - background-color: white; - box-shadow: 0 0 0 2px #f4f4f4; + background-color: var(--bg-elevated); + box-shadow: 0 0 0 2px var(--border-color); font-size: 14px; - color: #333; + color: var(--text-primary); min-width: 180px; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-weight: 600; @@ -85,22 +85,22 @@ .filter-select:focus { outline: none; - box-shadow: 0 0 0 2px #fcd200; + box-shadow: 0 0 0 2px var(--accent-gold); } .filter-select:hover { - box-shadow: 0 0 0 2px #e6e6e6; + box-shadow: 0 0 0 2px var(--border-color); } .clear-filters-btn { padding: 10px 20px; - background-color: white; - border: 2px solid #e0e0e0; + background-color: var(--bg-elevated); + border: 2px solid var(--border-color); border-radius: 30px; cursor: pointer; font-size: 14px; font-weight: 600; - color: #666; + color: var(--text-secondary); font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; transition: all 0.2s ease; height: 42px; @@ -109,9 +109,9 @@ } .clear-filters-btn:hover { - background-color: #f5f5f5; - border-color: #ccc; - color: #333; + background-color: var(--bg-secondary); + border-color: var(--border-color); + color: var(--text-primary); } .summary-cards-wrapper { @@ -122,19 +122,19 @@ } .info-card { - background: linear-gradient(145deg, #ffffff, #f8f9fa); - border-radius: 16px; + background: var(--bg-secondary); + border-radius: var(--radius-lg); padding: 20px 24px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + box-shadow: var(--shadow-sm); min-width: 180px; flex: 1; transition: all 0.3s ease; - border: 1px solid rgba(0, 0, 0, 0.05); + border: 1px solid var(--border-color); } .info-card:hover { transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); + box-shadow: var(--shadow-md); } .info-card .card-title { @@ -143,21 +143,21 @@ text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 12px 0; - color: #666; + color: var(--text-secondary); } .info-card .card-value { font-size: 28px; font-weight: 700; - color: #333; + color: var(--text-primary); line-height: 1.2; } .table-section { - background: white; - border-radius: 16px; + background: var(--bg-secondary); + border-radius: var(--radius-lg); padding: 24px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + box-shadow: var(--shadow-sm); min-height: 400px; } @@ -186,7 +186,7 @@ .filters-section { padding: 12px; - border-radius: 12px; + border-radius: var(--radius-md); flex-direction: column; align-items: stretch; gap: 10px; @@ -211,7 +211,7 @@ .table-section { padding: 16px; - border-radius: 12px; + border-radius: var(--radius-md); } } @@ -228,4 +228,3 @@ padding: 12px; } } - diff --git a/frontend/Frontend-Hotel/src/pages/ExpensesToBeApproval/Rejected.css b/frontend/Frontend-Hotel/src/pages/ExpensesToBeApproval/Rejected.css index f1cb20b..0519264 100644 --- a/frontend/Frontend-Hotel/src/pages/ExpensesToBeApproval/Rejected.css +++ b/frontend/Frontend-Hotel/src/pages/ExpensesToBeApproval/Rejected.css @@ -8,7 +8,7 @@ } .page-title { - color: #1a1a1a; + color: var(--text-primary); font-size: 28px; font-weight: 700; margin: 0; @@ -17,12 +17,12 @@ } .filters-section { - background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); - border-radius: 16px; + background: var(--bg-primary); + border-radius: var(--radius-lg); padding: 20px; margin-bottom: 24px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); - border: 1px solid rgba(0, 0, 0, 0.05); + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-color); display: flex; justify-content: center; flex-wrap: wrap; @@ -38,10 +38,10 @@ padding: 10px 16px; border: none; border-radius: 30px; - background-color: white; - box-shadow: 0 0 0 2px #f4f4f4; + background-color: var(--bg-elevated); + box-shadow: 0 0 0 2px var(--border-color); font-size: 14px; - color: #333; + color: var(--text-primary); min-width: 200px; max-width: 300px; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; @@ -54,26 +54,26 @@ } .filter-search::placeholder { - color: #999; + color: var(--text-muted); } .filter-search:focus { outline: none; - box-shadow: 0 0 0 2px #fcd200; + box-shadow: 0 0 0 2px var(--accent-gold); } .filter-search:hover { - box-shadow: 0 0 0 2px #e6e6e6; + box-shadow: 0 0 0 2px var(--border-color); } .filter-select { padding: 10px 16px; border: none; border-radius: 30px; - background-color: white; - box-shadow: 0 0 0 2px #f4f4f4; + background-color: var(--bg-elevated); + box-shadow: 0 0 0 2px var(--border-color); font-size: 14px; - color: #333; + color: var(--text-primary); min-width: 180px; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-weight: 600; @@ -85,22 +85,22 @@ .filter-select:focus { outline: none; - box-shadow: 0 0 0 2px #fcd200; + box-shadow: 0 0 0 2px var(--accent-gold); } .filter-select:hover { - box-shadow: 0 0 0 2px #e6e6e6; + box-shadow: 0 0 0 2px var(--border-color); } .clear-filters-btn { padding: 10px 20px; - background-color: white; - border: 2px solid #e0e0e0; + background-color: var(--bg-elevated); + border: 2px solid var(--border-color); border-radius: 30px; cursor: pointer; font-size: 14px; font-weight: 600; - color: #666; + color: var(--text-secondary); font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; transition: all 0.2s ease; height: 42px; @@ -109,9 +109,9 @@ } .clear-filters-btn:hover { - background-color: #f5f5f5; - border-color: #ccc; - color: #333; + background-color: var(--bg-secondary); + border-color: var(--border-color); + color: var(--text-primary); } .summary-cards-wrapper { @@ -122,19 +122,19 @@ } .info-card { - background: linear-gradient(145deg, #ffffff, #f8f9fa); - border-radius: 16px; + background: var(--bg-secondary); + border-radius: var(--radius-lg); padding: 20px 24px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + box-shadow: var(--shadow-sm); min-width: 180px; flex: 1; transition: all 0.3s ease; - border: 1px solid rgba(0, 0, 0, 0.05); + border: 1px solid var(--border-color); } .info-card:hover { transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); + box-shadow: var(--shadow-md); } .info-card .card-title { @@ -143,21 +143,21 @@ text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 12px 0; - color: #666; + color: var(--text-secondary); } .info-card .card-value { font-size: 28px; font-weight: 700; - color: #333; + color: var(--text-primary); line-height: 1.2; } .table-section { - background: white; - border-radius: 16px; + background: var(--bg-secondary); + border-radius: var(--radius-lg); padding: 24px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + box-shadow: var(--shadow-sm); min-height: 400px; } @@ -186,7 +186,7 @@ .filters-section { padding: 12px; - border-radius: 12px; + border-radius: var(--radius-md); flex-direction: column; align-items: stretch; gap: 10px; @@ -211,7 +211,7 @@ .table-section { padding: 16px; - border-radius: 12px; + border-radius: var(--radius-md); } } @@ -228,4 +228,3 @@ padding: 12px; } } - diff --git a/frontend/Frontend-Hotel/src/pages/Guests/GuestDetail.jsx b/frontend/Frontend-Hotel/src/pages/Guests/GuestDetail.jsx index 76b16ff..e19e41b 100644 --- a/frontend/Frontend-Hotel/src/pages/Guests/GuestDetail.jsx +++ b/frontend/Frontend-Hotel/src/pages/Guests/GuestDetail.jsx @@ -100,7 +100,7 @@ export default function GuestDetail() { {/* Current Room Banner */} - {guest.name_room && ( + {guest.room_number && (
{t("guests.currentRoom")} -

{guest.name_room}

+

{guest.room_number}

@@ -337,10 +337,10 @@ export default function GuestDetail() { {stays.map((stay, idx) => ( - {stay.name_room || "-"} - {stay.bed_type && ( + {stay.room_number || "-"} + {stay.room_type && ( - {stay.bed_type} + {stay.room_type} )} diff --git a/frontend/Frontend-Hotel/src/pages/Guests/Guests.jsx b/frontend/Frontend-Hotel/src/pages/Guests/Guests.jsx index 3cffefa..eaa6134 100644 --- a/frontend/Frontend-Hotel/src/pages/Guests/Guests.jsx +++ b/frontend/Frontend-Hotel/src/pages/Guests/Guests.jsx @@ -152,10 +152,10 @@ export default function Guests() { )}
- {guest.name_room && ( + {guest.room_number && (
- {guest.name_room} + {guest.room_number}
)} diff --git a/frontend/Frontend-Hotel/src/pages/Hotel/PropertyDetailPage.css b/frontend/Frontend-Hotel/src/pages/Hotel/PropertyDetailPage.css index 345122e..69f9f17 100644 --- a/frontend/Frontend-Hotel/src/pages/Hotel/PropertyDetailPage.css +++ b/frontend/Frontend-Hotel/src/pages/Hotel/PropertyDetailPage.css @@ -6,9 +6,9 @@ .property-info-box { display: flex; justify-content: space-between; - background-color: #f8f8f8; + background-color: var(--bg-elevated); padding: 20px; - border-radius: 10px; + border-radius: var(--radius-md); margin-bottom: 30px; } @@ -24,17 +24,19 @@ input, select { padding: 5px; margin-left: 10px; - border: 1px solid #ccc; - border-radius: 4px; + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); + background-color: var(--bg-elevated); + color: var(--text-primary); } .save-button { - background-color: #f2c300; + background-color: var(--accent-gold); border: none; padding: 10px 20px; border-radius: 20px; font-weight: bold; - color: white; + color: #000; cursor: pointer; } diff --git a/frontend/Frontend-Hotel/src/pages/Housekeeping/Housekeeping.jsx b/frontend/Frontend-Hotel/src/pages/Housekeeping/Housekeeping.jsx index 48987d4..1b277f4 100644 --- a/frontend/Frontend-Hotel/src/pages/Housekeeping/Housekeeping.jsx +++ b/frontend/Frontend-Hotel/src/pages/Housekeeping/Housekeeping.jsx @@ -142,7 +142,7 @@ export default function Housekeeping() { color: "var(--text-primary)", }} > - {task.name_room || `Room ${task.room_id}`} + {task.room_number || `Room ${task.room_id}`} {task.floor && ( {staff.map((s) => ( - ))} @@ -332,7 +332,7 @@ export default function Housekeeping() {
{staff.map((s) => ( -
+
div { - border: 1px solid #ccc; + border: 1px solid var(--border-color); padding: 10px; margin-top: 10px; width: 100%; @@ -158,7 +161,7 @@ .income-categories .category-item { margin-bottom: 10px; - border-bottom: 1px dotted #eee; + border-bottom: 1px dotted var(--border-color); padding-bottom: 5px; display: grid; grid-template-columns: 1fr 1fr; @@ -177,31 +180,32 @@ font-size: 14px; margin-bottom: 5px; display: block; - color: #333; + color: var(--text-primary); } .category-item select, .category-item input { width: 100%; padding: 8px 12px; - border: 1px solid #ccc; - border-radius: 6px; + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); font-size: 14px; - background-color: #f9f9f9; + background-color: var(--bg-elevated); + color: var(--text-primary); transition: border-color 0.2s ease; box-sizing: border-box; } .category-item input[readonly] { - background-color: #f5f5f5; + background-color: var(--bg-surface); cursor: not-allowed; } .category-item input:focus, .category-item select:focus { outline: none; - border-color: #ffcb05; - background-color: #fff; + border-color: var(--accent-gold); + background-color: var(--bg-secondary); } .taxes-container { @@ -231,8 +235,8 @@ .total-income-summary { margin-top: 20px; padding: 10px; - border: 1px solid #ccc; - background-color: #f9f9f9; + border: 1px solid var(--border-color); + background-color: var(--bg-elevated); width: 100%; box-sizing: border-box; } @@ -269,13 +273,13 @@ } .save-button.disabled-validation { - background-color: #808080 !important; - color: #fff !important; + background-color: var(--bg-elevated) !important; + color: var(--text-muted) !important; cursor: not-allowed !important; opacity: 0.6; } .save-button.disabled-validation:hover { - background-color: #dc3545 !important; + background-color: var(--error) !important; transform: none !important; } diff --git a/frontend/Frontend-Hotel/src/pages/Inventory/Adjustments.css b/frontend/Frontend-Hotel/src/pages/Inventory/Adjustments.css index 5214145..63c9983 100644 --- a/frontend/Frontend-Hotel/src/pages/Inventory/Adjustments.css +++ b/frontend/Frontend-Hotel/src/pages/Inventory/Adjustments.css @@ -1,10 +1,10 @@ .adjustments-page-container { padding: 20px; - color: #213547; + color: var(--text-primary); } .adjustments-page-container h2 { - color: #213547; + color: var(--text-primary); } .filters-section { @@ -17,24 +17,24 @@ } .filters-section select { - color: #213547; - background-color: white; + color: var(--text-primary); + background-color: var(--bg-secondary); max-width: 250px; min-width: 150px; flex: 0 1 auto; } .filters-section input[type="date"] { - color: #213547; - background-color: white; + color: var(--text-primary); + background-color: var(--bg-secondary); max-width: 200px; min-width: 150px; flex: 0 1 auto; } .filters-section .filter-search { - color: #213547; - background-color: white; + color: var(--text-primary); + background-color: var(--bg-secondary); max-width: 300px; min-width: 200px; flex: 0 0 auto; @@ -43,11 +43,11 @@ .filters-section .save-button { width: 120px; - background: #F2C300; - color: #fff; + background: var(--accent-gold); + color: #000; font-weight: bold; font-size: 14px; - border-radius: 25px; + border-radius: var(--radius-xl); padding: 10px 20px; border: none; cursor: pointer; @@ -57,11 +57,12 @@ } .save-button:hover:not(:disabled) { - background: #ddb000; + background: var(--accent-gold-hover); } .save-button:disabled { - background: #ccc; + background: var(--bg-elevated); + color: var(--text-muted); cursor: not-allowed; opacity: 0.6; } diff --git a/frontend/Frontend-Hotel/src/pages/Inventory/AlterProduct.css b/frontend/Frontend-Hotel/src/pages/Inventory/AlterProduct.css index 25fe4d5..645c09b 100644 --- a/frontend/Frontend-Hotel/src/pages/Inventory/AlterProduct.css +++ b/frontend/Frontend-Hotel/src/pages/Inventory/AlterProduct.css @@ -3,17 +3,17 @@ justify-content: flex-start; align-items: flex-start; min-height: 100vh; - background-color: #f0f2f5; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + background-color: var(--bg-primary); padding: 20px; box-sizing: border-box; } .form-card { - background: white; + background: var(--bg-secondary); padding: 2rem; - border-radius: 12px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); + border-radius: var(--radius-md); + box-shadow: var(--shadow-md); + border: 1px solid var(--border-color); width: 100%; } @@ -23,14 +23,14 @@ justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 1rem; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--border-color); } .form-id { font-size: 1.75rem; font-weight: bold; margin-bottom: 0; - color: #1a202c; + color: var(--text-primary); border-bottom: none; padding-bottom: 0; } @@ -50,24 +50,26 @@ label { font-weight: 600; - color: #4a5568; + color: var(--text-secondary); font-size: 0.9rem; } input, select { padding: 0.8rem; - border: 1px solid #cbd5e0; - border-radius: 8px; + border: 1px solid var(--border-color); + border-radius: var(--radius-md); font-size: 1rem; width: 100%; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s; + background-color: var(--bg-elevated); + color: var(--text-primary); } input:focus, select:focus { outline: none; - border-color: #3182ce; - box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.5); + border-color: var(--accent-gold); + box-shadow: 0 0 0 2px var(--accent-gold-muted); } select[multiple] { @@ -78,15 +80,15 @@ select[multiple] { text-align: right; margin-top: 2rem; padding-top: 1.5rem; - border-top: 1px solid #e2e8f0; + border-top: 1px solid var(--border-color); } .save-button { - background-color: #3182ce; - color: white; + background-color: var(--accent-gold); + color: #000; border: none; padding: 0.8rem 1.6rem; - border-radius: 8px; + border-radius: var(--radius-md); font-size: 1rem; font-weight: bold; cursor: pointer; @@ -94,7 +96,7 @@ select[multiple] { } .save-button:hover { - background-color: #2b6cb0; + background-color: var(--accent-gold-hover); } .save-button:active { @@ -102,33 +104,34 @@ select[multiple] { } .save-button:disabled { - background-color: #a0aec0; + background-color: var(--bg-elevated); + color: var(--text-muted); cursor: not-allowed; } .feedback-message { margin-top: 1rem; padding: 0.75rem; - border-radius: 6px; + border-radius: var(--radius-sm); text-align: center; } .feedback-message.success { - background-color: #c6f6d5; - color: #22543d; + background-color: rgba(34, 197, 94, 0.1); + color: var(--success); } .feedback-message.error { - background-color: #fed7d7; - color: #742a2a; + background-color: rgba(239, 68, 68, 0.1); + color: var(--error); } .back-button { - background-color: #718096; - color: white; - border: none; + background-color: var(--bg-elevated); + color: var(--text-primary); + border: 1px solid var(--border-color); padding: 0.6rem 1.2rem; - border-radius: 8px; + border-radius: var(--radius-md); font-size: 0.9rem; font-weight: 600; cursor: pointer; @@ -140,10 +143,9 @@ select[multiple] { } .back-button:hover { - background-color: #4a5568; + background-color: var(--bg-surface); } .back-button:active { transform: translateY(1px); } - diff --git a/frontend/Frontend-Hotel/src/pages/Inventory/InventoryReport.css b/frontend/Frontend-Hotel/src/pages/Inventory/InventoryReport.css index 3fc0cd9..e2e7eff 100644 --- a/frontend/Frontend-Hotel/src/pages/Inventory/InventoryReport.css +++ b/frontend/Frontend-Hotel/src/pages/Inventory/InventoryReport.css @@ -1,10 +1,10 @@ .report-page { padding: 20px; - color: #213547; + color: var(--text-primary); } .report-page h2 { - color: #213547; + color: var(--text-primary); } .page-filters { @@ -16,16 +16,16 @@ } .page-filters select { - color: #213547; - background-color: white; + color: var(--text-primary); + background-color: var(--bg-secondary); max-width: 250px; min-width: 150px; flex: 0 1 auto; } .page-filters input[type="date"] { - color: #213547; - background-color: white; + color: var(--text-primary); + background-color: var(--bg-secondary); max-width: 200px; min-width: 150px; flex: 0 1 auto; @@ -38,36 +38,37 @@ } .summary-card { - background-color: white; - border-radius: 12px; + background-color: var(--bg-secondary); + border-radius: var(--radius-md); padding: 15px 25px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-color); min-width: 180px; text-align: center; - color: #213547; + color: var(--text-primary); align-items: center; display: block; } .summary-card strong { - color: #213547; + color: var(--text-secondary); display: block; margin-bottom: 8px; } .summary-card div { - color: #213547; + color: var(--text-primary); font-size: 1.2em; font-weight: bold; } .inventory-filters { - background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); - border-radius: 16px; + background: var(--bg-elevated); + border-radius: var(--radius-lg); padding: 20px; margin-bottom: 24px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); - border: 1px solid rgba(0, 0, 0, 0.05); + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-color); display: flex; gap: 12px; align-items: flex-end; @@ -94,21 +95,19 @@ font-weight: 600; white-space: nowrap; flex-shrink: 0; - color: #666; + color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .inventory-filters .date-input { padding: 10px 16px; border: none; border-radius: 30px; - background-color: white; - box-shadow: 0 0 0 2px #f4f4f4; + background-color: var(--bg-secondary); + box-shadow: 0 0 0 2px var(--border-color); font-size: 14px; - color: #333; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + color: var(--text-primary); font-weight: 600; cursor: pointer; transition: all 0.2s ease; @@ -118,17 +117,17 @@ .inventory-filters .date-input:focus { outline: none; - box-shadow: 0 0 0 2px #fcd200; + box-shadow: 0 0 0 2px var(--accent-gold); } .inventory-filters .date-input:hover { - box-shadow: 0 0 0 2px #e6e6e6; + box-shadow: 0 0 0 2px var(--border-color); } @media (max-width: 768px) { .inventory-filters { padding: 12px; - border-radius: 12px; + border-radius: var(--radius-md); gap: 10px; } diff --git a/frontend/Frontend-Hotel/src/pages/Inventory/NewProduct.css b/frontend/Frontend-Hotel/src/pages/Inventory/NewProduct.css index 87b015d..c43c032 100644 --- a/frontend/Frontend-Hotel/src/pages/Inventory/NewProduct.css +++ b/frontend/Frontend-Hotel/src/pages/Inventory/NewProduct.css @@ -1,53 +1,14 @@ -/* .new-product-container { - padding: 20px; - max-width: 600px; - margin: 0 auto; -} - -.new-product-form { - display: flex; - flex-direction: column; - gap: 16px; -} - -.new-product-form label { - display: flex; - flex-direction: column; - font-weight: bold; -} - -.new-product-form input, -.new-product-form select { - padding: 8px; - border: 1px solid #ccc; - border-radius: 4px; -} - -.new-product-form button { - background-color: #007bff; - color: white; - padding: 10px; - border: none; - border-radius: 4px; - cursor: pointer; -} - -.new-product-form button:hover { - background-color: #0056b3; -} */ - - .new-expense-container { - color: #213547; + color: var(--text-primary); padding: 20px; } .form-card { - background-color: #fff; - border-radius: 10px; + background-color: var(--bg-secondary); + border-radius: var(--radius-md); padding: 20px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - color: #213547; + box-shadow: var(--shadow-sm); + color: var(--text-primary); } .form-header { @@ -56,14 +17,14 @@ justify-content: space-between; margin-bottom: 20px; padding-bottom: 1rem; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid var(--border-color); } .form-id { font-weight: bold; margin-bottom: 0; font-size: 24px; - color: #213547; + color: var(--text-primary); border-bottom: none; padding-bottom: 0; } @@ -84,21 +45,21 @@ font-size: 14px; margin-bottom: 5px; display: block; - color: #213547; + color: var(--text-primary); } .form-grid input, .form-grid select { width: 100%; padding: 8px 12px; - border: 1px solid #ccc; - border-radius: 6px; + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); font-size: 14px; - background-color: #f9f9f9; - color: #213547; + background-color: var(--bg-elevated); + color: var(--text-primary); box-sizing: border-box; height: 38px; - min-width: 0; /* Prevent inputs from overflowing grid cells */ + min-width: 0; } .form-grid input[type="file"] { @@ -111,8 +72,8 @@ .form-grid input:focus, .form-grid select:focus { outline: none; - border-color: #ffcb05; - background-color: #fff; + border-color: var(--accent-gold); + background-color: var(--bg-secondary); } form > div:not(.form-grid):not(.save-button-wrapper) { @@ -122,11 +83,11 @@ form > div:not(.form-grid):not(.save-button-wrapper) { form > div:not(.form-grid):not(.save-button-wrapper) input { width: 100%; padding: 8px 12px; - border: 1px solid #ccc; - border-radius: 6px; + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); font-size: 14px; - background-color: #f9f9f9; - color: #213547; + background-color: var(--bg-elevated); + color: var(--text-primary); box-sizing: border-box; height: 38px; } @@ -144,7 +105,7 @@ form > div:not(.form-grid):not(.save-button-wrapper) label { font-size: 14px; margin-bottom: 5px; display: block; - color: #213547; + color: var(--text-primary); } .save-button-wrapper { @@ -154,8 +115,8 @@ form > div:not(.form-grid):not(.save-button-wrapper) label { } .save-button { - background-color: #ffcb05; - color: #fff; + background-color: var(--accent-gold); + color: #000; padding: 10px 30px; font-weight: bold; border: none; @@ -166,21 +127,21 @@ form > div:not(.form-grid):not(.save-button-wrapper) label { } .save-button:hover { - background-color: #f4b400; + background-color: var(--accent-gold-hover); } .save-button:disabled { - background-color: #a0aec0; + background-color: var(--bg-elevated); cursor: not-allowed; opacity: 0.6; } .back-button { - background-color: #718096; - color: white; + background-color: var(--bg-elevated); + color: var(--text-primary); border: none; padding: 0.6rem 1.2rem; - border-radius: 8px; + border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 600; cursor: pointer; @@ -191,7 +152,7 @@ form > div:not(.form-grid):not(.save-button-wrapper) label { } .back-button:hover { - background-color: #4a5568; + background-color: var(--bg-surface); } .back-button:active { @@ -201,18 +162,18 @@ form > div:not(.form-grid):not(.save-button-wrapper) label { .feedback-message { margin-top: 1rem; padding: 0.75rem; - border-radius: 6px; + border-radius: var(--radius-sm); text-align: center; } .feedback-message.success { - background-color: #c6f6d5; - color: #22543d; + background-color: rgba(34, 197, 94, 0.1); + color: var(--success); } .feedback-message.error { - background-color: #fed7d7; - color: #742a2a; + background-color: rgba(239, 68, 68, 0.1); + color: var(--error); } .product-table-section { @@ -226,34 +187,34 @@ form > div:not(.form-grid):not(.save-button-wrapper) label { } .product-table th, .product-table td { - border: 1px solid #d4af37; /* dorado */ + border: 1px solid var(--accent-gold); padding: 8px; text-align: center; } .product-table th { - background-color: #800020; /* bordo/morado oscuro, según tus imágenes */ - color: white; + background-color: var(--accent-gold); + color: #000; font-weight: bold; } .add-product-row { cursor: pointer; - color: #d4af37; /* dorado */ + color: var(--accent-gold); text-align: center; padding: 10px; font-style: italic; } .tax-pill { - background-color: white; - border: 1px solid #d4af37; + background-color: var(--bg-secondary); + border: 1px solid var(--accent-gold); border-radius: 12px; padding: 2px 6px; - color: #800020; + color: var(--accent-gold); } .product-table tfoot td { - border-top: 2px solid #d4af37; + border-top: 2px solid var(--accent-gold); padding: 8px; } diff --git a/frontend/Frontend-Hotel/src/pages/Inventory/Outcomes.css b/frontend/Frontend-Hotel/src/pages/Inventory/Outcomes.css index 03fd698..45b9eaa 100644 --- a/frontend/Frontend-Hotel/src/pages/Inventory/Outcomes.css +++ b/frontend/Frontend-Hotel/src/pages/Inventory/Outcomes.css @@ -1,10 +1,10 @@ .outcomes-page .filters-section { - background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); - border-radius: 16px; + background: var(--bg-elevated); + border-radius: var(--radius-lg); padding: 20px; margin-bottom: 24px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); - border: 1px solid rgba(0, 0, 0, 0.05); + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-color); display: flex; gap: 12px; align-items: center; @@ -26,7 +26,7 @@ @media (max-width: 768px) { .outcomes-page .filters-section { padding: 12px; - border-radius: 12px; + border-radius: var(--radius-md); gap: 10px; } @@ -39,4 +39,4 @@ .outcomes-page .filters-section .filter-select { min-width: 100%; } -} \ No newline at end of file +} diff --git a/frontend/Frontend-Hotel/src/pages/Inventory/Products.css b/frontend/Frontend-Hotel/src/pages/Inventory/Products.css index a47c238..24eb678 100644 --- a/frontend/Frontend-Hotel/src/pages/Inventory/Products.css +++ b/frontend/Frontend-Hotel/src/pages/Inventory/Products.css @@ -1,12 +1,10 @@ -/* src/pages/Inventory/Products.css */ - .products-page-container { padding: 20px; - color: #213547; + color: var(--text-primary); } .products-page-container h2 { - color: #213547; + color: var(--text-primary); } .products-grid { @@ -17,15 +15,15 @@ } .product-card { - background-color: white; - border: 1px solid #e2e2e2; - border-radius: 8px; + background-color: var(--bg-secondary); + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); padding: 15px; - box-shadow: 0 2px 5px rgba(0,0,0,0.1); + box-shadow: var(--shadow-sm); cursor: pointer; text-align: center; transition: transform 0.2s; - color: #213547; + color: var(--text-primary); } .product-card:hover { @@ -37,7 +35,7 @@ flex-direction: column; align-items: center; justify-content: center; - color: #666; + color: var(--text-secondary); font-size: 1.2em; font-weight: bold; } @@ -60,13 +58,13 @@ .product-name { font-weight: bold; margin-bottom: 5px; - color: #213547; + color: var(--text-primary); } .product-price, .product-units { font-size: 0.9em; - color: #444; + color: var(--text-secondary); } .page-filters { @@ -78,8 +76,8 @@ } .page-filters select { - color: #213547; - background-color: white; + color: var(--text-primary); + background-color: var(--bg-elevated); max-width: 250px; min-width: 150px; flex: 0 1 auto; @@ -87,15 +85,15 @@ .page-filters input[type="text"], .page-filters .filter-search-input { - color: #213547; - background-color: white; + color: var(--text-primary); + background-color: var(--bg-elevated); max-width: 300px; min-width: 200px; flex: 0 1 auto; padding: 10px 16px; border: none; border-radius: 30px; - box-shadow: 0 0 0 2px #f4f4f4; + box-shadow: 0 0 0 2px var(--border-color); font-size: 14px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: bold; @@ -103,20 +101,20 @@ } .page-filters p { - color: #213547; + color: var(--text-primary); } .products-page-container p { - color: #213547; + color: var(--text-primary); } .products-filters { - background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); - border-radius: 16px; + background: var(--bg-primary); + border-radius: var(--radius-lg); padding: 20px; margin-bottom: 24px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); - border: 1px solid rgba(0, 0, 0, 0.05); + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-color); display: flex; gap: 12px; align-items: center; @@ -133,7 +131,7 @@ @media (max-width: 768px) { .products-filters { padding: 12px; - border-radius: 12px; + border-radius: var(--radius-md); gap: 10px; } diff --git a/frontend/Frontend-Hotel/src/pages/Login.jsx b/frontend/Frontend-Hotel/src/pages/Login.jsx index 334dafe..769445f 100644 --- a/frontend/Frontend-Hotel/src/pages/Login.jsx +++ b/frontend/Frontend-Hotel/src/pages/Login.jsx @@ -111,11 +111,14 @@ export default function Login() { {error && (
{error} diff --git a/frontend/Frontend-Hotel/src/pages/Payroll/ContractsDetail.css b/frontend/Frontend-Hotel/src/pages/Payroll/ContractsDetail.css index 798b154..4b80cb5 100644 --- a/frontend/Frontend-Hotel/src/pages/Payroll/ContractsDetail.css +++ b/frontend/Frontend-Hotel/src/pages/Payroll/ContractsDetail.css @@ -1,9 +1,10 @@ .contract-detail-container { - background: #f9f9f9; + background: var(--bg-elevated); padding: 30px; - border-radius: 12px; + border-radius: var(--radius-md); max-width: 1100px; margin: auto; + border: 1px solid var(--border-color); } .form-grid { @@ -16,14 +17,17 @@ font-weight: 600; margin-bottom: 5px; display: block; + color: var(--text-primary); } .form-grid input, .form-grid select { width: 100%; padding: 8px; - border-radius: 6px; - border: 1px solid #ccc; + border-radius: var(--radius-sm); + border: 1px solid var(--border-color); + background-color: var(--bg-secondary); + color: var(--text-primary); } .uniforms-section { @@ -42,124 +46,15 @@ } .save-button-container button { - background-color: #f0ad4e; + background-color: var(--warning); border: none; - color: white; - padding: 10px 20px; - border-radius: 8px; - font-size: 16px; - cursor: pointer; -} -.save-button-container button:hover { - background-color: #ec971f; -} - -/* .uniforms-container { - display: grid; - grid-template-columns: 1.2fr 0.8fr; - align-items: start; - gap: 24px; - margin-top: 10px; - width: 100%; - max-width: 900px; -} - -.uniform-checkbox-list { - display: flex; - flex-direction: column; - gap: 6px; - flex: 1; -} - -.uniform-chips { - display: flex; - flex-wrap: wrap; - gap: 8px; - flex: 1; - justify-content: flex-start; - align-content: flex-start; - padding-top: 4px; -} - -.uniforms-container label { - display: flex; - align-items: center; - gap: 8px; -} - -.checkbox-item { - display: flex; - align-items: center; - gap: 8px; - font-size: 14px; -} - -.checkbox-item input[type="checkbox"] { - width: 18px; - height: 18px; - cursor: pointer; -} - -.chip { - background-color: #e0e0e0; - border-radius: 16px; - padding: 4px 10px; - display: flex; - align-items: center; - font-size: 14px; -} - -.remove-chip { - background: transparent; - border: none; - font-size: 16px; - margin-left: 6px; - cursor: pointer; - color: #444; -} - -.remove-chip:hover { - color: #d00; -} - -.chip { - display: inline-flex; - align-items: center; - background-color: #f5f5f5; - border: 2px solid #ccc; - border-radius: 20px; - padding: 6px 12px; - font-size: 14px; - cursor: pointer; - transition: all 0.2s ease; - color: #333; -} - -.chip.selected { - background-color: #ffcb05; - border-color: #e0b400; color: #000; - font-weight: bold; -} - -.chip button { - background: transparent; - border: none; - color: #555; - margin-left: 6px; - font-size: 14px; + padding: 10px 20px; + border-radius: var(--radius-md); + font-size: 16px; cursor: pointer; } -.chip button:hover { - color: #b30000; +.save-button-container button:hover { + background-color: var(--accent-gold-hover); } - -.chip:hover { - background-color: #f0f0f0; - transform: translateY(-2px); -} -.chip.selected:hover { - background-color: #e6b800; - transform: translateY(-2px); -} */ diff --git a/frontend/Frontend-Hotel/src/pages/Payroll/Payroll.css b/frontend/Frontend-Hotel/src/pages/Payroll/Payroll.css index 085df1d..083bc7e 100644 --- a/frontend/Frontend-Hotel/src/pages/Payroll/Payroll.css +++ b/frontend/Frontend-Hotel/src/pages/Payroll/Payroll.css @@ -1,10 +1,10 @@ .payroll-page .filters-section { - background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); - border-radius: 16px; + background: var(--bg-primary); + border-radius: var(--radius-lg); padding: 20px; margin-bottom: 24px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); - border: 1px solid rgba(0, 0, 0, 0.05); + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-color); display: flex; gap: 12px; align-items: flex-end; @@ -29,7 +29,7 @@ .payroll-page .filters-section .date-label { font-size: 12px; font-weight: 600; - color: #666; + color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; @@ -41,10 +41,10 @@ padding: 10px 16px; border: none; border-radius: 30px; - background-color: white; - box-shadow: 0 0 0 2px #f4f4f4; + background-color: var(--bg-elevated); + box-shadow: 0 0 0 2px var(--border-color); font-size: 14px; - color: #333; + color: var(--text-primary); font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-weight: 600; cursor: pointer; @@ -55,11 +55,11 @@ .payroll-page .filters-section .date-input:focus { outline: none; - box-shadow: 0 0 0 2px #fcd200; + box-shadow: 0 0 0 2px var(--accent-gold); } .payroll-page .filters-section .date-input:hover { - box-shadow: 0 0 0 2px #e6e6e6; + box-shadow: 0 0 0 2px var(--border-color); } .payroll-page .filters-section .filter-select { @@ -74,7 +74,7 @@ @media (max-width: 768px) { .payroll-page .filters-section { padding: 12px; - border-radius: 12px; + border-radius: var(--radius-md); gap: 10px; } @@ -100,4 +100,4 @@ align-self: stretch; margin-top: 8px; } -} \ No newline at end of file +} diff --git a/frontend/Frontend-Hotel/src/pages/Payroll/PayrollAttendance.css b/frontend/Frontend-Hotel/src/pages/Payroll/PayrollAttendance.css index 48c1925..c2ff3ac 100644 --- a/frontend/Frontend-Hotel/src/pages/Payroll/PayrollAttendance.css +++ b/frontend/Frontend-Hotel/src/pages/Payroll/PayrollAttendance.css @@ -1,10 +1,10 @@ .payroll-attendance-page .filters-section { - background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); - border-radius: 16px; + background: var(--bg-elevated); + border-radius: var(--radius-lg); padding: 20px; margin-bottom: 24px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); - border: 1px solid rgba(0, 0, 0, 0.05); + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 12px; @@ -46,10 +46,9 @@ .payroll-attendance-page .filters-section .date-label { font-size: 12px; font-weight: 600; - color: #666; + color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; white-space: nowrap; flex-shrink: 0; } @@ -58,11 +57,10 @@ padding: 10px 16px; border: none; border-radius: 30px; - background-color: white; - box-shadow: 0 0 0 2px #f4f4f4; + background-color: var(--bg-secondary); + box-shadow: 0 0 0 2px var(--border-color); font-size: 14px; - color: #333; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + color: var(--text-primary); font-weight: 600; cursor: pointer; transition: all 0.2s ease; @@ -72,11 +70,11 @@ .payroll-attendance-page .filters-section .date-input:focus { outline: none; - box-shadow: 0 0 0 2px #fcd200; + box-shadow: 0 0 0 2px var(--accent-gold); } .payroll-attendance-page .filters-section .date-input:hover { - box-shadow: 0 0 0 2px #e6e6e6; + box-shadow: 0 0 0 2px var(--border-color); } .payroll-attendance-page .filters-section .filter-select { @@ -87,7 +85,7 @@ @media (max-width: 768px) { .payroll-attendance-page .filters-section { padding: 12px; - border-radius: 12px; + border-radius: var(--radius-md); gap: 10px; } @@ -123,4 +121,4 @@ align-self: stretch; margin-top: 8px; } -} \ No newline at end of file +} diff --git a/frontend/Frontend-Hotel/src/pages/Payroll/PayrollContract.css b/frontend/Frontend-Hotel/src/pages/Payroll/PayrollContract.css index ff3c167..67ad612 100644 --- a/frontend/Frontend-Hotel/src/pages/Payroll/PayrollContract.css +++ b/frontend/Frontend-Hotel/src/pages/Payroll/PayrollContract.css @@ -1,10 +1,10 @@ .payroll-contract-page .filters-section { - background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); - border-radius: 16px; + background: var(--bg-primary); + border-radius: var(--radius-lg); padding: 20px; margin-bottom: 24px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); - border: 1px solid rgba(0, 0, 0, 0.05); + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-color); display: flex; gap: 12px; align-items: flex-end; @@ -23,7 +23,7 @@ .payroll-contract-page .filters-section .date-label { font-size: 12px; font-weight: 600; - color: #666; + color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; @@ -35,10 +35,10 @@ padding: 10px 16px; border: none; border-radius: 30px; - background-color: white; - box-shadow: 0 0 0 2px #f4f4f4; + background-color: var(--bg-elevated); + box-shadow: 0 0 0 2px var(--border-color); font-size: 14px; - color: #333; + color: var(--text-primary); font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-weight: 600; cursor: pointer; @@ -49,11 +49,11 @@ .payroll-contract-page .filters-section .date-input:focus { outline: none; - box-shadow: 0 0 0 2px #fcd200; + box-shadow: 0 0 0 2px var(--accent-gold); } .payroll-contract-page .filters-section .date-input:hover { - box-shadow: 0 0 0 2px #e6e6e6; + box-shadow: 0 0 0 2px var(--border-color); } .payroll-contract-page .filters-section .filter-select { @@ -68,7 +68,7 @@ @media (max-width: 768px) { .payroll-contract-page .filters-section { padding: 12px; - border-radius: 12px; + border-radius: var(--radius-md); gap: 10px; } @@ -88,4 +88,4 @@ align-self: stretch; margin-top: 8px; } -} \ No newline at end of file +} diff --git a/frontend/Frontend-Hotel/src/pages/Payroll/PayrollEmployees.css b/frontend/Frontend-Hotel/src/pages/Payroll/PayrollEmployees.css index 0596b09..c8200dd 100644 --- a/frontend/Frontend-Hotel/src/pages/Payroll/PayrollEmployees.css +++ b/frontend/Frontend-Hotel/src/pages/Payroll/PayrollEmployees.css @@ -1,10 +1,10 @@ .payroll-employees-page .filters-section { - background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); - border-radius: 16px; + background: var(--bg-elevated); + border-radius: var(--radius-lg); padding: 20px; margin-bottom: 24px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); - border: 1px solid rgba(0, 0, 0, 0.05); + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 12px; @@ -46,10 +46,9 @@ .payroll-employees-page .filters-section .date-label { font-size: 12px; font-weight: 600; - color: #666; + color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; white-space: nowrap; flex-shrink: 0; } @@ -58,11 +57,10 @@ padding: 10px 16px; border: none; border-radius: 30px; - background-color: white; - box-shadow: 0 0 0 2px #f4f4f4; + background-color: var(--bg-secondary); + box-shadow: 0 0 0 2px var(--border-color); font-size: 14px; - color: #333; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + color: var(--text-primary); font-weight: 600; cursor: pointer; transition: all 0.2s ease; @@ -72,11 +70,11 @@ .payroll-employees-page .filters-section .date-input:focus { outline: none; - box-shadow: 0 0 0 2px #fcd200; + box-shadow: 0 0 0 2px var(--accent-gold); } .payroll-employees-page .filters-section .date-input:hover { - box-shadow: 0 0 0 2px #e6e6e6; + box-shadow: 0 0 0 2px var(--border-color); } .payroll-employees-page .filters-section .filter-select { @@ -87,7 +85,7 @@ @media (max-width: 768px) { .payroll-employees-page .filters-section { padding: 12px; - border-radius: 12px; + border-radius: var(--radius-md); gap: 10px; } @@ -123,4 +121,4 @@ align-self: stretch; margin-top: 8px; } -} \ No newline at end of file +} diff --git a/frontend/Frontend-Hotel/src/pages/Payroll/Plantillapayroll.css b/frontend/Frontend-Hotel/src/pages/Payroll/Plantillapayroll.css index 57c5b5e..39d191e 100644 --- a/frontend/Frontend-Hotel/src/pages/Payroll/Plantillapayroll.css +++ b/frontend/Frontend-Hotel/src/pages/Payroll/Plantillapayroll.css @@ -12,22 +12,22 @@ cursor: pointer; user-select: none; padding: 6px 12px; - border-radius: 6px; - border: 1px solid #e0e0e0; - background-color: #fafafa; + border-radius: var(--radius-sm); + border: 1px solid var(--border-color); + background-color: var(--bg-elevated); transition: all 0.2s ease; font-size: 14px; } .checkbox-item:hover { - background-color: #f0f8ff; - border-color: #fcd200; + background-color: var(--bg-surface); + border-color: var(--accent-gold); } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; - accent-color: #fcd200; + accent-color: var(--accent-gold); cursor: pointer; margin: 0; } @@ -40,20 +40,20 @@ } .chip { - background-color: #fcd200; - color: #333; - border-radius: 20px; + background-color: var(--accent-gold); + color: #000; + border-radius: var(--radius-xl); padding: 6px 12px; display: flex; align-items: center; font-size: 13px; font-weight: 500; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-sm); transition: all 0.2s ease; } .chip:hover { - background-color: #f4b400; + background-color: var(--accent-gold-hover); } .remove-chip { @@ -62,19 +62,19 @@ font-size: 18px; margin-left: 8px; cursor: pointer; - color: #333; + color: #000; padding: 0; line-height: 1; transition: color 0.2s ease; } .remove-chip:hover { - color: #d00; + color: var(--error); transform: scale(1.1); } .new-expense-container h2 { - color: #333; + color: var(--text-primary); font-size: 24px; font-weight: bold; text-align: center; @@ -89,9 +89,10 @@ } .form-card { - background-color: #fff; - border-radius: 10px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + background-color: var(--bg-secondary); + border-radius: var(--radius-md); + box-shadow: var(--shadow-md); + border: 1px solid var(--border-color); box-sizing: border-box; } @@ -105,7 +106,7 @@ .form-grid label { font-weight: 600; font-size: 14px; - color: #333; + color: var(--text-primary); margin-bottom: 6px; display: block; } @@ -114,10 +115,11 @@ .form-grid select { width: 100%; padding: 10px 12px; - border: 2px solid #e0e0e0; - border-radius: 8px; + border: 2px solid var(--border-color); + border-radius: var(--radius-md); font-size: 14px; - background-color: #fff; + background-color: var(--bg-secondary); + color: var(--text-primary); transition: all 0.2s ease; box-sizing: border-box; } @@ -125,14 +127,14 @@ .form-grid input:focus, .form-grid select:focus { outline: none; - border-color: #fcd200; - box-shadow: 0 0 0 3px rgba(252, 210, 0, 0.1); + border-color: var(--accent-gold); + box-shadow: 0 0 0 3px var(--accent-gold-muted); } .form-grid input.readonly-input { - background-color: #f8f9fa; + background-color: var(--bg-elevated); cursor: not-allowed; - color: #6c757d; + color: var(--text-muted); } .uniform-section { @@ -144,26 +146,26 @@ justify-content: flex-end; margin-top: 24px; padding-top: 20px; - border-top: 1px solid #e0e0e0; + border-top: 1px solid var(--border-color); } .save-button { - background-color: #fcd200; - color: #333; + background-color: var(--accent-gold); + color: #000; padding: 12px 24px; font-weight: 600; border: none; - border-radius: 8px; + border-radius: var(--radius-md); font-size: 16px; cursor: pointer; transition: all 0.2s ease; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-sm); } .save-button:hover { - background-color: #f4b400; + background-color: var(--accent-gold-hover); transform: translateY(-1px); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); + box-shadow: var(--shadow-md); } .save-button:active { diff --git a/frontend/Frontend-Hotel/src/pages/PendingApproval.css b/frontend/Frontend-Hotel/src/pages/PendingApproval.css index ea47700..cfd915e 100644 --- a/frontend/Frontend-Hotel/src/pages/PendingApproval.css +++ b/frontend/Frontend-Hotel/src/pages/PendingApproval.css @@ -8,7 +8,7 @@ } .page-title { - color: #1a1a1a; + color: var(--text-primary); font-size: 28px; font-weight: 700; margin: 0; @@ -17,10 +17,10 @@ } .table-section { - background: white; - border-radius: 16px; + background: var(--bg-secondary); + border-radius: var(--radius-lg); padding: 24px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + box-shadow: var(--shadow-sm); min-height: 400px; } @@ -45,7 +45,7 @@ .table-section { padding: 16px; - border-radius: 12px; + border-radius: var(--radius-md); } } @@ -58,4 +58,3 @@ padding: 12px; } } - diff --git a/frontend/Frontend-Hotel/src/pages/Reservations/NewReservation.jsx b/frontend/Frontend-Hotel/src/pages/Reservations/NewReservation.jsx index eb9c0e2..2c4ed55 100644 --- a/frontend/Frontend-Hotel/src/pages/Reservations/NewReservation.jsx +++ b/frontend/Frontend-Hotel/src/pages/Reservations/NewReservation.jsx @@ -114,8 +114,8 @@ export default function NewReservation() { {rooms .filter((rm) => rm.status === "available") .map((rm) => ( - ))} diff --git a/frontend/Frontend-Hotel/src/pages/Reservations/components/ReservationCard.jsx b/frontend/Frontend-Hotel/src/pages/Reservations/components/ReservationCard.jsx index 2cf331d..722d787 100644 --- a/frontend/Frontend-Hotel/src/pages/Reservations/components/ReservationCard.jsx +++ b/frontend/Frontend-Hotel/src/pages/Reservations/components/ReservationCard.jsx @@ -60,14 +60,14 @@ export default function ReservationCard({ reservation, onStatusChange }) {
- {r.name_room && ( + {r.room_number && (
- {r.name_room} + {r.room_number} - {r.bed_type && ( + {r.room_type && ( - {r.bed_type} + {r.room_type} )}
diff --git a/frontend/Frontend-Hotel/src/pages/RoomDashboard/components/RoomDetailModal.jsx b/frontend/Frontend-Hotel/src/pages/RoomDashboard/components/RoomDetailModal.jsx index 142f3d4..19f280d 100644 --- a/frontend/Frontend-Hotel/src/pages/RoomDashboard/components/RoomDetailModal.jsx +++ b/frontend/Frontend-Hotel/src/pages/RoomDashboard/components/RoomDetailModal.jsx @@ -20,7 +20,7 @@ export default function RoomDetailModal({ room, onClose, onStatusChange }) { }} >

- {t("rooms.roomNumber")}: {room.name_room} + {t("rooms.roomNumber")}: {room.room_number}

@@ -151,7 +151,7 @@ export default function RoomDetailModal({ room, onClose, onStatusChange }) { {room.status === "available" && ( @@ -159,7 +159,7 @@ export default function RoomDetailModal({ room, onClose, onStatusChange }) { {room.status === "cleaning" && ( @@ -167,7 +167,7 @@ export default function RoomDetailModal({ room, onClose, onStatusChange }) { {room.status === "maintenance" && ( diff --git a/frontend/Frontend-Hotel/src/pages/RoomDashboard/components/RoomGrid.jsx b/frontend/Frontend-Hotel/src/pages/RoomDashboard/components/RoomGrid.jsx index aaea716..d86a685 100644 --- a/frontend/Frontend-Hotel/src/pages/RoomDashboard/components/RoomGrid.jsx +++ b/frontend/Frontend-Hotel/src/pages/RoomDashboard/components/RoomGrid.jsx @@ -34,11 +34,11 @@ export default function RoomGrid({ rooms, onRoomClick }) {
{roomsByFloor[floor].map((room) => (
onRoomClick(room)} > -
{room.name_room}
+
{room.room_number}
{room.guest_name && (
{room.guest_name}
)} diff --git a/frontend/Frontend-Hotel/src/pages/RoomService/NewOrder.jsx b/frontend/Frontend-Hotel/src/pages/RoomService/NewOrder.jsx index a2e13f1..2d62fe8 100644 --- a/frontend/Frontend-Hotel/src/pages/RoomService/NewOrder.jsx +++ b/frontend/Frontend-Hotel/src/pages/RoomService/NewOrder.jsx @@ -148,8 +148,8 @@ export default function NewOrder() { > {rooms.map((room) => ( - ))} diff --git a/frontend/Frontend-Hotel/src/pages/RoomService/RoomServiceOrders.jsx b/frontend/Frontend-Hotel/src/pages/RoomService/RoomServiceOrders.jsx index 1a3e8a2..42d0758 100644 --- a/frontend/Frontend-Hotel/src/pages/RoomService/RoomServiceOrders.jsx +++ b/frontend/Frontend-Hotel/src/pages/RoomService/RoomServiceOrders.jsx @@ -130,7 +130,7 @@ export default function RoomServiceOrders() { color: "var(--text-primary)", }} > - {order.name_room || `Room ${order.room_id}`} + {order.room_number || `Room ${order.room_id}`} {order.guest_name && (

) : ( employees.map((emp) => ( - + {emp.first_name} {emp.last_name} {weekDates.map((wd) => { const dateStr = formatDate(wd); - const shift = grid[emp.id_employee]?.[dateStr] || "off"; - const changeKey = `${emp.id_employee}_${dateStr}`; + const shift = grid[emp.id]?.[dateStr] || "off"; + const changeKey = `${emp.id}_${dateStr}`; const isChanged = changes[changeKey] !== undefined; return ( @@ -256,7 +256,7 @@ export default function Schedules() { userSelect: "none", position: "relative", }} - onClick={() => handleCellClick(emp.id_employee, dateStr)} + onClick={() => handleCellClick(emp.id, dateStr)} >