@tulip-systems/create-app 0.11.1

package/dist/templates/code/src/app/admin/tasks/[id]/(default)/(children)/page.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useSuspenseQueries, useSuspenseQuery } from "@tanstack/react-query";
+import { InlineCommandMenu } from "@tulip-systems/commands/client";
+import { TableLayout } from "@tulip-systems/data-tables";
+import { DataTable, SortableRows } from "@tulip-systems/data-tables/client";
+import { notFound } from "next/navigation";
+import { use } from "react";
+import { TaskPaginationTableProvider } from "@/app/admin/tasks/_components/tables";
+import { TaskTableToolbar } from "@/app/admin/tasks/_components/toolbars";
+import { taskInlineTableColumns } from "@/app/admin/tasks/_config/columns-inline";
+import {
+  taskCreateCommand,
+  taskDeleteCommand,
+  taskImportExcelCommand,
+  taskUpdateAssigneeCommand,
+  taskUpdateStatusCommand,
+} from "@/app/admin/tasks/_config/commands";
+import { orpc } from "@/server/router/client";
+import type { TaskFiltersSchema } from "../../../_lib/validators";
+
+export default function Page(props: PageProps<"/admin/tasks/[id]">) {
+  const params = use(props.params);
+  const parentId = params.id?.toString();
+  if (!parentId) notFound();
+
+  const parentQuery = useSuspenseQuery(
+    orpc.tasks.getById.queryOptions({ input: { id: parentId } }),
+  );
+  const data = parentQuery.data;
+  if (!data) notFound();
+
+  const { projectId, domainId } = data;
+
+  const filters: TaskFiltersSchema = {
+    parentId,
+    projectId: [projectId],
+    ...(domainId ? { domainId: [domainId] } : {}),
+  };
+
+  const [initiativesQuery, employeesQuery, domainsQuery] = useSuspenseQueries({
+    queries: [
+      orpc.initiatives.getAll.queryOptions({ input: { filters: { projectId: [projectId] } } }),
+      orpc.employees.getAll.queryOptions(),
+      orpc.domains.getAll.queryOptions({ input: { filters: { projectId: [projectId] } } }),
+    ],
+  });
+
+  return (
+    <TableLayout>
+      <TaskPaginationTableProvider
+        columns={taskInlineTableColumns}
+        commands={[taskUpdateStatusCommand, taskUpdateAssigneeCommand, taskDeleteCommand]}
+        columnVisibility={{ projectTitle: false }}
+        filterOptions={{
+          constraints: {
+            ...filters,
+            domainId: domainId ? [domainId] : null,
+          },
+        }}
+        meta={{
+          employees: employeesQuery.data,
+          domains: domainsQuery.data,
+          initiatives: initiativesQuery.data,
+        }}
+      >
+        <TaskTableToolbar filtersVisibility={{ projectId: false }}>
+          <InlineCommandMenu
+            data={{ projectId, parentId, domainId }}
+            commands={[taskCreateCommand, taskImportExcelCommand]}
+          />
+        </TaskTableToolbar>
+
+        <SortableRows
+          mutationOptions={{ mutationFn: (input) => orpc.tasks.move.call({ ...input, filters }) }}
+        >
+          <DataTable />
+        </SortableRows>
+      </TaskPaginationTableProvider>
+    </TableLayout>
+  );
+}

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

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

package/dist/templates/code/src/app/admin/tasks/[id]/(default)/@dashboard/loading.tsx

@@ -0,0 +1,11 @@
+import { Skeleton } from "@tulip-systems/ui/skeleton";
+
+export default function Loading() {
+  return (
+    <div className="grid @5xl/admin:grid-cols-4 grid-cols-1 gap-5">
+      {Array.from({ length: 4 }, (_, index) => `task-stat-${index + 1}`).map((id) => (
+        <Skeleton key={id} className="h-24 w-full" />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,186 @@
+"use client";
+
+import { useSuspenseQueries, useSuspenseQuery } from "@tanstack/react-query";
+import { EditorContent, EditorMenuFixed } from "@tulip-systems/editor/client";
+import {
+  InlineComboboxDropdown,
+  InlineEditor,
+  InlineField,
+  InlineFieldError,
+  InlineFieldLabel,
+  InlineProvider,
+  InlineSelect,
+  InlineSelectContent,
+  InlineSelectItem,
+  InlineSelectTrigger,
+  InlineSelectValue,
+  InlineStringInput,
+} from "@tulip-systems/inline/client";
+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 { storyPointsConfig } from "../../../_lib/constants";
+
+const taskMutation = orpc.tasks.update.mutationOptions();
+
+export default function TaskDetailPage(props: PageProps<"/admin/tasks/[id]">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+  if (!id) notFound();
+
+  const taskQuery = useSuspenseQuery(orpc.tasks.getById.queryOptions({ input: { id } }));
+  const data = taskQuery.data;
+  if (!data) notFound();
+
+  const [initiativesQuery, domainsQuery, employeesQuery, projectsQuery] = useSuspenseQueries({
+    queries: [
+      orpc.initiatives.getAll.queryOptions({ input: { filters: { projectId: [data.projectId] } } }),
+      orpc.domains.getAll.queryOptions({ input: { filters: { projectId: [data.projectId] } } }),
+      orpc.employees.getAll.queryOptions(),
+      orpc.projects.getAll.queryOptions(),
+    ],
+  });
+
+  const { title, description, storyPoints, projectId, initiativeId, domainId, assigneeId } = data;
+
+  return (
+    <InlineProvider permission={{ task: ["update"] }}>
+      <DataStackLayout className="min-w-0 basis-full">
+        <DataStackRow>
+          <InlineField>
+            <InlineFieldLabel>Titel</InlineFieldLabel>
+            <InlineStringInput
+              initialValue={title}
+              variables={(value) => ({ id, data: { title: value ?? undefined } })}
+              mutation={taskMutation}
+              strategy={{ mutate: { on: "blur" }, validate: { blur: z.string().nullable() } }}
+            />
+            <InlineFieldError />
+          </InlineField>
+
+          <InlineField>
+            <InlineFieldLabel>Project</InlineFieldLabel>
+            <InlineComboboxDropdown
+              initialValue={projectId}
+              variables={(value) => ({ id, data: { projectId: value ?? undefined } })}
+              mutation={taskMutation}
+              strategy={{ mutate: { on: "commit" }, validate: { commit: z.string().nullable() } }}
+              items={projectsQuery.data.map((project) => ({
+                id: project.id,
+                value: project.title,
+              }))}
+            />
+            <InlineFieldError />
+          </InlineField>
+
+          <InlineField>
+            <InlineFieldLabel>Assignee</InlineFieldLabel>
+            <InlineSelect
+              initialValue={assigneeId}
+              variables={(value) => ({ id, data: { assigneeId: value } })}
+              mutation={taskMutation}
+              strategy={{ mutate: { on: "commit" }, validate: { commit: z.string().nullable() } }}
+              permission={{ task: ["update"] }}
+            >
+              <InlineSelectTrigger>
+                <InlineSelectValue />
+              </InlineSelectTrigger>
+
+              <InlineSelectContent>
+                {employeesQuery.data.map(({ id, user }) => (
+                  <InlineSelectItem key={id} value={id}>
+                    {user.name}
+                  </InlineSelectItem>
+                ))}
+              </InlineSelectContent>
+            </InlineSelect>
+            <InlineFieldError />
+          </InlineField>
+        </DataStackRow>
+
+        <DataStackRow>
+          <InlineField>
+            <InlineFieldLabel>Story point</InlineFieldLabel>
+            <InlineSelect
+              initialValue={storyPoints?.toString() ?? undefined}
+              variables={(value) => ({ id, data: { storyPoints: Number(value) } })}
+              mutation={taskMutation}
+              strategy={{ mutate: { on: "commit" }, validate: { commit: z.string().nullable() } }}
+            >
+              <InlineSelectTrigger className="w-full">
+                <InlineSelectValue placeholder="Kies een storypoint" />
+              </InlineSelectTrigger>
+
+              <InlineSelectContent>
+                {storyPointsConfig.map((value) => (
+                  <InlineSelectItem key={value} value={value.toString()}>
+                    {value}
+                  </InlineSelectItem>
+                ))}
+              </InlineSelectContent>
+            </InlineSelect>
+            <InlineFieldError />
+          </InlineField>
+
+          <InlineField>
+            <InlineFieldLabel>Initiative</InlineFieldLabel>
+            <InlineComboboxDropdown
+              initialValue={initiativeId}
+              variables={(value) => ({ id, data: { initiativeId: value ?? undefined } })}
+              mutation={taskMutation}
+              strategy={{ mutate: { on: "commit" }, validate: { commit: z.string().nullable() } }}
+              items={initiativesQuery.data.map((initiative) => ({
+                id: initiative.id,
+                value: initiative.title,
+              }))}
+            />
+            <InlineFieldError />
+          </InlineField>
+
+          <InlineField>
+            <InlineFieldLabel>Domain</InlineFieldLabel>
+            <InlineComboboxDropdown
+              initialValue={domainId}
+              variables={(value) => ({ id, data: { domainId: value ? value : null } })}
+              mutation={taskMutation}
+              strategy={{ mutate: { on: "commit" }, validate: { commit: z.string().nullable() } }}
+              items={[
+                {
+                  id: "",
+                  value: "Geen domain",
+                },
+                ...domainsQuery.data.map((domain) => ({
+                  id: domain.id,
+                  value: domain.title,
+                })),
+              ]}
+            />
+            <InlineFieldError />
+          </InlineField>
+        </DataStackRow>
+
+        <DataStackRow>
+          <InlineField>
+            <InlineFieldLabel>Description</InlineFieldLabel>
+            <InlineEditor
+              initialValue={description ?? undefined}
+              variables={(value) => ({ id, data: { description: value ?? undefined } })}
+              mutation={taskMutation}
+              strategy={{
+                mutate: { on: "change", debounceMs: 700 },
+                validate: { change: z.any() },
+              }}
+              className="min-h-40"
+            >
+              <EditorMenuFixed />
+              <EditorContent />
+            </InlineEditor>
+            <InlineFieldError />
+          </InlineField>
+        </DataStackRow>
+      </DataStackLayout>
+    </InlineProvider>
+  );
+}

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

@@ -0,0 +1,17 @@
+"use client";
+
+import { notFound } from "next/navigation";
+import { use } from "react";
+
+export default function DetailLayout(props: LayoutProps<"/admin/tasks/[id]">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+  if (!id) notFound();
+
+  return (
+    <div className="space-y-20">
+      {props.dashboard}
+      {props.children}
+    </div>
+  );
+}

package/dist/templates/code/src/app/admin/tasks/[id]/(default)/loading.tsx

@@ -0,0 +1,15 @@
+import { Skeleton } from "@tulip-systems/ui/skeleton";
+
+export default function Loading() {
+  return (
+    <div className="space-y-10">
+      <div className="grid flex-1 @5xl/admin:grid-cols-4 gap-5">
+        {Array.from({ length: 4 }, (_, index) => `task-dashboard-stat-${index + 1}`).map((id) => (
+          <Skeleton key={id} className="h-16 w-full" />
+        ))}
+      </div>
+
+      <Skeleton className="h-56 w-full" />
+    </div>
+  );
+}

package/dist/templates/code/src/app/admin/tasks/[id]/@tracker/default.tsx

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

package/dist/templates/code/src/app/admin/tasks/[id]/@tracker/loading.tsx

@@ -0,0 +1,11 @@
+import { Skeleton } from "@tulip-systems/ui/skeleton";
+
+export default function Loading() {
+  return (
+    <div className="absolute right-0 bottom-0 left-0 z-20 flex gap-3 border-t bg-background p-4">
+      <Skeleton className="h-10 flex-1" />
+      <Skeleton className="h-10 w-28" />
+      <Skeleton className="h-10 w-28" />
+    </div>
+  );
+}

package/dist/templates/code/src/app/admin/tasks/[id]/@tracker/page.tsx

@@ -0,0 +1,52 @@
+"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 {
+  TimeTracker,
+  TimeTrackerButton,
+  TimeTrackerClock,
+  TimeTrackerDescription,
+} from "@/app/admin/time/_components/time-tracker";
+import { orpc } from "@/server/router/client";
+
+export default function TimeTrackerPage(props: PageProps<"/admin/tasks/[id]">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+  if (!id) notFound();
+
+  const currentEmployee = useSuspenseQuery(orpc.employees.getCurrent.queryOptions());
+  const employeeId = currentEmployee.data?.id;
+  if (!employeeId) notFound();
+
+  const taskQuery = useSuspenseQuery(orpc.tasks.getById.queryOptions({ input: { id } }));
+  if (!taskQuery.data) notFound();
+
+  const activeEntryQuery = useSuspenseQuery(
+    orpc.timeEntries.getActive.queryOptions({ input: { employeeId } }),
+  );
+
+  // If the active entry is not for the current task, don't show the tracker
+  if (activeEntryQuery.data && activeEntryQuery.data?.taskId !== id) {
+    return null;
+  }
+
+  return (
+    <Allowed permission={{ time: ["update"] }}>
+      <TimeTracker
+        className="absolute right-0 bottom-0 left-0 border-t"
+        defaultValues={{
+          taskId: taskQuery?.data?.id,
+          projectId: taskQuery.data?.projectId,
+          customerId: taskQuery.data?.project?.customerId,
+        }}
+      >
+        <TimeTrackerDescription />
+        <TimeTrackerClock />
+        <TimeTrackerButton />
+      </TimeTracker>
+    </Allowed>
+  );
+}

package/dist/templates/code/src/app/admin/tasks/[id]/layout.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import {
+  BottomBar,
+  BottomBarLinks,
+  Header,
+  Topbar,
+  TopbarTitle,
+  TopbarTools,
+} from "@tulip-systems/app/components/client";
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import {
+  ResponsiveCommandMenu,
+  ResponsiveCommandMenuLoading,
+} from "@tulip-systems/commands/client";
+import { notFound } from "next/navigation";
+import { Suspense, use } from "react";
+import { orpc } from "@/server/router/client";
+import {
+  taskDeleteCommand,
+  taskUpdateAssigneeCommand,
+  taskUpdateStatusCommand,
+} from "../_config/commands";
+import { TaskStatusBadge } from "../_config/status";
+
+export default function DetailLayout(props: LayoutProps<"/admin/tasks/[id]">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+  if (!id) notFound();
+
+  const { data } = useSuspenseQuery(orpc.tasks.getById.queryOptions({ input: { id } }));
+
+  if (!data) notFound();
+
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle
+            badge={<TaskStatusBadge status={data.status} />}
+            breadcrumbs={[
+              { label: "Projecten", href: "/admin/projects" },
+              { label: data.project.title },
+              { label: "Tasks", href: `/admin/projects/${data.project.id}/tasks` },
+              { label: data.title },
+            ]}
+          />
+
+          <TopbarTools>
+            <Suspense fallback={<ResponsiveCommandMenuLoading />}>
+              <ResponsiveCommandMenu
+                data={data}
+                commands={[taskUpdateStatusCommand, taskUpdateAssigneeCommand, taskDeleteCommand]}
+              />
+            </Suspense>
+          </TopbarTools>
+        </Topbar>
+
+        <BottomBar>
+          <BottomBarLinks
+            paths={[
+              {
+                name: "Dashboard",
+                href: `/admin/tasks/${id}`,
+                segment: "(default)",
+              },
+              {
+                name: "Tijd",
+                href: `/admin/tasks/${id}/time`,
+                segment: "time",
+              },
+            ]}
+          />
+        </BottomBar>
+      </Header>
+
+      <div className="p-content pb-28">
+        {props.children}
+
+        <Allowed permission={{ time: ["view"] }}>{props.tracker}</Allowed>
+      </div>
+    </>
+  );
+}

package/dist/templates/code/src/app/admin/tasks/[id]/loading.tsx

@@ -0,0 +1,15 @@
+import { Skeleton } from "@tulip-systems/ui/skeleton";
+
+export default function Loading() {
+  return (
+    <div className="space-y-10 p-content pb-28">
+      <div className="grid flex-1 @4xl/admin:grid-cols-3 gap-5">
+        {Array.from({ length: 6 }, (_, index) => `task-field-${index + 1}`).map((id) => (
+          <Skeleton key={id} className="h-16 w-full" />
+        ))}
+      </div>
+
+      <Skeleton className="h-48 w-full" />
+    </div>
+  );
+}

package/dist/templates/code/src/app/admin/tasks/[id]/time/(items)/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/tasks/[id]/time/(items)/page.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { InlineCommandMenu } from "@tulip-systems/commands/client";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import { notFound } from "next/navigation";
+import { use } from "react";
+import { TimeEntryPaginationTableProvider } from "@/app/admin/time/_components/tables";
+import { TimeEntryTableToolbar } from "@/app/admin/time/_components/toolbars";
+import { timeEntryInlineTableColumns } from "@/app/admin/time/_config/columns-inline";
+import { timeEntryCreateCommand, timeEntryDeleteCommand } from "@/app/admin/time/_config/commands";
+import { orpc } from "@/server/router/client";
+
+export default function TimePage(props: PageProps<"/admin/tasks/[id]/time">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+  if (!id) notFound();
+
+  const currentEmployee = useSuspenseQuery(orpc.employees.getCurrent.queryOptions());
+  if (!currentEmployee.data) notFound();
+
+  const task = useSuspenseQuery(orpc.tasks.getById.queryOptions({ input: { id } }));
+  if (!task.data) notFound();
+
+  return (
+    <Allowed permission={{ time: ["view"] }}>
+      <TimeEntryPaginationTableProvider
+        columns={timeEntryInlineTableColumns}
+        commands={[timeEntryDeleteCommand]}
+        filterOptions={{
+          constraints: {
+            employeeId: [currentEmployee.data.id],
+            taskId: [id],
+          },
+        }}
+        columnVisibility={{
+          "employee.name": false,
+          "customer.name": false,
+          "project.title": false,
+          "task.title": false,
+        }}
+      >
+        <TimeEntryTableToolbar filtersVisibility={{ customerId: false, projectId: false }}>
+          <InlineCommandMenu
+            data={{
+              taskId: id,
+              projectId: task.data.projectId,
+              customerId: task.data.project.customerId,
+            }}
+            meta={{ fieldVisibility: { customerId: false, projectId: false } }}
+            commands={[timeEntryCreateCommand]}
+          />
+        </TimeEntryTableToolbar>
+
+        <DataTable />
+      </TimeEntryPaginationTableProvider>
+    </Allowed>
+  );
+}

package/dist/templates/code/src/app/admin/tasks/[id]/time/@statistics/default.tsx

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

package/dist/templates/code/src/app/admin/tasks/[id]/time/@statistics/loading.tsx

@@ -0,0 +1,11 @@
+import { Skeleton } from "@tulip-systems/ui/skeleton";
+
+export default function Loading() {
+  return (
+    <div className="grid @4xl/admin:grid-cols-3 grid-cols-1 gap-5">
+      {Array.from({ length: 3 }, (_, index) => `task-time-stat-${index + 1}`).map((id) => (
+        <Skeleton key={id} className="h-24 w-full" />
+      ))}
+    </div>
+  );
+}

package/dist/templates/code/src/app/admin/tasks/[id]/time/@statistics/page.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { formatDuration } from "@tulip-systems/core";
+import { Card, CardHeader, CardTitle } from "@tulip-systems/ui/card";
+import { cn } from "@tulip-systems/ui/cn";
+import { RadiusIcon, TimerIcon } from "lucide-react";
+import { notFound } from "next/navigation";
+import { use } from "react";
+import { orpc } from "@/server/router/client";
+
+export default function Page(props: PageProps<"/admin/tasks/[id]/time">) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+  if (!id) notFound();
+
+  const { data } = useSuspenseQuery(orpc.tasks.getStats.queryOptions({ input: { id } }));
+  if (!data) notFound();
+
+  const hoursPerStoryPointTextColor =
+    data.hoursPerStoryPoint == null
+      ? "text-muted-foreground"
+      : data.hoursPerStoryPoint <= 2
+        ? "text-green-500"
+        : data.hoursPerStoryPoint <= 4
+          ? "text-yellow-500"
+          : "text-red-500";
+
+  return (
+    <div className="mb-5 grid @4xl/admin:grid-cols-3 grid-cols-1 gap-5">
+      <Card>
+        <CardHeader>
+          <div className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="font-medium text-xs">Totale werkuren</CardTitle>
+            <TimerIcon className="h-4 w-4 text-muted-foreground" />
+          </div>
+          <div className="font-bold text-xl">{formatDuration(data.totalSeconds)}</div>
+        </CardHeader>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <div className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="font-medium text-xs">Werkuren per storypoint</CardTitle>
+            <RadiusIcon className="h-4 w-4 text-muted-foreground" />
+          </div>
+          <div className={cn("font-bold text-xl", hoursPerStoryPointTextColor)}>
+            {data.hoursPerStoryPoint != null ? `${data.hoursPerStoryPoint} u / SP` : "N/A"}
+          </div>
+        </CardHeader>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <div className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="font-medium text-xs">Storypoints</CardTitle>
+            <RadiusIcon className="h-4 w-4 text-muted-foreground" />
+          </div>
+          <div className="font-bold text-xl">{data.storyPoints ?? "N/A"}</div>
+        </CardHeader>
+      </Card>
+    </div>
+  );
+}

package/dist/templates/code/src/app/admin/tasks/[id]/time/layout.tsx

@@ -0,0 +1,11 @@
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { TableLayout } from "@tulip-systems/data-tables";
+
+export default function ListLayout(props: LayoutProps<"/admin/tasks/[id]/time">) {
+  return (
+    <Allowed permission={{ time: ["view"] }}>
+      {props.statistics}
+      <TableLayout>{props.children}</TableLayout>
+    </Allowed>
+  );
+}