114 lines
4.7 KiB
JavaScript
114 lines
4.7 KiB
JavaScript
// Simplified CalendarView Component - Optimized for Morning Meetings
|
|
const CalendarViewSimple = ({ calendarData, employees, activeOrders, onCreateAllocation, onUpdateAllocation, onDeleteAllocation }) => {
|
|
// Generate employee colors for visual distinction
|
|
const employeeColors = employees.reduce((colors, employee, index) => {
|
|
const hue = (index * 137.5) % 360;
|
|
colors[employee.id] = `hsl(${hue}, 70%, 55%)`;
|
|
return colors;
|
|
}, {});
|
|
|
|
// Helper function to get employee name
|
|
const getEmployeeName = (employeeId) => {
|
|
const employee = employees.find(emp => emp.id === employeeId);
|
|
return employee ? `${employee.first_name} ${employee.last_name}` : `Medarbejder ${employeeId}`;
|
|
};
|
|
|
|
return (
|
|
<div className="morning-meeting-simple">
|
|
{/* Clean Header */}
|
|
<div className="simple-header">
|
|
<h1 className="meeting-title">
|
|
🌅 MORGENMØDE - {new Date().toLocaleDateString('da-DK', {
|
|
weekday: 'long',
|
|
day: 'numeric',
|
|
month: 'long'
|
|
})}
|
|
</h1>
|
|
<div className="quick-stats">
|
|
<span className="stat-badge">👷 {employees.length} medarbejdere</span>
|
|
<span className="stat-badge">📋 {calendarData.entries?.length || 0} opgaver</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* HVEM ARBEJDER HVOR - Large Employee Cards */}
|
|
<div className="employee-assignments">
|
|
{employees.map((employee) => {
|
|
const employeeTasks = calendarData.entries?.filter(entry =>
|
|
entry.employee_id === employee.id
|
|
) || [];
|
|
|
|
return (
|
|
<div key={employee.id} className={`employee-card-large ${employeeTasks.length > 0 ? 'busy' : 'available'}`}>
|
|
<div className="employee-header">
|
|
<div
|
|
className="employee-avatar-big"
|
|
style={{ backgroundColor: employeeColors[employee.id] || '#64748b' }}
|
|
>
|
|
{employee.first_name?.charAt(0)}{employee.last_name?.charAt(0)}
|
|
</div>
|
|
<div className="employee-details">
|
|
<h2 className="employee-name-big">
|
|
{employee.first_name} {employee.last_name}
|
|
</h2>
|
|
<div className="employee-status-big">
|
|
{employeeTasks.length > 0 ? '🔥 TRAVL' : '✅ LEDIG'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{employeeTasks.length > 0 && (
|
|
<div className="today-tasks">
|
|
<h3>I DAG:</h3>
|
|
{employeeTasks.slice(0, 3).map((task, index) => (
|
|
<div key={index} className="task-simple">
|
|
<span className="task-time-simple">
|
|
{new Date(task.start_time).toLocaleTimeString('da-DK', {
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
})} - {new Date(task.end_time).toLocaleTimeString('da-DK', {
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
})}
|
|
</span>
|
|
<span className="task-desc-simple">
|
|
{task.description || task.title || 'Arbejdsopgave'}
|
|
</span>
|
|
</div>
|
|
))}
|
|
{employeeTasks.length > 3 && (
|
|
<div className="more-tasks">+ {employeeTasks.length - 3} flere opgaver</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{employeeTasks.length === 0 && (
|
|
<div className="no-tasks-today">
|
|
<p>Ingen planlagte opgaver i dag</p>
|
|
<p className="availability-note">Tilgængelig for nye opgaver</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Simple Footer with Key Info */}
|
|
<div className="meeting-footer">
|
|
<div className="footer-stat">
|
|
📅 <strong>I dag:</strong> {calendarData.entries?.length || 0} opgaver planlagt
|
|
</div>
|
|
<div className="footer-stat">
|
|
⏱️ <strong>Total timer:</strong> {calendarData.entries?.reduce((sum, entry) => {
|
|
const duration = (new Date(entry.end_time) - new Date(entry.start_time)) / (1000 * 60 * 60);
|
|
return sum + duration;
|
|
}, 0).toFixed(1) || 0}h
|
|
</div>
|
|
<div className="footer-stat">
|
|
👷 <strong>Aktive:</strong> {employees.filter(emp =>
|
|
calendarData.entries?.some(entry => entry.employee_id === emp.id)
|
|
).length} af {employees.length} medarbejdere
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |