FoodSurf/frontend
1
0
Fork 1
Code Pull Requests Actions Packages Releases 31 Activity

fix: add shift management (#41)
Release package / release (push) Successful in 10m13s
Details

Browse Source 
Co-authored-by: TakahashiNg <83152264+TakahashiNguyen@users.noreply.github.com>
Reviewed-on: #41
This commit was merged in pull request #41.
This commit is contained in:
TakahashiNguyen
2026-05-14 03:13:06 +00:00
parent dfcb1b09c0
commit 9ed4889310
18 changed files with 305 additions and 422 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/organisms/shift-schedule/MobileShiftView.tsx
+13 -19
View File
@@ -44,9 +44,7 @@ export default function MobileShiftView({
onShiftClick,
}: MobileShiftViewProps) {
const { currentDate, shifts, goToNextMonth, goToPrevMonth } = useShift();
const [selectedDate, setSelectedDate] = useState<string>(
formatDateISO(new Date(2026, 3, 10)),
);
const [selectedDate, setSelectedDate] = useState<Date>(new Date(2026, 3, 10));
const calendarDays = useMemo(() => {
const year = currentDate.getFullYear();
@@ -67,21 +65,20 @@ export default function MobileShiftView({
}, [currentDate]);
const getDotColors = (date: Date): string[] => {
const dateStr = formatDateISO(date);
const dayShifts = shifts.filter((s) => s.date === dateStr);
const dayShifts = shifts.filter((s) => s.date.getDate() === date.getDate());
const dots: string[] = [];
if (dayShifts.some((s) => s.status === "available"))
dots.push("bg-amber-400");
if (dayShifts.some((s) => s.status === "registered"))
dots.push("bg-green-500");
if (dayShifts.some((s) => s.status === "approved_leave"))
dots.push("bg-purple-400");
if (dayShifts.some((s) => s.status === "absent")) dots.push("bg-red-400");
// if (dayShifts.some((s) => s.status === "available"))
// dots.push("bg-amber-400");
// if (dayShifts.some((s) => s.status === "registered"))
// dots.push("bg-green-500");
// if (dayShifts.some((s) => s.status === "approved_leave"))
// dots.push("bg-purple-400");
// if (dayShifts.some((s) => s.status === "absent")) dots.push("bg-red-400");
return dots;
};
const selectedShifts = useMemo(() => {
return shifts.filter((s) => s.date === selectedDate);
return shifts.filter((s) => s.date.getDate() === selectedDate.getDate());
}, [shifts, selectedDate]);
const selectedDateObj = new Date(selectedDate + "T00:00:00");
@@ -133,16 +130,15 @@ export default function MobileShiftView({
return <div key={`empty-${i}`} className="p-1" />;
}
const dateStr = formatDateISO(date);
const today = isToday(date);
const selected = dateStr === selectedDate;
const selected = date === selectedDate;
const dots = getDotColors(date);
return (
<button
type="button"
key={i}
onClick={() => setSelectedDate(dateStr)}
onClick={() => setSelectedDate(date)}
className={`flex cursor-pointer flex-col items-center border-none bg-transparent p-1 transition ${
selected ? "rounded-lg bg-(--color-primary)/10" : ""
}`}
@@ -218,9 +214,7 @@ export default function MobileShiftView({
) : (
<div className="space-y-3">
{DEPARTMENTS.map((dept) => {
const deptShifts = selectedShifts.filter(
(s) => s.department === dept.id,
);
const deptShifts = selectedShifts;
if (deptShifts.length === 0) return null;
return (
<div key={dept.id}>