@tulip-systems/create-app 0.11.1

package/dist/templates/code/src/app/admin/time/_components/tables.tsx

@@ -0,0 +1,126 @@
+"use client";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import type { VisibilityState } from "@tanstack/react-table";
+import type { CommandFor } from "@tulip-systems/commands";
+import type { TableColumnDef } from "@tulip-systems/data-tables";
+import {
+  createTableConfig,
+  TableConfigProvider,
+  usePaginationStrategy,
+} from "@tulip-systems/data-tables/client";
+import { offsetPagination } from "@tulip-systems/query";
+import {
+  type UseFiltersOptions,
+  useFilters,
+  usePagination,
+  useSorting,
+} from "@tulip-systems/query/client";
+import { type PropsWithChildren, useDeferredValue, useMemo } from "react";
+import { orpc } from "@/server/router/client";
+import type {
+  TimeEntryAggregatedColumnsData,
+  TimeEntryAggregateGroupBy,
+} from "../_config/columns-aggregated";
+import type { TimeEntryColumnsData } from "../_config/columns-data";
+import { timeEntriesFilters } from "../_config/filters";
+import { timeEntryTableSorts } from "../_config/sorting";
+
+/**
+ * Time entry table with pagination strategy
+ */
+type TimeEntryInfiniteTableProviderProps<TData extends TimeEntryColumnsData> = {
+  columns: TableColumnDef<TData>[];
+  commands?: CommandFor<TData[]>[];
+  filterOptions?: UseFiltersOptions<typeof timeEntriesFilters>;
+  columnVisibility?: VisibilityState;
+};
+
+export function TimeEntryPaginationTableProvider({
+  columns,
+  commands,
+  columnVisibility,
+  filterOptions,
+  children,
+}: PropsWithChildren<TimeEntryInfiniteTableProviderProps<TimeEntryColumnsData>>) {
+  const pagination = usePagination(offsetPagination);
+  const filtering = useFilters(timeEntriesFilters, filterOptions);
+  const sorting = useSorting(timeEntryTableSorts);
+
+  const input = useDeferredValue({
+    pagination: pagination.input,
+    filters: filtering.input,
+    sorts: sorting.input,
+  });
+
+  /**
+   * Data
+   */
+  const response = useSuspenseQuery(orpc.timeEntries.list.queryOptions({ input }));
+
+  const queryData = useMemo(() => response.data.data ?? [], [response.data.data]);
+  const { total } = response.data.pagination;
+
+  /**
+   * Strategy
+   */
+  const strategy = usePaginationStrategy({ pagination, total });
+
+  /**
+   * Table
+   */
+  const config = createTableConfig<TimeEntryColumnsData>({
+    queryData,
+    getRowId: (row) => row.id,
+    columns,
+    strategy,
+    filtering,
+    sorting,
+    commands,
+    columnVisibility,
+  });
+
+  return <TableConfigProvider config={config}>{children}</TableConfigProvider>;
+}
+
+/**
+ * Time entry aggregated data table
+ */
+type TimeEntryAggregatedPaginationTableProviderProps = {
+  columns: TableColumnDef<TimeEntryAggregatedColumnsData>[];
+  groupBy: TimeEntryAggregateGroupBy;
+  filterOptions?: UseFiltersOptions<typeof timeEntriesFilters>;
+  columnVisibility?: VisibilityState;
+};
+
+export function TimeEntryAggregatedPaginationTableProvider({
+  columns,
+  groupBy,
+  columnVisibility,
+  filterOptions,
+  children,
+}: PropsWithChildren<TimeEntryAggregatedPaginationTableProviderProps>) {
+  const pagination = usePagination(offsetPagination);
+  const filtering = useFilters(timeEntriesFilters, filterOptions);
+
+  const input = useDeferredValue({
+    pagination: pagination.input,
+    groupBy,
+    filters: filtering.input,
+  });
+
+  const response = useSuspenseQuery(orpc.timeEntries.listAggregated.queryOptions({ input }));
+
+  const queryData = useMemo(() => response.data.data ?? [], [response.data.data]);
+  const { total } = response.data.pagination;
+  const strategy = usePaginationStrategy({ pagination, total });
+
+  const config = createTableConfig<TimeEntryAggregatedColumnsData>({
+    queryData,
+    getRowId: (row) => row.id,
+    columns,
+    strategy,
+    columnVisibility,
+  });
+
+  return <TableConfigProvider config={config}>{children}</TableConfigProvider>;
+}

package/dist/templates/code/src/app/admin/time/_components/time-tracker.tsx

@@ -0,0 +1,416 @@
+"use client";
+
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { formatDuration } from "@tulip-systems/core";
+import { useAction } from "@tulip-systems/core/client";
+import {
+  InlineComboboxDropdown,
+  InlineField,
+  InlineFieldError,
+  InlineStringInput,
+} from "@tulip-systems/inline/client";
+import { Button } from "@tulip-systems/ui/button";
+import { cn } from "@tulip-systems/ui/cn";
+import { ComboboxDropdown } from "@tulip-systems/ui/combobox-dropdown";
+import { Input } from "@tulip-systems/ui/input";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@tulip-systems/ui/react-hook-form";
+import { Skeleton } from "@tulip-systems/ui/skeleton";
+import { differenceInSeconds } from "date-fns";
+import { PauseIcon, PlayIcon } from "lucide-react";
+import { notFound } from "next/navigation";
+import {
+  type ComponentProps,
+  createContext,
+  type Dispatch,
+  type SetStateAction,
+  use,
+  useEffect,
+  useState,
+} from "react";
+import { useForm, useFormContext } from "react-hook-form";
+import { useInterval } from "usehooks-ts";
+import { z } from "zod";
+import { orpc } from "@/server/router/client";
+import type { RouterOutputs } from "@/server/router/router";
+import { type StartTimeEntrySchema, startTimeEntrySchema } from "../_lib/validators";
+
+/**
+ * Time tracker context
+ */
+type TimeTrackerContextValue = {
+  time: number;
+  setTime: Dispatch<SetStateAction<number>>;
+  isPending: boolean;
+} & (
+  | {
+      mode: "idle";
+      data: null;
+      startTime: () => Promise<void>;
+    }
+  | {
+      mode: "active";
+      data: RouterOutputs["timeEntries"]["getActive"];
+      stopTime: () => Promise<void>;
+    }
+);
+
+export const TimeTrackerContext = createContext({} as TimeTrackerContextValue);
+
+/**
+ * Time tracker context provider
+ */
+type TimeTrackerProps = ComponentProps<"div"> & {
+  defaultValues?: Partial<StartTimeEntrySchema>;
+};
+
+/**
+ * Time tracker context provider
+ */
+export function TimeTracker({ defaultValues, children, className, ...props }: TimeTrackerProps) {
+  const currentEmployeeQuery = useSuspenseQuery(orpc.employees.getCurrent.queryOptions());
+  const employeeId = currentEmployeeQuery.data?.id;
+  if (!employeeId) notFound();
+
+  const activeEntryQuery = useSuspenseQuery(
+    orpc.timeEntries.getActive.queryOptions({ input: { employeeId } }),
+  );
+
+  const [data, setData] = useState(activeEntryQuery.data ?? null);
+
+  const initialTime = data ? differenceInSeconds(new Date(), new Date(data.start)) : 0;
+  const [time, setTime] = useState(initialTime);
+
+  const startMutation = useAction(
+    orpc.timeEntries.start.mutationOptions({
+      onMutate: (values) => {
+        setData({ ...values, start: new Date() } as typeof data);
+        setTime(0);
+      },
+      onSuccess: (data) => {
+        setData(data);
+        form.reset();
+      },
+    }),
+  );
+
+  const stopMutation = useAction(
+    orpc.timeEntries.stop.mutationOptions({
+      onMutate: () => {
+        setData(null);
+        setTime(0);
+      },
+    }),
+  );
+
+  const form = useForm<StartTimeEntrySchema>({
+    resolver: standardSchemaResolver(startTimeEntrySchema),
+    defaultValues: { employeeId, ...defaultValues },
+  });
+
+  if (Object.values(form.formState.errors).length > 0) {
+    console.error(form.formState.errors);
+  }
+
+  const isPending = startMutation.isPending || stopMutation.isPending;
+
+  return (
+    <TimeTrackerContext.Provider
+      value={
+        {
+          time,
+          setTime,
+          isPending,
+          ...(data === null && {
+            data: null,
+            mode: "idle",
+            startTime: async () => {
+              const isValid = await form.trigger();
+              if (!isValid) return;
+
+              startMutation.mutate(form.getValues());
+            },
+          }),
+          ...(data !== null && {
+            data,
+            mode: "active",
+            stopTime: () => stopMutation.mutate({ id: data.id }),
+          }),
+        } as TimeTrackerContextValue
+      }
+    >
+      <Form {...form}>
+        <div
+          {...props}
+          className={cn(
+            "flex @5xl/admin:flex-row flex-wrap @5xl/admin:flex-nowrap gap-3 bg-muted/50 p-content backdrop-blur-xl",
+            className,
+          )}
+        >
+          {children}
+        </div>
+      </Form>
+    </TimeTrackerContext.Provider>
+  );
+}
+
+/**
+ * Time Tracker Description
+ */
+export function TimeTrackerDescription() {
+  const { mode, data } = use(TimeTrackerContext);
+  const form = useFormContext();
+
+  if (mode === "idle") {
+    const hasError = form.formState.errors.description !== undefined;
+
+    return (
+      <FormField
+        control={form.control}
+        name="description"
+        render={({ field }) => (
+          <FormItem className="@5xl/admin:min-w-52 basis-full">
+            <FormControl>
+              <Input
+                value={field.value ?? ""}
+                onChange={field.onChange}
+                placeholder="Beschrijving"
+                className={hasError ? "border-red-500" : ""}
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    );
+  }
+
+  if (!data) return null;
+
+  return (
+    <InlineField className="min-w-52 basis-full">
+      <InlineStringInput
+        initialValue={data?.description ?? ""}
+        variables={(value) => ({ id: data.id, data: { description: value } })}
+        mutation={orpc.timeEntries.update.mutationOptions()}
+        strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().nullable() } }}
+      />
+      <InlineFieldError />
+    </InlineField>
+  );
+}
+
+/**
+ * Time Tracker Customer Selector
+ */
+export function TimeTrackerCustomerSelector() {
+  const customersQuery = useSuspenseQuery(orpc.customers.getAllWithProjects.queryOptions());
+  const { mode, data } = use(TimeTrackerContext);
+  const form = useFormContext();
+
+  if (mode === "idle") {
+    const selectedCustomer = customersQuery.data.find(({ id }) => id === form.watch("customerId"));
+
+    const hasError = form.formState.errors.customerId !== undefined;
+
+    return (
+      <FormField
+        control={form.control}
+        name="customerId"
+        render={({ field }) => (
+          <FormItem className="@5xl/admin:min-w-52 flex-1 @5xl/admin:basis-0 basis-full">
+            <FormControl>
+              <ComboboxDropdown
+                {...field}
+                selectedItem={
+                  selectedCustomer && {
+                    id: selectedCustomer.id,
+                    value: selectedCustomer.name,
+                  }
+                }
+                items={customersQuery.data.map(({ id, name }) => ({ id, value: name }))}
+                onSelect={(value) => value && field.onChange(value.id)}
+                placeholder="Kies een klant"
+                className={cn(hasError && "border-red-500")}
+              />
+            </FormControl>
+          </FormItem>
+        )}
+      />
+    );
+  }
+
+  if (!data) return null;
+
+  return (
+    <InlineField className="@5xl/admin:min-w-52 flex-1 @5xl/admin:basis-0 basis-full">
+      <InlineComboboxDropdown
+        initialValue={data?.customerId}
+        variables={(value) => ({ id: data.id, data: { customerId: value ?? undefined } })}
+        mutation={orpc.timeEntries.update.mutationOptions()}
+        strategy={{ mutate: { on: "commit" }, validate: { commit: z.string().nullable() } }}
+        items={customersQuery.data.map((customer) => ({ id: customer.id, value: customer.name }))}
+        placeholder="Kies een klant"
+      />
+      <InlineFieldError />
+    </InlineField>
+  );
+}
+
+/**
+ * Time Tracker Project Selector
+ */
+export function TimeTrackerProjectSelector() {
+  const customersQuery = useSuspenseQuery(orpc.customers.getAllWithProjects.queryOptions());
+  const { mode, data } = use(TimeTrackerContext);
+  const form = useFormContext();
+
+  if (mode === "idle") {
+    const selectedCustomer = customersQuery.data.find(({ id }) => id === form.watch("customerId"));
+    const selectedProject = selectedCustomer?.projects.find(
+      ({ id }) => id === form.getValues("projectId"),
+    );
+
+    if (!selectedCustomer) return null;
+
+    const hasError = form.formState.errors.projectId !== undefined;
+
+    return (
+      <FormField
+        control={form.control}
+        name="projectId"
+        render={({ field }) => (
+          <FormItem className="@5xl/admin:min-w-52 flex-1 @5xl/admin:basis-0 basis-full">
+            <FormControl>
+              <ComboboxDropdown
+                {...field}
+                selectedItem={
+                  selectedProject && {
+                    id: selectedProject.id,
+                    value: selectedProject.title,
+                  }
+                }
+                items={selectedCustomer.projects.map(({ id, title }) => ({ id, value: title }))}
+                onSelect={(value) => value && field.onChange(value.id)}
+                placeholder="Kies een project"
+                className={cn(hasError && "border-red-500")}
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    );
+  }
+
+  if (!data) return null;
+
+  return (
+    <InlineField className="@5xl/admin:min-w-52 flex-1 @5xl/admin:basis-0 basis-full">
+      <InlineComboboxDropdown
+        initialValue={data?.projectId ?? ""}
+        variables={(value) => ({ id: data.id, data: { projectId: value } })}
+        mutation={orpc.timeEntries.update.mutationOptions()}
+        strategy={{ mutate: { on: "commit" }, validate: { commit: z.string().nullable() } }}
+        items={
+          customersQuery.data
+            .find(({ id }) => id === data?.customerId)
+            ?.projects.map((project) => ({ id: project.id, value: project.title })) ?? []
+        }
+        placeholder="Kies een project"
+      />
+      <InlineFieldError />
+    </InlineField>
+  );
+}
+
+/**
+ * Time Tracker Clock
+ */
+
+export function TimeTrackerClock() {
+  const { mode, data, time, setTime } = use(TimeTrackerContext);
+
+  useEffect(() => {
+    if (mode !== "active" || !data) return;
+
+    function updateTime() {
+      setTime(differenceInSeconds(new Date(), new Date(data?.start ?? new Date())));
+    }
+
+    function handleVisibilityChange() {
+      if (!document.hidden) updateTime();
+    }
+
+    updateTime();
+
+    window.addEventListener("focus", updateTime);
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+
+    return () => {
+      window.removeEventListener("focus", updateTime);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [mode, data, setTime]);
+
+  useInterval(
+    () => setTime(() => (data ? differenceInSeconds(new Date(), new Date(data.start)) : 0)),
+    mode === "active" ? 1000 : null,
+  );
+
+  return (
+    <div className="flex min-w-20 flex-1 items-center font-medium font-mono">
+      {formatDuration(time)}
+    </div>
+  );
+}
+
+/**
+ * Time Tracker Button
+ */
+export function TimeTrackerButton() {
+  const context = use(TimeTrackerContext);
+
+  return (
+    <div className="flex items-center justify-end">
+      <Button
+        size="icon"
+        type="button"
+        className="rounded-full"
+        onClick={() => (context.mode === "idle" ? context.startTime() : context.stopTime())}
+        disabled={context.isPending}
+      >
+        {context.mode === "active" ? (
+          <PauseIcon className="fill-primary-foreground" />
+        ) : (
+          <PlayIcon className="fill-primary-foreground" />
+        )}
+      </Button>
+    </div>
+  );
+}
+
+/**
+ * Loading
+ */
+export function TimeTrackerLoading({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        "flex @5xl/admin:flex-row flex-wrap @5xl/admin:flex-nowrap gap-3 bg-muted/50 p-content backdrop-blur-xl",
+        className,
+      )}
+    >
+      <Skeleton className="@5xl/admin:min-w-52 basis-full" />
+      <Skeleton className="@5xl/admin:min-w-52 flex-1 @5xl/admin:basis-0 basis-full" />
+      <Skeleton />
+    </div>
+  );
+}

package/dist/templates/code/src/app/admin/time/_components/toolbars.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { TableToolbar, TableToolbarList } from "@tulip-systems/data-tables";
+import { useTableConfigContext } from "@tulip-systems/data-tables/client";
+import { parseFiltersVisibility, resolveFilterDescriptors } from "@tulip-systems/query";
+import {
+  FilterCombobox,
+  FilterDateRange,
+  type FilterDateRangePreset,
+  FilterSearch,
+} from "@tulip-systems/query/client";
+import {
+  endOfDay,
+  endOfMonth,
+  endOfWeek,
+  startOfDay,
+  startOfMonth,
+  startOfWeek,
+  subMonths,
+  subWeeks,
+} from "date-fns";
+import { type PropsWithChildren, Suspense, useDeferredValue } from "react";
+import { orpc } from "@/server/router/client";
+import { timeEntriesFilters } from "../_config/filters";
+
+const timeEntriesFiltersDescriptors = resolveFilterDescriptors(timeEntriesFilters);
+
+const filtersVisibilityConfig = [
+  "search",
+  "customerId",
+  "projectId",
+  "employeeId",
+  "dateRange",
+] as const;
+
+type TimeEntryFilterVisibility = (typeof filtersVisibilityConfig)[number];
+
+export function TimeEntryTableToolbar(
+  props: PropsWithChildren<{
+    filtersVisibility?: Partial<Record<TimeEntryFilterVisibility, boolean>>;
+  }>,
+) {
+  const visibilityState = parseFiltersVisibility(
+    [...filtersVisibilityConfig],
+    props.filtersVisibility,
+  );
+
+  return (
+    <TableToolbar>
+      <TableToolbarList>
+        {visibilityState.search && (
+          <FilterSearch placeholder="Zoeken..." filter={timeEntriesFiltersDescriptors.search} />
+        )}
+
+        <Suspense>
+          {visibilityState.customerId && <TimeEntryCustomerFilter />}
+          {visibilityState.projectId && <TimeEntryProjectFilter />}
+          {visibilityState.employeeId && <TimeEntryEmployeeFilter />}
+          {visibilityState.dateRange && <TimeEntryDateRangeFilter />}
+        </Suspense>
+      </TableToolbarList>
+
+      <TableToolbarList>{props.children}</TableToolbarList>
+    </TableToolbar>
+  );
+}
+
+export function TimeEntryCustomerFilter() {
+  const table = useTableConfigContext();
+  const input = useDeferredValue({ filters: table.filtering?.input ?? {} });
+
+  const { data } = useSuspenseQuery(orpc.timeEntries.filterCustomers.queryOptions({ input }));
+
+  return (
+    <FilterCombobox
+      title="Klanten"
+      filter={timeEntriesFiltersDescriptors.customerId}
+      options={data}
+    />
+  );
+}
+
+export function TimeEntryProjectFilter() {
+  const table = useTableConfigContext();
+  const input = useDeferredValue({ filters: table.filtering?.input ?? {} });
+
+  const { data } = useSuspenseQuery(orpc.timeEntries.filterProjects.queryOptions({ input }));
+
+  return (
+    <FilterCombobox
+      title="Projecten"
+      filter={timeEntriesFiltersDescriptors.projectId}
+      options={data}
+    />
+  );
+}
+
+export function TimeEntryEmployeeFilter() {
+  const table = useTableConfigContext();
+  const input = useDeferredValue({ filters: table.filtering?.input ?? {} });
+
+  const { data } = useSuspenseQuery(orpc.timeEntries.filterEmployees.queryOptions({ input }));
+
+  return (
+    <FilterCombobox
+      title="Medewerkers"
+      filter={timeEntriesFiltersDescriptors.employeeId}
+      options={data}
+    />
+  );
+}
+
+export function TimeEntryDateRangeFilter() {
+  return (
+    <FilterDateRange
+      title="Datum"
+      filter={timeEntriesFiltersDescriptors.dateRange}
+      presets={createTimeEntryDateRangePresets()}
+    />
+  );
+}
+
+function createTimeEntryDateRangePresets(): FilterDateRangePreset[] {
+  const now = new Date();
+  const previousMonth = subMonths(now, 1);
+  const previousWeek = subWeeks(now, 1);
+
+  return [
+    {
+      label: "Vandaag",
+      value: [startOfDay(now), endOfDay(now)],
+    },
+    {
+      label: "Deze maand",
+      value: [startOfMonth(now), endOfMonth(now)],
+    },
+    {
+      label: "Vorige maand",
+      value: [startOfMonth(previousMonth), endOfMonth(previousMonth)],
+    },
+    {
+      label: "Deze week",
+      value: [startOfWeek(now, { weekStartsOn: 1 }), endOfWeek(now, { weekStartsOn: 1 })],
+    },
+    {
+      label: "Vorige week",
+      value: [
+        startOfWeek(previousWeek, { weekStartsOn: 1 }),
+        endOfWeek(previousWeek, { weekStartsOn: 1 }),
+      ],
+    },
+  ];
+}