create-tulip-app 0.6.1 → 0.7.0

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

@@ -0,0 +1,135 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Button, Card, CardContent, CardHeader, CardTitle } from "@tulip-systems/core/components";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@tulip-systems/core/components/client";
+import { formatCurrency } from "@tulip-systems/core/lib";
+import { ChevronDownIcon } from "lucide-react";
+import { parseAsInteger, useQueryState } from "nuqs";
+import { useState } from "react";
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import { orpc } from "@/server/router/client";
+import { DateYearPicker } from "./date-year-picker.js";
+
+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 BudgetBarChart() {
+  const [open, setOpen] = useState(false);
+  const [year, setYear] = useQueryState(
+    "year",
+    parseAsInteger.withDefault(new Date().getFullYear()),
+  );
+
+  const { data } = useSuspenseQuery(
+    orpc.projects.getBudgetByMonth.queryOptions({
+      input: { year },
+      select: (data) => {
+        if (data.length === 0) return null;
+
+        const budgetMap = new Map(data.map((item) => [item.month.trim(), item.budget]));
+
+        return MONTHS.map((month) => ({
+          month,
+          budget: budgetMap.get(month) ?? 0,
+        }));
+      },
+    }),
+  );
+
+  return (
+    <Card>
+      <CardHeader className="flex w-full flex-row flex-wrap items-center justify-between">
+        <CardTitle>Budget</CardTitle>
+
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button variant="outline" className="w-36 justify-between font-normal">
+              {year ? year : "Selecteer jaar"}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="mx-10 w-auto overflow-hidden p-0" align="start">
+            <DateYearPicker
+              year={new Date(year, 0, 1)}
+              onYearChange={(date) => {
+                if (!date) return;
+
+                setYear(date.getFullYear());
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </CardHeader>
+
+      <CardContent className="px-2">
+        <div className="h-80 w-full">
+          {data ? (
+            <ChartContainer config={chartConfig} className="h-80 w-full">
+              <BarChart accessibilityLayer data={data}>
+                <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">{year} heeft nog geen budget</p>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/dist/templates/basic/src/app/admin/(dashboard)/_components/date-year-picker.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { Button } from "@tulip-systems/core/components";
+
+interface DateYearPickerProps {
+  year?: Date;
+  onYearChange: (year: Date | undefined) => void;
+}
+
+export function DateYearPicker({ year, onYearChange }: DateYearPickerProps) {
+  const currentYear = year?.getFullYear() || new Date().getFullYear();
+
+  const years = Array.from({ length: 21 }, (_, i) => currentYear - 10 + i);
+
+  return (
+    <div className="w-auto p-4">
+      <div className="grid grid-cols-3 gap-2 pb-5">
+        {years.map((y) => (
+          <Button
+            key={y}
+            variant={y === currentYear ? "default" : "ghost"}
+            size="sm"
+            onClick={() => {
+              const newDate = new Date(year || new Date());
+              newDate.setFullYear(y);
+              newDate.setHours(12, 0, 0, 0);
+              onYearChange(newDate);
+            }}
+          >
+            {y}
+          </Button>
+        ))}
+      </div>
+      <div className="flex w-full justify-center border-t p-3">
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={() => {
+            const today = new Date();
+            today.setHours(12, 0, 0, 0);
+            onYearChange(today);
+          }}
+        >
+          Dit jaar
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,16 @@
+import { Header, Topbar, TopbarTitle } from "@tulip-systems/core/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/basic/src/app/admin/(dashboard)/loading.tsx

@@ -0,0 +1,15 @@
+import { Skeleton } from "@tulip-systems/core/components";
+
+export default function Loading() {
+  return (
+    <div className="p-content space-y-5">
+      <div className="grid grid-rows-1 gap-5 lg:grid-cols-2 xl:grid-cols-3">
+        <Skeleton className="h-80" />
+        <Skeleton className="h-80" />
+        <Skeleton className="h-80" />
+      </div>
+
+      <Skeleton className="h-80" />
+    </div>
+  );
+}

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

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

package/dist/templates/basic/src/app/admin/drive/(root)/layout.tsx

@@ -0,0 +1,16 @@
+import { DRIVE_NAMESPACES } from "@/server/storage/config";
+import { DriveContextProvider } from "../_components/drive-context.client.js";
+import { DriveHeader } from "../_components/drive-header.client.js";
+import { DriveContent } from "../_components/drive-view.client.js";
+
+const { namespace, permission } = DRIVE_NAMESPACES.global;
+
+export default function Layout(props: LayoutProps<"/admin/drive">) {
+  return (
+    <DriveContextProvider namespace={namespace} permission={permission}>
+      <DriveHeader namespace={namespace} />
+
+      <DriveContent>{props.children}</DriveContent>
+    </DriveContextProvider>
+  );
+}

package/dist/templates/basic/src/app/admin/drive/(root)/loading.tsx

@@ -0,0 +1,5 @@
+import { DriveGridLoading } from "../_components/grid.client.js";
+
+export default function Loading() {
+  return <DriveGridLoading className="p-content" />;
+}

package/dist/templates/basic/src/app/admin/drive/(root)/page.tsx

@@ -0,0 +1,3 @@
+import Page from "../[namespace]/page.js";
+
+export default Page;

package/dist/templates/basic/src/app/admin/drive/[namespace]/layout.tsx

@@ -0,0 +1,21 @@
+import type { PropsWithChildren } from "react";
+import { DRIVE_NAMESPACES } from "@/server/storage/config";
+import { DriveContextProvider } from "../_components/drive-context.client.js";
+import { DriveHeader } from "../_components/drive-header.client.js";
+import { DriveContent } from "../_components/drive-view.client.js";
+
+export default async function Layout(
+  props: PropsWithChildren<{ params: Promise<{ namespace: string }> }>,
+) {
+  const params = await props.params;
+  const { namespace, permission } =
+    DRIVE_NAMESPACES[params.namespace as keyof typeof DRIVE_NAMESPACES];
+
+  return (
+    <DriveContextProvider namespace={namespace} permission={permission}>
+      <DriveHeader namespace={namespace} />
+
+      <DriveContent>{props.children}</DriveContent>
+    </DriveContextProvider>
+  );
+}

package/dist/templates/basic/src/app/admin/drive/[namespace]/loading.tsx

@@ -0,0 +1,5 @@
+import { DriveGridLoading } from "../_components/grid.client.js";
+
+export default function Loading() {
+  return <DriveGridLoading className="p-content" />;
+}

package/dist/templates/basic/src/app/admin/drive/[namespace]/page.tsx

@@ -0,0 +1,5 @@
+import { DriveView } from "../_components/drive-view.client.js";
+
+export default async function DriveFolderPage() {
+  return <DriveView className="p-content" />;
+}

package/dist/templates/basic/src/app/admin/drive/_components/command-create.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { DefaultError, MutationOptions } from "@tanstack/react-query";
+import {
+  CommandFormDialog,
+  CommandFormDialogCancel,
+  CommandFormDialogContent,
+  CommandFormDialogFields,
+  CommandFormDialogFooter,
+  CommandFormDialogHeader,
+  CommandFormDialogSubmit,
+  CommandFormDialogTitle,
+  CommandFormDialogTrigger,
+} from "@tulip-systems/core/commands/client";
+import { Input } from "@tulip-systems/core/components";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@tulip-systems/core/components/client";
+import {
+  type CreateNodeInput,
+  type CreateNodeSchema,
+  createNodeSchema,
+} from "@tulip-systems/core/storage";
+import { useQueryStates } from "nuqs";
+import type { PropsWithChildren } from "react";
+import { useForm, useFormContext } from "react-hook-form";
+import { driveSearchParams } from "../_lib/search-params.js";
+
+/**
+ * Create folder command content
+ */
+export type NodeDialogCommandContentProps<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+> = PropsWithChildren<{
+  variables: (values: CreateNodeSchema) => TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+  defaultValues?: Partial<CreateNodeSchema>;
+  message?: string;
+}>;
+
+export function NodeDialogCommandContent<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = undefined,
+  TOnMutateResult = unknown,
+>(props: NodeDialogCommandContentProps<TData, TError, TVariables, TOnMutateResult>) {
+  const [{ parentId }] = useQueryStates(driveSearchParams);
+
+  const form = useForm<CreateNodeInput>({
+    resolver: zodResolver(createNodeSchema),
+    values: { ...props.defaultValues, parentId } as CreateNodeSchema,
+    resetOptions: { keepDirtyValues: true },
+  });
+
+  return (
+    <Form {...form}>
+      <CommandFormDialogContent variables={props.variables} mutation={props.mutation}>
+        {props.children}
+      </CommandFormDialogContent>
+    </Form>
+  );
+}
+
+/**
+ * Create folder command fields
+ */
+export function NodeDialogCommandFields() {
+  const form = useFormContext<CreateNodeSchema>();
+
+  return (
+    <CommandFormDialogFields>
+      <FormField
+        control={form.control}
+        name="name"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Naam</FormLabel>
+            <FormControl>
+              <Input {...field} />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </CommandFormDialogFields>
+  );
+}
+
+export const NodeDialogCommand = CommandFormDialog;
+export const NodeDialogCommandTrigger = CommandFormDialogTrigger;
+export const NodeDialogCommandHeader = CommandFormDialogHeader;
+export const NodeDialogCommandTitle = CommandFormDialogTitle;
+export const NodeDialogCommandFooter = CommandFormDialogFooter;
+export const NodeDialogCommandCancel = CommandFormDialogCancel;
+export const NodeDialogCommandSubmit = CommandFormDialogSubmit;

package/dist/templates/basic/src/app/admin/drive/_components/command-upload.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { CommandEmpty, CommandLabel } from "@tulip-systems/core/commands/client";
+import { Input } from "@tulip-systems/core/components";
+import { cn } from "@tulip-systems/core/lib";
+import { useUploadZone } from "@tulip-systems/core/storage/client";
+import { UploadIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+
+export function UploadCommand({ className, ...props }: ComponentProps<"div">) {
+  const { onUpload } = useUploadZone();
+
+  console.log("UploadCommand");
+
+  return (
+    <CommandEmpty {...props} className={cn("relative gap-2", className)} label="Upload">
+      <UploadIcon className="h-3 w-3" />
+      <CommandLabel />
+
+      <Input
+        type="file"
+        className="absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0"
+        multiple
+        onChange={(e) => {
+          if (!e.target.files) return;
+          Array.from(e.target.files).forEach(onUpload);
+        }}
+      />
+    </CommandEmpty>
+  );
+}

package/dist/templates/basic/src/app/admin/drive/_components/drive-context.client.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { DragDropProvider } from "@dnd-kit/react";
+import { useQueryClient } from "@tanstack/react-query";
+import type { Permission } from "@tulip-systems/core/auth";
+import { Allowed } from "@tulip-systems/core/auth/client";
+import { tableSearchParams } from "@tulip-systems/core/data-tables";
+import { cn } from "@tulip-systems/core/lib";
+import { useAction } from "@tulip-systems/core/lib/client";
+import type { Node, NodesTableFilters } from "@tulip-systems/core/storage";
+import { UploadZone, type UploadZoneProps } from "@tulip-systems/core/storage/client";
+import { useQueryStates } from "nuqs";
+import { type ComponentProps, createContext, use, useDeferredValue } from "react";
+import { orpc } from "@/server/router/client";
+import { uploadClient } from "@/server/storage/client";
+import { driveFilterSearchParams, driveSearchParams } from "../_lib/search-params.js";
+
+/**
+ * DriveContext
+ */
+export type DriveContextValue = {
+  namespace: string;
+  where?: Omit<NodesTableFilters, "namespace" | "parentId">;
+  onUploadCompleted?: (node: Node) => Promise<unknown> | unknown;
+  permission?: Permission;
+};
+export const DriveContext = createContext({} as DriveContextValue);
+
+/**
+ * useDriveContext
+ */
+export function useDriveContext() {
+  const context = use(DriveContext);
+  if (!context) throw new Error("DriveContext not found!");
+  return context;
+}
+
+/**
+ * DriveContextProvider
+ */
+export function DriveContextProvider({
+  namespace,
+  where,
+  uploadHooks,
+  onUploadCompleted,
+  onUploadFailed,
+  permission = { drive: ["view"] },
+  className,
+  children,
+  ...props
+}: ComponentProps<"div"> &
+  DriveContextValue &
+  Pick<UploadZoneProps, "uploadHooks" | "onUploadCompleted" | "onUploadFailed">) {
+  const queryClient = useQueryClient();
+
+  const [{ parentId }] = useQueryStates(driveSearchParams);
+  const [filters] = useQueryStates(driveFilterSearchParams);
+
+  const [query] = useQueryStates(tableSearchParams);
+  const input = useDeferredValue({
+    ...query,
+    filters: { ...filters, ...where, parentId, namespace },
+  });
+  const queryKey = orpc.drive.list.infiniteKey({
+    initialPageParam: 0,
+    input: (cursor: number | undefined) => ({ ...input, cursor }),
+  });
+
+  const changeParent = useAction(
+    orpc.drive.changeParent.mutationOptions({
+      onMutate: async (data) => {
+        // Cancel any outgoing refetches
+        await queryClient.cancelQueries({ queryKey });
+
+        // Snapshot the previous value
+        const previousNodes = queryClient.getQueryData(queryKey);
+
+        // Remove the deleted node
+        queryClient.setQueryData(queryKey, (old) => {
+          if (!old) return old;
+
+          return {
+            ...old,
+            pages: old.pages.map((page) => ({
+              ...page,
+              data: page.data.filter(({ id }) => id !== data.id),
+            })),
+          };
+        });
+
+        return { previousNodes };
+      },
+      onError: (err, _, context) => {
+        console.error("changeParent error: ", err);
+        queryClient.setQueryData(queryKey, context?.previousNodes);
+      },
+      onSettled: () => {
+        queryClient.invalidateQueries({ queryKey });
+      },
+    }),
+  );
+
+  return (
+    <Allowed permission={permission}>
+      <DriveContext.Provider value={{ namespace, where, onUploadCompleted }}>
+        <DragDropProvider
+          onDragEnd={(event) => {
+            const { operation, canceled } = event;
+            const { source, target } = operation;
+
+            if (!source || !target || canceled) return;
+
+            const id = source.id.toString();
+            const parentId = target.id.toString() === "drive" ? null : target.id.toString();
+
+            if (id === parentId) return;
+
+            changeParent.mutate({ id, parentId });
+          }}
+        >
+          <UploadZone
+            {...props}
+            className={cn("min-h-dvh", className)}
+            variables={{ namespace, parentId }}
+            uploadClient={uploadClient}
+            uploadHooks={uploadHooks}
+            onUploadCompleted={onUploadCompleted}
+            onUploadFailed={onUploadFailed}
+            optimistic={{
+              add: (node) => {
+                queryClient.setQueryData(queryKey, (old) => {
+                  if (!old) return old;
+
+                  const firstPage = old.pages[0];
+                  if (!firstPage) return old;
+
+                  /**
+                   * Add the new node to the first page as the first item
+                   */
+                  return {
+                    ...old,
+                    pages: [
+                      {
+                        ...firstPage,
+                        data: [node, ...(firstPage.data ?? [])],
+                      },
+                      ...old.pages.slice(1),
+                    ],
+                  };
+                });
+              },
+              remove: (ids) => {
+                queryClient.setQueryData(queryKey, (old) => {
+                  if (!old) return old;
+
+                  return {
+                    ...old,
+                    pages: old.pages.map((page) => ({
+                      ...page,
+                      data: page.data.filter(({ id }) => !ids.includes(id)),
+                    })),
+                  };
+                });
+              },
+              cancel: () => queryClient.cancelQueries({ queryKey }),
+              invalidate: () => queryClient.invalidateQueries({ queryKey }),
+            }}
+          >
+            {children}
+          </UploadZone>
+        </DragDropProvider>
+      </DriveContext.Provider>
+    </Allowed>
+  );
+}