@tulip-systems/create-app 0.11.1

package/dist/templates/code/src/app/admin/time/_lib/router.ts

@@ -0,0 +1,531 @@
+import "server-cli-only";
+
+import { ORPCError } from "@orpc/server";
+import {
+  bulkActionSchema,
+  offsetPaginationResponse,
+  offsetPaginationSchema,
+  parseOffsetPagination,
+} from "@tulip-systems/query";
+import { endOfDay, endOfMonth, startOfMonth } from "date-fns";
+import { and, asc, count, desc, eq, gte, inArray, isNotNull, isNull, lte, sql } from "drizzle-orm";
+import z from "zod";
+import { getTableData } from "@/app/lib/utils/table-data.server";
+import { customers, employees, projects, tasks, users } from "@/server/db/schema";
+import { permissionMiddleware } from "@/server/router/middleware";
+import { protectedProcedure } from "@/server/router/procedures";
+import type { TimeEntryAggregatedColumnsData } from "../_config/columns-aggregated";
+import type { TimeEntryColumnsData } from "../_config/columns-data";
+import { timeEntryDatabaseFiltersCompiler, timeEntryFiltersParser } from "../_config/filters";
+import {
+  timeEntryTableDatabaseSortsCompiler,
+  timeEntryTableSortsParser,
+  timeEntryTableSortsSchema,
+} from "../_config/sorting";
+import { timeEntries } from "./schema";
+import {
+  createTimeEntrySchema,
+  startTimeEntrySchema,
+  timeEntryFiltersSchema,
+  updateTimeEntrySchema,
+} from "./validators";
+
+export const timeEntriesRouter = {
+  list: protectedProcedure
+    .use(permissionMiddleware({ time: ["view"] }))
+    .input(
+      z.object({
+        pagination: offsetPaginationSchema,
+        filters: timeEntryFiltersSchema,
+        sorts: timeEntryTableSortsSchema,
+      }),
+    )
+    .handler(async ({ context, input: { pagination, filters, sorts } }) => {
+      const parsedSorts = timeEntryTableSortsParser.parse(sorts);
+      const orderBy = timeEntryTableDatabaseSortsCompiler(timeEntries).parse(parsedSorts);
+
+      const parsedFilters = timeEntryFiltersParser.parse(filters);
+      const where = and(
+        isNotNull(timeEntries.end),
+        timeEntryDatabaseFiltersCompiler(timeEntries).parse(parsedFilters),
+      );
+
+      const { data, total } = await getTableData(context, timeEntries, {
+        pagination,
+        where,
+        orderBy,
+        with: { customer: true, employee: { with: { user: true } }, project: true, task: true },
+      });
+
+      return offsetPaginationResponse({
+        data: data as TimeEntryColumnsData[],
+        pagination,
+        total,
+      });
+    }),
+  filterCustomers: protectedProcedure
+    .use(permissionMiddleware({ time: ["view"] }))
+    .input(z.object({ filters: timeEntryFiltersSchema }))
+    .handler(async ({ context, input: { filters } }) =>
+      context.db
+        .select({
+          value: customers.id,
+          label: customers.name,
+          total: count(timeEntries.id),
+        })
+        .from(customers)
+        .leftJoin(
+          timeEntries,
+          and(
+            eq(customers.id, timeEntries.customerId),
+            isNotNull(timeEntries.end),
+            filters.employeeId ? inArray(timeEntries.employeeId, filters.employeeId) : undefined,
+            filters.projectId ? inArray(timeEntries.projectId, filters.projectId) : undefined,
+            filters.taskId ? inArray(timeEntries.taskId, filters.taskId) : undefined,
+            getTimeEntryDateRangeWhere(filters),
+          ),
+        )
+        .where(eq(customers.isDeleted, false))
+        .groupBy(customers.id)
+        .having(gte(sql<number>`count(${timeEntries.id})`, 1))
+        .orderBy(customers.name),
+    ),
+  filterProjects: protectedProcedure
+    .use(permissionMiddleware({ time: ["view"] }))
+    .input(z.object({ filters: timeEntryFiltersSchema }))
+    .handler(async ({ context, input: { filters } }) =>
+      context.db
+        .select({
+          value: projects.id,
+          label: projects.title,
+          total: count(timeEntries.id),
+        })
+        .from(projects)
+        .leftJoin(
+          timeEntries,
+          and(
+            eq(projects.id, timeEntries.projectId),
+            isNotNull(timeEntries.end),
+            filters.employeeId ? inArray(timeEntries.employeeId, filters.employeeId) : undefined,
+            filters.customerId ? inArray(timeEntries.customerId, filters.customerId) : undefined,
+            filters.taskId ? inArray(timeEntries.taskId, filters.taskId) : undefined,
+            getTimeEntryDateRangeWhere(filters),
+          ),
+        )
+        .where(isNull(projects.deletedAt))
+        .groupBy(projects.id)
+        .having(gte(sql<number>`count(${timeEntries.id})`, 1))
+        .orderBy(projects.title),
+    ),
+  filterEmployees: protectedProcedure
+    .use(permissionMiddleware({ time: ["view"] }))
+    .input(z.object({ filters: timeEntryFiltersSchema }))
+    .handler(async ({ context, input: { filters } }) =>
+      context.db
+        .select({
+          value: employees.id,
+          label: sql<string>`min(${users.name})`,
+          total: count(timeEntries.id),
+        })
+        .from(employees)
+        .leftJoin(users, eq(employees.userId, users.id))
+        .leftJoin(
+          timeEntries,
+          and(
+            eq(employees.id, timeEntries.employeeId),
+            isNotNull(timeEntries.end),
+            filters.customerId ? inArray(timeEntries.customerId, filters.customerId) : undefined,
+            filters.projectId ? inArray(timeEntries.projectId, filters.projectId) : undefined,
+            filters.taskId ? inArray(timeEntries.taskId, filters.taskId) : undefined,
+            getTimeEntryDateRangeWhere(filters),
+          ),
+        )
+        .where(eq(employees.isDeleted, false))
+        .groupBy(employees.id)
+        .having(gte(sql<number>`count(${timeEntries.id})`, 1))
+        .orderBy(asc(sql<string>`min(${users.name})`)),
+    ),
+  getMonthlyHours: protectedProcedure
+    .use(permissionMiddleware({ time: ["view"] }))
+    .input(
+      z.object({
+        filters: timeEntryFiltersSchema,
+      }),
+    )
+    .handler(async ({ context, input: { filters } }) => {
+      const [rangeStart, rangeEnd] = filters.dateRange ?? getDefaultTimeEntryDateRange();
+      const daySql = sql<string>`date_trunc('day', ${timeEntries.start})::date`;
+
+      const days = await context.db
+        .select({
+          day: daySql,
+          totalSeconds: sql<number>`coalesce(sum(${timeEntries.durationSeconds}), 0)`,
+        })
+        .from(timeEntries)
+        .where(
+          and(
+            gte(timeEntries.start, rangeStart),
+            lte(timeEntries.start, endOfDay(rangeEnd)),
+            isNotNull(timeEntries.end),
+            // Filters
+            filters.employeeId ? inArray(timeEntries.employeeId, filters.employeeId) : undefined,
+            filters.customerId ? inArray(timeEntries.customerId, filters.customerId) : undefined,
+            filters.projectId ? inArray(timeEntries.projectId, filters.projectId) : undefined,
+            filters.taskId ? inArray(timeEntries.taskId, filters.taskId) : undefined,
+          ),
+        )
+        .groupBy(daySql)
+        .orderBy(daySql);
+
+      return days.map((day) => ({
+        ...day,
+        totalSeconds: Number(day.totalSeconds),
+      }));
+    }),
+  getDailyHoursByGroup: protectedProcedure
+    .use(permissionMiddleware({ time: ["view"] }))
+    .input(
+      z.object({
+        filters: timeEntryFiltersSchema,
+        groupBy: z.enum(["customer", "project", "employee", "task", "date"]).default("date"),
+        limit: z.number().int().min(1).max(10).default(5),
+      }),
+    )
+    .handler(async ({ context, input: { filters, groupBy, limit } }) => {
+      const [rangeStart, rangeEnd] = filters.dateRange ?? getDefaultTimeEntryDateRange();
+      const daySql = sql<string>`date_trunc('day', ${timeEntries.start})::date`;
+      const totalSecondsSql = sql<number>`coalesce(sum(${timeEntries.durationSeconds}), 0)`;
+      const where = and(
+        gte(timeEntries.start, rangeStart),
+        lte(timeEntries.start, endOfDay(rangeEnd)),
+        isNotNull(timeEntries.end),
+        filters.employeeId ? inArray(timeEntries.employeeId, filters.employeeId) : undefined,
+        filters.customerId ? inArray(timeEntries.customerId, filters.customerId) : undefined,
+        filters.projectId ? inArray(timeEntries.projectId, filters.projectId) : undefined,
+        filters.taskId ? inArray(timeEntries.taskId, filters.taskId) : undefined,
+      );
+
+      if (groupBy === "date") {
+        const data = await context.db
+          .select({
+            day: daySql,
+            totalSeconds: totalSecondsSql,
+          })
+          .from(timeEntries)
+          .where(where)
+          .groupBy(daySql)
+          .orderBy(daySql);
+
+        return data.map((item) => ({
+          day: item.day,
+          groupId: "totalSeconds",
+          groupLabel: "Tijd",
+          totalSeconds: Number(item.totalSeconds),
+        }));
+      }
+
+      const aggregate = getTimeEntryAggregateGroup(groupBy);
+
+      const topGroups = await context.db
+        .select({
+          groupId: aggregate.groupId,
+          totalSeconds: totalSecondsSql,
+        })
+        .from(timeEntries)
+        .leftJoin(customers, eq(timeEntries.customerId, customers.id))
+        .leftJoin(projects, eq(timeEntries.projectId, projects.id))
+        .leftJoin(tasks, eq(timeEntries.taskId, tasks.id))
+        .leftJoin(employees, eq(timeEntries.employeeId, employees.id))
+        .leftJoin(users, eq(employees.userId, users.id))
+        .where(where)
+        .groupBy(...aggregate.groupBy)
+        .orderBy(desc(totalSecondsSql))
+        .limit(limit);
+
+      const topGroupKeys = new Set(topGroups.map((item) => item.groupId ?? "unassigned"));
+
+      const data = await context.db
+        .select({
+          day: daySql,
+          groupId: aggregate.groupId,
+          groupLabel: aggregate.groupLabel,
+          totalSeconds: totalSecondsSql,
+        })
+        .from(timeEntries)
+        .leftJoin(customers, eq(timeEntries.customerId, customers.id))
+        .leftJoin(projects, eq(timeEntries.projectId, projects.id))
+        .leftJoin(tasks, eq(timeEntries.taskId, tasks.id))
+        .leftJoin(employees, eq(timeEntries.employeeId, employees.id))
+        .leftJoin(users, eq(employees.userId, users.id))
+        .where(where)
+        .groupBy(daySql, ...aggregate.groupBy)
+        .orderBy(daySql, asc(aggregate.groupLabel));
+
+      const groupedData = new Map<
+        string,
+        { day: string; groupId: string; groupLabel: string; totalSeconds: number }
+      >();
+
+      for (const item of data) {
+        const originalGroupKey = item.groupId ?? "unassigned";
+        const groupId = topGroupKeys.has(originalGroupKey) ? originalGroupKey : "other";
+        const groupLabel = topGroupKeys.has(originalGroupKey)
+          ? (item.groupLabel ?? "Niet toegewezen")
+          : "Overige";
+        const key = `${item.day}:${groupId}`;
+        const current = groupedData.get(key);
+
+        groupedData.set(key, {
+          day: item.day,
+          groupId,
+          groupLabel,
+          totalSeconds: (current?.totalSeconds ?? 0) + Number(item.totalSeconds),
+        });
+      }
+
+      return Array.from(groupedData.values());
+    }),
+  listAggregated: protectedProcedure
+    .use(permissionMiddleware({ time: ["view"] }))
+    .input(
+      z.object({
+        pagination: offsetPaginationSchema,
+        filters: timeEntryFiltersSchema,
+        groupBy: z.enum(["customer", "project", "employee", "task", "date"]).default("date"),
+      }),
+    )
+    .handler(async ({ context, input: { pagination, filters, groupBy } }) => {
+      const { limit, offset } = parseOffsetPagination(pagination);
+      const aggregate = getTimeEntryAggregateGroup(groupBy);
+      const totalSecondsSql = sql<number>`coalesce(sum(${timeEntries.durationSeconds}), 0)`;
+      const entryCountSql = sql<number>`count(${timeEntries.id})`;
+      const firstEntrySql = sql<Date>`min(${timeEntries.start})`;
+      const lastEntrySql = sql<Date>`max(${timeEntries.start})`;
+
+      const where = getTimeEntryAggregateWhere(filters);
+
+      const [data, [{ total = 0 } = { total: 0 }]] = await Promise.all([
+        context.db
+          .select({
+            groupId: aggregate.groupId,
+            groupLabel: aggregate.groupLabel,
+            groupBy: sql<typeof groupBy>`${groupBy}`,
+            totalSeconds: totalSecondsSql,
+            entryCount: entryCountSql,
+            firstEntry: firstEntrySql,
+            lastEntry: lastEntrySql,
+          })
+          .from(timeEntries)
+          .leftJoin(customers, eq(timeEntries.customerId, customers.id))
+          .leftJoin(projects, eq(timeEntries.projectId, projects.id))
+          .leftJoin(tasks, eq(timeEntries.taskId, tasks.id))
+          .leftJoin(employees, eq(timeEntries.employeeId, employees.id))
+          .leftJoin(users, eq(employees.userId, users.id))
+          .where(where)
+          .groupBy(...aggregate.groupBy)
+          .orderBy(desc(totalSecondsSql), asc(aggregate.groupLabel))
+          .limit(limit)
+          .offset(offset),
+        context.db.select({ total: count() }).from(
+          context.db
+            .select({ groupId: aggregate.groupId })
+            .from(timeEntries)
+            .leftJoin(customers, eq(timeEntries.customerId, customers.id))
+            .leftJoin(projects, eq(timeEntries.projectId, projects.id))
+            .leftJoin(tasks, eq(timeEntries.taskId, tasks.id))
+            .leftJoin(employees, eq(timeEntries.employeeId, employees.id))
+            .leftJoin(users, eq(employees.userId, users.id))
+            .where(where)
+            .groupBy(...aggregate.groupBy)
+            .as("aggregated_time_entries"),
+        ),
+      ]);
+
+      return offsetPaginationResponse<TimeEntryAggregatedColumnsData>({
+        data: data.map((item) => ({
+          ...item,
+          id: `${groupBy}:${item.groupId ?? item.groupLabel ?? "unassigned"}`,
+          totalSeconds: Number(item.totalSeconds),
+          entryCount: Number(item.entryCount),
+        })),
+        pagination,
+        total,
+      });
+    }),
+  getActive: protectedProcedure
+    .use(permissionMiddleware({ time: ["view"] }))
+    .input(z.object({ employeeId: z.string() }))
+    .handler(async ({ context, input }) => {
+      const data = await context.db.query.timeEntries.findFirst({
+        where: and(eq(timeEntries.employeeId, input.employeeId), isNull(timeEntries.end)),
+        with: { project: true },
+      });
+
+      return data ?? null;
+    }),
+  create: protectedProcedure
+    .use(permissionMiddleware({ time: ["create"] }))
+    .input(createTimeEntrySchema)
+    .handler(async ({ context, input }) => {
+      const [result] = await context.db.insert(timeEntries).values(input).returning();
+
+      if (!result) {
+        throw new ORPCError("INTERNAL_SERVER_ERROR", {
+          message: "Tijd kon niet worden aangemaakt",
+        });
+      }
+
+      return result;
+    }),
+  update: protectedProcedure
+    .use(permissionMiddleware({ time: ["update"] }))
+    .input(z.object({ id: z.string(), data: updateTimeEntrySchema.partial() }))
+    .output(z.void())
+    .handler(async ({ context, input }) => {
+      const [result] = await context.db
+        .update(timeEntries)
+        .set(input.data)
+        .where(eq(timeEntries.id, input.id))
+        .returning();
+
+      if (!result) {
+        throw new ORPCError("NOT_FOUND", {
+          message: "Tijd kon niet worden gewijzigd",
+        });
+      }
+    }),
+  start: protectedProcedure
+    .use(permissionMiddleware({ time: ["create"] }))
+    .input(startTimeEntrySchema)
+    .handler(async ({ context, input }) => {
+      const [runningTimeEntry] = await context.db
+        .select({ id: timeEntries.id })
+        .from(timeEntries)
+        .where(and(isNull(timeEntries.end), eq(timeEntries.employeeId, input.employeeId)))
+        .limit(1);
+
+      if (runningTimeEntry) {
+        throw new ORPCError("BAD_REQUEST", {
+          message: "Er is al een actieve tijdregistratie",
+        });
+      }
+
+      const [result] = await context.db
+        .insert(timeEntries)
+        .values({ ...input, start: new Date() })
+        .returning();
+
+      if (!result) {
+        throw new ORPCError("INTERNAL_SERVER_ERROR", {
+          message: "Tijd kon niet worden gestart",
+        });
+      }
+
+      // Get the data
+      const data = await context.db.query.timeEntries.findFirst({
+        where: eq(timeEntries.id, result.id),
+        with: { project: true },
+      });
+
+      return data ?? null;
+    }),
+  stop: protectedProcedure
+    .use(permissionMiddleware({ time: ["create"] }))
+    .input(z.object({ id: z.string() }))
+    .handler(async ({ context, input }) => {
+      const [runningTimeEntry] = await context.db
+        .select({ id: timeEntries.id })
+        .from(timeEntries)
+        .where(eq(timeEntries.id, input.id))
+        .limit(1);
+
+      if (!runningTimeEntry) {
+        throw new ORPCError("INTERNAL_SERVER_ERROR", {
+          message: "Tijd kon niet gevonden worden",
+        });
+      }
+
+      const [result] = await context.db
+        .update(timeEntries)
+        .set({ end: new Date() })
+        .where(eq(timeEntries.id, input.id))
+        .returning();
+
+      if (!result) {
+        throw new ORPCError("INTERNAL_SERVER_ERROR", {
+          message: "Tijd kon niet worden gestopt",
+        });
+      }
+    }),
+  delete: protectedProcedure
+    .use(permissionMiddleware({ time: ["delete"] }))
+    .input(bulkActionSchema)
+    .handler(async ({ context, input }) => {
+      await context.db.delete(timeEntries).where(inArray(timeEntries.id, input.ids));
+    }),
+};
+
+function getTimeEntryDateRangeWhere(filters: z.input<typeof timeEntryFiltersSchema>) {
+  const [start, end] = filters.dateRange ?? [];
+
+  return and(
+    start ? gte(timeEntries.start, start) : undefined,
+    end ? lte(timeEntries.start, endOfDay(end)) : undefined,
+  );
+}
+
+function getDefaultTimeEntryDateRange(): [Date, Date] {
+  const start = startOfMonth(new Date());
+
+  return [start, endOfMonth(start)];
+}
+
+function getTimeEntryAggregateWhere(filters: z.input<typeof timeEntryFiltersSchema>) {
+  return and(
+    isNotNull(timeEntries.end),
+    filters.employeeId ? inArray(timeEntries.employeeId, filters.employeeId) : undefined,
+    filters.customerId ? inArray(timeEntries.customerId, filters.customerId) : undefined,
+    filters.projectId ? inArray(timeEntries.projectId, filters.projectId) : undefined,
+    filters.taskId ? inArray(timeEntries.taskId, filters.taskId) : undefined,
+    getTimeEntryDateRangeWhere(filters),
+  );
+}
+
+function getTimeEntryAggregateGroup(
+  groupBy: "customer" | "project" | "employee" | "task" | "date",
+) {
+  const daySql = sql<string>`date_trunc('day', ${timeEntries.start})::date`;
+
+  switch (groupBy) {
+    case "customer":
+      return {
+        groupId: customers.id,
+        groupLabel: customers.name,
+        groupBy: [customers.id, customers.name],
+      };
+    case "project":
+      return {
+        groupId: projects.id,
+        groupLabel: projects.title,
+        groupBy: [projects.id, projects.title],
+      };
+    case "employee":
+      return {
+        groupId: employees.id,
+        groupLabel: users.name,
+        groupBy: [employees.id, users.name],
+      };
+    case "task":
+      return {
+        groupId: tasks.id,
+        groupLabel: sql<string>`coalesce(${tasks.title}, 'Geen task')`,
+        groupBy: [tasks.id, tasks.title],
+      };
+    case "date":
+      return {
+        groupId: daySql,
+        groupLabel: daySql,
+        groupBy: [daySql],
+      };
+  }
+}

package/dist/templates/code/src/app/admin/time/_lib/schema.ts

@@ -0,0 +1,57 @@
+import { relations, type SQL, sql } from "drizzle-orm";
+import { pgTable } from "drizzle-orm/pg-core";
+import { customers } from "@/app/admin/customers/_lib/schema";
+import { employees } from "@/app/admin/employees/_lib/schema";
+import { projects } from "@/app/admin/projects/_lib/schema";
+import { tasks } from "@/app/admin/tasks/_lib/schema";
+import { baseColumns } from "@/server/db/helpers";
+
+/**
+ * Time entries table
+ */
+export const timeEntries = pgTable("time_entries", (t) => ({
+  ...baseColumns,
+  start: t.timestamp().notNull(),
+  end: t.timestamp(),
+  duration: t
+    .interval()
+    .generatedAlwaysAs((): SQL => sql`(${timeEntries.end} - ${timeEntries.start})`),
+  durationSeconds: t
+    .integer()
+    .generatedAlwaysAs(
+      (): SQL => sql`EXTRACT(EPOCH FROM (${timeEntries.end} - ${timeEntries.start}))::int`,
+    ),
+  description: t.text(),
+  employeeId: t
+    .uuid()
+    .notNull()
+    .references(() => employees.id, { onDelete: "restrict" }),
+  customerId: t
+    .uuid()
+    .notNull()
+    .references(() => customers.id, { onDelete: "restrict" }),
+  projectId: t.uuid().references(() => projects.id, { onDelete: "restrict" }),
+  taskId: t.uuid().references(() => tasks.id, { onDelete: "restrict" }),
+}));
+
+/**
+ * Relations
+ */
+export const timeEntriesRelations = relations(timeEntries, ({ one }) => ({
+  employee: one(employees, {
+    fields: [timeEntries.employeeId],
+    references: [employees.id],
+  }),
+  customer: one(customers, {
+    fields: [timeEntries.customerId],
+    references: [customers.id],
+  }),
+  project: one(projects, {
+    fields: [timeEntries.projectId],
+    references: [projects.id],
+  }),
+  task: one(tasks, {
+    fields: [timeEntries.taskId],
+    references: [tasks.id],
+  }),
+}));

package/dist/templates/code/src/app/admin/time/_lib/validators.ts

@@ -0,0 +1,41 @@
+import { resolveFiltersSchema } from "@tulip-systems/query";
+import { createInsertSchema, createUpdateSchema } from "drizzle-zod";
+import type { z } from "zod";
+import { timeEntriesFilters } from "../_config/filters";
+import { timeEntries } from "./schema";
+
+/**
+ * TimeEntry type
+ */
+export type TimeEntry = typeof timeEntries.$inferSelect;
+
+/**
+ * Schema
+ */
+export const createTimeEntrySchema = createInsertSchema(timeEntries);
+
+export const updateTimeEntrySchema = createUpdateSchema(timeEntries);
+
+export const startTimeEntrySchema = createInsertSchema(timeEntries).omit({
+  start: true,
+  end: true,
+});
+
+/**
+ * Create timeEntry schema
+ */
+export type CreateTimeEntryInput = z.input<typeof createTimeEntrySchema>;
+export type CreateTimeEntrySchema = z.infer<typeof createTimeEntrySchema>;
+
+export type UpdateTimeEntryInput = z.input<typeof updateTimeEntrySchema>;
+export type UpdateTimeEntrySchema = z.infer<typeof updateTimeEntrySchema>;
+
+export type StartTimeEntryInput = z.input<typeof startTimeEntrySchema>;
+export type StartTimeEntrySchema = z.infer<typeof startTimeEntrySchema>;
+
+/**
+ * Filter input
+ */
+export const timeEntryFiltersSchema = resolveFiltersSchema(timeEntriesFilters);
+
+export type TimeEntryFilters = z.input<typeof timeEntryFiltersSchema>;

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

@@ -0,0 +1,18 @@
+import { Header, Topbar, TopbarTitle } from "@tulip-systems/app/components/client";
+import type { PropsWithChildren } from "react";
+
+export default function Layout({ children }: PropsWithChildren) {
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle
+            breadcrumbs={[{ label: "Tijd", href: "/admin/time" }, { label: "Insights" }]}
+          />
+        </Topbar>
+      </Header>
+
+      <div className="p-content">{children}</div>
+    </>
+  );
+}

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

@@ -0,0 +1,19 @@
+import { Card, CardContent, CardHeader } from "@tulip-systems/ui/card";
+import { Skeleton } from "@tulip-systems/ui/skeleton";
+
+export default function Loading() {
+  return (
+    <div className="space-y-5">
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-5 w-32" />
+        </CardHeader>
+        <CardContent>
+          <Skeleton className="h-64 w-full" />
+        </CardContent>
+      </Card>
+
+      <Skeleton className="h-[28rem] w-full" />
+    </div>
+  );
+}