Schedule - ${monthName}

${week.map((day) => { if (day.dayNumber === null) { return ""; } return ` `; }).join("")}

` ).join("")} `; printWindow.document.write(printContent); printWindow.document.close(); printWindow.onload = () => { printWindow.print(); printWindow.onafterprint = () => printWindow.close(); }; }, [ selectedDate, selectedLocation, schedules, firstDayOfMonth, daysInMonth, weeksToShow ]); const handlePinSubmit = (e) => { e.preventDefault(); if (pin === "3728") { setAuthenticated(true); setPinError(false); } else { setPinError(true); setPin(""); } }; if (!authenticated) { return /* @__PURE__ */ React.createElement("div", { className: "min-h-screen bg-black flex items-center justify-center p-4" }, /* @__PURE__ */ React.createElement("div", { className: "w-full max-w-md" }, /* @__PURE__ */ React.createElement("div", { className: "text-center mb-8" }, /* @__PURE__ */ React.createElement("h1", { className: "text-4xl font-bold text-white mb-2" }, "skedj", /* @__PURE__ */ React.createElement("span", { className: "bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent" }, ".")), /* @__PURE__ */ React.createElement("p", { className: "text-gray-400 text-sm" }, "by", " ", /* @__PURE__ */ React.createElement("span", { className: "bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent" }, "Elara"))), /* @__PURE__ */ React.createElement("div", { className: "bg-[#111111] rounded-xl p-8 shadow-xl border border-white/5" }, /* @__PURE__ */ React.createElement("form", { onSubmit: handlePinSubmit }, /* @__PURE__ */ React.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-slate-300 mb-2" }, "Enter PIN to Access Schedule Manager"), /* @__PURE__ */ React.createElement( "input", { type: "password", value: pin, onChange: (e) => { setPinError(false); setPin(e.target.value); }, maxLength: 4, className: "w-full p-3 bg-slate-900/50 border border-slate-700 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-white text-center text-2xl tracking-widest", placeholder: "\u2022\u2022\u2022\u2022" } ), pinError && /* @__PURE__ */ React.createElement("p", { className: "mt-2 text-sm text-red-400" }, "Incorrect PIN. Please try again.")), /* @__PURE__ */ React.createElement( "button", { type: "submit", className: "w-full bg-gradient-to-r from-purple-500 to-blue-500 text-white px-4 py-3 rounded-lg hover:opacity-90 transition-all font-medium" }, "Access Schedule Manager" ))))); } if (loading) { return /* @__PURE__ */ React.createElement("div", { className: "flex h-screen items-center justify-center bg-slate-900" }, /* @__PURE__ */ React.createElement("div", { className: "text-white" }, "Loading...")); } if (error) { return /* @__PURE__ */ React.createElement("div", { className: "flex h-screen items-center justify-center bg-slate-900" }, /* @__PURE__ */ React.createElement( Notification, { message: error.message || error, type: error.type || "error", onClose: () => setError(null) } )); } return /* @__PURE__ */ React.createElement("div", { className: "flex h-screen bg-black" }, /* @__PURE__ */ React.createElement("div", { className: "w-80 bg-[#111111] shadow-xl border-r border-white/5" }, /* @__PURE__ */ React.createElement("div", { className: "p-8" }, /* @__PURE__ */ React.createElement("div", { className: "mb-10" }, /* @__PURE__ */ React.createElement("h1", { className: "text-4xl font-bold text-white mb-2" }, "skedj", /* @__PURE__ */ React.createElement("span", { className: "bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent" }, ".")), /* @__PURE__ */ React.createElement("p", { className: "text-gray-400 text-sm" }, "by", " ", /* @__PURE__ */ React.createElement("span", { className: "bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent" }, "Elara")))), /* @__PURE__ */ React.createElement("div", { className: "flex-1 overflow-y-auto px-8 pb-8 space-y-6" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mb-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React.createElement( "button", { onClick: () => setShowLocations(!showLocations), className: "text-slate-300 hover:text-white mr-2" }, /* @__PURE__ */ React.createElement( "i", { className: `fas fa-chevron-${showLocations ? "down" : "right"}` } ) ), /* @__PURE__ */ React.createElement("h2", { className: "text-lg font-medium text-slate-300" }, "Locations (", locations.length, ")")), /* @__PURE__ */ React.createElement( "a", { href: "/locations", className: "text-sm text-indigo-400 hover:text-indigo-300 transition-colors" }, "Manage" )), showLocations && /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React.createElement( "button", { onClick: () => setSelectedLocation("all"), className: `w-full text-left p-3 rounded-lg transition-all ${selectedLocation === "all" ? "bg-slate-700/50 text-white" : "text-slate-400 hover:bg-slate-700/30"}` }, "All Locations" ), locations.map((location) => /* @__PURE__ */ React.createElement( "button", { key: location.id, onClick: () => setSelectedLocation(location.name), className: `w-full text-left p-3 rounded-lg transition-all flex items-center ${selectedLocation === location.name ? "bg-slate-700/50 text-white" : "text-slate-400 hover:bg-slate-700/30"}` }, /* @__PURE__ */ React.createElement( "div", { className: "w-3 h-3 rounded-full mr-3", style: { backgroundColor: location.color } } ), location.name )))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mb-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React.createElement( "button", { onClick: () => setShowEmployees(!showEmployees), className: "text-slate-300 hover:text-white mr-2" }, /* @__PURE__ */ React.createElement( "i", { className: `fas fa-chevron-${showEmployees ? "down" : "right"}` } ) ), /* @__PURE__ */ React.createElement("h2", { className: "text-lg font-medium text-slate-300" }, "Team Members (", employees.length, ")")), /* @__PURE__ */ React.createElement( "a", { href: "/employees", className: "text-sm text-indigo-400 hover:text-indigo-300 transition-colors" }, "Manage" )), showEmployees && /* @__PURE__ */ React.createElement("div", { className: "space-y-3" }, employees.map((employee) => /* @__PURE__ */ React.createElement( "div", { key: employee.id, className: "p-3 bg-slate-800/50 rounded-lg border border-slate-700/50 hover:border-slate-600/50 transition-all" }, /* @__PURE__ */ React.createElement("div", { className: "font-medium text-slate-300" }, employee.name), /* @__PURE__ */ React.createElement("div", { className: "text-sm text-slate-400" }, employee.role || "Employee") )))))), /* @__PURE__ */ React.createElement( "div", { className: `flex-1 p-6 transition-all duration-300 ${showWeeklyHours ? "mr-80" : ""}` }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center mb-6 pr-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-4" }, /* @__PURE__ */ React.createElement( "button", { onClick: () => setSelectedDate( new Date(selectedDate.setMonth(selectedDate.getMonth() - 1)) ), disabled: schedulesLoading || isCopying, className: "p-2 rounded-lg hover:bg-white/5 text-gray-400 transition-all disabled:opacity-50" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-chevron-left" }) ), /* @__PURE__ */ React.createElement("h2", { className: "text-3xl font-semibold text-white" }, selectedDate.toLocaleString("default", { month: "long", year: "numeric" })), /* @__PURE__ */ React.createElement( "button", { onClick: () => setSelectedDate( new Date(selectedDate.setMonth(selectedDate.getMonth() + 1)) ), disabled: schedulesLoading || isCopying, className: "p-2 rounded-lg hover:bg-white/5 text-gray-400 transition-all disabled:opacity-50" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-chevron-right" }) )), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React.createElement( "button", { onClick: deleteAllSchedulesForMonth, disabled: schedulesLoading || isCopying, className: "bg-red-500/10 text-red-400 border border-red-500/20 px-3 py-2 text-sm rounded-lg hover:bg-red-500/20 transition-all flex items-center space-x-2 disabled:opacity-50 whitespace-nowrap" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-trash text-xs" }), /* @__PURE__ */ React.createElement("span", null, "Delete Month") ), /* @__PURE__ */ React.createElement( "button", { onClick: copySchedulesToNextMonth, disabled: schedulesLoading || isCopying, className: "bg-white/5 text-white border border-white/10 px-3 py-2 text-sm rounded-lg hover:bg-white/10 transition-all flex items-center space-x-2 disabled:opacity-50 whitespace-nowrap" }, isCopying ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("i", { className: "fas fa-spinner fa-spin text-xs" }), /* @__PURE__ */ React.createElement("span", null, "Copying...")) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("i", { className: "fas fa-copy text-xs" }), /* @__PURE__ */ React.createElement("span", null, "Copy to Next Month")) ), /* @__PURE__ */ React.createElement( "button", { onClick: () => setShowScheduleForm(true), disabled: schedulesLoading || isCopying, className: "bg-gradient-to-r from-purple-500 to-blue-500 text-white px-3 py-2 text-sm rounded-lg hover:opacity-90 transition-all flex items-center space-x-2 disabled:opacity-50 whitespace-nowrap" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-plus text-xs" }), /* @__PURE__ */ React.createElement("span", null, "Add Schedule") ), /* @__PURE__ */ React.createElement( "button", { onClick: handlePrint, disabled: schedulesLoading || isCopying, className: "bg-white/5 text-white border border-white/10 px-3 py-2 text-sm rounded-lg hover:bg-white/10 transition-all flex items-center space-x-2 disabled:opacity-50 whitespace-nowrap" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-print text-xs" }), /* @__PURE__ */ React.createElement("span", null, "Print Schedule") ))), /* @__PURE__ */ React.createElement("div", { className: "bg-[#111111] rounded-xl shadow-xl border border-white/5" }, /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-7 divide-x divide-white/5 border-b border-white/5" }, ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day) => /* @__PURE__ */ React.createElement( "div", { key: day, className: "p-3 text-center text-sm font-medium text-slate-400" }, day ))), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-7 divide-x divide-white/5 h-[calc(100%-3rem)]" }, Array.from({ length: firstDayOfMonth }).map((_, index) => /* @__PURE__ */ React.createElement( "div", { key: `prev-${index}`, className: "min-h-[120px] bg-slate-800/30 border-b border-slate-700/50 p-2 opacity-50" }, /* @__PURE__ */ React.createElement("div", { className: "sticky top-0 inset-x-0 bg-slate-800/95 backdrop-blur-sm py-1 -mt-2 -mx-2 px-2 mb-2 z-10" }, /* @__PURE__ */ React.createElement("div", { className: "font-bold text-slate-400" }, new Date( selectedDate.getFullYear(), selectedDate.getMonth(), 0 - (firstDayOfMonth - index - 1) ).getDate())), /* @__PURE__ */ React.createElement( ScheduleCell, { schedules: filteredSchedules.filter( (schedule) => schedule.isPreviousMonth && new Date(schedule.date).getDate() === new Date( selectedDate.getFullYear(), selectedDate.getMonth(), 0 - (firstDayOfMonth - index - 1) ).getDate() ), onClick: (schedule) => { setSelectedSchedule({ ...schedule, employeeId: employees.find( (emp) => emp.name === schedule.employeeName )?.id, locationId: locations.find( (loc) => loc.name === schedule.location )?.id }); setShowEditForm(true); } } ) )), Array.from({ length: daysInMonth }).map((_, index) => /* @__PURE__ */ React.createElement( "div", { key: `current-${index}`, onClick: (e) => { if (e.target === e.currentTarget || e.target.closest(".calendar-day")) { handleDayClick(index + 1); } }, className: "min-h-[120px] hover:bg-slate-800/70 transition-colors border-b border-slate-700/50 p-2 cursor-pointer calendar-day" }, /* @__PURE__ */ React.createElement("div", { className: "sticky top-0 inset-x-0 bg-slate-800/95 backdrop-blur-sm py-1 -mt-2 -mx-2 px-2 mb-2 z-10" }, /* @__PURE__ */ React.createElement("div", { className: "font-bold text-slate-400" }, index + 1)), /* @__PURE__ */ React.createElement( ScheduleCell, { schedules: filteredSchedules.filter( (schedule) => new Date(schedule.date).getDate() === index + 1 ), onClick: (schedule) => { setSelectedSchedule({ ...schedule, employeeId: employees.find( (emp) => emp.name === schedule.employeeName )?.id, locationId: locations.find( (loc) => loc.name === schedule.location )?.id }); setShowEditForm(true); } } ) )), Array.from({ length: weeksToShow * 7 - (firstDayOfMonth + daysInMonth) }).map((_, index) => /* @__PURE__ */ React.createElement( "div", { key: `empty-${index}`, className: "min-h-[120px] bg-slate-800/30 border-b border-slate-700/50 p-2 opacity-50" }, /* @__PURE__ */ React.createElement("div", { className: "sticky top-0 inset-x-0 bg-slate-800/95 backdrop-blur-sm py-1 -mt-2 -mx-2 px-2 mb-2 z-10" }, /* @__PURE__ */ React.createElement("div", { className: "font-bold text-slate-400" }, index + 1)) )))) ), /* @__PURE__ */ React.createElement( "div", { className: `fixed right-0 top-0 h-screen bg-[#111111] border-l border-white/5 transition-all duration-300 ${showWeeklyHours ? "w-80" : "w-8"}`, style: { zIndex: 40 } }, /* @__PURE__ */ React.createElement( "button", { onClick: () => setShowWeeklyHours(!showWeeklyHours), className: "absolute left-0 top-1/2 -translate-y-1/2 -translate-x-1/2 w-8 h-8 bg-slate-800 border border-slate-700/50 rounded-full flex items-center justify-center text-slate-400 hover:text-white transition-colors", style: { zIndex: 50 } }, /* @__PURE__ */ React.createElement( "i", { className: `fas fa-chevron-${showWeeklyHours ? "right" : "left"}`, style: { zIndex: 51, position: "relative" } } ) ), showWeeklyHours && /* @__PURE__ */ React.createElement("div", { className: "p-6 h-full overflow-y-auto" }, /* @__PURE__ */ React.createElement("h2", { className: "text-xl font-semibold text-white mb-6" }, "Weekly Hours"), Array.from(calculateWeeklyHours()).map(([weekKey, weekData]) => { const startDateStr = weekData.start.toLocaleDateString( void 0, { month: "short", day: "numeric" } ); const endDateStr = weekData.end.toLocaleDateString(void 0, { month: "short", day: "numeric" }); return /* @__PURE__ */ React.createElement("div", { key: weekKey, className: "mb-8" }, /* @__PURE__ */ React.createElement("h3", { className: "text-sm font-medium text-slate-400 mb-3" }, "Sun, ", startDateStr, " - Sat, ", endDateStr), /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, Array.from(weekData.hours).map(([employee, hours]) => /* @__PURE__ */ React.createElement( "div", { key: employee, className: "flex justify-between items-center p-3 bg-slate-700/30 rounded-lg" }, /* @__PURE__ */ React.createElement("span", { className: "text-slate-300" }, employee), /* @__PURE__ */ React.createElement("span", { className: "text-slate-400" }, hours.toFixed(1), "h") )))); })) ), showScheduleForm && /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 bg-slate-900/80 backdrop-blur-sm flex items-center justify-center z-50" }, /* @__PURE__ */ React.createElement( ScheduleFormModal, { onClose: () => { setShowScheduleForm(false); setSelectedDayForSchedule(null); }, defaultDate: selectedDayForSchedule } )), showEditForm && selectedSchedule && /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 bg-slate-900/80 backdrop-blur-sm flex items-center justify-center z-50" }, /* @__PURE__ */ React.createElement( EditScheduleModal, { schedule: selectedSchedule, onClose: () => { setShowEditForm(false); setSelectedSchedule(null); } } ))); } var page_default = MainComponent; return __toCommonJS(page_exports); })();

Sunday	Monday	Tuesday	Wednesday	Thursday	Friday	Saturday
	${day.dayNumber} ${day.schedules.map( (schedule) => ` ${schedule.employeeName} ${schedule.location} ${new Date(schedule.start_time).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })} - ${new Date(schedule.end_time).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })} ` ).join("")}

skedj.