@tulip-systems/create-app 0.11.1

package/dist/templates/spark/src/app/admin/employees/[id]/(default)/(details)/page.tsx

@@ -0,0 +1,260 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { ResponsiveCommandMenu } from "@tulip-systems/commands/client";
+import {
+  InlineDateInputField,
+  InlineDatePickerField,
+  InlineDateProvider,
+  InlineField,
+  InlineFieldError,
+  InlineFieldLabel,
+  InlineSelect,
+  InlineSelectContent,
+  InlineSelectItem,
+  InlineSelectTrigger,
+  InlineSelectValue,
+  InlineStringInput,
+} from "@tulip-systems/inline/client";
+import { DataStackLayout, DataStackRow } from "@tulip-systems/ui/data-stack";
+import { format, isValid, parse } from "date-fns";
+import { notFound } from "next/navigation";
+import { use } from "react";
+import { z } from "zod";
+import { AddressGrid } from "@/app/admin/addresses/_components/grid";
+import { orpc } from "@/server/router/client";
+import { employeeCreateAddressCommand } from "../../../_config/commands";
+import { employeeGenderConfig } from "../../../_config/genders";
+import type { EmployeeGender } from "../../../_lib/validators";
+
+const toInlineDateValue = (value: Date | string | null | undefined): string | null => {
+  if (!value) return null;
+
+  const date = value instanceof Date ? value : new Date(value);
+  if (!isValid(date)) return null;
+
+  return format(date, "yyyy-MM-dd");
+};
+
+const fromInlineDateValue = (value: string | null): Date | null => {
+  if (!value) return null;
+
+  const parsed = parse(value, "yyyy-MM-dd", new Date());
+  if (!isValid(parsed)) return null;
+
+  return format(parsed, "yyyy-MM-dd") === value ? parsed : null;
+};
+
+export default function EmployeeDetailPage(props: PageProps<"/admin/employees/[id]">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+
+  const { data } = useSuspenseQuery(orpc.employees.getById.queryOptions({ input: { id } }));
+  if (!data) notFound();
+
+  const addresses = data.employeesAddresses.flatMap(({ address }) => address);
+
+  return (
+    <DataStackLayout className="basis-full">
+      <DataStackRow>
+        <InlineField>
+          <InlineFieldLabel>INSZ nummer</InlineFieldLabel>
+          <InlineStringInput
+            initialValue={data.insz ?? ""}
+            variables={(value) => ({ id, data: { insz: value } })}
+            mutation={orpc.employees.update.mutationOptions()}
+            strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().nullable() } }}
+          />
+          <InlineFieldError />
+        </InlineField>
+
+        <InlineField>
+          <InlineFieldLabel>Geslacht</InlineFieldLabel>
+          <InlineSelect
+            initialValue={data.gender ?? ""}
+            variables={(value) => ({ id, data: { gender: value as EmployeeGender } })}
+            mutation={orpc.employees.update.mutationOptions()}
+            strategy={{ mutate: { on: "commit" }, validate: { commit: z.string().nullable() } }}
+          >
+            <InlineSelectTrigger className="w-full">
+              <InlineSelectValue placeholder="Selecteer een geslacht" />
+            </InlineSelectTrigger>
+
+            <InlineSelectContent>
+              {employeeGenderConfig.map(({ value, label }) => (
+                <InlineSelectItem key={value} value={value}>
+                  {label}
+                </InlineSelectItem>
+              ))}
+            </InlineSelectContent>
+          </InlineSelect>
+          <InlineFieldError />
+        </InlineField>
+
+        <InlineField>
+          <InlineFieldLabel>Taal</InlineFieldLabel>
+          <InlineSelect
+            initialValue={data.language ?? ""}
+            variables={(value) => ({ id, data: { language: value } })}
+            mutation={orpc.employees.update.mutationOptions()}
+            strategy={{ mutate: { on: "commit" }, validate: { commit: z.string().nullable() } }}
+          >
+            <InlineSelectTrigger className="w-full">
+              <InlineSelectValue placeholder="Selecteer een taal" />
+            </InlineSelectTrigger>
+
+            <InlineSelectContent>
+              <InlineSelectItem value="nl">Nederlands</InlineSelectItem>
+              <InlineSelectItem value="en">English</InlineSelectItem>
+              <InlineSelectItem value="fr">Français</InlineSelectItem>
+              <InlineSelectItem value="de">Deutsch</InlineSelectItem>
+            </InlineSelectContent>
+          </InlineSelect>
+          <InlineFieldError />
+        </InlineField>
+      </DataStackRow>
+
+      <DataStackRow>
+        <InlineField className="basis-1/2">
+          <InlineFieldLabel>Geboorteplaats</InlineFieldLabel>
+          <InlineStringInput
+            initialValue={data.birthPlace ?? ""}
+            variables={(value) => ({ id, data: { birthPlace: value } })}
+            mutation={orpc.employees.update.mutationOptions()}
+            strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().nullable() } }}
+          />
+          <InlineFieldError />
+        </InlineField>
+
+        <InlineField className="basis-1/2">
+          <InlineFieldLabel>Geboortedatum</InlineFieldLabel>
+          <InlineDateProvider
+            initialValue={toInlineDateValue(data.birthDate)}
+            variables={(value) => ({ id, data: { birthDate: fromInlineDateValue(value) } })}
+            mutation={orpc.employees.update.mutationOptions()}
+          >
+            <div className="relative h-full">
+              <InlineDateInputField
+                strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().nullable() } }}
+              />
+
+              <InlineDatePickerField
+                strategy={{
+                  mutate: { on: "commit" },
+                  validate: { commit: z.string().nullable() },
+                }}
+              />
+            </div>
+          </InlineDateProvider>
+          <InlineFieldError />
+        </InlineField>
+      </DataStackRow>
+
+      <DataStackRow>
+        <InlineField>
+          <InlineFieldLabel>Startdatum</InlineFieldLabel>
+          <InlineDateProvider
+            initialValue={toInlineDateValue(data.startDate)}
+            variables={(value) => ({ id, data: { startDate: fromInlineDateValue(value) } })}
+            mutation={orpc.employees.update.mutationOptions()}
+          >
+            <div className="relative h-full">
+              <InlineDateInputField
+                strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().nullable() } }}
+              />
+
+              <InlineDatePickerField
+                strategy={{
+                  mutate: { on: "commit" },
+                  validate: { commit: z.string().nullable() },
+                }}
+              />
+            </div>
+          </InlineDateProvider>
+          <InlineFieldError />
+        </InlineField>
+
+        <InlineField>
+          <InlineFieldLabel>Einddatum</InlineFieldLabel>
+          <InlineDateProvider
+            initialValue={toInlineDateValue(data.endDate)}
+            variables={(value) => ({ id, data: { endDate: fromInlineDateValue(value) } })}
+            mutation={orpc.employees.update.mutationOptions()}
+          >
+            <div className="relative h-full">
+              <InlineDateInputField
+                strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().nullable() } }}
+              />
+
+              <InlineDatePickerField
+                strategy={{
+                  mutate: { on: "commit" },
+                  validate: { commit: z.string().nullable() },
+                }}
+              />
+            </div>
+          </InlineDateProvider>
+          <InlineFieldError />
+        </InlineField>
+      </DataStackRow>
+
+      <DataStackRow>
+        <InlineField>
+          <InlineFieldLabel>Contract</InlineFieldLabel>
+          <InlineSelect
+            initialValue={data.contract ?? ""}
+            variables={(value) => ({ id, data: { contract: value } })}
+            mutation={orpc.employees.update.mutationOptions()}
+            strategy={{ mutate: { on: "commit" }, validate: { commit: z.string().nullable() } }}
+          >
+            <InlineSelectTrigger className="w-full">
+              <InlineSelectValue placeholder="Selecteer een contract" />
+            </InlineSelectTrigger>
+
+            <InlineSelectContent>
+              <InlineSelectItem value="full-time">Full time</InlineSelectItem>
+              <InlineSelectItem value="part-time">Part time</InlineSelectItem>
+              <InlineSelectItem value="flexi">Flexi</InlineSelectItem>
+              <InlineSelectItem value="jobstudent">Jobstudent</InlineSelectItem>
+            </InlineSelectContent>
+          </InlineSelect>
+          <InlineFieldError />
+        </InlineField>
+
+        <InlineField>
+          <InlineFieldLabel>Functie</InlineFieldLabel>
+          <InlineStringInput
+            initialValue={data.jobTitle ?? ""}
+            variables={(value) => ({ id, data: { jobTitle: value } })}
+            mutation={orpc.employees.update.mutationOptions()}
+            strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().nullable() } }}
+          />
+          <InlineFieldError />
+        </InlineField>
+
+        <InlineField>
+          <InlineFieldLabel>IBAN</InlineFieldLabel>
+          <InlineStringInput
+            initialValue={data.iban ?? ""}
+            variables={(value) => ({ id, data: { iban: value } })}
+            mutation={orpc.employees.update.mutationOptions()}
+            strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().nullable() } }}
+          />
+          <InlineFieldError />
+        </InlineField>
+      </DataStackRow>
+
+      <div className="flex flex-col gap-y-5">
+        <div className="flex items-center justify-between">
+          <h2 className="font-bold text-lg">Adressen</h2>
+          <ResponsiveCommandMenu
+            data={{ employeeId: id }}
+            commands={[employeeCreateAddressCommand]}
+          />
+        </div>
+
+        <AddressGrid addresses={addresses} />
+      </div>
+    </DataStackLayout>
+  );
+}

package/dist/templates/spark/src/app/admin/employees/[id]/(default)/@dashboard/default.tsx

@@ -0,0 +1 @@
+export { default } from "./page";

package/dist/templates/spark/src/app/admin/employees/[id]/(default)/@dashboard/page.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import {
+  InlineField,
+  InlineFieldError,
+  InlineFieldLabel,
+  InlineSelect,
+  InlineSelectContent,
+  InlineSelectItem,
+  InlineSelectTrigger,
+  InlineSelectValue,
+  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 { use } from "react";
+import { z } from "zod";
+import { orpc } from "@/server/router/client";
+import { EmployeeRoleField, employeeRolesConfig } from "../../../_config/roles";
+
+export default function EmployeeDetailPage(props: PageProps<"/admin/employees/[id]">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+
+  const { data } = useSuspenseQuery(orpc.employees.getById.queryOptions({ input: { id } }));
+  if (!data) notFound();
+
+  const { user } = data;
+
+  return (
+    <div className="flex flex-col gap-x-20 gap-y-20 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: { 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: { 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: { user: { email: value ?? undefined } } })}
+              mutation={orpc.employees.update.mutationOptions()}
+              strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().nullable() } }}
+            />
+            <InlineFieldError />
+          </InlineField>
+
+          <InlineField>
+            <InlineFieldLabel>Rol</InlineFieldLabel>
+            <InlineSelect
+              initialValue={user.role ?? ""}
+              variables={(value) => ({ id, value: value ?? "" })}
+              mutation={orpc.employees.setRole.mutationOptions()}
+              strategy={{ mutate: { on: "commit" }, validate: { commit: z.string().nullable() } }}
+            >
+              <InlineSelectTrigger className="w-full">
+                <InlineSelectValue placeholder="Kies een rol" />
+              </InlineSelectTrigger>
+
+              <InlineSelectContent>
+                {employeeRolesConfig
+                  .filter(({ value }) => value !== "developer")
+                  .map(({ value }) => (
+                    <InlineSelectItem key={value} value={value}>
+                      <EmployeeRoleField status={value} />
+                    </InlineSelectItem>
+                  ))}
+              </InlineSelectContent>
+            </InlineSelect>
+            <InlineFieldError />
+          </InlineField>
+        </DataStackRow>
+      </DataStackLayout>
+    </div>
+  );
+}

package/dist/templates/spark/src/app/admin/employees/[id]/(default)/layout.tsx

@@ -0,0 +1,9 @@
+export default function EmployeeDetailLayout(props: LayoutProps<"/admin/employees/[id]">) {
+  return (
+    <div className="space-y-20 p-content pb-40">
+      {props.dashboard}
+
+      {props.children}
+    </div>
+  );
+}

package/dist/templates/spark/src/app/admin/employees/[id]/drive/(root)/loading.tsx

@@ -0,0 +1,3 @@
+import Loading from "../folders/[folderId]/loading";
+
+export default Loading;

package/dist/templates/spark/src/app/admin/employees/[id]/drive/(root)/page.tsx

@@ -0,0 +1,3 @@
+import Page from "../folders/[folderId]/page";
+
+export default Page;

package/dist/templates/spark/src/app/admin/employees/[id]/drive/folders/[folderId]/loading.tsx

@@ -0,0 +1,5 @@
+import { LocalDriveViewLoading } from "@tulip-systems/drive-local/client";
+
+export default function Loading() {
+  return <LocalDriveViewLoading className="p-content" />;
+}

package/dist/templates/spark/src/app/admin/employees/[id]/drive/folders/[folderId]/page.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { notFound } from "next/navigation";
+import { use } from "react";
+import { DriveToolbar } from "@/app/admin/drive/_components/header.client";
+import { DriveProvider } from "@/app/admin/drive/_components/provider.client";
+import { DriveView } from "@/app/admin/drive/_components/view.client";
+import { DRIVE_NAMESPACES } from "@/app/admin/drive/_config/namespaces";
+import { orpc } from "@/server/router/client";
+
+export default function DriveFolderPage(props: {
+  params: Promise<{ id: string; folderId?: string }>;
+}) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+  const folderId = params.folderId?.toString();
+
+  const { data } = useSuspenseQuery(orpc.employees.getDrive.queryOptions({ input: { id } }));
+  if (!data) notFound();
+
+  return (
+    <Allowed permission={{ employee: ["view.drive"] }}>
+      <DriveProvider
+        namespace={DRIVE_NAMESPACES.employees.namespace}
+        permission={DRIVE_NAMESPACES.employees.permission}
+        parentId={folderId ?? data.id}
+        navigation={{ rootHref: `/admin/employees/${id}/drive` }}
+      >
+        <DriveToolbar className="px-content" />
+        <DriveView className="px-content" />
+      </DriveProvider>
+    </Allowed>
+  );
+}

package/dist/templates/spark/src/app/admin/employees/[id]/drive/layout.tsx

@@ -0,0 +1,22 @@
+import { LocalDriveContent } from "@tulip-systems/drive-local/client";
+import { DriveProvider } from "@/app/admin/drive/_components/provider.client";
+import { DRIVE_NAMESPACES } from "@/app/admin/drive/_config/namespaces";
+
+const { namespace, permission } = DRIVE_NAMESPACES.employees;
+
+export default async function DriveGridLayoutPage(
+  props: LayoutProps<"/admin/employees/[id]/drive">,
+) {
+  const { id } = await props.params;
+
+  return (
+    <DriveProvider
+      namespace={namespace}
+      permission={permission}
+      parentId={null}
+      navigation={{ rootHref: `/admin/employees/${id}/drive` }}
+    >
+      <LocalDriveContent>{props.children}</LocalDriveContent>
+    </DriveProvider>
+  );
+}

package/dist/templates/spark/src/app/admin/employees/[id]/layout.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import {
+  BottomBar,
+  BottomBarLinks,
+  Header,
+  Topbar,
+  TopbarTitle,
+  TopbarTools,
+} from "@tulip-systems/app/components/client";
+import { ResponsiveCommandMenu } from "@tulip-systems/commands/client";
+import type { Route } from "next";
+import { notFound } from "next/navigation";
+import { use } from "react";
+import { orpc } from "@/server/router/client";
+import {
+  employeeArchiveCommand,
+  employeeBanCommand,
+  employeeDeleteCommand,
+  employeeRestoreCommand,
+  employeeUnbanCommand,
+} from "../_config/commands";
+
+export default function Layout(props: LayoutProps<"/admin/employees/[id]">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+
+  const { data } = useSuspenseQuery(orpc.employees.getById.queryOptions({ input: { id } }));
+  if (!data) notFound();
+
+  // const activeUser = await getActiveUser();
+  // if (!isAllowed(activeUser) && activeUser?.id !== employee.user.id) notAllowed();
+
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle
+            breadcrumbs={[
+              { label: "Werknemers", href: "/admin/employees" },
+              { label: data.user.name || "" },
+            ]}
+          />
+
+          <TopbarTools>
+            <ResponsiveCommandMenu
+              data={data}
+              commands={[
+                employeeBanCommand,
+                employeeUnbanCommand,
+                employeeArchiveCommand,
+                employeeRestoreCommand,
+                employeeDeleteCommand,
+              ]}
+            />
+          </TopbarTools>
+        </Topbar>
+
+        <BottomBar>
+          <BottomBarLinks
+            paths={[
+              {
+                name: "Details",
+                href: `/admin/employees/${id}` as Route,
+                segment: "(default)",
+                permission: { employee: ["view"] },
+              },
+              {
+                name: "Drive",
+                href: `/admin/employees/${id}/drive` as Route,
+                segment: "drive",
+                permission: { employee: ["view.drive"] },
+              },
+            ]}
+          />
+        </BottomBar>
+      </Header>
+
+      {props.children}
+    </>
+  );
+}

package/dist/templates/spark/src/app/admin/employees/_components/avatars.tsx

@@ -0,0 +1,76 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Avatar, AvatarFallback, AvatarImage } from "@tulip-systems/ui/avatar";
+import { Skeleton } from "@tulip-systems/ui/skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@tulip-systems/ui/tooltip";
+import { orpc } from "@/server/router/client";
+
+export type EmployeeAvatarsProps = {
+  ids: string[];
+  maxAvatars?: number;
+};
+
+export function EmployeeAvatars({ ids, maxAvatars = 4 }: EmployeeAvatarsProps) {
+  const { data } = useSuspenseQuery(
+    orpc.employees.getAvatars.queryOptions({ input: { ids: Array.from(new Set(ids)) } }),
+  );
+
+  return (
+    <div className="flex">
+      {data.slice(0, maxAvatars).map(({ user }, index) => (
+        <TooltipProvider key={user.id}>
+          <Tooltip>
+            <TooltipTrigger className="-ml-3 first:ml-0">
+              <Avatar style={{ zIndex: data.length - index }}>
+                <AvatarImage src={user.image || ""} alt={user.name} />
+                <AvatarFallback className="border">{user.name?.[0] || ""}</AvatarFallback>
+              </Avatar>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{user.name}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ))}
+
+      {data.length > maxAvatars && (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger>
+              <Avatar className="-ml-3">
+                <AvatarImage />
+                <AvatarFallback className="border">+{data.length - maxAvatars}</AvatarFallback>
+              </Avatar>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>
+                {data
+                  .slice(maxAvatars)
+                  .map(({ user }) => user.name)
+                  .join(", ")}
+              </p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
+    </div>
+  );
+}
+
+export function EmployeeAvatarsLoading({ maxAvatars = 4 }: Omit<EmployeeAvatarsProps, "ids">) {
+  return (
+    <div className="flex">
+      {Array.from({ length: maxAvatars }).map((_, index, array) => (
+        <Avatar key={index} className="-ml-3 first:ml-0" style={{ zIndex: array.length - index }}>
+          <AvatarFallback className="border">
+            <Skeleton />
+          </AvatarFallback>
+        </Avatar>
+      ))}
+    </div>
+  );
+}