@tulip-systems/create-app 0.11.1

package/dist/templates/code/src/components/gantt/utils.ts

@@ -0,0 +1,289 @@
+import { Temporal } from "@js-temporal/polyfill";
+import { getDaysInMonth } from "date-fns";
+import type { GanttContextProps, GanttFeature, Range, TimelineData } from "./types";
+
+export const DEFAULT_HEADER_HEIGHT = 60;
+export const DEFAULT_ROW_HEIGHT = 36;
+export const DEFAULT_PLACEHOLDER_LENGTH = 2;
+export const DEFAULT_SIDEBAR_WIDTH = 300;
+/** Column width in pixels for the "daily" range (one column = one day). */
+export const DEFAULT_DAILY_COLUMN_WIDTH = 50;
+/** Column width in pixels for the "monthly" range (one column = one month). */
+export const DEFAULT_MONTHLY_COLUMN_WIDTH = 150;
+/** Column width in pixels for the "quarterly" range (one column = one month within a quarter). */
+export const DEFAULT_QUARTERLY_COLUMN_WIDTH = 100;
+
+const MONTHS_PER_YEAR = 12;
+const MONTHS_PER_QUARTER = 3;
+const QUARTERS_PER_YEAR = 4;
+
+/** Converts a `Temporal.PlainDate` to a JS `Date` at noon to avoid DST boundary issues. */
+export const toDate = (date: Temporal.PlainDate) =>
+  new Date(date.year, date.month - 1, date.day, 12, 0, 0, 0);
+
+/** Returns January 1st of the given year as a `Temporal.PlainDate`. */
+export const getTimelineStartDate = (year: number) =>
+  Temporal.PlainDate.from({
+    year,
+    month: 1,
+    day: 1,
+  });
+
+/** Returns the first day of the month for a given date. */
+export const getMonthStart = (date: Temporal.PlainDate) => date.with({ day: 1 });
+
+/**
+ * Returns the base (unscaled) column width in pixels for a given range.
+ * Multiply by `zoom / 100` to get the rendered width.
+ */
+export const getColumnWidth = (range: Range) => {
+  if (range === "monthly") {
+    return DEFAULT_MONTHLY_COLUMN_WIDTH;
+  }
+
+  if (range === "quarterly") {
+    return DEFAULT_QUARTERLY_COLUMN_WIDTH;
+  }
+
+  return DEFAULT_DAILY_COLUMN_WIDTH;
+};
+
+/** Returns column width in pixels after applying the current zoom level. */
+export const getScaledColumnWidth = (context: Pick<GanttContextProps, "columnWidth" | "zoom">) =>
+  (context.columnWidth * context.zoom) / 100;
+
+const isSameDate = (left: Temporal.PlainDate, right: Temporal.PlainDate) =>
+  Temporal.PlainDate.compare(left, right) === 0;
+
+const getMonthDifference = (left: Temporal.PlainDate, right: Temporal.PlainDate) =>
+  (left.year - right.year) * MONTHS_PER_YEAR + (left.month - right.month);
+
+const getDayDifference = (left: Temporal.PlainDate, right: Temporal.PlainDate) =>
+  left.since(right).days;
+
+const addRange = (date: Temporal.PlainDate, range: Range, amount: number) => {
+  if (range === "monthly" || range === "quarterly") {
+    return date.add({ months: amount });
+  }
+
+  return date.add({ days: amount });
+};
+
+const createYearTimelineData = (year: number): TimelineData[number] => ({
+  year,
+  quarters: Array.from({ length: QUARTERS_PER_YEAR }, (_, quarterIndex) => ({
+    months: Array.from({ length: MONTHS_PER_QUARTER }, (_, monthIndex) => {
+      const month = quarterIndex * MONTHS_PER_QUARTER + monthIndex;
+
+      return {
+        days: getDaysInMonth(new Date(year, month, 1)),
+      };
+    }),
+  })),
+});
+
+/** Appends a new year to the end of the timeline data array. */
+export const appendTimelineYear = (timelineData: TimelineData) => {
+  const lastYear = timelineData.at(-1)?.year;
+
+  return lastYear ? [...timelineData, createYearTimelineData(lastYear + 1)] : timelineData;
+};
+
+/** Prepends a new year to the start of the timeline data array. */
+export const prependTimelineYear = (timelineData: TimelineData) => {
+  const firstYear = timelineData[0]?.year;
+
+  return firstYear ? [createYearTimelineData(firstYear - 1), ...timelineData] : timelineData;
+};
+
+/**
+ * Returns the number of visible columns between two dates.
+ * Daily mode counts days. Monthly and quarterly modes count calendar months.
+ */
+export const getDifferenceIn = (range: Range) => {
+  if (range === "monthly" || range === "quarterly") {
+    return (left: Temporal.PlainDate, right: Temporal.PlainDate) =>
+      getMonthDifference(getMonthStart(left), getMonthStart(right));
+  }
+
+  return (left: Temporal.PlainDate, right: Temporal.PlainDate) => getDayDifference(left, right);
+};
+
+/**
+ * Returns sub-column day differences for range modes that render a whole month per column.
+ */
+export const getInnerDifferenceForRange = (range: Range) => {
+  if (range === "monthly" || range === "quarterly") {
+    return (left: Temporal.PlainDate, right: Temporal.PlainDate) => getDayDifference(left, right);
+  }
+
+  return (_left: Temporal.PlainDate, _right: Temporal.PlainDate) => 1;
+};
+
+/** Returns a curried function that advances a date by the column unit for the given range. */
+export const getAddRange = (range: Range) => {
+  return (date: Temporal.PlainDate, amount: number) => addRange(date, range, amount);
+};
+
+/**
+ * Converts an x-coordinate inside the scrollable timeline into a Temporal date.
+ */
+export const getDateByMousePosition = (context: GanttContextProps, mouseX: number) => {
+  const timelineStartDate = getTimelineStartDate(context.timelineData[0]?.year ?? 0);
+  const columnWidth = getScaledColumnWidth(context);
+  const offset = Math.floor(mouseX / columnWidth);
+  const rangeStart = addRange(timelineStartDate, context.range, offset);
+  const daysInRange = context.range === "daily" ? 1 : getDaysInMonth(toDate(rangeStart));
+  const pixelsPerDay = Math.round(columnWidth / daysInRange);
+  const dayOffset = Math.floor((mouseX % columnWidth) / pixelsPerDay);
+
+  return rangeStart.add({ days: dayOffset });
+};
+
+/** Initialises a three-year timeline centred on the current year (prev, current, next). */
+export const createInitialTimelineData = (today: Temporal.PlainDate): TimelineData => [
+  createYearTimelineData(today.year - 1),
+  createYearTimelineData(today.year),
+  createYearTimelineData(today.year + 1),
+];
+
+/**
+ * Pixel offset from the first visible timeline date to the left edge of a feature or marker.
+ */
+export const getOffset = (
+  date: Temporal.PlainDate,
+  timelineStartDate: Temporal.PlainDate,
+  context: Pick<GanttContextProps, "columnWidth" | "zoom" | "range">,
+) => {
+  const columnWidth = getScaledColumnWidth(context);
+  const differenceIn = getDifferenceIn(context.range);
+  const fullColumns =
+    context.range === "daily"
+      ? differenceIn(date, timelineStartDate)
+      : differenceIn(getMonthStart(date), timelineStartDate);
+
+  if (context.range === "daily") {
+    return columnWidth * fullColumns;
+  }
+
+  const pixelsPerDay = columnWidth / getDaysInMonth(toDate(date));
+
+  return fullColumns * columnWidth + date.day * pixelsPerDay;
+};
+
+/**
+ * Pixel width for a feature bar. Null end dates render as placeholders.
+ */
+export const getWidth = (
+  startAt: Temporal.PlainDate,
+  endAt: Temporal.PlainDate | null,
+  context: GanttContextProps,
+) => {
+  const columnWidth = getScaledColumnWidth(context);
+
+  if (!endAt) {
+    return columnWidth * DEFAULT_PLACEHOLDER_LENGTH;
+  }
+
+  const differenceIn = getDifferenceIn(context.range);
+
+  if (context.range === "daily") {
+    const delta = differenceIn(endAt, startAt);
+    return columnWidth * (delta || 1);
+  }
+
+  const daysInStartMonth = getDaysInMonth(toDate(startAt));
+  const pixelsPerDayInStartMonth = columnWidth / daysInStartMonth;
+
+  if (isSameDate(startAt, endAt)) {
+    return pixelsPerDayInStartMonth;
+  }
+
+  const innerDifferenceIn = getInnerDifferenceForRange(context.range);
+  const startOfStartAt = getMonthStart(startAt);
+  const startOfEndAt = getMonthStart(endAt);
+
+  if (isSameDate(startOfStartAt, startOfEndAt)) {
+    return innerDifferenceIn(endAt, startAt) * pixelsPerDayInStartMonth;
+  }
+
+  const startRangeOffset = daysInStartMonth - startAt.day;
+  const endRangeOffset = endAt.day;
+  const fullRangeOffset = differenceIn(startOfEndAt, startOfStartAt);
+  const pixelsPerDayInEndMonth = columnWidth / getDaysInMonth(toDate(endAt));
+
+  return (
+    (fullRangeOffset - 1) * columnWidth +
+    startRangeOffset * pixelsPerDayInStartMonth +
+    endRangeOffset * pixelsPerDayInEndMonth
+  );
+};
+
+/**
+ * Sub-column pixel offset for a date within its column.
+ * In daily mode this is the column midpoint; in month-based modes it is proportional to the day of month.
+ */
+export const calculateInnerOffset = (
+  date: Temporal.PlainDate,
+  range: Range,
+  columnWidth: number,
+) => {
+  if (range === "daily") {
+    return columnWidth / 2;
+  }
+
+  return (date.day / getDaysInMonth(toDate(date))) * columnWidth;
+};
+
+/** Total pixel offset from the timeline origin to the centre of a date's column (used for markers). */
+export const getDateOffset = (date: Temporal.PlainDate, context: GanttContextProps) => {
+  const timelineStartDate = getTimelineStartDate(context.timelineData[0]?.year ?? 0);
+  const differenceIn = getDifferenceIn(context.range);
+  const columnWidth = getScaledColumnWidth(context);
+  const offset = differenceIn(date, timelineStartDate);
+  const innerOffset = calculateInnerOffset(date, context.range, columnWidth);
+
+  return columnWidth * offset + innerOffset;
+};
+
+/**
+ * Computes the `scrollLeft` value that centres a date in the visible (non-sidebar) viewport.
+ */
+export const getCenteredScrollLeft = (
+  date: Temporal.PlainDate,
+  context: GanttContextProps,
+  scrollElement: HTMLDivElement,
+) => {
+  const timelineViewport = Math.max(0, scrollElement.clientWidth - context.sidebarWidth);
+
+  return Math.max(0, getDateOffset(date, context) - timelineViewport / 2);
+};
+
+/**
+ * Greedy lane assignment for features that overlap inside the same visible row.
+ */
+export const getFeatureLayout = (features: GanttFeature[]) => {
+  const sortedFeatures = [...features].sort((a, b) =>
+    Temporal.PlainDate.compare(a.startAt, b.startAt),
+  );
+  const subRowEndTimes: Temporal.PlainDate[] = [];
+  const featuresWithSubRows = sortedFeatures.map((feature) => {
+    let subRow = 0;
+
+    while (
+      subRow < subRowEndTimes.length &&
+      Temporal.PlainDate.compare(subRowEndTimes[subRow], feature.startAt) > 0
+    ) {
+      subRow++;
+    }
+
+    subRowEndTimes[subRow] = feature.endAt;
+
+    return { ...feature, subRow };
+  });
+
+  return {
+    features: featuresWithSubRows,
+    subRowCount: Math.max(1, subRowEndTimes.length),
+  };
+};

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

@@ -0,0 +1,107 @@
+import { SpinnerIcon, TulipSymbol } from "@tulip-systems/ui/icons";
+import {
+  AlertTriangle,
+  ArchiveIcon,
+  ArchiveRestore,
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp,
+  BuildingIcon,
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  ClipboardCheck,
+  Copy,
+  CreditCard,
+  Download,
+  ExternalLink,
+  EyeIcon,
+  File,
+  FileText,
+  HelpCircle,
+  HomeIcon,
+  Image,
+  Laptop,
+  LayoutDashboardIcon,
+  LockKeyhole,
+  LockKeyholeOpen,
+  type LucideIcon,
+  Mail,
+  Moon,
+  MoreVertical,
+  MoveLeft,
+  MoveRight,
+  PencilRuler,
+  PenSquare,
+  Pizza,
+  Plus,
+  RefreshCcw,
+  RotateCw,
+  SaveIcon,
+  ScrollTextIcon,
+  Search,
+  Settings,
+  SunMedium,
+  Trash,
+  User,
+  UsersIcon,
+  X,
+} from "lucide-react";
+
+export type Icon = LucideIcon;
+
+export const Icons = {
+  close: X,
+  save: SaveIcon,
+  spinner: SpinnerIcon,
+  chevronLeft: ChevronLeft,
+  chevronRight: ChevronRight,
+  chevronDown: ChevronDown,
+  chevronUp: ChevronUp,
+  trash: Trash,
+  post: FileText,
+  page: File,
+  media: Image,
+  download: Download,
+  settings: Settings,
+  billing: CreditCard,
+  ellipsis: MoreVertical,
+  add: Plus,
+  edit: PenSquare,
+  warning: AlertTriangle,
+  user: User,
+  users: UsersIcon,
+  arrowUp: ArrowUp,
+  arrowDown: ArrowDown,
+  arrowRight: ArrowRight,
+  arrowLeft: ArrowLeft,
+  moveLeft: MoveLeft,
+  moveRight: MoveRight,
+  help: HelpCircle,
+  pizza: Pizza,
+  check: Check,
+  copy: Copy,
+  copyDone: ClipboardCheck,
+  refresh: RotateCw,
+  preview: EyeIcon,
+  externalLink: ExternalLink,
+  sun: SunMedium,
+  lock: LockKeyhole,
+  unLock: LockKeyholeOpen,
+  moon: Moon,
+  search: Search,
+  laptop: Laptop,
+  active: RefreshCcw,
+  draft: PencilRuler,
+  archive: ArchiveIcon,
+  restore: ArchiveRestore,
+  dashboard: LayoutDashboardIcon,
+  regulations: ScrollTextIcon,
+  home: HomeIcon,
+  mail: Mail,
+  building: BuildingIcon,
+  logo: TulipSymbol,
+};

package/dist/templates/code/src/env.ts

@@ -0,0 +1,26 @@
+import { createEnv } from "@t3-oss/env-nextjs";
+import { z } from "zod";
+
+export const env = createEnv({
+  server: {
+    BETTER_AUTH_SECRET: z.string().min(1),
+    DATABASE_URL: z.url(),
+    RESEND_API_KEY: z.string().min(1),
+    OPENROUTER_API_KEY: z.string().min(1),
+    S3_BUCKET: z.string().min(1),
+    S3_ENDPOINT: z.string().min(1),
+    S3_ACCESS_KEY_ID: z.string().min(1),
+    S3_SECRET_ACCESS_KEY: z.string().min(1),
+    GOOGLE_SERVICE_ACCOUNT_EMAIL: z.string().min(1),
+    GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY: z
+      .string()
+      .min(1)
+      .transform((str) => str.replace(/\\n/g, "\n")),
+  },
+  client: {
+    NEXT_PUBLIC_HOST: z.string().min(1),
+  },
+  experimental__runtimeEnv: {
+    NEXT_PUBLIC_HOST: process.env.NEXT_PUBLIC_HOST ?? process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL,
+  },
+});

package/dist/templates/code/src/instrumentation.ts

@@ -0,0 +1,14 @@
+import { PgInstrumentation } from "@opentelemetry/instrumentation-pg";
+import { ORPCInstrumentation } from "@orpc/otel";
+import { registerOTel } from "@vercel/otel";
+
+export async function register() {
+  registerOTel({
+    serviceName: "tulip-demo-code",
+    instrumentations: [new ORPCInstrumentation(), new PgInstrumentation()],
+  });
+
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    await import("./server/router/register");
+  }
+}

package/dist/templates/code/src/lib/config/base.ts

@@ -0,0 +1,11 @@
+import { defineTulipConfig } from "@tulip-systems/core";
+
+export const config = defineTulipConfig({
+  general: {
+    name: "NewCode",
+    shortName: "NewCode",
+  },
+  email: {
+    defaultFrom: "NewCode <noreply@newcode.be>",
+  },
+});

package/dist/templates/code/src/lib/config/paths.tsx

@@ -0,0 +1,163 @@
+import {
+  DefaultSidebarAccountMenu,
+  Path,
+  PathGroup,
+  PathGroupItems,
+  PathGroupTitle,
+  PathItems,
+  PathLink,
+  PathSubItem,
+  PathSubItemLink,
+} from "@tulip-systems/app/components/client";
+import { Sidebar, SidebarContent, SidebarHeader, SidebarRail } from "@tulip-systems/ui/sidebar";
+import {
+  BotIcon,
+  FoldersIcon,
+  HomeIcon,
+  ListTodoIcon,
+  Table2Icon,
+  TimerIcon,
+  UserSearchIcon,
+  UsersIcon,
+} from "lucide-react";
+import { DRIVE_NAMESPACES } from "@/app/admin/drive/_config/namespaces";
+import { Icons } from "@/components/icons";
+
+export function AdminSidebar() {
+  return (
+    <Sidebar>
+      <SidebarHeader>
+        <DefaultSidebarAccountMenu />
+      </SidebarHeader>
+
+      <SidebarContent>
+        <PathGroup>
+          <PathGroupItems>
+            <Path segment="(dashboard)">
+              <PathLink href="/admin">
+                <Icons.dashboard />
+                Dashboard
+              </PathLink>
+            </Path>
+
+            <Path segment="assistant">
+              <PathLink href="/admin/assistant">
+                <BotIcon />
+                Assistant
+              </PathLink>
+            </Path>
+
+            <Path permission={{ drive: ["view"] }} segment="drive">
+              <PathLink href="/admin/drive">
+                <FoldersIcon />
+                Drive
+              </PathLink>
+
+              <PathItems>
+                {Object.values(DRIVE_NAMESPACES).flatMap((drive) =>
+                  drive.key === "global"
+                    ? []
+                    : [
+                        <PathSubItem
+                          key={drive.namespace}
+                          permission={drive.permission ?? { drive: ["view"] }}
+                          segment={drive.key}
+                        >
+                          <PathSubItemLink href={`/admin/drive/${drive.key}`}>
+                            {drive.label}
+                          </PathSubItemLink>
+                        </PathSubItem>,
+                      ],
+                )}
+              </PathItems>
+            </Path>
+          </PathGroupItems>
+        </PathGroup>
+
+        <PathGroup permission={[{ project: ["view"] }, { task: ["view"] }, { time: ["view"] }]}>
+          <PathGroupTitle>Projecten</PathGroupTitle>
+
+          <PathGroupItems>
+            <Path permission={{ project: ["view"] }} segment="projects">
+              <PathLink href="/admin/projects">
+                <Table2Icon />
+                Projecten
+              </PathLink>
+
+              <PathItems>
+                <PathSubItem permission={{ project: ["view.drive"] }} segment="drive">
+                  <PathSubItemLink href="/admin/projects/drive">Drive</PathSubItemLink>
+                </PathSubItem>
+
+                <PathSubItem segment="timeline">
+                  <PathSubItemLink href="/admin/projects/timeline">Timeline</PathSubItemLink>
+                </PathSubItem>
+              </PathItems>
+            </Path>
+
+            <Path permission={{ task: ["view"] }} segment="tasks">
+              <PathLink href="/admin/tasks">
+                <ListTodoIcon />
+                My Tasks
+              </PathLink>
+            </Path>
+
+            <Path permission={{ time: ["view"] }} segment="time">
+              <PathLink href="/admin/time">
+                <TimerIcon />
+                Time
+              </PathLink>
+            </Path>
+          </PathGroupItems>
+        </PathGroup>
+
+        <PathGroup permission={[{ customer: ["view"] }]}>
+          <PathGroupTitle>Klanten</PathGroupTitle>
+
+          <PathGroupItems>
+            <Path permission={{ customer: ["view"] }} segment="customers">
+              <PathLink href="/admin/customers">
+                <HomeIcon />
+                Klanten
+              </PathLink>
+            </Path>
+          </PathGroupItems>
+        </PathGroup>
+
+        <PathGroup
+          permission={[
+            { prospect: ["view"] },
+            { opportunity: ["view"] },
+            { salesActivity: ["view"] },
+          ]}
+        >
+          <PathGroupTitle>Sales</PathGroupTitle>
+
+          <PathGroupItems>
+            <Path permission={{ prospect: ["view"] }} segment="prospects">
+              <PathLink href="/admin/prospects">
+                <UserSearchIcon />
+                Prospects
+              </PathLink>
+            </Path>
+          </PathGroupItems>
+        </PathGroup>
+
+        <PathGroup permission={[{ employee: ["view"] }]}>
+          <PathGroupTitle>Mangement</PathGroupTitle>
+
+          <PathGroupItems>
+            <Path permission={{ employee: ["view"] }} segment="employees">
+              <PathLink href="/admin/employees">
+                <UsersIcon />
+                Medewerkers
+              </PathLink>
+            </Path>
+          </PathGroupItems>
+        </PathGroup>
+      </SidebarContent>
+
+      <SidebarRail />
+    </Sidebar>
+  );
+}