Spaces:
Running
Running
File size: 4,800 Bytes
76823f0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | import React, { useState, useEffect } from 'react';
import { db } from '../../firebase/config';
import { ref, onValue, set } from 'firebase/database';
import { Clock, Save, User as UserIcon } from 'lucide-react';
export default function EmployeeSchedules() {
const [employees, setEmployees] = useState([]);
const [schedules, setSchedules] = useState({});
useEffect(() => {
// Fetch Employees (Users with role 'mesero' or 'admin')
onValue(ref(db, 'users'), (snapshot) => {
const data = snapshot.val();
if (data) {
setEmployees(Object.keys(data).map(k => ({ email: k.replace(',', '.'), ...data[k] })));
}
});
// Fetch Schedules
onValue(ref(db, 'schedules'), (snapshot) => {
if (snapshot.exists()) setSchedules(snapshot.val());
});
}, []);
const handleUpdateSchedule = async (email, field, value) => {
const safeEmail = email.replace(/\./g, ',');
await set(ref(db, `schedules/${safeEmail}/${field}`), value);
};
return (
<div className="animate-fade-in" style={{ padding: '0 1rem' }}>
<header style={{ marginBottom: '2rem' }}>
<h2 className="text-gradient" style={{ fontSize: '2rem', fontWeight: '800', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
<Clock size={28} /> Control de Horarios
</h2>
<p style={{ color: 'var(--text-muted)' }}>Asignación de turnos y disponibilidad de personal</p>
</header>
<div className="glass-panel" style={{ overflow: 'hidden' }}>
<table style={{ width: '100%', borderCollapse: 'collapse', textAlign: 'left' }}>
<thead>
<tr style={{ borderBottom: '1px solid var(--border-subtle)', background: 'rgba(255,255,255,0.02)' }}>
<th style={{ padding: '1.25rem', color: 'var(--text-muted)', fontWeight: '500' }}>Empleado</th>
<th style={{ padding: '1.25rem', color: 'var(--text-muted)', fontWeight: '500' }}>Rol</th>
<th style={{ padding: '1.25rem', color: 'var(--text-muted)', fontWeight: '500' }}>Entrada</th>
<th style={{ padding: '1.25rem', color: 'var(--text-muted)', fontWeight: '500' }}>Salida</th>
<th style={{ padding: '1.25rem', color: 'var(--text-muted)', fontWeight: '500' }}>Estado</th>
</tr>
</thead>
<tbody>
{employees.map((emp) => {
const safeEmail = emp.email.replace(/\./g, ',');
const sched = schedules[safeEmail] || { start: '09:00', end: '17:00' };
return (
<tr key={emp.email} style={{ borderBottom: '1px solid var(--border-subtle)' }} className="table-row-hover">
<td style={{ padding: '1.25rem' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
<div style={{ width: '32px', height: '32px', borderRadius: '50%', background: 'var(--primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<UserIcon size={16} color="#fff" />
</div>
<span style={{ fontWeight: '600' }}>{emp.email}</span>
</div>
</td>
<td style={{ padding: '1.25rem' }}>
<span style={{ fontSize: '0.75rem', textTransform: 'uppercase', background: 'rgba(255,255,255,0.05)', padding: '4px 10px', borderRadius: '12px', color: 'var(--text-muted)' }}>
{emp.role}
</span>
</td>
<td style={{ padding: '1.25rem' }}>
<input
type="time"
value={sched.start}
onChange={(e) => handleUpdateSchedule(emp.email, 'start', e.target.value)}
style={inputStyle}
/>
</td>
<td style={{ padding: '1.25rem' }}>
<input
type="time"
value={sched.end}
onChange={(e) => handleUpdateSchedule(emp.email, 'end', e.target.value)}
style={inputStyle}
/>
</td>
<td style={{ padding: '1.25rem' }}>
<span style={{ color: 'var(--success)', fontSize: '0.8rem', fontWeight: '600' }}>Activo</span>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
);
}
const inputStyle = {
padding: '0.5rem',
borderRadius: '6px',
background: 'rgba(255,255,255,0.05)',
border: '1px solid var(--border-subtle)',
color: '#fff',
outline: 'none',
fontSize: '0.9rem'
};
|