@tulip-systems/create-app 0.11.1

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

@@ -0,0 +1,47 @@
+"use client";
+
+import { addDays, addWeeks, format, startOfWeek } from "date-fns";
+import { nlBE } from "date-fns/locale";
+import type { ScheduleItem } from "./schedule-card";
+import { ScheduleGrid } from "./schedule-grid";
+import { ScheduleTopBar } from "./schedule-top-bar";
+
+export type ScheduleWeekViewProps = {
+  selectedDate: Date;
+  items: ScheduleItem[];
+};
+
+export function ScheduleWeekView({ selectedDate, items }: ScheduleWeekViewProps) {
+  const dates: Date[] = Array.from({ length: 7 }, (_, i) => addDays(selectedDate, 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[] },
+    );
+
+  return (
+    <div className="space-y-5">
+      <ScheduleTopBar
+        selectedDate={selectedDate}
+        onNext={() => addWeeks(selectedDate, 1)}
+        onPrevious={() => addWeeks(selectedDate, -1)}
+        calendar={({ handleDateChange }) => ({
+          mode: "range",
+          selected: { from: selectedDate, to: addDays(selectedDate, 6) },
+          onSelect: (_, date) => handleDateChange(startOfWeek(date, { locale: nlBE })),
+          initialFocus: true,
+        })}
+      />
+
+      <ScheduleGrid dates={dates} items={groupedItems} />
+    </div>
+  );
+}

package/dist/templates/spark/src/app/admin/schedule/_lib/query-options.ts

@@ -0,0 +1,81 @@
+import type { UseSuspenseQueryOptions, UseSuspenseQueryResult } from "@tanstack/react-query";
+import type z from "zod";
+import { orpc } from "@/server/router/client";
+import type { RouterOutputs } from "@/server/router/router";
+import type { ScheduleItem } from "../_components/schedule-card";
+import { scheduleItemSchema } from "./validators";
+
+export function scheduleQueriesOptions(params: {
+  scheduledAt: [string, string];
+  employeeId: string;
+}) {
+  const { scheduledAt, employeeId } = params;
+  const runScheduledAtFilters: [Date, Date] = [new Date(scheduledAt[0]), new Date(scheduledAt[1])];
+
+  return {
+    queries: [
+      orpc.runs.getAll.queryOptions({
+        input: { filters: { scheduledAt: runScheduledAtFilters, employeeId: [employeeId] } },
+        select: (data) =>
+          data
+            .map((run) => {
+              const registrations = run.runsRegistrations.map(({ registration }) => registration);
+              const registration = registrations.find(
+                (registration) => registration.employeeId === employeeId,
+              );
+              if (!registration) return null;
+
+              const result = scheduleItemSchema.safeParse({
+                ...run,
+                type: "run" as const,
+                href: `/admin/runs/${run.id}`,
+                scheduledAt: new Date(run.scheduledAt),
+                startTime: registration.startTime,
+                stopTime: registration.stopTime,
+                employeeIds: registrations.map(({ employeeId }) => employeeId),
+              } satisfies z.input<typeof scheduleItemSchema>);
+
+              return result.success ? result.data : null;
+            })
+            .filter((item): item is ScheduleItem => Boolean(item)),
+      }),
+      orpc.executions.getAll.queryOptions({
+        input: { filters: { scheduledAt, employeeId: [employeeId] } },
+        select: (data) =>
+          data
+            .map((execution) => {
+              const registrations = execution.executionsRegistrations.map(
+                ({ registration }) => registration,
+              );
+              const registration = registrations.find(
+                (registration) => registration.employeeId === employeeId,
+              );
+              if (!registration) return null;
+
+              const result = scheduleItemSchema.safeParse({
+                ...execution,
+                type: "execution" as const,
+                href: `/admin/executions/${execution.id}`,
+                scheduledAt: new Date(execution.scheduledAt),
+                startTime: registration.startTime,
+                stopTime: registration.stopTime,
+                employeeIds: registrations.map(({ employeeId }) => employeeId),
+              } satisfies z.input<typeof scheduleItemSchema>);
+
+              return result.success ? result.data : null;
+            })
+            .filter((item): item is ScheduleItem => Boolean(item)),
+      }),
+    ] satisfies [
+      UseSuspenseQueryOptions<RouterOutputs["runs"]["getAll"], Error, ScheduleItem[]>,
+      UseSuspenseQueryOptions<RouterOutputs["executions"]["getAll"], Error, ScheduleItem[]>,
+    ],
+    combine: (results: readonly UseSuspenseQueryResult<ScheduleItem[], Error>[]) => ({
+      data: results.flatMap(({ data }) => data ?? []),
+      error: results.flatMap(({ error }) => error),
+      isError: results.some(({ isError }) => isError),
+      isPending: results.some(({ isPending }) => isPending),
+      isFetching: results.some(({ isFetching }) => isFetching),
+    }),
+  };
+}

package/dist/templates/spark/src/app/admin/schedule/_lib/validators.ts

@@ -0,0 +1,30 @@
+import { z } from "zod";
+import { executionStatusSchema } from "../../executions/_lib/validators";
+import { runStatusSchema } from "../../runs/_lib/validators";
+
+export const scheduleItemSchema = z.union([
+  z.object({
+    type: z.literal("run"),
+    status: runStatusSchema,
+    id: z.string(),
+    href: z.string(),
+    title: z.string(),
+    scheduledAt: z.date(),
+    startTime: z.date(),
+    stopTime: z.date(),
+    employeeIds: z.array(z.string()),
+  }),
+  z.object({
+    type: z.literal("execution"),
+    status: executionStatusSchema,
+    id: z.string(),
+    href: z.string(),
+    title: z.string(),
+    scheduledAt: z.date(),
+    startTime: z.date(),
+    stopTime: z.date(),
+    employeeIds: z.array(z.string()),
+  }),
+]);
+
+export type ScheduleItemSchema = z.infer<typeof scheduleItemSchema>;

package/dist/templates/spark/src/app/admin/schedule/layout.tsx

@@ -0,0 +1,43 @@
+import {
+  BottomBar,
+  BottomBarLinks,
+  Header,
+  Topbar,
+  TopbarTitle,
+} from "@tulip-systems/app/components/client";
+
+export default function ScheduleLayout({ children }: LayoutProps<"/admin/schedule">) {
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle breadcrumbs={[{ label: "Planning" }]} />
+        </Topbar>
+
+        <BottomBar>
+          <BottomBarLinks
+            paths={[
+              {
+                name: "Dag",
+                href: "/admin/schedule",
+                segment: "(day)",
+              },
+              {
+                name: "Week",
+                href: "/admin/schedule/week",
+                segment: "week",
+              },
+              {
+                name: "Maand",
+                href: "/admin/schedule/month",
+                segment: "month",
+              },
+            ]}
+          />
+        </BottomBar>
+      </Header>
+
+      <div className="max-w-[100vw] p-content lg:max-w-none">{children}</div>
+    </>
+  );
+}

package/dist/templates/spark/src/app/admin/schedule/month/page.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useSuspenseQueries, useSuspenseQuery } from "@tanstack/react-query";
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { endOfMonth, endOfWeek, format, startOfMonth, startOfWeek } from "date-fns";
+import { nlBE } from "date-fns/locale";
+import { parseAsIsoDate, useQueryState } from "nuqs";
+import { useMemo } from "react";
+import { ScheduleMonthView } from "@/app/admin/schedule/_components/schedule-month-view";
+import { orpc } from "@/server/router/client";
+import { scheduleQueriesOptions } from "../_lib/query-options";
+
+export default function Page() {
+  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 start = format(startOfWeek(startOfMonth(date), { locale: nlBE }), "yyyy-MM-dd");
+    const end = format(endOfWeek(endOfMonth(date), { locale: nlBE }), "yyyy-MM-dd");
+    return [start, end] as [string, string];
+  }, [date]);
+
+  const { data } = useSuspenseQueries(scheduleQueriesOptions({ scheduledAt, employeeId }));
+
+  return (
+    <Allowed permission={{ schedule: ["view"] }}>
+      <ScheduleMonthView selectedDate={date} items={data} />
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/schedule/week/page.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useSuspenseQueries, useSuspenseQuery } from "@tanstack/react-query";
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { endOfWeek, format, startOfWeek } from "date-fns";
+import { nlBE } from "date-fns/locale";
+import { parseAsIsoDate, useQueryState } from "nuqs";
+import { useMemo } from "react";
+import { ScheduleWeekView } from "@/app/admin/schedule/_components/schedule-week-view";
+import { orpc } from "@/server/router/client";
+import { scheduleQueriesOptions } from "../_lib/query-options";
+
+export default function Page() {
+  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 start = format(startOfWeek(date, { locale: nlBE }), "yyyy-MM-dd");
+    const end = format(endOfWeek(date, { locale: nlBE }), "yyyy-MM-dd");
+    return [start, end] as [string, string];
+  }, [date]);
+
+  const { data } = useSuspenseQueries(scheduleQueriesOptions({ scheduledAt, employeeId }));
+
+  return (
+    <Allowed permission={{ schedule: ["view"] }}>
+      <ScheduleWeekView selectedDate={startOfWeek(date, { locale: nlBE })} items={data} />
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/settings/(profile)/page.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import {
+  InlineField,
+  InlineFieldError,
+  InlineFieldLabel,
+  InlineStringInput,
+} from "@tulip-systems/inline/client";
+import { Avatar, AvatarFallback, AvatarImage } from "@tulip-systems/ui/avatar";
+import { DataStackLayout, DataStackRow } from "@tulip-systems/ui/data-stack";
+import { notFound } from "next/navigation";
+import { z } from "zod";
+import { orpc } from "@/server/router/client";
+
+export default function Page() {
+  const { data } = useSuspenseQuery(orpc.employees.getCurrent.queryOptions());
+  if (!data) notFound();
+
+  const { user } = data;
+
+  return (
+    <div className="flex flex-col gap-x-20 gap-y-20 p-10 lg:flex-row">
+      <Avatar className="size-40">
+        <AvatarImage src={user.image || "/images/placeholder.jpeg"} alt="Employee" />
+        <AvatarFallback className="text-3xl">{user.name[0]}</AvatarFallback>
+      </Avatar>
+
+      <DataStackLayout className="basis-full">
+        <DataStackRow>
+          <InlineField>
+            <InlineFieldLabel>Voornaam</InlineFieldLabel>
+            <InlineStringInput
+              initialValue={user.firstName}
+              variables={(value) => ({
+                id: data.id,
+                data: { user: { firstName: value ?? undefined } },
+              })}
+              mutation={orpc.employees.update.mutationOptions()}
+              strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().nullable() } }}
+            />
+            <InlineFieldError />
+          </InlineField>
+
+          <InlineField>
+            <InlineFieldLabel>Achternaam</InlineFieldLabel>
+            <InlineStringInput
+              initialValue={user.lastName}
+              variables={(value) => ({
+                id: data.id,
+                data: { user: { lastName: value ?? undefined } },
+              })}
+              mutation={orpc.employees.update.mutationOptions()}
+              strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().nullable() } }}
+            />
+            <InlineFieldError />
+          </InlineField>
+        </DataStackRow>
+
+        <DataStackRow>
+          <InlineField>
+            <InlineFieldLabel>Email</InlineFieldLabel>
+            <InlineStringInput
+              initialValue={user.email}
+              variables={(value) => ({
+                id: data.id,
+                data: { user: { email: value ?? undefined } },
+              })}
+              mutation={orpc.employees.update.mutationOptions()}
+              strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().nullable() } }}
+            />
+            <InlineFieldError />
+          </InlineField>
+        </DataStackRow>
+      </DataStackLayout>
+    </div>
+  );
+}

package/dist/templates/spark/src/app/admin/settings/installation/page.tsx

@@ -0,0 +1,324 @@
+import { Alert, AlertDescription } from "@tulip-systems/ui/alert";
+import { CardDescription, CardTitle } from "@tulip-systems/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@tulip-systems/ui/tabs";
+import {
+  AppleIcon,
+  DownloadIcon,
+  InfoIcon,
+  MonitorIcon,
+  MoreVerticalIcon,
+  PlusSquareIcon,
+  ShareIcon,
+  SmartphoneIcon,
+} from "lucide-react";
+
+/**
+ * Platforms list
+ */
+const platforms = [
+  {
+    name: "ios",
+    icon: AppleIcon,
+    title: "iPhone",
+    description: "Installeer op je iPhone.",
+    content: <IOSInstructions />,
+  },
+  {
+    name: "android",
+    icon: SmartphoneIcon,
+    title: "Android",
+    description: "Installeer op je Android.",
+    content: <AndroidInstructions />,
+  },
+  {
+    name: "desktop",
+    icon: MonitorIcon,
+    title: "Desktop",
+    description: "Installeer op je computer.",
+    content: <DesktopInstructions />,
+  },
+];
+
+/**
+ * Page component
+ */
+export default function Page() {
+  return (
+    <Tabs defaultValue={platforms[0]?.name} className="w-full p-content">
+      <TabsList className="flex h-auto w-full flex-wrap">
+        {platforms.map(({ name, title, icon: Icon }) => (
+          <TabsTrigger
+            key={name}
+            value={name}
+            className="flex flex-1 items-center gap-2 py-3 data-[state=active]:bg-primary"
+          >
+            <Icon className="h-5 w-5" />
+            <span>{title}</span>
+          </TabsTrigger>
+        ))}
+      </TabsList>
+
+      {platforms.map(({ name, content }) => (
+        <TabsContent key={name} value={name} className="pt-8 pb-20">
+          {content}
+        </TabsContent>
+      ))}
+    </Tabs>
+  );
+}
+
+/**
+ * Helper components
+ */
+function InstallStep({ number, children }: { number: number; children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-4">
+      <div className="flex size-7 flex-shrink-0 items-center justify-center rounded-full bg-primary font-semibold text-primary-foreground text-sm">
+        {number}
+      </div>
+
+      <div className="flex-1 pt-2 text-foreground">{children}</div>
+    </div>
+  );
+}
+
+function IconBadge({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="mx-1 inline-flex h-7 w-7 items-center justify-center rounded bg-muted align-middle">
+      {children}
+    </span>
+  );
+}
+
+/**
+ * Instructions
+ */
+function IOSInstructions() {
+  return (
+    <div className="flex flex-col gap-10">
+      <div className="flex items-center gap-3">
+        <div className="w-fit rounded-lg bg-muted p-3">
+          <AppleIcon className="h-7 w-7 text-foreground" />
+        </div>
+
+        <div>
+          <CardTitle className="text-xl">Installeren op iPhone</CardTitle>
+          <CardDescription className="text-base">
+            Volg deze stappen in <strong>Safari of Chrome</strong>.
+          </CardDescription>
+        </div>
+      </div>
+
+      <Alert>
+        <InfoIcon />
+        <AlertDescription className="block">
+          Zie je <strong>&quot;Zet op beginscherm&quot;</strong> niet in de lijst? Scroll helemaal
+          naar beneden in het deelmenu en tik op <strong>&quot;Wijzig acties&quot;</strong> om de
+          optie toe te voegen.
+        </AlertDescription>
+      </Alert>
+
+      <div className="space-y-6">
+        <InstallStep number={1}>
+          <p className="text-base">
+            Open deze website in <strong>Safari</strong> (of een andere browser op iOS/iPadOS 16.4+
+            via het Deel-menu).
+          </p>
+        </InstallStep>
+
+        <InstallStep number={2}>
+          <p className="text-base">
+            Tik op de <strong>Deel</strong>-knop
+            <IconBadge>
+              <ShareIcon className="h-4 w-4" />
+            </IconBadge>
+            onderaan je scherm (iPhone) of bovenaan het scherm (iPad). Het ziet eruit als een
+            vierkant met een pijl naar boven.
+          </p>
+        </InstallStep>
+
+        <InstallStep number={3}>
+          <p className="text-base">
+            Scroll naar beneden door de deelopties totdat je{" "}
+            <strong>&quot;Zet op beginscherm&quot;</strong>
+            <IconBadge>
+              <PlusSquareIcon className="h-4 w-4" />
+            </IconBadge>
+            vindt en tik erop.
+          </p>
+        </InstallStep>
+
+        <InstallStep number={4}>
+          <p className="text-base">
+            Je ziet een voorbeeld van de app. Je kunt de naam aanpassen als je wilt. Tik vervolgens
+            op <strong>&quot;Voeg toe&quot;</strong> in de rechterbovenhoek.
+          </p>
+        </InstallStep>
+
+        <InstallStep number={5}>
+          <p className="text-base">
+            Het app-icoon verschijnt op je beginscherm. Tik er op elk moment op om de app in
+            volledig scherm te openen, net als een normale app!
+          </p>
+        </InstallStep>
+      </div>
+    </div>
+  );
+}
+
+function AndroidInstructions() {
+  return (
+    <div className="flex flex-col gap-10">
+      <div className="flex items-center gap-3">
+        <div className="w-fit rounded-lg bg-muted p-3">
+          <SmartphoneIcon className="h-7 w-7 text-foreground" />
+        </div>
+
+        <div>
+          <CardTitle className="text-xl">Installeren op Android</CardTitle>
+          <CardDescription className="text-base">Volg deze stappen met Chrome</CardDescription>
+        </div>
+      </div>
+
+      <Alert>
+        <InfoIcon />
+        <AlertDescription className="block">
+          Soms toont Chrome automatisch een &quot;App installeren&quot;-banner. Zie je die? Tik dan
+          op <strong>&quot;Installeren&quot;</strong>. Zie je geen banner? Volg de stappen hieronder
+          via het menu.
+        </AlertDescription>
+      </Alert>
+
+      <div className="space-y-6">
+        <div className="space-y-5">
+          <InstallStep number={1}>
+            <p className="text-base">
+              Open deze website in <strong>Chrome</strong>. De meeste Android-telefoons hebben
+              Chrome voorgeïnstalleerd.
+            </p>
+          </InstallStep>
+
+          <InstallStep number={2}>
+            <p className="text-base">
+              Tik op het <strong>menu met drie puntjes</strong>
+              <IconBadge>
+                <MoreVerticalIcon className="h-4 w-4" />
+              </IconBadge>
+              in de rechterbovenhoek van Chrome.
+            </p>
+          </InstallStep>
+
+          <InstallStep number={3}>
+            <p className="text-base">
+              Zoek naar <strong>&quot;App installeren&quot;</strong> of{" "}
+              <strong>&quot;Toevoegen aan startscherm&quot;</strong> in het menu en tik erop.
+            </p>
+          </InstallStep>
+
+          <InstallStep number={4}>
+            <p className="text-base">
+              Er verschijnt een bevestigingsvenster. Tik op <strong>&quot;Installeren&quot;</strong>{" "}
+              of <strong>&quot;Toevoegen&quot;</strong> om te bevestigen.
+            </p>
+          </InstallStep>
+
+          <InstallStep number={5}>
+            <p className="text-base">
+              De app wordt geïnstalleerd en je vindt hem in je app-lade en op je startscherm. Het
+              werkt net als elke andere app op je telefoon!
+            </p>
+          </InstallStep>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function DesktopInstructions() {
+  return (
+    <div className="flex flex-col gap-10">
+      <div className="flex items-center gap-3">
+        <div className="w-fit rounded-lg bg-muted p-3">
+          <MonitorIcon className="h-7 w-7 text-foreground" />
+        </div>
+        <div>
+          <CardTitle className="text-xl">Installeren op Desktop</CardTitle>
+          <CardDescription className="text-base">Werkt op Windows, Mac en Linux</CardDescription>
+        </div>
+      </div>
+
+      <Alert>
+        <InfoIcon />
+        <AlertDescription className="block">
+          <div className="space-y-2">
+            <div>
+              <strong>Meest ondersteund:</strong> Chrome, Microsoft Edge en Arc hebben een echte
+              &quot;Installeren&quot;-flow voor web-apps.
+            </div>
+            <div>
+              <strong>Safari op Mac (macOS 14+):</strong> je kan vaak een web-app toevoegen via{" "}
+              <strong>Archief → Voeg toe aan Dock</strong>.
+            </div>
+            <div>
+              <strong>Firefox:</strong> ondersteuning is beperkt/afhankelijk van versie. Gebruik bij
+              twijfel Chrome/Edge/Arc voor de meest consistente installatie.
+            </div>
+          </div>
+        </AlertDescription>
+      </Alert>
+
+      <div className="space-y-6">
+        <div className="space-y-5">
+          <InstallStep number={1}>
+            <p className="text-base">
+              Open deze website in <strong>Chrome</strong>, <strong>Edge</strong> of{" "}
+              <strong>Arc</strong> browser.
+            </p>
+          </InstallStep>
+
+          <InstallStep number={2}>
+            <p className="text-base">
+              Zoek naar het <strong>installatie-icoon</strong>
+              <IconBadge>
+                <DownloadIcon className="h-4 w-4" />
+              </IconBadge>
+              aan de rechterkant van je adresbalk. Het ziet er meestal uit als een monitor met een
+              pijl naar beneden, of een plusteken in een vierkant.
+            </p>
+          </InstallStep>
+
+          <InstallStep number={3}>
+            <p className="text-base">
+              <strong>Kun je het icoon niet vinden?</strong> Klik op het menu met drie puntjes in de
+              rechterbovenhoek van je browser en zoek naar{" "}
+              <strong>&quot;[App Naam] installeren&quot;</strong>,{" "}
+              <strong>&quot;App installeren&quot;</strong> of{" "}
+              <strong>&quot;Snelkoppeling maken&quot;</strong>.
+            </p>
+          </InstallStep>
+
+          <InstallStep number={4}>
+            <p className="text-base">
+              Klik op <strong>&quot;Installeren&quot;</strong> in het popup-venster om de
+              installatie te bevestigen.
+            </p>
+          </InstallStep>
+
+          <InstallStep number={5}>
+            <p className="text-base">
+              De app opent in een eigen venster en wordt toegevoegd aan je applicaties. Op Windows
+              vind je hem in het Startmenu. Op Mac staat hij in je map Programma&apos;s.
+            </p>
+          </InstallStep>
+
+          <InstallStep number={6}>
+            <p className="text-base">
+              <strong>Gebruik je Safari op Mac?</strong> Ga naar{" "}
+              <strong>Archief → Voeg toe aan Dock</strong> om de web-app toe te voegen (macOS 14+).
+            </p>
+          </InstallStep>
+        </div>
+      </div>
+    </div>
+  );
+}