@tulip-systems/create-app 0.11.1

package/dist/templates/spark/src/app/admin/(dashboard)/_components/yearly-budget-bar-chart.client.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Button } from "@tulip-systems/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@tulip-systems/ui/card";
+import { Popover, PopoverContent, PopoverTrigger } from "@tulip-systems/ui/popover";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@tulip-systems/ui/recharts";
+import { ChevronDownIcon } from "lucide-react";
+import { parseAsInteger, useQueryState } from "nuqs";
+import { useMemo, useState } from "react";
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import { orpc } from "@/server/router/client";
+import { DateYearPicker } from "./date-year-picker";
+
+const chartConfig = {
+  budget: {
+    label: "Budget",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig;
+
+const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+export function YearlyBudgetBarChart() {
+  const [open, setOpen] = useState(false);
+  const [selectedYear, setSelectedYear] = useQueryState(
+    "year",
+    parseAsInteger.withDefault(new Date().getFullYear()),
+  );
+  const { data: budgetData } = useSuspenseQuery(
+    orpc.projects.getBudgetByMonth.queryOptions({ input: { year: selectedYear } }),
+  );
+
+  const completeChartData = useMemo(() => {
+    const budgetMap = new Map(budgetData.map((item) => [item.month.trim(), item.budget]));
+
+    return MONTHS.map((month) => ({
+      month,
+      budget: budgetMap.get(month) || 0,
+    }));
+  }, [budgetData]);
+
+  const formatCurrency = (value: number) => {
+    return new Intl.NumberFormat("nl-BE", {
+      style: "currency",
+      currency: "EUR",
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(value);
+  };
+
+  const handleYearChange = (date: Date | undefined) => {
+    if (date) {
+      setSelectedYear(date.getFullYear());
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader className="flex w-full flex-row flex-wrap items-center justify-between">
+        <CardTitle>Budget {selectedYear}</CardTitle>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button variant="outline" className="w-36 justify-between font-normal">
+              {selectedYear ? selectedYear : "Selecteer jaar"}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="mx-10 w-auto overflow-hidden p-0" align="start">
+            <DateYearPicker year={new Date(selectedYear, 0, 1)} onYearChange={handleYearChange} />
+          </PopoverContent>
+        </Popover>
+      </CardHeader>
+      <CardContent className="px-2">
+        <div className="h-80 w-full">
+          {budgetData.length > 0 ? (
+            <ChartContainer config={chartConfig} className="h-80 w-full">
+              <BarChart accessibilityLayer data={completeChartData}>
+                <CartesianGrid vertical={false} />
+                <XAxis
+                  dataKey="month"
+                  tickLine={false}
+                  tickMargin={10}
+                  axisLine={false}
+                  tickFormatter={(value) => value.slice(0, 3)}
+                  interval={0}
+                  angle={-45}
+                  textAnchor="end"
+                  height={60}
+                  className="md:angle-0 text-xs md:text-sm"
+                />
+                <YAxis
+                  tickLine={false}
+                  axisLine={false}
+                  tickFormatter={(value) => `€${(value / 1000).toFixed(0)}k`}
+                />
+                <ChartTooltip
+                  content={
+                    <ChartTooltipContent
+                      indicator="dashed"
+                      formatter={(value) => formatCurrency(Number(value))}
+                    />
+                  }
+                />
+                <Bar dataKey="budget" fill="var(--color-budget)" radius={4} />
+              </BarChart>
+            </ChartContainer>
+          ) : (
+            <div className="flex h-full w-full items-center justify-center">
+              <p className="text-muted-foreground">{selectedYear} heeft nog geen budget</p>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/dist/templates/spark/src/app/admin/(dashboard)/layout.tsx

@@ -0,0 +1,16 @@
+import { Header, Topbar, TopbarTitle } from "@tulip-systems/app/components/client";
+import type { PropsWithChildren } from "react";
+
+export default function Layout(props: PropsWithChildren) {
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle breadcrumbs={[{ label: "Dashboard" }]} />
+        </Topbar>
+      </Header>
+
+      {props.children}
+    </>
+  );
+}

package/dist/templates/spark/src/app/admin/(dashboard)/loading.tsx

@@ -0,0 +1,9 @@
+import { Skeleton } from "@tulip-systems/ui/skeleton";
+
+export default function Loading() {
+  return (
+    <div className="space-y-5 p-content">
+      <Skeleton className="h-92 w-full" />
+    </div>
+  );
+}

package/dist/templates/spark/src/app/admin/(dashboard)/page.tsx

@@ -0,0 +1,12 @@
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { YearlyBudgetBarChart } from "./_components/yearly-budget-bar-chart.client";
+
+export default function Page() {
+  return (
+    <div className="space-y-5 p-content">
+      <Allowed permission={{ dashboard: ["view.budget"] }}>
+        <YearlyBudgetBarChart />
+      </Allowed>
+    </div>
+  );
+}

package/dist/templates/spark/src/app/admin/addresses/_components/create-command.tsx

@@ -0,0 +1,202 @@
+"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 { ComboboxDropdown } from "@tulip-systems/ui/combobox-dropdown";
+import { Input } from "@tulip-systems/ui/input";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@tulip-systems/ui/react-hook-form";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@tulip-systems/ui/select";
+import type React from "react";
+import { useForm } from "react-hook-form";
+import {
+  ADDRESS_TYPES,
+  countriesComboboxOptions,
+  DEFAULT_ADDRESS_TYPE,
+  DEFAULT_COUNTRY_CODE,
+} from "../_lib/constants";
+import {
+  type CreateAddressInput,
+  type CreateAddressSchema,
+  createAddressSchema,
+} from "../_lib/validators";
+
+export type AddressCreateCommandProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+> = {
+  variables: (values: CreateAddressSchema) => TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+  defaultValues?: Partial<CreateAddressInput>;
+  children?: React.ReactNode;
+};
+
+export function AddressCreateCommand<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+>({
+  variables,
+  mutation,
+  defaultValues,
+  children,
+}: AddressCreateCommandProps<TData, TError, TVariables, TOnMutateResult>) {
+  const form = useForm<CreateAddressInput>({
+    resolver: standardSchemaResolver(createAddressSchema),
+    defaultValues: {
+      countryCode: DEFAULT_COUNTRY_CODE,
+      type: DEFAULT_ADDRESS_TYPE,
+      ...defaultValues,
+    },
+  });
+
+  return (
+    <CommandFormDialog>
+      {children}
+
+      <Form {...form}>
+        <CommandFormDialogContent variables={variables} mutation={mutation}>
+          <CommandFormDialogHeader>
+            <CommandFormDialogTitle>Address Toevoegen</CommandFormDialogTitle>
+          </CommandFormDialogHeader>
+
+          <CommandFormDialogFields>
+            <FormField
+              control={form.control}
+              name="type"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Type</FormLabel>
+                  <Select onValueChange={field.onChange} defaultValue={field.value}>
+                    <FormControl>
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Kies een type" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {ADDRESS_TYPES.map((type) => (
+                        <SelectItem key={type.id} value={type.id}>
+                          {type.value}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="street"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Straat</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+              <FormField
+                control={form.control}
+                name="city"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Stad</FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="postalCode"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Postcode</FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="countryCode"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Land</FormLabel>
+                  <FormControl>
+                    <ComboboxDropdown
+                      selectedItem={countriesComboboxOptions.find(({ id }) => id === field.value)}
+                      onSelect={(item) => field.onChange(item.id)}
+                      items={countriesComboboxOptions}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Titel</FormLabel>
+                  <FormControl>
+                    <Input {...field} value={field.value ?? ""} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CommandFormDialogFields>
+
+          <CommandFormDialogFooter>
+            <CommandFormDialogCancel>Annuleren</CommandFormDialogCancel>
+            <CommandFormDialogSubmit>Opslaan</CommandFormDialogSubmit>
+          </CommandFormDialogFooter>
+        </CommandFormDialogContent>
+      </Form>
+    </CommandFormDialog>
+  );
+}
+
+export const AddressCreateCommandTrigger = CommandFormDialogTrigger;

package/dist/templates/spark/src/app/admin/addresses/_components/grid.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import {
+  ContextCommandMenu,
+  ContextCommandMenuContent,
+  ContextCommandMenuTrigger,
+  DropdownCommandMenu,
+} from "@tulip-systems/commands/client";
+import { Badge } from "@tulip-systems/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@tulip-systems/ui/card";
+import { cn } from "@tulip-systems/ui/cn";
+import { EmptyPage, EmptyPageTitle } from "@tulip-systems/ui/empty";
+import type { ComponentProps } from "react";
+import { addressDeleteCommand, addressUpdateCommand } from "../_config/commands";
+import { COUNTRIES } from "../_lib/constants";
+import type { Address } from "../_lib/validators";
+
+export function AddressGrid({
+  addresses,
+  className,
+  ...props
+}: { addresses: Address[] } & ComponentProps<"div">) {
+  if (!addresses.length) {
+    return (
+      <EmptyPage className="min-h-52">
+        <EmptyPageTitle>Geen adressen aangemaakt</EmptyPageTitle>
+      </EmptyPage>
+    );
+  }
+
+  return (
+    <div
+      {...props}
+      className={cn(
+        "grid grid-cols-1 gap-5 md:grid-cols-[repeat(auto-fill,minmax(30rem,1fr))]",
+        className,
+      )}
+    >
+      {addresses.map((address, index) => (
+        <ContextCommandMenu key={address.id}>
+          <ContextCommandMenuTrigger asChild>
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center justify-between gap-2 text-lg">
+                  <span className="flex items-center gap-2">
+                    {address.title || `Adres ${index + 1}`}
+                    <Badge variant="outline">{address.type}</Badge>
+                  </span>
+                  <DropdownCommandMenu
+                    data={address}
+                    commands={[addressUpdateCommand, addressDeleteCommand]}
+                  />
+                </CardTitle>
+              </CardHeader>
+
+              <CardContent className="space-y-2 text-sm">
+                <div>{address.street}</div>
+                <div>
+                  {address.postalCode}, {address.city}
+                </div>
+                <div>{COUNTRIES.find((country) => country.code === address.countryCode)?.name}</div>
+              </CardContent>
+            </Card>
+          </ContextCommandMenuTrigger>
+
+          <ContextCommandMenuContent
+            data={address}
+            commands={[addressUpdateCommand, addressDeleteCommand]}
+            className="w-[300px]"
+          />
+        </ContextCommandMenu>
+      ))}
+    </div>
+  );
+}

package/dist/templates/spark/src/app/admin/addresses/_config/commands.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { commandBuilder } from "@tulip-systems/commands";
+import { CommandLabel, DeleteCommand } from "@tulip-systems/commands/client";
+import { toast } from "@tulip-systems/ui/sonner";
+import { Icons } from "@/components/icons";
+import { orpc } from "@/server/router/client";
+import { AddressCreateCommand, AddressCreateCommandTrigger } from "../_components/create-command";
+
+export const addressUpdateCommand = commandBuilder
+  .$type<{ id: string }>()
+
+  .permission({ address: ["update"] })
+  .render(({ data }) => (
+    <AddressCreateCommand
+      defaultValues={data as never}
+      variables={(values) => ({ ...values, id: data.id })}
+      mutation={orpc.addresses.update.mutationOptions({
+        onSuccess: () => toast.success("Adres succesvol gewijzigd"),
+      })}
+    >
+      <AddressCreateCommandTrigger label="Wijzigen">
+        <Icons.edit />
+        <CommandLabel />
+      </AddressCreateCommandTrigger>
+    </AddressCreateCommand>
+  ));
+export const addressDeleteCommand = commandBuilder
+  .$type<{ id: string }>()
+
+  .permission({ address: ["delete"] })
+  .render(({ data }) => (
+    <DeleteCommand
+      variables={{ ids: [data.id] }}
+      mutation={orpc.addresses.delete.mutationOptions({
+        onSuccess: () => toast.success("Adres succesvol verwijderd"),
+      })}
+    />
+  ));

package/dist/templates/spark/src/app/admin/addresses/_lib/constants.ts

@@ -0,0 +1,38 @@
+/**
+ * Countries
+ */
+export const COUNTRIES = [
+  { name: "België", code: "BE" },
+  { name: "Nederland", code: "NL" },
+  { name: "Frankrijk", code: "FR" },
+  { name: "Duitsland", code: "DE" },
+  { name: "Luxemburg", code: "LU" },
+] as const;
+
+export const DEFAULT_COUNTRY_CODE = "BE";
+
+export const COUNTRY_CODES = COUNTRIES.flatMap((country) => country.code);
+
+export type CountryCode = (typeof COUNTRY_CODES)[number];
+
+export const countriesComboboxOptions = COUNTRIES.map((country) => ({
+  id: country.code,
+  value: country.name,
+}));
+
+/**
+ * Address types
+ */
+
+export const ADDRESS_TYPES = [
+  { value: "Standaard", id: "default" },
+  { value: "Facturatie", id: "billing" },
+  { value: "Verzending", id: "shipping" },
+  { value: "Overig", id: "other" },
+] as const;
+
+export const DEFAULT_ADDRESS_TYPE = "default";
+
+export type AddressType = (typeof ADDRESS_TYPES)[number];
+
+export const addressTypesComboboxOptions = ADDRESS_TYPES;

package/dist/templates/spark/src/app/admin/addresses/_lib/helpers.server.ts

@@ -0,0 +1,31 @@
+import { ORPCError } from "@orpc/server";
+import type { ExtractTablesWithRelations } from "drizzle-orm";
+import type { NodePgDatabase, NodePgQueryResultHKT } from "drizzle-orm/node-postgres";
+import type { PgTransaction } from "drizzle-orm/pg-core";
+import { addresses } from "./schema";
+import type { Address, CreateAddressSchema } from "./validators";
+
+/**
+ * Create contact
+ */
+export async function createAddress<TSchema extends Record<string, unknown>>(
+  opts: { context: { db: NodePgDatabase<TSchema> }; input: CreateAddressSchema },
+  afterUpdate?: (params: {
+    data: Address;
+    tx: PgTransaction<NodePgQueryResultHKT, TSchema, ExtractTablesWithRelations<TSchema>>;
+  }) => Promise<void>,
+) {
+  return await opts.context.db.transaction(async (tx) => {
+    const [data] = await tx.insert(addresses).values(opts.input).returning();
+
+    if (!data) {
+      throw new ORPCError("INTERNAL_SERVER_ERROR", {
+        message: "Adres kon niet worden toegevoegd",
+      });
+    }
+
+    await afterUpdate?.({ tx, data });
+
+    return data;
+  });
+}

package/dist/templates/spark/src/app/admin/addresses/_lib/helpers.ts

@@ -0,0 +1,5 @@
+import type { Address } from "./validators";
+
+export function formatAddress(address: Address) {
+  return `${address.street}, ${address.postalCode} ${address.city}`;
+}

package/dist/templates/spark/src/app/admin/addresses/_lib/router.ts

@@ -0,0 +1,29 @@
+import "server-cli-only";
+
+import { bulkActionSchema } from "@tulip-systems/query";
+import { eq, inArray } from "drizzle-orm";
+import { revalidatePath } from "next/cache";
+import z from "zod";
+import { addresses } from "@/server/db/schema";
+import { permissionMiddleware } from "@/server/router/middleware";
+import { protectedProcedure } from "@/server/router/procedures";
+import { createAddressSchema } from "./validators";
+
+export const addressesRouter = {
+  update: protectedProcedure
+    .use(permissionMiddleware({ address: ["update"] }))
+    .input(createAddressSchema.extend({ id: z.string() }))
+    .handler(async ({ context, input }) => {
+      await context.db.update(addresses).set(input).where(eq(addresses.id, input.id));
+
+      revalidatePath("/suppliers", "page");
+    }),
+  delete: protectedProcedure
+    .use(permissionMiddleware({ address: ["delete"] }))
+    .input(bulkActionSchema)
+    .handler(async ({ context, input: { ids } }) => {
+      await context.db.delete(addresses).where(inArray(addresses.id, ids));
+
+      revalidatePath("/suppliers", "page");
+    }),
+};

package/dist/templates/spark/src/app/admin/addresses/_lib/schema.ts

@@ -0,0 +1,13 @@
+import { pgTable } from "drizzle-orm/pg-core";
+import { baseColumns } from "@/server/db/helpers";
+import { type AddressType, type CountryCode, DEFAULT_ADDRESS_TYPE } from "./constants";
+
+export const addresses = pgTable("addresses", (t) => ({
+  ...baseColumns,
+  type: t.varchar().$type<AddressType["id"]>().default(DEFAULT_ADDRESS_TYPE).notNull(),
+  title: t.text(),
+  street: t.text().notNull(),
+  city: t.text().notNull(),
+  postalCode: t.varchar({ length: 10 }).notNull(),
+  countryCode: t.varchar({ length: 2 }).$type<CountryCode>().notNull(),
+}));

package/dist/templates/spark/src/app/admin/addresses/_lib/validators.ts

@@ -0,0 +1,33 @@
+import { createInsertSchema, createSelectSchema } from "drizzle-zod";
+import { z } from "zod";
+import { ADDRESS_TYPES, COUNTRY_CODES } from "./constants";
+import { addresses } from "./schema";
+
+/**
+ * Address type
+ */
+export type Address = typeof addresses.$inferSelect;
+
+/**
+ * Select schema
+ */
+export const selectAddressSchema = createSelectSchema(addresses).extend({
+  type: z.enum(ADDRESS_TYPES.map((type) => type.id)),
+  countryCode: z.enum(COUNTRY_CODES),
+});
+
+export type SelectAddressSchema = z.infer<typeof selectAddressSchema>;
+
+/**
+ * Schema
+ */
+export const createAddressSchema = createInsertSchema(addresses).extend({
+  type: z.enum(ADDRESS_TYPES.map((type) => type.id)),
+  countryCode: z.enum(COUNTRY_CODES),
+});
+
+/**
+ * Create Address schema
+ */
+export type CreateAddressInput = z.input<typeof createAddressSchema>;
+export type CreateAddressSchema = z.infer<typeof createAddressSchema>;

package/dist/templates/spark/src/app/admin/assignments/(list)/(default)/page.tsx

@@ -0,0 +1,22 @@
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import {
+  AssignmentPaginationTableProvider,
+  assignmentTableCommands,
+} from "../../_components/tables";
+import { AssignmentTableToolbar } from "../../_components/toolbars";
+import { assignmentColumns } from "../../_config/columns-data";
+
+export default async function Page() {
+  return (
+    <Allowed permission={{ assignment: ["view"] }}>
+      <AssignmentPaginationTableProvider
+        columns={assignmentColumns}
+        commands={assignmentTableCommands}
+      >
+        <AssignmentTableToolbar />
+        <DataTable />
+      </AssignmentPaginationTableProvider>
+    </Allowed>
+  );
+}