\n {Object.entries(groupedSchedules).map(([date, schedules]) => (\n

{moment(date).format(\"MMMM D, YYYY\")}

\n {schedules.map((schedule, index) => )}\n

\n ))}\n

\n );\n };\n\n const ScheduleItem = ({ schedule }) => {\n return (\n

{schedule.surfer.email}

\n Shift: {moment(schedule.interval.start).format(\"HH:mm\")} - {moment(schedule.interval.end).format(\"HH:mm\")}\n

\n {schedule.taskSchedule?.length > 0\n ? (\n

\n {task.task.name}\n \n {moment(task.interval.start).format(\"HH:mm\")} - {moment(task.interval.end).format(\"HH:mm\")}\n \n

\n )\n :

No tasks scheduled

}\n

\n );\n };\n\n function groupSchedulesByDate(schedules) {\n return schedules.reduce((acc, schedule) => {\n const date = schedule.interval.start.split(\"T\")[0];\n if (!acc[date]) {\n acc[date] = [];\n }\n acc[date].push(schedule);\n return acc;\n }, {});\n }\n\n // ============= Styles =================\n const styles = {\n container: {\n fontFamily: \"Arial, sans-serif\",\n maxWidth: \"1200px\",\n margin: \"0 auto\",\n padding: \"20px\",\n backgroundColor: \"#f5f5f5\",\n },\n dateGroup: {\n marginBottom: \"30px\",\n },\n dateHeader: {\n color: \"#333\",\n borderBottom: \"2px solid #3498db\",\n paddingBottom: \"10px\",\n marginBottom: \"20px\",\n },\n scheduleGrid: {\n display: \"grid\",\n gridTemplateColumns: \"repeat(auto-fill, minmax(300px, 1fr))\",\n gap: \"20px\",\n },\n scheduleItem: {\n backgroundColor: \"white\",\n borderRadius: \"8px\",\n padding: \"20px\",\n boxShadow: \"0 4px 6px rgba(0, 0, 0, 0.1)\",\n transition: \"transform 0.2s ease-in-out\",\n \":hover\": {\n transform: \"translateY(-5px)\",\n },\n },\n surferEmail: {\n color: \"#3498db\",\n marginTop: \"0\",\n marginBottom: \"10px\",\n fontSize: \"1.2em\",\n },\n shiftTime: {\n fontWeight: \"bold\",\n color: \"#555\",\n marginBottom: \"15px\",\n },\n taskList: {\n listStyleType: \"none\",\n padding: \"0\",\n margin: \"0\",\n },\n taskItem: {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n padding: \"8px 0\",\n borderBottom: \"1px solid #eee\",\n },\n taskName: {\n color: \"#333\",\n fontWeight: \"bold\",\n },\n taskTime: {\n color: \"#777\",\n fontSize: \"0.9em\",\n },\n noTasks: {\n color: \"#777\",\n fontStyle: \"italic\",\n },\n };\n\n // ============= Final Response =================\n return new Response(\n renderToString(\n \n \n

24 Hour Schedule for Teamsurfboard Staging:

\n \n

\n ,\n ),\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n}","deleted","label",[99],"permalink","https://www.val.town/x/keenanzucker/stagingdailyschedule/code/main.tsx","extension","actionData","errors"]