@tulip-systems/create-app 0.11.1

package/dist/templates/code/src/app/admin/time/insights/page.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { Allowed } from "@tulip-systems/auth/permissions/client";
+import { TableLayout } from "@tulip-systems/data-tables";
+import { DataTable } from "@tulip-systems/data-tables/client";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@tulip-systems/ui/select";
+import { parseAsStringEnum, useQueryState } from "nuqs";
+import { Suspense } from "react";
+import {
+  TimeMonthlyHoursChart,
+  TimeMonthlyHoursChartLoading,
+} from "../_components/chart-time-monthly-hours";
+import { TimeEntryAggregatedPaginationTableProvider } from "../_components/tables";
+import { TimeEntryTableToolbar } from "../_components/toolbars";
+import {
+  type TimeEntryAggregateGroupBy,
+  timeEntryAggregatedTableColumns,
+} from "../_config/columns-aggregated";
+
+const aggregateGroupOptions = [
+  { value: "date", label: "Datum" },
+  { value: "employee", label: "Medewerker" },
+  { value: "customer", label: "Klant" },
+  { value: "project", label: "Project" },
+  { value: "task", label: "Task" },
+] satisfies { value: TimeEntryAggregateGroupBy; label: string }[];
+
+export default function TimePage() {
+  const [groupBy, setGroupBy] = useQueryState(
+    "groupBy",
+    parseAsStringEnum(aggregateGroupOptions.map((option) => option.value)).withDefault("date"),
+  );
+
+  return (
+    <Allowed permission={{ time: ["view"] }}>
+      <TimeEntryAggregatedPaginationTableProvider
+        columns={timeEntryAggregatedTableColumns}
+        groupBy={groupBy}
+      >
+        <TableLayout>
+          <TimeEntryTableToolbar>
+            <Select
+              value={groupBy}
+              onValueChange={(value: TimeEntryAggregateGroupBy) => setGroupBy(value)}
+            >
+              <SelectTrigger className="h-8 w-40">
+                <SelectValue placeholder="Groepeer op" />
+              </SelectTrigger>
+              <SelectContent>
+                {aggregateGroupOptions.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </TimeEntryTableToolbar>
+
+          <div className="space-y-5">
+            <Suspense fallback={<TimeMonthlyHoursChartLoading />}>
+              <TimeMonthlyHoursChart groupBy={groupBy} />
+            </Suspense>
+
+            <DataTable />
+          </div>
+        </TableLayout>
+      </TimeEntryAggregatedPaginationTableProvider>
+    </Allowed>
+  );
+}

package/dist/templates/code/src/app/api/[transport]/route.ts

@@ -0,0 +1,61 @@
+import { mcpHandler } from "@better-auth/oauth-provider";
+import { type AnyProcedure, call } from "@orpc/server";
+import { createMcpHandler } from "mcp-handler";
+import { OAUTH_AUDIENCES, OAUTH_ISSUER, OAUTH_JWKS_URI } from "@/server/auth/constants";
+import { type McpProcedure, mcpRouter } from "@/server/mcp/router";
+import { createContext } from "@/server/router/init";
+
+const handler = mcpHandler(
+  {
+    jwksUrl: OAUTH_JWKS_URI,
+    verifyOptions: {
+      issuer: OAUTH_ISSUER,
+      audience: OAUTH_AUDIENCES,
+    },
+  },
+  (req, jwt) => {
+    const transport = new URL(req.url).pathname.split("/").filter(Boolean).pop();
+
+    if (transport === "sse" || transport === "message") {
+      return new Response("The HTTP+SSE MCP transport has been removed.", {
+        status: 410,
+      });
+    }
+
+    return createMcpHandler(
+      (server) => {
+        const context = createContext({ headers: req.headers, jwt });
+
+        const entries = Object.entries(mcpRouter) as Array<[string, McpProcedure]>;
+
+        entries.forEach(([procedureName, procedure]) => {
+          type Procedure = typeof procedure;
+
+          const definition = procedure["~orpc"];
+
+          server.registerTool<never, Procedure["~orpc"]["inputSchema"]>(
+            procedureName,
+            {
+              title: definition.meta.title,
+              description: definition.meta.description,
+              inputSchema: definition.inputSchema as Procedure["~orpc"]["inputSchema"],
+            },
+            (async (input: Procedure["~orpc"]["inputSchema"]) =>
+              call(procedure as AnyProcedure, input, { context })) as never,
+          );
+        });
+      },
+      {
+        serverInfo: {
+          name: "tulip-demo-code",
+          version: "1.0.0",
+        },
+        verboseLogs: true,
+      },
+    )(req);
+  },
+);
+
+export const maxDuration = 60;
+
+export { handler as DELETE, handler as GET, handler as POST };

package/dist/templates/code/src/app/api/auth/.well-known/oauth-authorization-server/route.ts

@@ -0,0 +1,4 @@
+import { oauthProviderAuthServerMetadata } from "@better-auth/oauth-provider";
+import { auth } from "@/server/auth/init";
+
+export const GET = oauthProviderAuthServerMetadata(auth);

package/dist/templates/code/src/app/api/auth/.well-known/openid-configuration/route.ts

@@ -0,0 +1,4 @@
+import { oauthProviderOpenIdConfigMetadata } from "@better-auth/oauth-provider";
+import { auth } from "@/server/auth/init";
+
+export const GET = oauthProviderOpenIdConfigMetadata(auth);

package/dist/templates/code/src/app/api/auth/[...all]/route.ts

@@ -0,0 +1,4 @@
+import { toNextJsHandler } from "better-auth/next-js";
+import { auth } from "@/server/auth/init";
+
+export const { GET, POST } = toNextJsHandler(auth.handler);

package/dist/templates/code/src/app/api/rpc/[[...rest]]/route.ts

@@ -0,0 +1,28 @@
+import { onError } from "@orpc/server";
+import { RPCHandler } from "@orpc/server/fetch";
+import { createContext } from "@/server/router/init";
+import { appRouter } from "@/server/router/router";
+
+const handler = new RPCHandler(appRouter, {
+  interceptors: [
+    onError((error) => {
+      console.error("[orpc] Unhandled RPC error", error);
+    }),
+  ],
+});
+
+async function handleRequest(request: Request) {
+  const { response } = await handler.handle(request, {
+    prefix: "/api/rpc",
+    context: createContext({ headers: request.headers }),
+  });
+
+  return response ?? new Response("Not found", { status: 404 });
+}
+
+export const HEAD = handleRequest;
+export const GET = handleRequest;
+export const POST = handleRequest;
+export const PUT = handleRequest;
+export const PATCH = handleRequest;
+export const DELETE = handleRequest;

package/dist/templates/code/src/app/api/storage/[[...rest]]/route.ts

@@ -0,0 +1,5 @@
+import { createStorageRouteHandler } from "@tulip-systems/storage/server";
+import { auth } from "@/server/auth/init";
+import { storage } from "@/server/storage/init";
+
+export const { GET, POST, PUT, PATCH, DELETE } = createStorageRouteHandler({ auth, storage });

package/dist/templates/code/src/app/auth/consent/loading.tsx

@@ -0,0 +1,3 @@
+import { AuthLoading } from "@tulip-systems/auth/components";
+
+export default AuthLoading;

package/dist/templates/code/src/app/auth/consent/page.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useMutation } from "@tanstack/react-query";
+import { Badge } from "@tulip-systems/ui/badge";
+import { Button } from "@tulip-systems/ui/button";
+import { toast } from "@tulip-systems/ui/sonner";
+import { useRouter } from "next/navigation";
+import { parseAsString, useQueryState } from "nuqs";
+import { authClient } from "@/server/auth/client";
+
+export default function Page() {
+  const router = useRouter();
+
+  const [clientId] = useQueryState("client_id", parseAsString);
+  const [scope] = useQueryState("scope", parseAsString.withDefault("mcp"));
+
+  /**
+   * Handles the user's consent decision by calling the auth client's consent method.
+   */
+  const consentMutation = useMutation({
+    mutationFn: async (accept: boolean) => {
+      const result = await authClient.oauth2.consent({ accept });
+
+      if (result.error) throw result.error;
+
+      return result.data;
+    },
+    onSuccess: (data) => {
+      toast.success("Toestemming succesvol verwerkt");
+
+      // Redirect to the provided URL if available
+      if (data?.url) window.location.href = data.url;
+    },
+    onError: (err) => {
+      console.error("Consent error: ", err);
+
+      if ("status" in err && "error" in err) {
+        if (err.status === 400 && err.error === "invalid_signature") {
+          toast.error("Ongeldige of verlopen sessie");
+          router.push("/auth/login");
+          return;
+        }
+
+        if (err.status === 401) {
+          toast.error("Ongeldige of verlopen sessie");
+          router.push("/auth/login");
+          return;
+        }
+
+        if (err.status === 403) {
+          toast.error("Toegang geweigerd");
+          return;
+        }
+
+        if (err.status === 429) {
+          toast.error("Te veel pogingen");
+          return;
+        }
+      }
+      toast.error("Er is iets misgegaan");
+    },
+  });
+
+  return (
+    <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+      <div className="flex flex-col space-y-2 text-left">
+        <h1 className="font-semibold text-3xl tracking-tight">Applicatie toegang geven</h1>
+        <p className="text-muted-foreground text-sm">
+          Client <span className="font-mono">{clientId ?? "onbekend"}</span> vraagt toegang tot de
+          MCP server met de volgende scopes:
+        </p>
+
+        <ul className="flex list-inside text-left">
+          {scope?.split(" ").map((scope) => (
+            <li key={scope} className="font-mono">
+              <Badge variant="outline" className="w-">
+                {scope}
+              </Badge>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <div className="flex gap-3">
+        <Button disabled={consentMutation.isPending} onClick={() => consentMutation.mutate(true)}>
+          Toestaan
+        </Button>
+
+        <Button
+          disabled={consentMutation.isPending}
+          onClick={() => consentMutation.mutate(false)}
+          variant="outline"
+        >
+          Weigeren
+        </Button>
+      </div>
+    </div>
+  );
+}

package/dist/templates/code/src/app/auth/create-first-user/loading.tsx

@@ -0,0 +1,3 @@
+import { AuthLoading } from "@tulip-systems/auth/components";
+
+export default AuthLoading;

package/dist/templates/code/src/app/auth/create-first-user/page.tsx

@@ -0,0 +1,52 @@
+import { AuthLoading } from "@tulip-systems/auth/components";
+import {
+  CreateFirstUserDescription,
+  CreateFirstUserEmailField,
+  CreateFirstUserFirstNameField,
+  CreateFirstUserFooter,
+  CreateFirstUserForm,
+  CreateFirstUserHeader,
+  CreateFirstUserLastNameField,
+  CreateFirstUserPasswordField,
+  CreateFirstUserSubmitButton,
+  CreateFirstUserTitle,
+  CreateFirstUserView,
+} from "@tulip-systems/auth/components/client";
+import { CreateFirstUserPageGuard } from "@tulip-systems/auth/next/guards";
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import { auth } from "@/server/auth/init";
+
+export const metadata: Metadata = {
+  title: "Eerste gebruiker aanmaken",
+  description: "Maak het eerste beheerdersaccount aan.",
+};
+
+export default function Page() {
+  return (
+    <Suspense fallback={<AuthLoading />}>
+      <CreateFirstUserPageGuard auth={auth}>
+        <CreateFirstUserView>
+          <CreateFirstUserHeader>
+            <CreateFirstUserTitle>Welkom eerste gebruiker</CreateFirstUserTitle>
+            <CreateFirstUserDescription>
+              Maak eerst een account aan om in te loggen
+            </CreateFirstUserDescription>
+          </CreateFirstUserHeader>
+
+          <CreateFirstUserForm options={{ callbackURLFallback: "/admin" }}>
+            <CreateFirstUserFirstNameField />
+            <CreateFirstUserLastNameField />
+            <CreateFirstUserEmailField />
+            <CreateFirstUserPasswordField />
+            <CreateFirstUserSubmitButton>Account aanmaken</CreateFirstUserSubmitButton>
+          </CreateFirstUserForm>
+
+          <CreateFirstUserFooter>
+            Dit eerste account krijgt toegang tot de beheeromgeving.
+          </CreateFirstUserFooter>
+        </CreateFirstUserView>
+      </CreateFirstUserPageGuard>
+    </Suspense>
+  );
+}

package/dist/templates/code/src/app/auth/forget-password/loading.tsx

@@ -0,0 +1,3 @@
+import { AuthLoading } from "@tulip-systems/auth/components";
+
+export default AuthLoading;

package/dist/templates/code/src/app/auth/forget-password/page.tsx

@@ -0,0 +1,46 @@
+import {
+  ForgetPasswordDescription,
+  ForgetPasswordEmailField,
+  ForgetPasswordFooter,
+  ForgetPasswordForm,
+  ForgetPasswordHeader,
+  ForgetPasswordSubmitButton,
+  ForgetPasswordTitle,
+  ForgetPasswordView,
+} from "@tulip-systems/auth/components/client";
+import type { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: "Wachtwoord vergeten",
+  description: "Vraag een link aan om je wachtwoord te herstellen.",
+};
+
+export default function Page() {
+  return (
+    <ForgetPasswordView>
+      <ForgetPasswordHeader>
+        <ForgetPasswordTitle>Wachtwoord vergeten</ForgetPasswordTitle>
+        <ForgetPasswordDescription>
+          Schrijf je email zodat we je een mail kunnen verzenden om je wachtwoord te herstellen.
+        </ForgetPasswordDescription>
+      </ForgetPasswordHeader>
+
+      <ForgetPasswordForm
+        options={{
+          successMessage: "Succesvol verzonden",
+          successDescription: "We hebben je een email verzonden om je wachtwoord te herstellen.",
+        }}
+      >
+        <ForgetPasswordEmailField />
+        <ForgetPasswordSubmitButton>Verzenden</ForgetPasswordSubmitButton>
+      </ForgetPasswordForm>
+
+      <ForgetPasswordFooter>
+        <Link href="/auth/login" className="underline underline-offset-4 hover:text-primary">
+          Terug naar login
+        </Link>
+      </ForgetPasswordFooter>
+    </ForgetPasswordView>
+  );
+}

package/dist/templates/code/src/app/auth/layout.tsx

@@ -0,0 +1,30 @@
+import { AuthProvider } from "@tulip-systems/auth/client";
+import {
+  AuthLayout,
+  AuthLayoutContent,
+  AuthLayoutImage,
+  AuthLayoutImageFooter,
+  AuthLayoutImageHeader,
+} from "@tulip-systems/auth/components";
+import Link from "next/link";
+import type { PropsWithChildren } from "react";
+import { config } from "@/lib/config/base";
+import { authClient } from "@/server/auth/client";
+
+export default function Layout(props: PropsWithChildren) {
+  return (
+    <AuthProvider authClient={authClient}>
+      <AuthLayout>
+        <AuthLayoutImage src="/images/auth-background.jpeg" alt="">
+          <AuthLayoutImageHeader>
+            <Link href="/">{config.general.name}</Link>
+          </AuthLayoutImageHeader>
+
+          <AuthLayoutImageFooter>Developed by NewCode</AuthLayoutImageFooter>
+        </AuthLayoutImage>
+
+        <AuthLayoutContent>{props.children}</AuthLayoutContent>
+      </AuthLayout>
+    </AuthProvider>
+  );
+}

package/dist/templates/code/src/app/auth/login/loading.tsx

@@ -0,0 +1,3 @@
+import { AuthLoading } from "@tulip-systems/auth/components";
+
+export default AuthLoading;

package/dist/templates/code/src/app/auth/login/page.tsx

@@ -0,0 +1,43 @@
+import {
+  LoginDescription,
+  LoginEmailField,
+  LoginFooter,
+  LoginForgotPasswordLink,
+  LoginForm,
+  LoginHeader,
+  LoginPasskeyButton,
+  LoginPasswordField,
+  LoginSubmitButton,
+  LoginTitle,
+  LoginView,
+} from "@tulip-systems/auth/components/client";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Login",
+  description: "Log in met je email en wachtwoord.",
+};
+
+export default function Page() {
+  return (
+    <LoginView>
+      <LoginHeader>
+        <LoginTitle>Login</LoginTitle>
+        <LoginDescription>Schrijf je email en wachtwoord in om in te loggen.</LoginDescription>
+      </LoginHeader>
+
+      <LoginForm options={{ callbackURLFallback: "/admin" }}>
+        <LoginEmailField />
+        <LoginPasswordField />
+        <LoginSubmitButton>Inloggen</LoginSubmitButton>
+        <LoginPasskeyButton>Inloggen met passkey</LoginPasskeyButton>
+      </LoginForm>
+
+      <LoginFooter>
+        <LoginForgotPasswordLink href="/auth/forget-password">
+          Wachtwoord vergeten
+        </LoginForgotPasswordLink>
+      </LoginFooter>
+    </LoginView>
+  );
+}

package/dist/templates/code/src/app/auth/reset-password/loading.tsx

@@ -0,0 +1,3 @@
+import { AuthLoading } from "@tulip-systems/auth/components";
+
+export default AuthLoading;

package/dist/templates/code/src/app/auth/reset-password/page.tsx

@@ -0,0 +1,55 @@
+import { AuthLoading } from "@tulip-systems/auth/components";
+import {
+  ResetPasswordConfirmationField,
+  ResetPasswordDescription,
+  ResetPasswordField,
+  ResetPasswordFooter,
+  ResetPasswordForm,
+  ResetPasswordHeader,
+  ResetPasswordSubmitButton,
+  ResetPasswordTitle,
+  ResetPasswordView,
+} from "@tulip-systems/auth/components/client";
+import type { Metadata } from "next";
+import Link from "next/link";
+import { Suspense } from "react";
+
+export const metadata: Metadata = {
+  title: "Wachtwoord herstellen",
+  description: "Stel een nieuw wachtwoord in voor je account.",
+};
+
+type ResetPasswordSearchParams = Promise<{ email: string; otp: string }>;
+
+export default function Page(props: { searchParams: ResetPasswordSearchParams }) {
+  return (
+    <Suspense fallback={<AuthLoading />}>
+      <ResetPasswordContent searchParams={props.searchParams} />
+    </Suspense>
+  );
+}
+
+async function ResetPasswordContent(props: { searchParams: ResetPasswordSearchParams }) {
+  const { email, otp } = await props.searchParams;
+
+  return (
+    <ResetPasswordView>
+      <ResetPasswordHeader>
+        <ResetPasswordTitle>Wachtwoord herstellen</ResetPasswordTitle>
+        <ResetPasswordDescription>Vul je nieuwe wachtwoord in</ResetPasswordDescription>
+      </ResetPasswordHeader>
+
+      <ResetPasswordForm email={email} otp={otp} options={{ redirectTo: "/auth/login" }}>
+        <ResetPasswordField />
+        <ResetPasswordConfirmationField />
+        <ResetPasswordSubmitButton>Verzenden</ResetPasswordSubmitButton>
+      </ResetPasswordForm>
+
+      <ResetPasswordFooter>
+        <Link href="/auth/login" className="underline underline-offset-4 hover:text-primary">
+          Terug naar login
+        </Link>
+      </ResetPasswordFooter>
+    </ResetPasswordView>
+  );
+}

package/dist/templates/code/src/app/globals.css

@@ -0,0 +1,15 @@
+@import "tailwindcss";
+@import "@tulip-systems/ui/styles.css";
+@import "@tulip-systems/ai/styles.css";
+@import "@tulip-systems/app/styles.css";
+@import "@tulip-systems/auth/styles.css";
+@import "@tulip-systems/commands/styles.css";
+@import "@tulip-systems/data-tables/styles.css";
+@import "@tulip-systems/drive/styles.css";
+@import "@tulip-systems/drive-google/styles.css";
+@import "@tulip-systems/editor/styles.css";
+@import "@tulip-systems/inline/styles.css";
+@import "@tulip-systems/query/styles.css";
+@import "@tulip-systems/storage/styles.css";
+
+@plugin "@tailwindcss/typography";

package/dist/templates/code/src/app/layout.tsx

@@ -0,0 +1,22 @@
+import "./globals.css";
+import "../server/router/register";
+
+import { ColorThemeProvider, Providers } from "@tulip-systems/app/components/client";
+import { generateRootLayoutMetadata, RootLayout } from "@tulip-systems/app/components/server";
+import { DriveViewScript } from "@tulip-systems/drive/server";
+import type { PropsWithChildren } from "react";
+import { config } from "@/lib/config/base";
+
+export const { metadata, viewport } = generateRootLayoutMetadata(config);
+
+export default function Layout({ children }: PropsWithChildren) {
+  return (
+    <RootLayout>
+      <DriveViewScript />
+
+      <ColorThemeProvider defaultTheme="tulip">
+        <Providers>{children}</Providers>
+      </ColorThemeProvider>
+    </RootLayout>
+  );
+}

package/dist/templates/code/src/app/lib/utils/table-data.server.ts

@@ -0,0 +1,6 @@
+import "server-cli-only";
+
+import { createTableDataQuery } from "@tulip-systems/data-tables/drizzle/server";
+import * as schema from "@/server/db/schema";
+
+export const getTableData = createTableDataQuery(schema);

package/dist/templates/code/src/app/loading.tsx

@@ -0,0 +1,3 @@
+import { RootLoading } from "@tulip-systems/app/components";
+
+export default RootLoading;

package/dist/templates/code/src/app/manifest.ts

@@ -0,0 +1,4 @@
+import { generateManifest } from "@tulip-systems/core";
+import { config } from "@/lib/config/base";
+
+export default generateManifest(config);

package/dist/templates/code/src/app/not-found.tsx

@@ -0,0 +1,3 @@
+import { RootNotFoundPage } from "@tulip-systems/app/components";
+
+export default RootNotFoundPage;

package/dist/templates/code/src/components/gantt/components.tsx

@@ -0,0 +1,29 @@
+import "client-only";
+
+export { useGanttDragging, useGanttScrollX } from "./context";
+export {
+  GanttFeatureDragHelper,
+  GanttFeatureItem,
+  GanttFeatureItemCard,
+  GanttFeatureList,
+  GanttFeatureListGroup,
+  GanttFeatureRow,
+} from "./features";
+export { GanttAddFeatureHelper, GanttColumn, GanttColumns } from "./grid";
+export { GanttContentHeader, GanttHeader } from "./header";
+export {
+  GanttCreateMarkerTrigger,
+  GanttMarker,
+  GanttTimeline,
+  GanttToday,
+  GanttTodayButton,
+} from "./markers";
+export { GanttProvider } from "./provider";
+export {
+  GanttSidebar,
+  GanttSidebarContent,
+  GanttSidebarGroup,
+  GanttSidebarHeader,
+  GanttSidebarItem,
+} from "./sidebar";
+export type * from "./types";