Staf Booking

fixed staff ability to book a customer in

src/app/(owner)/owner/calendar/page.tsx

@@ -21,7 +21,7 @@ import { getAvailableRewardFlags } from "@/services/loyalty/loyalty.service";
 import { listAppointments } from "@/services/scheduling/appointment.service";
 import { DateStrip } from "@/features/staff/components/date-strip";
 import { DayCalendar } from "@/features/staff/components/day-calendar";
-import type { CalendarAppointment, CalendarBlock } from "@/features/staff/components/day-calendar";
+import type { CalendarAppointment, CalendarBlock, CalendarColumn } from "@/features/staff/components/day-calendar";
 import { OwnerBlockTimeButton } from "@/features/owner/components/owner-block-time-button";
 import { cn } from "@/lib/utils/cn";
 import type { AppointmentStatus } from "@/types/domain";
@@ -74,7 +74,7 @@ export default async function OwnerCalendarPage({
 
   const allStaff = await prisma.staffProfile.findMany({
     where: { businessId: context.businessId, status: "ACTIVE" },
-    include: { user: { select: { id: true, name: true } } },
+    include: { user: { select: { id: true, name: true, image: true } } },
     orderBy: { createdAt: "asc" },
   });
   const selectedStaff = staffIdParam ? allStaff.find((s) => s.id === staffIdParam) : undefined;
@@ -159,6 +159,20 @@ export default async function OwnerCalendarPage({
     return { workingWindow, blocks, wholeDayOff, staffAppointments };
   }
 
+  const columns: CalendarColumn[] = staffToRender.map((s) => {
+    const column = buildColumnFor(s.id);
+    return {
+      id: s.id,
+      name: s.user.name ?? "Staff",
+      avatarUrl: s.user.image,
+      hoursLabel: column.workingWindow ? formatRange(column.workingWindow.startMinutes, column.workingWindow.endMinutes) : null,
+      wholeDayOff: column.wholeDayOff,
+      appointments: column.staffAppointments,
+      blocks: column.blocks,
+      workingWindow: column.workingWindow,
+    };
+  });
+
   return (
     <div className="pb-6">
       <div className="flex items-center justify-between px-6 pt-12">
@@ -237,31 +251,7 @@ export default async function OwnerCalendarPage({
               <EmptyState icon={CalendarX2} title="No active staff" description="Add a staff member from Team." />
             </div>
           ) : (
-            <div className="flex gap-4 overflow-x-auto px-6 pb-4 lg:px-0">
-              {staffToRender.map((s) => {
-                const column = buildColumnFor(s.id);
-                return (
-                  <div key={s.id} className="w-[320px] shrink-0 lg:w-auto lg:flex-1">
-                    <p className="text-muted mb-2 px-6 text-xs font-bold tracking-widest uppercase lg:px-0">
-                      {s.user.name}
-                    </p>
-                    {column.wholeDayOff ? (
-                      <div className="px-6 lg:px-0">
-                        <EmptyState icon={CalendarX2} title="Off this day" />
-                      </div>
-                    ) : (
-                      <DayCalendar
-                        appointments={column.staffAppointments}
-                        blocks={column.blocks}
-                        workingWindow={column.workingWindow}
-                        currentTimeMinutes={currentTimeMinutes}
-                        appointmentHrefBase="/owner/appointments"
-                      />
-                    )}
-                  </div>
-                );
-              })}
-            </div>
+            <DayCalendar columns={columns} currentTimeMinutes={currentTimeMinutes} appointmentHrefBase="/owner/appointments" />
           )
         ) : appointments.length === 0 ? (
           <div className="px-6">