@tulip-systems/create-app 0.11.1

package/dist/templates/spark/src/app/admin/sales-orders/_lib/validators.ts

@@ -0,0 +1,40 @@
+import { createInsertSchema, createSelectSchema, createUpdateSchema } from "drizzle-zod";
+import { z } from "zod";
+
+export type {
+  SalesOrdersEmailsFiltersSchemaFiltersSchema,
+  SalesOrdersFilters,
+} from "../_config/filters";
+export { salesOrdersEmailsFiltersSchema, salesOrdersFiltersSchema } from "../_config/filters";
+
+import { salesOrders } from "./schema";
+import { salesOrderRatioTypeEnum, salesOrderStatusEnum } from "./schema-enums";
+
+/**
+ * SalesOrder type
+ */
+export type SalesOrder = typeof salesOrders.$inferSelect;
+
+export const selectSalesOrderSchema = createSelectSchema(salesOrders);
+export type SelectSalesOrderSchema = z.infer<typeof selectSalesOrderSchema>;
+
+/**
+ * Schema
+ */
+export const createSalesOrderSchema = createInsertSchema(salesOrders).omit({ number: true });
+export const updateSalesOrderSchema = createUpdateSchema(salesOrders);
+
+export type CreateSalesOrderInput = z.input<typeof createSalesOrderSchema>;
+export type CreateSalesOrderSchema = z.infer<typeof createSalesOrderSchema>;
+
+export type UpdateSalesOrderInput = z.input<typeof updateSalesOrderSchema>;
+export type UpdateSalesOrderSchema = z.infer<typeof updateSalesOrderSchema>;
+
+/**
+ * Status
+ */
+export const salesOrderStatusSchema = z.enum(salesOrderStatusEnum.enumValues);
+export type SalesOrderStatus = z.infer<typeof salesOrderStatusSchema>;
+
+export const salesOrderRatioTypeSchema = z.enum(salesOrderRatioTypeEnum.enumValues);
+export type SalesOrderRatioType = z.infer<typeof salesOrderRatioTypeSchema>;

package/dist/templates/spark/src/app/admin/sales-orders/emails/layout.tsx

@@ -0,0 +1,22 @@
+import { Header, Topbar, TopbarTitle } from "@tulip-systems/app/components/client";
+import { TableLayout } from "@tulip-systems/data-tables";
+import type { PropsWithChildren } from "react";
+
+export default async function QuotationsEmailsLayout({ children }: PropsWithChildren) {
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle
+            breadcrumbs={[
+              { label: "Verkoopbonnen", href: "/admin/sales-orders" },
+              { label: "Emails" },
+            ]}
+          />
+        </Topbar>
+      </Header>
+
+      <TableLayout className="p-content">{children}</TableLayout>
+    </>
+  );
+}

package/dist/templates/spark/src/app/admin/sales-orders/emails/page.tsx

@@ -0,0 +1,20 @@
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import { emailTableCommands } from "@/app/admin/emails/_components/tables";
+import { EmailTableToolbar } from "@/app/admin/emails/_components/toolbars";
+import { SalesOrderEmailsPaginationTableProvider } from "../_components/tables";
+import { salesOrderEmailsColumns } from "../_config/columns-data";
+
+export default async function Page() {
+  return (
+    <Allowed permission={{ email: ["view"] }}>
+      <SalesOrderEmailsPaginationTableProvider
+        columns={salesOrderEmailsColumns}
+        commands={emailTableCommands}
+      >
+        <EmailTableToolbar />
+        <DataTable />
+      </SalesOrderEmailsPaginationTableProvider>
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/schedule/(day)/page.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useSuspenseQueries, useSuspenseQuery } from "@tanstack/react-query";
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { format } from "date-fns";
+import { parseAsIsoDate, useQueryState } from "nuqs";
+import { useMemo } from "react";
+import { ScheduleDayView } from "@/app/admin/schedule/_components/schedule-day-view";
+import { orpc } from "@/server/router/client";
+import { scheduleQueriesOptions } from "../_lib/query-options";
+
+export default function SchedulePage() {
+  const [date] = useQueryState("date", parseAsIsoDate.withDefault(new Date()));
+
+  const currentEmployee = useSuspenseQuery(orpc.employees.getCurrent.queryOptions());
+  const employeeId = useMemo(() => currentEmployee.data?.id ?? "", [currentEmployee.data?.id]);
+
+  const scheduledAt = useMemo(() => {
+    const day = format(date, "yyyy-MM-dd");
+    return [day, day] as [string, string];
+  }, [date]);
+
+  const { data } = useSuspenseQueries(scheduleQueriesOptions({ scheduledAt, employeeId }));
+
+  return (
+    <Allowed permission={{ schedule: ["view"] }}>
+      <ScheduleDayView selectedDate={date} items={data} />
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/schedule/_components/month-picker.tsx

@@ -0,0 +1,102 @@
+import { Button, buttonVariants } from "@tulip-systems/ui/button";
+import { cn } from "@tulip-systems/ui/cn";
+import { add, eachMonthOfInterval, endOfYear, format, parse } from "date-fns";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import * as React from "react";
+
+interface MonthPickerProps {
+  currentMonth: Date;
+  onMonthChange: (newMonth: Date) => void;
+}
+
+export default function MonthPicker({ currentMonth, onMonthChange }: MonthPickerProps) {
+  const [currentYear, setCurrentYear] = React.useState(format(currentMonth, "yyyy"));
+  const firstDayCurrentYear = parse(currentYear, "yyyy", new Date());
+
+  const months = eachMonthOfInterval({
+    start: firstDayCurrentYear,
+    end: endOfYear(firstDayCurrentYear),
+  });
+
+  function previousYear() {
+    const firstDayNextYear = add(firstDayCurrentYear, { years: -1 });
+    setCurrentYear(format(firstDayNextYear, "yyyy"));
+  }
+
+  function nextYear() {
+    const firstDayNextYear = add(firstDayCurrentYear, { years: 1 });
+    setCurrentYear(format(firstDayNextYear, "yyyy"));
+  }
+
+  return (
+    <div className="p-3">
+      <div className="flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+        <div className="space-y-4">
+          <div className="relative flex items-center justify-center pt-1">
+            <div
+              className="font-medium text-sm"
+              aria-live="polite"
+              role="presentation"
+              id="month-picker"
+            >
+              {format(firstDayCurrentYear, "yyyy")}
+            </div>
+            <div className="flex items-center space-x-1">
+              <button
+                name="previous-year"
+                aria-label="Go to previous year"
+                className={cn(
+                  buttonVariants({ variant: "outline" }),
+                  "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+                  "absolute left-1",
+                )}
+                type="button"
+                onClick={previousYear}
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </button>
+              <button
+                name="next-year"
+                aria-label="Go to next year"
+                className={cn(
+                  buttonVariants({ variant: "outline" }),
+                  "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+                  "absolute right-1 disabled:bg-muted",
+                )}
+                type="button"
+                onClick={nextYear}
+              >
+                <ChevronRight className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
+          <table className="grid w-full grid-cols-3 gap-2" aria-labelledby="month-picker">
+            {months.map((month) => (
+              <div
+                key={month.toString()}
+                className="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-slate-100 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md dark:[&:has([aria-selected])]:bg-primary"
+                role="presentation"
+              >
+                <Button
+                  name="day"
+                  variant="ghost"
+                  className={cn(
+                    "inline-flex h-9 w-16 items-center justify-center rounded-md p-0 text-sm transition-colors disabled:pointer-events-none disabled:opacity-50",
+                    format(month, "yyyy-MM") === format(currentMonth, "yyyy-MM") &&
+                      "bg-primary text-primary-foreground",
+                  )}
+                  role="gridcell"
+                  tabIndex={-1}
+                  type="button"
+                  onClick={() => onMonthChange(month)}
+                >
+                  <time dateTime={format(month, "yyyy-MM-dd")}>{format(month, "MMM")}</time>
+                </Button>
+              </div>
+            ))}
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist/templates/spark/src/app/admin/schedule/_components/schedule-card.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { Badge } from "@tulip-systems/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@tulip-systems/ui/card";
+import { cn } from "@tulip-systems/ui/cn";
+import { differenceInHours, format } from "date-fns";
+import { GitCompareArrowsIcon, Repeat2Icon } from "lucide-react";
+import type { Route } from "next";
+import Link from "next/link";
+import { Suspense } from "react";
+import { EmployeeAvatars, EmployeeAvatarsLoading } from "@/app/admin/employees/_components/avatars";
+import type { ScheduleItemSchema } from "@/app/admin/schedule/_lib/validators";
+import type { Assignment } from "../../assignments/_lib/validators";
+import type { Client } from "../../clients/_lib/validators";
+import type { Project } from "../../projects/_lib/validators";
+
+export type ScheduleItem = ScheduleItemSchema & {
+  // registrations: Prisma.RegistrationGetPayload<{
+  //   include: { employee: { include: { user: true } } };
+  // }>[];
+  // registrations: Registration[];
+  employeeIds: string[];
+} & (
+    | {
+        type: "run";
+        project: Project & { client: Client };
+      }
+    | {
+        type: "execution";
+        assignment: Assignment & { client: Client };
+      }
+  );
+
+export function ScheduleCard({
+  id,
+  type,
+  href,
+  title,
+  startTime,
+  stopTime,
+  status,
+  employeeIds,
+  ...props
+}: ScheduleItem) {
+  const startHour = startTime.getHours();
+  const startMinutes = startTime.getMinutes();
+  const start = startHour + startMinutes / 60;
+
+  const duration = differenceInHours(stopTime, startTime);
+
+  return (
+    <Link
+      key={id}
+      href={href as Route}
+      className="absolute w-full p-2"
+      style={{ top: `${start * 5 + 5}rem`, height: `${duration * 5 + 5}rem` }}
+    >
+      <Card
+        data-type={type}
+        className={cn(
+          "wrap-break-word relative z-0 h-full w-full overflow-y-clip border bg-card/50",
+          status === "scheduled" &&
+            "data-[type=execution]:bg-destructive/25 data-[type=run]:bg-primary/25",
+          status === "finished" && "bg-muted/35",
+        )}
+      >
+        <CardHeader className="space-y-3">
+          {type === "run" && (
+            <Badge variant="default" className="w-fit">
+              <Repeat2Icon className="mr-1 h-3 w-3" />
+              Run
+            </Badge>
+          )}
+          {type === "execution" && (
+            <Badge variant="destructive" className="w-fit">
+              <GitCompareArrowsIcon className="mr-1 h-3 w-3" />
+              Prestatie
+            </Badge>
+          )}
+
+          <CardDescription className="opacity-50">
+            {format(startTime, "HH:mm")} - {format(stopTime, "HH:mm")}
+          </CardDescription>
+
+          <CardTitle>{title}</CardTitle>
+        </CardHeader>
+
+        <CardContent>
+          <div className="flex flex-col gap-3">
+            <Allowed permission={{ employee: ["view.avatar"] }}>
+              <Suspense fallback={<EmployeeAvatarsLoading />}>
+                <EmployeeAvatars ids={employeeIds} maxAvatars={2} />
+              </Suspense>
+            </Allowed>
+
+            <Allowed permission={{ project: ["view"] }}>
+              {"project" in props && <span>{props.project.title}</span>}
+            </Allowed>
+
+            <Allowed permission={{ client: ["view"] }}>
+              {"assignment" in props && <span>{props.assignment.title}</span>}
+            </Allowed>
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}

package/dist/templates/spark/src/app/admin/schedule/_components/schedule-day-view.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { addDays, format } from "date-fns";
+import type { ScheduleItem } from "./schedule-card";
+import { ScheduleGrid } from "./schedule-grid";
+import { ScheduleTopBar } from "./schedule-top-bar";
+
+export type ScheduleDayViewProps = {
+  selectedDate: Date;
+  items: ScheduleItem[];
+};
+
+export function ScheduleDayView({ selectedDate, items }: ScheduleDayViewProps) {
+  const date: Date = selectedDate || new Date();
+  const formattedDate = format(date, "yyyy-MM-dd");
+
+  const runs = items.filter((item) => formattedDate === format(item.scheduledAt, "yyyy-MM-dd"));
+
+  return (
+    <div className="space-y-5">
+      <ScheduleTopBar
+        selectedDate={selectedDate}
+        onNext={() => addDays(selectedDate, 1)}
+        onPrevious={() => addDays(selectedDate, -1)}
+        calendar={({ handleDateChange }) => ({
+          mode: "single",
+          selected: selectedDate,
+          onSelect: (_, date) => handleDateChange(date),
+          initialFocus: true,
+        })}
+      />
+
+      <ScheduleGrid dates={[date]} items={{ [formattedDate]: runs }} />
+    </div>
+  );
+}

package/dist/templates/spark/src/app/admin/schedule/_components/schedule-grid.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { cn } from "@tulip-systems/ui/cn";
+import { format, isSameDay } from "date-fns";
+import { nlBE } from "date-fns/locale";
+import { ScheduleCard, type ScheduleItem } from "./schedule-card";
+
+const WEEK_VIEW_HOURS_HEADER = Array.from({ length: 24 }, (_, i) => i);
+
+export type ScheduleGridProps = {
+  dates: Date[];
+  items: Record<string, ScheduleItem[]>;
+};
+
+export function ScheduleGrid({ dates, items }: ScheduleGridProps) {
+  return (
+    <div className="flex w-full divide-x overflow-x-auto rounded-3xl border">
+      <div className="grid w-20 min-w-20 grid-rows-[repeat(25,5rem)] divide-y bg-muted/50">
+        <div></div>
+
+        {WEEK_VIEW_HOURS_HEADER.map((hour) => (
+          <div key={hour} className="flex items-center justify-center">
+            <span className="text-xs">{hour.toString().padStart(2, "0")}:00</span>
+          </div>
+        ))}
+      </div>
+
+      {dates.map((date, index) => {
+        const formattedDate = format(date, "yyyy-MM-dd");
+
+        return (
+          <div
+            key={index}
+            className="relative grid min-w-40 grow grid-cols-1 grid-rows-[repeat(25,5rem)] divide-y divide-border/35 overflow-y-hidden lg:min-w-0"
+          >
+            <div className="sticky top-0 flex flex-col items-center justify-center gap-1 border-border bg-muted/50">
+              <span className="text-xs opacity-50">{format(date, "EEEEEE", { locale: nlBE })}</span>
+
+              <span
+                className={cn("font-bold text-lg", isSameDay(date, new Date()) && "text-primary")}
+              >
+                {date.getDate()}
+              </span>
+            </div>
+
+            {Array.from({ length: 24 }, (_, i) => (
+              <div key={i} className="bg-background" />
+            ))}
+
+            {items[formattedDate]?.map((run, index) => <ScheduleCard key={index} {...run} />) || []}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/dist/templates/spark/src/app/admin/schedule/_components/schedule-month-view.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import { Button, buttonVariants } from "@tulip-systems/ui/button";
+import { Card, CardHeader, CardTitle } from "@tulip-systems/ui/card";
+import { cn } from "@tulip-systems/ui/cn";
+import { Popover, PopoverContent, PopoverTrigger } from "@tulip-systems/ui/popover";
+import { addDays, addMonths, format, isSameDay, startOfWeek } from "date-fns";
+import { nlBE } from "date-fns/locale";
+import { CalendarIcon, ChevronLeft, ChevronRight } from "lucide-react";
+import type { Route } from "next";
+import Link from "next/link";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import MonthPicker from "./month-picker";
+import type { ScheduleItem } from "./schedule-card";
+
+export type ScheduleMonthViewProps = {
+  selectedDate: Date;
+  items: ScheduleItem[];
+};
+
+export function ScheduleMonthView({ selectedDate, items }: ScheduleMonthViewProps) {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const { replace } = useRouter();
+
+  const firstDay = startOfWeek(selectedDate, { locale: nlBE });
+
+  const dates: Date[] = Array.from({ length: 35 }, (_, i) => addDays(firstDay, i));
+  const formattedDates = dates.map((date) => format(date, "yyyy-MM-dd"));
+
+  const groupedItems = items
+    .filter((item) => formattedDates.includes(format(item.scheduledAt, "yyyy-MM-dd")))
+    .reduce(
+      (acc, item) => {
+        const date = format(item.scheduledAt, "yyyy-MM-dd");
+        if (!acc[date]) acc[date] = [];
+        acc[date].push(item);
+        return acc;
+      },
+      {} as { [date: string]: ScheduleItem[] },
+    );
+
+  function handleDateChange(date: Date) {
+    const params = new URLSearchParams(searchParams);
+    if (date) params.set("date", format(date, "yyyy-MM"));
+    else params.delete("date");
+
+    replace(`${pathname}?${params.toString()}` as Route);
+  }
+
+  return (
+    <div className="space-y-5">
+      <div className="flex flex-col justify-between gap-3 md:flex-row">
+        {/* <h2 className="text-2xl font-bold capitalize">
+          {format(selectedDate, "LLLL", { locale: nlBE })} {selectedDate.getFullYear()}
+        </h2> */}
+
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              className="w-full justify-start text-left font-normal capitalize md:w-[20rem]"
+            >
+              <CalendarIcon className="mr-2 h-4 w-4" />
+              {format(selectedDate, "LLLL", { locale: nlBE })} {selectedDate.getFullYear()}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto p-0">
+            <MonthPicker
+              currentMonth={selectedDate}
+              onMonthChange={(date) => handleDateChange(date)}
+            />
+          </PopoverContent>
+        </Popover>
+
+        <div className="flex w-full justify-between gap-10 md:w-fit">
+          <Button variant="secondary" onClick={() => handleDateChange(new Date())}>
+            Vandaag
+          </Button>
+
+          <div className="flex gap-4">
+            <Button
+              size="icon"
+              type="button"
+              variant="ghost"
+              onClick={() => {
+                const previous = addMonths(selectedDate, -1);
+                handleDateChange(previous);
+              }}
+            >
+              <ChevronLeft />
+            </Button>
+
+            <Button
+              size="icon"
+              type="button"
+              variant="ghost"
+              onClick={() => {
+                const next = addMonths(selectedDate, 1);
+                handleDateChange(next);
+              }}
+            >
+              <ChevronRight />
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex w-full overflow-x-auto rounded-3xl border">
+        <div className="relative grid grow grid-cols-[repeat(7,minmax(10rem,1fr))] grid-rows-[5rem_repeat(5,10rem)] divide-x divide-y divide-border/50">
+          {["Ma", "Di", "Wo", "Do", "Vr", "Za", "Zo"].map((day, index) => (
+            <div key={index} className="flex flex-col items-center justify-center bg-muted/30">
+              <span className="font-bold text-md capitalize">{day}</span>
+            </div>
+          ))}
+
+          {dates.map((date, index) => (
+            <div key={index} className="flex flex-col items-center justify-center gap-3 px-2 py-1">
+              <Link
+                href={`/admin/schedule?date=${format(date, "yyyy-MM-dd")}` as Route}
+                className={cn(
+                  "rounded-full text-xs opacity-50",
+                  buttonVariants({ variant: "ghost", size: "sm" }),
+                  isSameDay(date, new Date()) && "text-primary",
+                )}
+              >
+                {date.getDate()}
+              </Link>
+
+              <div className="flex h-3/4 w-full flex-col gap-2">
+                {groupedItems[formattedDates[index] ?? ""]
+                  ?.slice(0, 3)
+                  .map(({ id, type, title, status, href }, index) => (
+                    <Link key={index} href={href} className="w-full">
+                      <Card
+                        key={id}
+                        data-type={type}
+                        className={cn(
+                          "wrap-break-word w-full overflow-y-clip border py-2.5",
+                          status === "scheduled" &&
+                            "data-[type=execution]:bg-destructive/80 data-[type=run]:bg-primary/80 data-[type=execution]:text-destructive-foreground data-[type=run]:text-primary-foreground",
+                          status === "finished" && "bg-muted/50 text-muted-foreground",
+                        )}
+                      >
+                        <CardHeader className="w-full space-y-3 px-2">
+                          <CardTitle className="truncate text-xs">{title}</CardTitle>
+                        </CardHeader>
+                      </Card>
+                    </Link>
+                  )) || []}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist/templates/spark/src/app/admin/schedule/_components/schedule-top-bar.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { Button } from "@tulip-systems/ui/button";
+import { Calendar } from "@tulip-systems/ui/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "@tulip-systems/ui/popover";
+import { format } from "date-fns";
+import { nlBE } from "date-fns/locale";
+import { CalendarIcon, ChevronLeft, ChevronRight } from "lucide-react";
+import type { Route } from "next";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import type { ComponentProps } from "react";
+
+export type ScheduleTopBar = {
+  selectedDate: Date;
+  onNext: () => Date;
+  onPrevious: () => Date;
+  calendar: (props: { handleDateChange: (date: Date) => void }) => ComponentProps<typeof Calendar>;
+};
+
+export function ScheduleTopBar({ selectedDate, calendar, onNext, onPrevious }: ScheduleTopBar) {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const { replace } = useRouter();
+
+  function handleDateChange(date: Date) {
+    const params = new URLSearchParams(searchParams);
+    if (date) params.set("date", format(date, "yyyy-MM-dd"));
+    else params.delete("date");
+
+    replace(`${pathname}?${params.toString()}` as Route);
+  }
+
+  return (
+    <div className="flex flex-col justify-between gap-3 md:flex-row">
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            className="w-full justify-start text-left font-normal capitalize md:w-[20rem]"
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {format(selectedDate, "LLLL", { locale: nlBE })} {selectedDate.getFullYear()}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0">
+          <Calendar {...calendar({ handleDateChange })} />
+        </PopoverContent>
+      </Popover>
+
+      <div className="flex w-full justify-between gap-10 md:w-fit">
+        <Button variant="secondary" onClick={() => handleDateChange(new Date())}>
+          Vandaag
+        </Button>
+
+        <div className="flex gap-4">
+          <Button
+            size="icon"
+            type="button"
+            variant="ghost"
+            onClick={() => {
+              const previous = onPrevious();
+              handleDateChange(previous);
+            }}
+          >
+            <ChevronLeft />
+          </Button>
+
+          <Button
+            size="icon"
+            type="button"
+            variant="ghost"
+            onClick={() => {
+              const next = onNext();
+              handleDateChange(next);
+            }}
+          >
+            <ChevronRight />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}