@tulip-systems/create-app 0.11.1

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

@@ -0,0 +1,177 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { EditorContent, EditorMenuBubble } from "@tulip-systems/editor/client";
+import {
+  InlineEditor,
+  InlineField,
+  InlineFieldError,
+  InlineStringInput,
+} from "@tulip-systems/inline/client";
+import { DataList, DataListItem, DataListTitle, DataListValue } from "@tulip-systems/ui/data-list";
+import { notFound } from "next/navigation";
+import { use } from "react";
+import { orpc } from "@/server/router/client";
+import { updateProspectSchema } from "../../../_lib/validators";
+
+export default function ProspectDashboardPage(props: { params: Promise<{ id: string }> }) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+
+  const { data } = useSuspenseQuery(orpc.prospects.getById.queryOptions({ input: { id } }));
+  if (!data) notFound();
+
+  const { name, tradeName, vat, website, email, phone, source, notes } = data;
+
+  return (
+    <DataList>
+      <DataListItem>
+        <DataListTitle>Naam</DataListTitle>
+        <DataListValue>
+          <InlineField>
+            <InlineStringInput
+              initialValue={name}
+              variables={(value) => ({ id, data: { name: value } })}
+              mutation={orpc.prospects.update.mutationOptions()}
+              strategy={{
+                mutate: { on: "blur" },
+                validate: { blur: updateProspectSchema.shape.name },
+              }}
+            />
+            <InlineFieldError />
+          </InlineField>
+        </DataListValue>
+      </DataListItem>
+
+      <DataListItem>
+        <DataListTitle>Handelsnaam</DataListTitle>
+        <DataListValue>
+          <InlineField>
+            <InlineStringInput
+              initialValue={tradeName ?? undefined}
+              variables={(value) => ({ id, data: { tradeName: value } })}
+              mutation={orpc.prospects.update.mutationOptions()}
+              strategy={{
+                mutate: { on: "blur" },
+                validate: { blur: updateProspectSchema.shape.tradeName },
+              }}
+            />
+            <InlineFieldError />
+          </InlineField>
+        </DataListValue>
+      </DataListItem>
+
+      <DataListItem>
+        <DataListTitle>BTW-nummer</DataListTitle>
+        <DataListValue>
+          <InlineField>
+            <InlineStringInput
+              initialValue={vat ?? undefined}
+              variables={(value) => ({ id, data: { vat: value } })}
+              mutation={orpc.prospects.update.mutationOptions()}
+              strategy={{
+                mutate: { on: "blur" },
+                validate: { blur: updateProspectSchema.shape.vat },
+              }}
+            />
+            <InlineFieldError />
+          </InlineField>
+        </DataListValue>
+      </DataListItem>
+
+      <DataListItem>
+        <DataListTitle>Email</DataListTitle>
+        <DataListValue>
+          <InlineField>
+            <InlineStringInput
+              initialValue={email ?? undefined}
+              variables={(value) => ({ id, data: { email: value } })}
+              mutation={orpc.prospects.update.mutationOptions()}
+              strategy={{
+                mutate: { on: "blur" },
+                validate: { blur: updateProspectSchema.shape.email },
+              }}
+            />
+            <InlineFieldError />
+          </InlineField>
+        </DataListValue>
+      </DataListItem>
+
+      <DataListItem>
+        <DataListTitle>Website</DataListTitle>
+        <DataListValue>
+          <InlineField>
+            <InlineStringInput
+              initialValue={website ?? undefined}
+              variables={(value) => ({ id, data: { website: value } })}
+              mutation={orpc.prospects.update.mutationOptions()}
+              strategy={{
+                mutate: { on: "blur" },
+                validate: { blur: updateProspectSchema.shape.website },
+              }}
+            />
+            <InlineFieldError />
+          </InlineField>
+        </DataListValue>
+      </DataListItem>
+
+      <DataListItem>
+        <DataListTitle>Phone</DataListTitle>
+        <DataListValue>
+          <InlineField>
+            <InlineStringInput
+              initialValue={phone ?? undefined}
+              variables={(value) => ({ id, data: { phone: value } })}
+              mutation={orpc.prospects.update.mutationOptions()}
+              strategy={{
+                mutate: { on: "blur" },
+                validate: { blur: updateProspectSchema.shape.phone },
+              }}
+            />
+            <InlineFieldError />
+          </InlineField>
+        </DataListValue>
+      </DataListItem>
+
+      <DataListItem>
+        <DataListTitle>Bron</DataListTitle>
+        <DataListValue>
+          <InlineField>
+            <InlineStringInput
+              initialValue={source ?? undefined}
+              variables={(value) => ({ id, data: { source: value } })}
+              mutation={orpc.prospects.update.mutationOptions()}
+              strategy={{
+                mutate: { on: "blur" },
+                validate: { blur: updateProspectSchema.shape.source },
+              }}
+            />
+            <InlineFieldError />
+          </InlineField>
+        </DataListValue>
+      </DataListItem>
+
+      <DataListItem>
+        <DataListTitle className="self-start">Notitie</DataListTitle>
+        <DataListValue>
+          <InlineField>
+            <InlineEditor
+              initialValue={notes ?? undefined}
+              variables={(value) => ({ id, data: { notes: value ?? undefined } })}
+              mutation={orpc.prospects.update.mutationOptions()}
+              strategy={{
+                mutate: { on: "change", debounceMs: 700 },
+                validate: { change: updateProspectSchema.shape.notes },
+              }}
+              className="min-h-40"
+            >
+              <EditorMenuBubble />
+              <EditorContent />
+            </InlineEditor>
+            <InlineFieldError />
+          </InlineField>
+        </DataListValue>
+      </DataListItem>
+    </DataList>
+  );
+}

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

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

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

@@ -0,0 +1,39 @@
+import { Skeleton } from "@tulip-systems/ui/skeleton";
+
+export default function Loading() {
+  return (
+    <div className="space-y-20 p-content">
+      <div className="space-y-6">
+        {Array.from({ length: 7 }, (_, index) => `prospect-data-list-row-${index + 1}`).map(
+          (id) => (
+            <div
+              key={id}
+              className="grid @4xl/admin:grid-cols-[12rem_minmax(0,1fr)] @4xl/admin:items-center gap-3"
+            >
+              <Skeleton className="h-4 w-28" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+          ),
+        )}
+
+        <Skeleton className="h-40 w-full" />
+      </div>
+
+      <div className="space-y-6">
+        {Array.from({ length: 2 }, (_, index) => `prospect-secondary-row-${index + 1}`).map(
+          (id) => (
+            <div
+              key={id}
+              className="grid @4xl/admin:grid-cols-[12rem_minmax(0,1fr)] @4xl/admin:items-center gap-3"
+            >
+              <Skeleton className="h-4 w-28" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+          ),
+        )}
+
+        <Skeleton className="h-40 w-full" />
+      </div>
+    </div>
+  );
+}

package/dist/templates/code/src/app/admin/prospects/[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,
+  ResponsiveCommandMenuLoading,
+} from "@tulip-systems/commands/client";
+import { notFound } from "next/navigation";
+import { type PropsWithChildren, Suspense, use } from "react";
+import { orpc } from "@/server/router/client";
+import {
+  prospectConvertToCustomerCommand,
+  prospectDeleteCommand,
+  prospectSetStatusCommand,
+} from "../_config/commands";
+import { ProspectStatusBadge } from "../_config/status";
+
+export default function ProspectDetailLayout(
+  props: PropsWithChildren<{ params: Promise<{ id: string }> }>,
+) {
+  const params = use(props.params);
+  const id = params.id?.toString();
+  const { data } = useSuspenseQuery(orpc.prospects.getById.queryOptions({ input: { id } }));
+  if (!data) notFound();
+
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle
+            badge={<ProspectStatusBadge status={data.status} />}
+            breadcrumbs={[{ label: "Prospects", href: "/admin/prospects" }, { label: data.name }]}
+          />
+          <TopbarTools>
+            <Suspense fallback={<ResponsiveCommandMenuLoading />}>
+              <ResponsiveCommandMenu
+                data={data}
+                commands={[
+                  prospectSetStatusCommand,
+                  prospectConvertToCustomerCommand,
+                  prospectDeleteCommand,
+                ]}
+              />
+            </Suspense>
+          </TopbarTools>
+        </Topbar>
+        <BottomBar>
+          <BottomBarLinks
+            paths={[
+              {
+                name: "Overzicht",
+                href: `/admin/prospects/${id}`,
+                segment: "(default)",
+                permission: { prospect: ["view"] },
+              },
+              {
+                name: "Opportunities",
+                href: `/admin/prospects/${id}/opportunities`,
+                segment: "opportunities",
+                permission: { opportunity: ["view"] },
+              },
+              {
+                name: "Activities",
+                href: `/admin/prospects/${id}/activities`,
+                segment: "activities",
+                permission: { salesActivity: ["view"] },
+              },
+            ]}
+          />
+        </BottomBar>
+      </Header>
+      {props.children}
+    </>
+  );
+}

package/dist/templates/code/src/app/admin/prospects/[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">
+      <div className="grid flex-1 @4xl/admin:grid-cols-3 gap-5">
+        {Array.from({ length: 6 }, (_, index) => `prospect-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/prospects/_components/create-command.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import type { DefaultError, MutationOptions } from "@tanstack/react-query";
+import {
+  CommandFormDialog,
+  CommandFormDialogCancel,
+  CommandFormDialogContent,
+  CommandFormDialogFields,
+  CommandFormDialogFooter,
+  CommandFormDialogHeader,
+  CommandFormDialogSubmit,
+  CommandFormDialogTitle,
+  CommandFormDialogTrigger,
+} from "@tulip-systems/commands/client";
+import { Input } from "@tulip-systems/ui/input";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@tulip-systems/ui/react-hook-form";
+import type React from "react";
+import { useForm } from "react-hook-form";
+import {
+  type CreateProspectInput,
+  type CreateProspectSchema,
+  createProspectSchema,
+} from "../_lib/validators";
+
+type CreateProspectCommandProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+> = {
+  variables: (values: CreateProspectSchema) => TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+  defaultValues?: Partial<CreateProspectInput>;
+  children?: React.ReactNode;
+};
+
+export function CreateProspectCommand<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+>({
+  variables,
+  mutation,
+  defaultValues,
+  children,
+}: CreateProspectCommandProps<TData, TError, TVariables, TOnMutateResult>) {
+  const form = useForm<CreateProspectInput>({
+    resolver: standardSchemaResolver(createProspectSchema),
+    defaultValues: { status: "active", ...defaultValues },
+  });
+
+  return (
+    <CommandFormDialog>
+      {children}
+
+      <Form {...form}>
+        <CommandFormDialogContent variables={variables} mutation={mutation}>
+          <CommandFormDialogHeader>
+            <CommandFormDialogTitle>Prospect Toevoegen</CommandFormDialogTitle>
+          </CommandFormDialogHeader>
+          <CommandFormDialogFields>
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Naam</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="source"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Bron</FormLabel>
+                  <FormControl>
+                    <Input
+                      {...field}
+                      value={field.value ?? ""}
+                      placeholder="Website, referral, LinkedIn..."
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CommandFormDialogFields>
+          <CommandFormDialogFooter>
+            <CommandFormDialogCancel>Annuleren</CommandFormDialogCancel>
+            <CommandFormDialogSubmit>Toevoegen</CommandFormDialogSubmit>
+          </CommandFormDialogFooter>
+        </CommandFormDialogContent>
+      </Form>
+    </CommandFormDialog>
+  );
+}
+
+export const CreateProspectCommandTrigger = CommandFormDialogTrigger;

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

@@ -0,0 +1,64 @@
+"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 { useFilters, usePagination, useSorting } from "@tulip-systems/query/client";
+import { type PropsWithChildren, useDeferredValue, useMemo } from "react";
+import { orpc } from "@/server/router/client";
+import type { ProspectColumn } from "../_config/columns-data";
+import { prospectDeleteCommand, prospectSetStatusCommand } from "../_config/commands";
+import { type ProspectFilters, prospectsFilters } from "../_config/filters";
+import { prospectTableSorts } from "../_config/sorting";
+
+type ProspectTableProviderProps = PropsWithChildren<{
+  columns: TableColumnDef<ProspectColumn>[];
+  commands?: CommandFor<ProspectColumn[]>[];
+  where?: ProspectFilters;
+  columnVisibility?: VisibilityState;
+}>;
+
+export const prospectTableCommands = [prospectSetStatusCommand, prospectDeleteCommand];
+
+export function ProspectPaginationTableProvider({
+  columns,
+  commands,
+  where,
+  columnVisibility,
+  children,
+}: ProspectTableProviderProps) {
+  const pagination = usePagination(offsetPagination);
+  const filterOptions = where ? { constraints: where } : undefined;
+  const filtering = useFilters(prospectsFilters, filterOptions);
+  const sorting = useSorting(prospectTableSorts);
+
+  const input = useDeferredValue({
+    pagination: pagination.input,
+    filters: filtering.input,
+    sorts: sorting.input,
+  });
+
+  const response = useSuspenseQuery(orpc.prospects.list.queryOptions({ input }));
+  const queryData = useMemo(() => response.data.data ?? [], [response.data.data]);
+
+  const strategy = usePaginationStrategy({ pagination, total: response.data.pagination.total });
+
+  const config = createTableConfig<ProspectColumn>({
+    queryData: queryData as ProspectColumn[],
+    getRowId: (row) => row.id,
+    columns,
+    strategy,
+    filtering,
+    sorting,
+    commands,
+    columnVisibility,
+  });
+
+  return <TableConfigProvider config={config}>{children}</TableConfigProvider>;
+}

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

@@ -0,0 +1,59 @@
+"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, FilterSearch } from "@tulip-systems/query/client";
+import { type PropsWithChildren, Suspense, useDeferredValue } from "react";
+import { orpc } from "@/server/router/client";
+import { prospectsFilters } from "../_config/filters";
+import { prospectStatusConfig } from "../_config/status";
+
+const prospectsFiltersDescriptors = resolveFilterDescriptors(prospectsFilters);
+
+const filtersVisibilityConfig = [
+  "search",
+  "source",
+  "status",
+] satisfies (keyof typeof prospectsFiltersDescriptors)[];
+
+export function ProspectTableToolbar(
+  props: PropsWithChildren<{
+    filtersVisibility?: Partial<Record<(typeof filtersVisibilityConfig)[number], boolean>>;
+  }>,
+) {
+  const visibilityState = parseFiltersVisibility(filtersVisibilityConfig, props.filtersVisibility);
+
+  return (
+    <TableToolbar>
+      <TableToolbarList>
+        {visibilityState.search && (
+          <FilterSearch placeholder="Zoeken..." filter={prospectsFiltersDescriptors.search} />
+        )}
+
+        <Suspense>
+          {visibilityState.source && <ProspectSourceFilter />}
+
+          {visibilityState.status && (
+            <FilterCombobox
+              title="Status"
+              filter={prospectsFiltersDescriptors.status}
+              options={prospectStatusConfig}
+            />
+          )}
+        </Suspense>
+      </TableToolbarList>
+
+      <TableToolbarList>{props.children}</TableToolbarList>
+    </TableToolbar>
+  );
+}
+
+export function ProspectSourceFilter() {
+  const table = useTableConfigContext();
+  const input = useDeferredValue({ filters: table.filtering?.input ?? {} });
+  const { data } = useSuspenseQuery(orpc.prospects.filterSources.queryOptions({ input }));
+
+  return <FilterCombobox title="Bron" filter={prospectsFiltersDescriptors.source} options={data} />;
+}

package/dist/templates/code/src/app/admin/prospects/_config/columns-data.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { TableCell, type TableColumnDef, TableColumnHeader } from "@tulip-systems/data-tables";
+import {
+  createTableSelectCell,
+  TableStatusCell,
+  TableTextCell,
+} from "@tulip-systems/data-tables/client";
+import Link from "next/link";
+import type { Customer } from "../../customers/_lib/validators";
+import type { Prospect } from "../_lib/validators";
+import { ProspectStatusField } from "./status";
+
+export type ProspectColumn = Prospect & { customer?: Customer | null };
+
+export const prospectColumns: TableColumnDef<ProspectColumn>[] = [
+  createTableSelectCell(),
+  {
+    id: "name",
+    accessorKey: "name",
+    header: ({ column }) => <TableColumnHeader column={column} title="Naam" />,
+    cell: ({ row }) => (
+      <TableCell>
+        <Link href={`/admin/prospects/${row.original.id}`} className="hover:underline">
+          {row.getValue("name")}
+        </Link>
+      </TableCell>
+    ),
+  },
+  {
+    id: "status",
+    accessorKey: "status",
+    header: ({ column }) => <TableColumnHeader column={column} title="Status" />,
+    cell: ({ row }) => (
+      <TableStatusCell>
+        <ProspectStatusField status={row.getValue("status")} />
+      </TableStatusCell>
+    ),
+  },
+  {
+    id: "email",
+    accessorKey: "email",
+    header: ({ column }) => <TableColumnHeader column={column} title="Email" />,
+    cell: ({ row }) => <TableTextCell>{row.getValue("email")}</TableTextCell>,
+  },
+  {
+    id: "phone",
+    accessorKey: "phone",
+    header: ({ column }) => <TableColumnHeader column={column} title="Telefoon" />,
+    cell: ({ row }) => <TableTextCell>{row.getValue("phone")}</TableTextCell>,
+  },
+  {
+    id: "source",
+    accessorKey: "source",
+    header: ({ column }) => <TableColumnHeader column={column} title="Bron" />,
+    cell: ({ row }) => <TableTextCell>{row.getValue("source")}</TableTextCell>,
+  },
+];