@tulip-systems/create-app 0.11.1

package/dist/templates/code/src/app/admin/tasks/_lib/validators.ts

@@ -0,0 +1,73 @@
+import { resolveFiltersSchema } from "@tulip-systems/query";
+import { createInsertSchema } from "drizzle-zod";
+import { z } from "zod";
+import { tasksFilters } from "../_config/filters";
+import { taskStatusEnum, tasks } from "./schema";
+
+/**
+ * Task type
+ */
+export type Task = typeof tasks.$inferSelect;
+
+/**
+ * Task status
+ */
+export const taskStatusSchema = z.enum(taskStatusEnum.enumValues);
+export type TaskStatus = z.infer<typeof taskStatusSchema>;
+
+/**
+ * Schema
+ */
+export const createTaskSchema = createInsertSchema(tasks).omit({ code: true, index: true });
+export const updateTaskSchema = createInsertSchema(tasks);
+
+/**
+ * Create project schema
+ */
+export type CreateTaskInput = z.input<typeof createTaskSchema>;
+export type CreateTaskSchema = z.infer<typeof createTaskSchema>;
+
+export type UpdateTaskInput = z.input<typeof updateTaskSchema>;
+export type UpdateTaskSchema = z.infer<typeof updateTaskSchema>;
+
+/**
+ * Import excel schema
+ */
+export const importExcelTasksSchema = createTaskSchema
+  .pick({
+    projectId: true,
+    initiativeId: true,
+    domainId: true,
+  })
+  .extend({
+    items: z.array(
+      z.object({
+        title: z.coerce.string().transform((value) => value.trim()),
+        description: z.string().optional(),
+        status: taskStatusSchema.optional(),
+        storyPoints: z.coerce
+          .number()
+          .optional()
+          .transform((value) => (!Number.isNaN(value) ? value : null)),
+        assignee: z.email().optional(),
+      }),
+    ),
+  });
+
+export type ImportExcelTasksInput = z.input<typeof importExcelTasksSchema>;
+export type ImportExcelTasksSchema = z.infer<typeof importExcelTasksSchema>;
+
+/**
+ * Create inline task schema
+ */
+export const createInlineTaskSchema = createInsertSchema(tasks)
+  .omit({ id: true })
+  .extend({ id: z.string() });
+
+export type CreateInlineTaskSchema = z.infer<typeof createInlineTaskSchema>;
+
+/**
+ * Filters
+ */
+export const taskFiltersSchema = resolveFiltersSchema(tasksFilters);
+export type TaskFiltersSchema = z.input<typeof taskFiltersSchema>;

package/dist/templates/code/src/app/admin/time/(list)/layout.tsx

@@ -0,0 +1,45 @@
+import { Header, Topbar, TopbarTitle, TopbarTools } from "@tulip-systems/app/components/client";
+import { InlineCommandMenu, InlineCommandMenuLoading } from "@tulip-systems/commands/client";
+import { type PropsWithChildren, Suspense } from "react";
+import {
+  TimeTracker,
+  TimeTrackerButton,
+  TimeTrackerClock,
+  TimeTrackerCustomerSelector,
+  TimeTrackerDescription,
+  TimeTrackerLoading,
+  TimeTrackerProjectSelector,
+} from "../_components/time-tracker";
+import { timeEntryCreateCommand } from "../_config/commands";
+
+export default function Layout({ children }: PropsWithChildren) {
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle breadcrumbs={[{ label: "Tijd" }]} />
+
+          <TopbarTools>
+            <Suspense fallback={<InlineCommandMenuLoading />}>
+              <InlineCommandMenu data={{}} commands={[timeEntryCreateCommand]} />
+            </Suspense>
+          </TopbarTools>
+        </Topbar>
+      </Header>
+
+      <Suspense
+        fallback={<TimeTrackerLoading className="absolute right-0 bottom-0 left-0 z-20 border-t" />}
+      >
+        <TimeTracker className="absolute right-0 bottom-0 left-0 z-20 border-t">
+          <TimeTrackerDescription />
+          <TimeTrackerCustomerSelector />
+          <TimeTrackerProjectSelector />
+          <TimeTrackerClock />
+          <TimeTrackerButton />
+        </TimeTracker>
+      </Suspense>
+
+      <div className="p-content">{children}</div>
+    </>
+  );
+}

package/dist/templates/code/src/app/admin/time/(list)/loading.tsx

@@ -0,0 +1,5 @@
+import { TableSkeleton } from "@tulip-systems/data-tables";
+
+export default function Loading() {
+  return <TableSkeleton />;
+}

package/dist/templates/code/src/app/admin/time/(list)/page.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { TableLayout } from "@tulip-systems/data-tables";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import { Suspense } from "react";
+import { orpc } from "@/server/router/client";
+import {
+  TimeMonthlyHoursChart,
+  TimeMonthlyHoursChartLoading,
+} from "../_components/chart-time-monthly-hours";
+import { TimeEntryPaginationTableProvider } from "../_components/tables";
+import { TimeEntryTableToolbar } from "../_components/toolbars";
+import { timeEntryInlineTableColumns } from "../_config/columns-inline";
+import { timeEntryDeleteCommand } from "../_config/commands";
+
+export default function TimePage() {
+  const currentEmployee = useSuspenseQuery(orpc.employees.getCurrent.queryOptions());
+  if (!currentEmployee.data) return null;
+
+  return (
+    <Allowed permission={{ time: ["view"] }}>
+      <div className="space-y-10">
+        <Suspense fallback={<TimeMonthlyHoursChartLoading />}>
+          <TimeMonthlyHoursChart
+            filterOptions={{ constraints: { employeeId: [currentEmployee.data.id] } }}
+          />
+        </Suspense>
+
+        <TableLayout>
+          <TimeEntryPaginationTableProvider
+            columns={timeEntryInlineTableColumns}
+            commands={[timeEntryDeleteCommand]}
+            filterOptions={{ constraints: { employeeId: [currentEmployee.data.id] } }}
+            columnVisibility={{ "employee.name": false }}
+          >
+            <TimeEntryTableToolbar filtersVisibility={{ dateRange: false }} />
+            <DataTable />
+          </TimeEntryPaginationTableProvider>
+        </TableLayout>
+      </div>
+    </Allowed>
+  );
+}

package/dist/templates/code/src/app/admin/time/_components/chart-time-monthly-hours.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { formatDuration } from "@tulip-systems/core";
+import { type UseFiltersOptions, useFilters } from "@tulip-systems/query/client";
+import { Card, CardContent, CardHeader, CardTitle } from "@tulip-systems/ui/card";
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@tulip-systems/ui/recharts";
+import { Skeleton } from "@tulip-systems/ui/skeleton";
+import { addDays, differenceInCalendarDays, endOfMonth, format, startOfMonth } from "date-fns";
+import { useDeferredValue } from "react";
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+import { orpc } from "@/server/router/client";
+import type { TimeEntryAggregateGroupBy } from "../_config/columns-aggregated";
+import { timeEntriesFilters } from "../_config/filters";
+
+const CHART_COLORS = [
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)",
+];
+
+type TimeMonthlyHoursChartProps = {
+  filterOptions?: UseFiltersOptions<typeof timeEntriesFilters>;
+  groupBy?: TimeEntryAggregateGroupBy;
+};
+
+export function TimeMonthlyHoursChart({
+  filterOptions,
+  groupBy = "date",
+}: TimeMonthlyHoursChartProps) {
+  const filtering = useFilters(timeEntriesFilters, filterOptions);
+
+  const [rangeStart, rangeEnd] = filtering.input.dateRange ?? getDefaultDateRange();
+
+  const input = useDeferredValue({
+    groupBy,
+    limit: 5,
+    filters: filtering.input,
+  });
+
+  const groupedHours = useSuspenseQuery(
+    orpc.timeEntries.getDailyHoursByGroup.queryOptions({ input }),
+  );
+
+  const days = Array.from({ length: differenceInCalendarDays(rangeEnd, rangeStart) + 1 }, (_, i) =>
+    addDays(rangeStart, i),
+  );
+  const { chartData, series, config } = createStackedChartData(days, groupedHours.data);
+
+  return (
+    <TimeHoursChartCard
+      config={config}
+      chartData={chartData}
+      series={series}
+      rangeStart={rangeStart}
+      rangeEnd={rangeEnd}
+      showLegend={groupBy !== "date"}
+    />
+  );
+}
+
+function getDefaultDateRange(): [Date, Date] {
+  const start = startOfMonth(new Date());
+
+  return [start, endOfMonth(start)];
+}
+
+type TimeHoursChartCardProps = {
+  config: Record<string, { label: string; color: string }>;
+  chartData: Record<string, unknown>[];
+  series: { key: string; color: string }[];
+  rangeStart: Date;
+  rangeEnd: Date;
+  showLegend?: boolean;
+};
+
+function TimeHoursChartCard({
+  config,
+  chartData,
+  series,
+  rangeStart,
+  rangeEnd,
+  showLegend = false,
+}: TimeHoursChartCardProps) {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="pb-0">
+        <CardTitle>
+          Overzicht van {rangeStart.toLocaleDateString("nl-BE", { dateStyle: "medium" })} tot{" "}
+          {rangeEnd.toLocaleDateString("nl-BE", { dateStyle: "medium" })}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <ChartContainer className="h-64 w-full" config={config}>
+          <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="day"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(date) =>
+                new Date(date).toLocaleDateString("nl-BE", { day: "numeric" })
+              }
+            />
+            <ChartTooltip
+              cursor={false}
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(label) =>
+                    new Date(label as string).toLocaleDateString("nl-BE", {
+                      day: "numeric",
+                      month: "long",
+                    })
+                  }
+                  formatter={(value, name) => (
+                    <div className="flex min-w-[140px] items-center justify-between gap-3">
+                      <span className="text-muted-foreground">
+                        {config[name as keyof typeof config]?.label ?? "Tijd"}
+                      </span>
+                      <span className="font-medium font-mono">{formatDuration(Number(value))}</span>
+                    </div>
+                  )}
+                />
+              }
+            />
+            {series.map((item) => (
+              <Bar
+                key={item.key}
+                dataKey={item.key}
+                name={config[item.key as keyof typeof config]?.label}
+                fill={item.color}
+                stackId="total"
+                radius={showLegend ? 0 : 6}
+              />
+            ))}
+          </BarChart>
+        </ChartContainer>
+
+        {showLegend && (
+          <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 pt-3 text-sm">
+            {series.map((item) => (
+              <div key={item.key} className="flex items-center gap-1.5">
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{ backgroundColor: item.color }}
+                />
+                <span>{config[item.key as keyof typeof config]?.label}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+function createStackedChartData(
+  days: Date[],
+  data: { day: string; groupId: string; groupLabel: string; totalSeconds: number }[],
+) {
+  const groups = Array.from(new Map(data.map((item) => [item.groupId, item.groupLabel])).entries());
+  const durations = new Map(data.map((item) => [`${item.day}:${item.groupId}`, item.totalSeconds]));
+  const config = Object.fromEntries(
+    groups.map(([groupId, groupLabel], index) => [
+      groupId,
+      {
+        label: groupLabel,
+        color: CHART_COLORS[index % CHART_COLORS.length],
+      },
+    ]),
+  );
+
+  return {
+    config,
+    series: groups.map(([groupId], index) => ({
+      key: groupId,
+      color: CHART_COLORS[index % CHART_COLORS.length],
+    })),
+    chartData: days.map((date) => {
+      const day = format(date, "yyyy-MM-dd");
+
+      return Object.fromEntries([
+        ["day", day],
+        ...groups.map(([groupId]) => [groupId, durations.get(`${day}:${groupId}`) ?? 0]),
+      ]);
+    }),
+  };
+}
+
+export function TimeMonthlyHoursChartLoading() {
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="pb-0">
+        <CardTitle>Maandoverzicht</CardTitle>
+      </CardHeader>
+      <CardContent className="pb-0">
+        <Skeleton className="h-64 w-full" />
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,242 @@
+import "client-only";
+
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import { type DefaultError, type MutationOptions, useSuspenseQuery } from "@tanstack/react-query";
+import type { VisibilityState } from "@tanstack/react-table";
+import {
+  CommandFormDialog,
+  CommandFormDialogCancel,
+  CommandFormDialogContent,
+  CommandFormDialogFields,
+  CommandFormDialogFooter,
+  CommandFormDialogHeader,
+  CommandFormDialogSubmit,
+  CommandFormDialogTitle,
+  CommandFormDialogTrigger,
+} from "@tulip-systems/commands/client";
+import { ComboboxDropdown } from "@tulip-systems/ui/combobox-dropdown";
+import { DateTimeInput } from "@tulip-systems/ui/input-date-time";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@tulip-systems/ui/react-hook-form";
+import { Textarea } from "@tulip-systems/ui/textarea";
+import type React from "react";
+import { useMemo } from "react";
+import { useForm } from "react-hook-form";
+import { orpc } from "@/server/router/client";
+import {
+  type CreateTimeEntryInput,
+  type CreateTimeEntrySchema,
+  createTimeEntrySchema,
+} from "../_lib/validators";
+
+export type CreateTimeEntryCommandDefaults = Partial<CreateTimeEntryInput>;
+
+export type CreateTimeEntryCommandProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+> = {
+  variables: (values: CreateTimeEntrySchema) => TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+  defaultValues?: CreateTimeEntryCommandDefaults;
+  children?: React.ReactNode;
+  fieldVisibility?: VisibilityState;
+};
+
+export function CreateTimeEntryCommand<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+>({
+  variables,
+  mutation,
+  defaultValues,
+  fieldVisibility,
+  children,
+}: CreateTimeEntryCommandProps<TData, TError, TVariables, TOnMutateResult>) {
+  const customersQuery = useSuspenseQuery(orpc.customers.getAllWithProjects.queryOptions());
+  const employeesQuery = useSuspenseQuery(orpc.employees.getCurrent.queryOptions());
+  const currentEmployee = employeesQuery.data;
+
+  const form = useForm<CreateTimeEntryInput>({
+    resolver: standardSchemaResolver(createTimeEntrySchema),
+    defaultValues: {
+      start: new Date(),
+      end: new Date(),
+      ...defaultValues,
+      employeeId: defaultValues?.employeeId ?? currentEmployee?.id,
+    },
+  });
+
+  const selectedCustomer = useMemo(() => {
+    const customerId = form.watch("customerId");
+    return customersQuery.data.find(({ id }) => id === customerId);
+  }, [customersQuery.data, form.watch]);
+
+  const projects = selectedCustomer?.projects;
+  const selectedProject = useMemo(() => {
+    const projectId = form.watch("projectId");
+    return projects?.find(({ id }) => id === projectId);
+  }, [projects, form.watch]);
+
+  console.log("form.watch()", form.watch());
+
+  return (
+    <CommandFormDialog>
+      {children}
+
+      <Form {...form}>
+        <CommandFormDialogContent variables={variables} mutation={mutation}>
+          <CommandFormDialogHeader>
+            <CommandFormDialogTitle>Tijd Toevoegen</CommandFormDialogTitle>
+          </CommandFormDialogHeader>
+
+          <CommandFormDialogFields>
+            <FormField
+              control={form.control}
+              name="description"
+              visible={fieldVisibility?.description}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Titel</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      value={field.value ?? undefined}
+                      onChange={(e) => field.onChange(e.target.value)}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="customerId"
+              visible={fieldVisibility?.customerId}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Klant</FormLabel>
+                  <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"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {projects && (
+              <FormField
+                control={form.control}
+                name="projectId"
+                visible={fieldVisibility?.projectId}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Project</FormLabel>
+                    <FormControl>
+                      <ComboboxDropdown
+                        {...field}
+                        selectedItem={
+                          selectedProject && {
+                            id: selectedProject.id,
+                            value: selectedProject.title,
+                          }
+                        }
+                        items={projects.map(({ id, title }) => ({ id, value: title }))}
+                        onSelect={(value) => value && field.onChange(value.id)}
+                        placeholder="Kies een project"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+            {/* <FormField
+              control={form.control}
+              name="scheduledAt"
+              visible={fieldVisibility?.scheduledAt}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Datum</FormLabel>
+                  <FormControl>
+                    <DatePicker
+                      initialDate={field.value ? new Date(field.value) : undefined}
+                      onSelect={(value) =>
+                        field.onChange(value ? format(value, "yyyy-MM-dd") : undefined)
+                      }
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            /> */}
+
+            {/* <div className="grid grid-cols-2 gap-5"> */}
+            <FormField
+              control={form.control}
+              name="start"
+              visible={fieldVisibility?.start}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Start Tijd</FormLabel>
+                  <FormControl>
+                    <DateTimeInput
+                      value={field.value}
+                      onValueChange={(date) => field.onChange(date ? new Date(date) : undefined)}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="end"
+              visible={fieldVisibility?.end}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Stop Tijd</FormLabel>
+                  <FormControl>
+                    <DateTimeInput
+                      value={field.value ?? undefined}
+                      onValueChange={(date) => field.onChange(date ? new Date(date) : undefined)}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {/* </div> */}
+          </CommandFormDialogFields>
+
+          <CommandFormDialogFooter>
+            <CommandFormDialogCancel>Annuleren</CommandFormDialogCancel>
+            <CommandFormDialogSubmit>Toevoegen</CommandFormDialogSubmit>
+          </CommandFormDialogFooter>
+        </CommandFormDialogContent>
+      </Form>
+    </CommandFormDialog>
+  );
+}
+
+export const CreateTimeEntryCommandTrigger = CommandFormDialogTrigger;