From d18e6412f0b4648a88b71ca92796a890cbac3b6a Mon Sep 17 00:00:00 2001 From: Mo Tarbin Date: Sat, 7 Feb 2026 23:26:17 -0500 Subject: [PATCH] feat: add quick scheduling options in DateModal with chips for today, tomorrow, weekend, and next week --- src/views/Modals/Inputs/DateModal.jsx | 110 +++++++++++++++++++++++++- 1 file changed, 108 insertions(+), 2 deletions(-) diff --git a/src/views/Modals/Inputs/DateModal.jsx b/src/views/Modals/Inputs/DateModal.jsx index 58542f7..7f4bb98 100644 --- a/src/views/Modals/Inputs/DateModal.jsx +++ b/src/views/Modals/Inputs/DateModal.jsx @@ -1,4 +1,5 @@ -import { Box, Button, Input, Typography } from '@mui/joy' +import { NextWeek, Today, WbSunny, Weekend } from '@mui/icons-material' +import { Box, Button, Chip, Input, Stack, Typography } from '@mui/joy' import { useState } from 'react' import { useResponsiveModal } from '../../../hooks/useResponsiveModal' @@ -9,6 +10,62 @@ function DateModal({ isOpen, onClose, onSave, current, title }) { current ? new Date(current).toISOString().split('T')[0] : '', ) + const getQuickScheduleDate = option => { + const now = new Date() + const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()) + + switch (option) { + case 'today': { + const nowHour = now.getHours() + const scheduled = new Date(today) + if (nowHour < 9) { + scheduled.setHours(9, 0, 0, 0) + } else if (nowHour < 12) { + scheduled.setHours(12, 0, 0, 0) + } else if (nowHour < 17) { + scheduled.setHours(17, 0, 0, 0) + } else { + scheduled.setHours( + now.getHours(), + now.getMinutes(), + now.getSeconds(), + now.getMilliseconds(), + ) + } + return scheduled + } + case 'tomorrow': { + const tomorrow = new Date(today) + tomorrow.setDate(today.getDate() + 1) + tomorrow.setHours(12, 0, 0, 0) + return tomorrow + } + case 'weekend': { + const weekend = new Date(today) + const daysUntilSaturday = (6 - today.getDay() + 7) % 7 || 7 + weekend.setDate(today.getDate() + daysUntilSaturday) + return weekend + } + case 'next-week': { + const nextWeek = new Date(today) + const daysUntilMonday = (1 - today.getDay() + 7) % 7 || 7 + nextWeek.setDate(today.getDate() + daysUntilMonday) + return nextWeek + } + default: + return today + } + } + + const handleQuickSchedule = option => { + if (option === 'remove') { + setDate('') + } else { + const selectedDate = getQuickScheduleDate(option) + setDate(selectedDate.toISOString().split('T')[0]) + } + } + const handleSave = () => { onSave(date) onClose() @@ -23,7 +80,56 @@ function DateModal({ isOpen, onClose, onSave, current, title }) { value={date} onChange={e => setDate(e.target.value)} /> - + + + + Quick select: + + + } + size='lg' + onClick={() => handleQuickSchedule('today')} + sx={{ cursor: 'pointer' }} + > + Today + + } + size='lg' + onClick={() => handleQuickSchedule('tomorrow')} + sx={{ cursor: 'pointer' }} + > + Tomorrow + + } + size='lg' + onClick={() => handleQuickSchedule('weekend')} + sx={{ cursor: 'pointer' }} + > + Weekend + + } + size='lg' + onClick={() => handleQuickSchedule('next-week')} + sx={{ cursor: 'pointer' }} + > + Next week + + + + +