Merge remote-tracking branch 'origin/main'

# Conflicts:
#	apps/web/app/[locale]/home/[account]/_components/team-account-layout-mobile-navigation.tsx
#	packages/features/course-management/src/server/api.ts
#	packages/features/event-management/src/server/api.ts
#	packages/supabase/src/get-supabase-client-keys.ts
#	pnpm-lock.yaml
This commit is contained in:
T. Zehetbauer
2026-04-01 13:22:17 +02:00
34 changed files with 1608 additions and 1361 deletions

View File

@@ -33,7 +33,8 @@ export abstract class BillingStrategyProviderService {
abstract createCheckoutSession(
params: z.output<typeof CreateBillingCheckoutSchema>,
): Promise<{
checkoutToken: string;
checkoutToken: string | null;
url?: string | null;
}>;
abstract cancelSubscription(

View File

@@ -16,7 +16,7 @@ const { publishableKey } = StripeClientEnvSchema.parse({
publishableKey: process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,
});
const stripePromise = loadStripe(publishableKey);
const stripePromise = loadStripe(publishableKey as string);
export function StripeCheckout({
checkoutToken,

View File

@@ -1,11 +1,17 @@
import * as z from 'zod';
const isHostedMode = process.env.STRIPE_UI_MODE === 'hosted_page';
export const StripeClientEnvSchema = z
.object({
publishableKey: z.string().min(1),
publishableKey: isHostedMode ? z.string().optional() : z.string().min(1),
})
.refine(
(schema) => {
if (isHostedMode || !schema.publishableKey) {
return true;
}
return schema.publishableKey.startsWith('pk_');
},
{

View File

@@ -9,6 +9,13 @@ import type { CreateBillingCheckoutSchema } from '@kit/billing/schema';
const enableTrialWithoutCreditCard =
process.env.STRIPE_ENABLE_TRIAL_WITHOUT_CC === 'true';
const UI_MODE_VALUES = ['embedded_page', 'hosted_page'] as const;
const uiMode = z
.enum(UI_MODE_VALUES)
.default('embedded_page')
.parse(process.env.STRIPE_UI_MODE);
/**
* @name createStripeCheckout
* @description Creates a Stripe Checkout session, and returns an Object
@@ -68,11 +75,9 @@ export async function createStripeCheckout(
const urls = getUrls({
returnUrl: params.returnUrl,
uiMode,
});
// we use the embedded mode, so the user does not leave the page
const uiMode = 'embedded';
const customerData = customer
? {
customer,
@@ -127,10 +132,20 @@ export async function createStripeCheckout(
});
}
function getUrls(params: { returnUrl: string }) {
const returnUrl = `${params.returnUrl}?session_id={CHECKOUT_SESSION_ID}`;
function getUrls(params: {
returnUrl: string;
uiMode: (typeof UI_MODE_VALUES)[number];
}) {
const url = `${params.returnUrl}?session_id={CHECKOUT_SESSION_ID}`;
if (params.uiMode === 'hosted_page') {
return {
success_url: url,
cancel_url: params.returnUrl,
};
}
return {
return_url: returnUrl,
return_url: url,
};
}

View File

@@ -47,9 +47,9 @@ export class StripeBillingStrategyService implements BillingStrategyProviderServ
logger.info(ctx, 'Creating checkout session...');
const { client_secret } = await createStripeCheckout(stripe, params);
const { client_secret, url } = await createStripeCheckout(stripe, params);
if (!client_secret) {
if (!client_secret && !url) {
logger.error(ctx, 'Failed to create checkout session');
throw new Error('Failed to create checkout session');
@@ -57,7 +57,10 @@ export class StripeBillingStrategyService implements BillingStrategyProviderServ
logger.info(ctx, 'Checkout session created successfully');
return { checkoutToken: client_secret };
return {
checkoutToken: client_secret ?? null,
url,
};
}
/**

View File

@@ -1,7 +1,7 @@
import 'server-only';
import { StripeServerEnvSchema } from '../schema/stripe-server-env.schema';
const STRIPE_API_VERSION = '2026-02-25.clover';
const STRIPE_API_VERSION = '2026-03-25.dahlia';
/**
* @description returns a Stripe instance

View File

@@ -1,11 +1,7 @@
import type { Database } from '@kit/supabase/database';
import type { SupabaseClient } from '@supabase/supabase-js';
import type { Database } from '@kit/supabase/database';
import type {
CreateCourseInput,
EnrollParticipantInput,
} from '../schema/course.schema';
import type { CreateCourseInput, EnrollParticipantInput } from '../schema/course.schema';
/* eslint-disable @typescript-eslint/no-explicit-any */
@@ -14,25 +10,11 @@ export function createCourseManagementApi(client: SupabaseClient<Database>) {
return {
// --- Courses ---
async listCourses(
accountId: string,
opts?: {
status?: string;
search?: string;
page?: number;
pageSize?: number;
},
) {
let query = client
.from('courses')
.select('*', { count: 'exact' })
.eq('account_id', accountId)
.order('start_date', { ascending: false });
async listCourses(accountId: string, opts?: { status?: string; search?: string; page?: number; pageSize?: number }) {
let query = client.from('courses').select('*', { count: 'exact' })
.eq('account_id', accountId).order('start_date', { ascending: false });
if (opts?.status) query = query.eq('status', opts.status);
if (opts?.search)
query = query.or(
`name.ilike.%${opts.search}%,course_number.ilike.%${opts.search}%`,
);
if (opts?.search) query = query.or(`name.ilike.%${opts.search}%,course_number.ilike.%${opts.search}%`);
const page = opts?.page ?? 1;
const pageSize = opts?.pageSize ?? 25;
query = query.range((page - 1) * pageSize, page * pageSize - 1);
@@ -42,38 +24,20 @@ export function createCourseManagementApi(client: SupabaseClient<Database>) {
},
async getCourse(courseId: string) {
const { data, error } = await client
.from('courses')
.select('*')
.eq('id', courseId)
.single();
const { data, error } = await client.from('courses').select('*').eq('id', courseId).single();
if (error) throw error;
return data;
},
async createCourse(input: CreateCourseInput) {
const { data, error } = await client
.from('courses')
.insert({
account_id: input.accountId,
course_number: input.courseNumber,
name: input.name,
description: input.description,
category_id: input.categoryId,
instructor_id: input.instructorId,
location_id: input.locationId,
start_date: input.startDate,
end_date: input.endDate,
fee: input.fee,
reduced_fee: input.reducedFee,
capacity: input.capacity,
min_participants: input.minParticipants,
status: input.status,
registration_deadline: input.registrationDeadline,
notes: input.notes,
})
.select()
.single();
const { data, error } = await client.from('courses').insert({
account_id: input.accountId, course_number: input.courseNumber || null, name: input.name,
description: input.description || null, category_id: input.categoryId || null, instructor_id: input.instructorId || null,
location_id: input.locationId || null, start_date: input.startDate || null, end_date: input.endDate || null,
fee: input.fee, reduced_fee: input.reducedFee ?? null, capacity: input.capacity,
min_participants: input.minParticipants, status: input.status,
registration_deadline: input.registrationDeadline || null, notes: input.notes || null,
}).select().single();
if (error) throw error;
return data;
},
@@ -81,161 +45,96 @@ export function createCourseManagementApi(client: SupabaseClient<Database>) {
// --- Enrollment ---
async enrollParticipant(input: EnrollParticipantInput) {
// Check capacity
const { count } = await client
.from('course_participants')
.select('*', { count: 'exact', head: true })
.eq('course_id', input.courseId)
.in('status', ['enrolled']);
const { count } = await client.from('course_participants').select('*', { count: 'exact', head: true })
.eq('course_id', input.courseId).in('status', ['enrolled']);
const course = await this.getCourse(input.courseId);
const status =
(count ?? 0) >= course.capacity ? 'waitlisted' : 'enrolled';
const status = (count ?? 0) >= course.capacity ? 'waitlisted' : 'enrolled';
const { data, error } = await client
.from('course_participants')
.insert({
course_id: input.courseId,
member_id: input.memberId,
first_name: input.firstName,
last_name: input.lastName,
email: input.email,
phone: input.phone,
status,
})
.select()
.single();
const { data, error } = await client.from('course_participants').insert({
course_id: input.courseId, member_id: input.memberId,
first_name: input.firstName, last_name: input.lastName,
email: input.email, phone: input.phone, status,
}).select().single();
if (error) throw error;
return data;
},
async cancelEnrollment(participantId: string) {
const { error } = await client
.from('course_participants')
const { error } = await client.from('course_participants')
.update({ status: 'cancelled', cancelled_at: new Date().toISOString() })
.eq('id', participantId);
if (error) throw error;
},
async getParticipants(courseId: string) {
const { data, error } = await client
.from('course_participants')
.select('*')
.eq('course_id', courseId)
.order('enrolled_at');
const { data, error } = await client.from('course_participants').select('*')
.eq('course_id', courseId).order('enrolled_at');
if (error) throw error;
return data ?? [];
},
// --- Sessions ---
async getSessions(courseId: string) {
const { data, error } = await client
.from('course_sessions')
.select('*')
.eq('course_id', courseId)
.order('session_date');
const { data, error } = await client.from('course_sessions').select('*')
.eq('course_id', courseId).order('session_date');
if (error) throw error;
return data ?? [];
},
async createSession(input: {
courseId: string;
sessionDate: string;
startTime: string;
endTime: string;
locationId?: string;
}) {
const { data, error } = await client
.from('course_sessions')
.insert({
course_id: input.courseId,
session_date: input.sessionDate,
start_time: input.startTime,
end_time: input.endTime,
location_id: input.locationId,
})
.select()
.single();
async createSession(input: { courseId: string; sessionDate: string; startTime: string; endTime: string; locationId?: string }) {
const { data, error } = await client.from('course_sessions').insert({
course_id: input.courseId, session_date: input.sessionDate,
start_time: input.startTime, end_time: input.endTime, location_id: input.locationId,
}).select().single();
if (error) throw error;
return data;
},
// --- Attendance ---
async getAttendance(sessionId: string) {
const { data, error } = await client
.from('course_attendance')
.select('*')
.eq('session_id', sessionId);
const { data, error } = await client.from('course_attendance').select('*').eq('session_id', sessionId);
if (error) throw error;
return data ?? [];
},
async markAttendance(
sessionId: string,
participantId: string,
present: boolean,
) {
const { error } = await client.from('course_attendance').upsert(
{
session_id: sessionId,
participant_id: participantId,
present,
},
{ onConflict: 'session_id,participant_id' },
);
async markAttendance(sessionId: string, participantId: string, present: boolean) {
const { error } = await client.from('course_attendance').upsert({
session_id: sessionId, participant_id: participantId, present,
}, { onConflict: 'session_id,participant_id' });
if (error) throw error;
},
// --- Categories, Instructors, Locations ---
async listCategories(accountId: string) {
const { data, error } = await client
.from('course_categories')
.select('*')
.eq('account_id', accountId)
.order('sort_order');
const { data, error } = await client.from('course_categories').select('*')
.eq('account_id', accountId).order('sort_order');
if (error) throw error;
return data ?? [];
},
async listInstructors(accountId: string) {
const { data, error } = await client
.from('course_instructors')
.select('*')
.eq('account_id', accountId)
.order('last_name');
const { data, error } = await client.from('course_instructors').select('*')
.eq('account_id', accountId).order('last_name');
if (error) throw error;
return data ?? [];
},
async listLocations(accountId: string) {
const { data, error } = await client
.from('course_locations')
.select('*')
.eq('account_id', accountId)
.order('name');
const { data, error } = await client.from('course_locations').select('*')
.eq('account_id', accountId).order('name');
if (error) throw error;
return data ?? [];
},
// --- Statistics ---
async getStatistics(accountId: string) {
const { data: courses } = await client
.from('courses')
.select('status')
.eq('account_id', accountId);
const { count: totalParticipants } = await client
.from('course_participants')
const { data: courses } = await client.from('courses').select('status').eq('account_id', accountId);
const { count: totalParticipants } = await client.from('course_participants')
.select('*', { count: 'exact', head: true })
.in(
'course_id',
(courses ?? []).map((c: any) => c.id),
);
.in('course_id', (courses ?? []).map((c: any) => c.id));
const stats = {
totalCourses: 0,
openCourses: 0,
completedCourses: 0,
totalParticipants: totalParticipants ?? 0,
};
for (const c of courses ?? []) {
const stats = { totalCourses: 0, openCourses: 0, completedCourses: 0, totalParticipants: totalParticipants ?? 0 };
for (const c of (courses ?? [])) {
stats.totalCourses++;
if (c.status === 'open' || c.status === 'running') stats.openCourses++;
if (c.status === 'completed') stats.completedCourses++;
@@ -244,70 +143,30 @@ export function createCourseManagementApi(client: SupabaseClient<Database>) {
},
// --- Create methods for CRUD ---
async createCategory(input: {
accountId: string;
name: string;
description?: string;
parentId?: string;
}) {
const { data, error } = await client
.from('course_categories')
.insert({
account_id: input.accountId,
name: input.name,
description: input.description,
parent_id: input.parentId,
})
.select()
.single();
async createCategory(input: { accountId: string; name: string; description?: string; parentId?: string }) {
const { data, error } = await client.from('course_categories').insert({
account_id: input.accountId, name: input.name, description: input.description,
parent_id: input.parentId,
}).select().single();
if (error) throw error;
return data;
},
async createInstructor(input: {
accountId: string;
firstName: string;
lastName: string;
email?: string;
phone?: string;
qualifications?: string;
hourlyRate?: number;
}) {
const { data, error } = await client
.from('course_instructors')
.insert({
account_id: input.accountId,
first_name: input.firstName,
last_name: input.lastName,
email: input.email,
phone: input.phone,
qualifications: input.qualifications,
hourly_rate: input.hourlyRate,
})
.select()
.single();
async createInstructor(input: { accountId: string; firstName: string; lastName: string; email?: string; phone?: string; qualifications?: string; hourlyRate?: number }) {
const { data, error } = await client.from('course_instructors').insert({
account_id: input.accountId, first_name: input.firstName, last_name: input.lastName,
email: input.email, phone: input.phone, qualifications: input.qualifications,
hourly_rate: input.hourlyRate,
}).select().single();
if (error) throw error;
return data;
},
async createLocation(input: {
accountId: string;
name: string;
address?: string;
room?: string;
capacity?: number;
}) {
const { data, error } = await client
.from('course_locations')
.insert({
account_id: input.accountId,
name: input.name,
address: input.address,
room: input.room,
capacity: input.capacity,
})
.select()
.single();
async createLocation(input: { accountId: string; name: string; address?: string; room?: string; capacity?: number }) {
const { data, error } = await client.from('course_locations').insert({
account_id: input.accountId, name: input.name, address: input.address,
room: input.room, capacity: input.capacity,
}).select().single();
if (error) throw error;
return data;
},

View File

@@ -1,6 +1,5 @@
import type { SupabaseClient } from '@supabase/supabase-js';
import type { Database } from '@kit/supabase/database';
import type { SupabaseClient } from '@supabase/supabase-js';
import type { CreateEventInput } from '../schema/event.schema';
@@ -11,28 +10,16 @@ export function createEventManagementApi(client: SupabaseClient<Database>) {
const db = client;
return {
async listEvents(
accountId: string,
opts?: { status?: string; page?: number },
) {
let query = client
.from('events')
.select('*', { count: 'exact' })
.eq('account_id', accountId)
.order('event_date', { ascending: false });
async listEvents(accountId: string, opts?: { status?: string; page?: number }) {
let query = client.from('events').select('*', { count: 'exact' })
.eq('account_id', accountId).order('event_date', { ascending: false });
if (opts?.status) query = query.eq('status', opts.status);
const page = opts?.page ?? 1;
query = query.range((page - 1) * PAGE_SIZE, page * PAGE_SIZE - 1);
const { data, error, count } = await query;
if (error) throw error;
const total = count ?? 0;
return {
data: data ?? [],
total,
page,
pageSize: PAGE_SIZE,
totalPages: Math.max(1, Math.ceil(total / PAGE_SIZE)),
};
return { data: data ?? [], total, page, pageSize: PAGE_SIZE, totalPages: Math.max(1, Math.ceil(total / PAGE_SIZE)) };
},
async getRegistrationCounts(eventIds: string[]) {
@@ -53,131 +40,71 @@ export function createEventManagementApi(client: SupabaseClient<Database>) {
},
async getEvent(eventId: string) {
const { data, error } = await client
.from('events')
.select('*')
.eq('id', eventId)
.single();
const { data, error } = await client.from('events').select('*').eq('id', eventId).single();
if (error) throw error;
return data;
},
async createEvent(input: CreateEventInput) {
const { data, error } = await client
.from('events')
.insert({
account_id: input.accountId,
name: input.name,
description: input.description,
event_date: input.eventDate,
event_time: input.eventTime,
end_date: input.endDate,
location: input.location,
capacity: input.capacity,
min_age: input.minAge,
max_age: input.maxAge,
fee: input.fee,
status: input.status,
registration_deadline: input.registrationDeadline,
contact_name: input.contactName,
contact_email: input.contactEmail,
contact_phone: input.contactPhone,
})
.select()
.single();
const { data, error } = await client.from('events').insert({
account_id: input.accountId, name: input.name, description: input.description || null,
event_date: input.eventDate || null, event_time: input.eventTime || null, end_date: input.endDate || null,
location: input.location || null, capacity: input.capacity, min_age: input.minAge ?? null,
max_age: input.maxAge ?? null, fee: input.fee, status: input.status,
registration_deadline: input.registrationDeadline || null,
contact_name: input.contactName || null, contact_email: input.contactEmail || null, contact_phone: input.contactPhone || null,
}).select().single();
if (error) throw error;
return data;
},
async registerForEvent(input: {
eventId: string;
firstName: string;
lastName: string;
email?: string;
parentName?: string;
}) {
async registerForEvent(input: { eventId: string; firstName: string; lastName: string; email?: string; parentName?: string }) {
// Check capacity
const event = await this.getEvent(input.eventId);
if (event.capacity) {
const { count } = await client
.from('event_registrations')
.select('*', { count: 'exact', head: true })
.eq('event_id', input.eventId)
.in('status', ['pending', 'confirmed']);
const { count } = await client.from('event_registrations').select('*', { count: 'exact', head: true })
.eq('event_id', input.eventId).in('status', ['pending', 'confirmed']);
if ((count ?? 0) >= event.capacity) {
throw new Error('Event is full');
}
}
const { data, error } = await client
.from('event_registrations')
.insert({
event_id: input.eventId,
first_name: input.firstName,
last_name: input.lastName,
email: input.email,
parent_name: input.parentName,
status: 'confirmed',
})
.select()
.single();
const { data, error } = await client.from('event_registrations').insert({
event_id: input.eventId, first_name: input.firstName, last_name: input.lastName,
email: input.email, parent_name: input.parentName, status: 'confirmed',
}).select().single();
if (error) throw error;
return data;
},
async getRegistrations(eventId: string) {
const { data, error } = await client
.from('event_registrations')
.select('*')
.eq('event_id', eventId)
.order('created_at');
const { data, error } = await client.from('event_registrations').select('*')
.eq('event_id', eventId).order('created_at');
if (error) throw error;
return data ?? [];
},
// Holiday passes
async listHolidayPasses(accountId: string) {
const { data, error } = await client
.from('holiday_passes')
.select('*')
.eq('account_id', accountId)
.order('year', { ascending: false });
const { data, error } = await client.from('holiday_passes').select('*')
.eq('account_id', accountId).order('year', { ascending: false });
if (error) throw error;
return data ?? [];
},
async getPassActivities(passId: string) {
const { data, error } = await client
.from('holiday_pass_activities')
.select('*')
.eq('pass_id', passId)
.order('activity_date');
const { data, error } = await client.from('holiday_pass_activities').select('*')
.eq('pass_id', passId).order('activity_date');
if (error) throw error;
return data ?? [];
},
async createHolidayPass(input: {
accountId: string;
name: string;
year: number;
description?: string;
price?: number;
validFrom?: string;
validUntil?: string;
}) {
const { data, error } = await client
.from('holiday_passes')
.insert({
account_id: input.accountId,
name: input.name,
year: input.year,
description: input.description,
price: input.price ?? 0,
valid_from: input.validFrom,
valid_until: input.validUntil,
})
.select()
.single();
async createHolidayPass(input: { accountId: string; name: string; year: number; description?: string; price?: number; validFrom?: string; validUntil?: string }) {
const { data, error } = await client.from('holiday_passes').insert({
account_id: input.accountId, name: input.name, year: input.year,
description: input.description, price: input.price ?? 0,
valid_from: input.validFrom, valid_until: input.validUntil,
}).select().single();
if (error) throw error;
return data;
},

View File

@@ -8,5 +8,6 @@ import { defaultLocale } from './default-locale';
*/
export const locales: string[] = [
defaultLocale,
'de', // German — primary locale for MyEasyCMS
// Add other locales here as needed. defaultLocale ('de') is already included above.
// 'en', // English (uncomment to enable)
];

View File

@@ -625,7 +625,8 @@ export const envVariables: EnvVariableModel[] = [
{
name: 'NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY',
displayName: 'Stripe Publishable Key',
description: 'Your Stripe publishable key.',
description:
'Your Stripe publishable key. Required when using embedded checkout (default), optional when STRIPE_UI_MODE is set to hosted_page.',
hint: `Ex. pk_test_123456789012345678901234`,
category: 'Billing',
type: 'string',
@@ -635,7 +636,13 @@ export const envVariables: EnvVariableModel[] = [
variable: 'NEXT_PUBLIC_BILLING_PROVIDER',
condition: (value) => value === 'stripe',
message:
'NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY is required when NEXT_PUBLIC_BILLING_PROVIDER is set to "stripe"',
'NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY is required when NEXT_PUBLIC_BILLING_PROVIDER is set to "stripe" and STRIPE_UI_MODE is not "hosted_page"',
},
{
variable: 'STRIPE_UI_MODE',
condition: (value) => value !== 'hosted_page',
message:
'NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY is required when STRIPE_UI_MODE is not set to "hosted_page"',
},
],
validate: ({ value }) => {
@@ -1391,6 +1398,21 @@ export const envVariables: EnvVariableModel[] = [
return z.coerce.boolean().optional().safeParse(value);
},
},
{
name: 'STRIPE_UI_MODE',
displayName: 'Stripe Checkout UI Mode',
description:
'Controls whether Stripe Checkout uses an embedded page or a hosted page. Defaults to embedded_page.',
category: 'Billing',
type: 'enum',
values: ['embedded_page', 'hosted_page'],
validate: ({ value }) => {
return z
.enum(['embedded_page', 'hosted_page'])
.optional()
.safeParse(value);
},
},
{
name: 'NEXT_PUBLIC_THEME_COLOR',
displayName: 'Theme Color',

View File

@@ -2,18 +2,8 @@ import * as z from 'zod';
/**
* Returns and validates the Supabase client keys from the environment.
*
* On the server, prefers SUPABASE_INTERNAL_URL (Docker-internal)
* over NEXT_PUBLIC_SUPABASE_URL (external domain) to avoid
* hairpin NAT / DNS issues in containerized deployments.
*/
export function getSupabaseClientKeys() {
const isServer = typeof window === 'undefined';
const url = isServer
? process.env.SUPABASE_INTERNAL_URL || process.env.NEXT_PUBLIC_SUPABASE_URL
: process.env.NEXT_PUBLIC_SUPABASE_URL;
return z
.object({
url: z.string({
@@ -24,7 +14,7 @@ export function getSupabaseClientKeys() {
}),
})
.parse({
url,
url: process.env.NEXT_PUBLIC_SUPABASE_URL,
publicKey: process.env.NEXT_PUBLIC_SUPABASE_PUBLIC_KEY,
});
}

View File

@@ -106,40 +106,40 @@
"test:unit": "vitest run"
},
"dependencies": {
"@base-ui/react": "^1.3.0",
"@hookform/resolvers": "^5.2.2",
"@base-ui/react": "catalog:",
"@hookform/resolvers": "catalog:",
"@kit/shared": "workspace:*",
"clsx": "^2.1.1",
"cmdk": "^1.1.1",
"embla-carousel-react": "^8.6.0",
"input-otp": "^1.4.2",
"clsx": "catalog:",
"cmdk": "catalog:",
"embla-carousel-react": "catalog:",
"input-otp": "catalog:",
"lucide-react": "catalog:",
"react-dropzone": "^15.0.0",
"react-dropzone": "catalog:",
"react-resizable-panels": "catalog:",
"react-top-loading-bar": "^3.0.2",
"recharts": "3.7.0",
"tailwind-merge": "^3.5.0"
"react-top-loading-bar": "catalog:",
"recharts": "catalog:",
"tailwind-merge": "catalog:"
},
"devDependencies": {
"@kit/i18n": "workspace:*",
"@kit/tsconfig": "workspace:*",
"@supabase/supabase-js": "catalog:",
"@tanstack/react-query": "catalog:",
"@tanstack/react-table": "^8.21.3",
"@tanstack/react-table": "catalog:",
"@types/react": "catalog:",
"@types/react-dom": "catalog:",
"class-variance-authority": "^0.7.1",
"date-fns": "^4.1.0",
"class-variance-authority": "catalog:",
"date-fns": "catalog:",
"next": "catalog:",
"next-intl": "^4.8.3",
"next-safe-action": "^8.1.8",
"next-themes": "0.4.6",
"react-day-picker": "^9.14.0",
"next-intl": "catalog:",
"next-safe-action": "catalog:",
"next-themes": "catalog:",
"react-day-picker": "catalog:",
"react-hook-form": "catalog:",
"shadcn": "catalog:",
"sonner": "^2.0.7",
"sonner": "catalog:",
"tailwindcss": "catalog:",
"vaul": "^1.1.2",
"vaul": "catalog:",
"vitest": "catalog:",
"zod": "catalog:"
}

View File

@@ -60,7 +60,7 @@ export function PageMobileNavigation(
return (
<div
className={cn(
'flex w-full items-center border-b px-4 py-2 lg:hidden lg:px-0',
'container flex w-full items-center justify-between px-0 py-2 group-data-[slot="sidebar-wrapper"]/sidebar-wrapper:border-b lg:hidden',
props.className,
)}
>
@@ -73,30 +73,39 @@ function PageWithHeader(props: PageProps) {
const { Navigation, Children, MobileNavigation } = getSlotsFromPage(props);
return (
<div className={cn('flex h-screen flex-1 flex-col', props.className)}>
<div
className={cn(
'bg-background flex min-h-screen flex-1 flex-col',
props.className,
)}
>
<div
className={
props.contentContainerClassName ?? 'flex flex-1 flex-col space-y-4'
}
className={props.contentContainerClassName ?? 'flex flex-1 flex-col'}
>
<div
className={cn(
'bg-muted/40 dark:border-border dark:shadow-primary/10 flex h-14 items-center justify-between px-4 lg:justify-start lg:shadow-xs',
'bg-background/95 supports-[backdrop-filter]:bg-background/80 border-b',
{
'sticky top-0 z-10 backdrop-blur-md': props.sticky ?? true,
},
)}
>
<div
className={'hidden w-full flex-1 items-center space-x-8 lg:flex'}
>
{Navigation}
</div>
<div className="container mx-auto flex h-14 w-full items-center">
<div
className={
'hidden w-full min-w-0 flex-1 items-center space-x-4 lg:flex lg:px-4'
}
>
{Navigation}
</div>
{MobileNavigation}
{MobileNavigation}
</div>
</div>
<div className={'container flex flex-1 flex-col'}>{Children}</div>
<div className="container mx-auto flex w-full flex-1 flex-col">
{Children}
</div>
</div>
</div>
);
@@ -113,7 +122,15 @@ export function PageBody(
}
export function PageNavigation(props: React.PropsWithChildren) {
return <div className={'bg-inherit'}>{props.children}</div>;
return (
<div
className={
'flex flex-1 flex-col bg-inherit group-data-[slot="sidebar-wrapper"]/sidebar-wrapper:flex-initial'
}
>
{props.children}
</div>
);
}
export function PageDescription(props: React.PropsWithChildren) {
@@ -147,16 +164,25 @@ export function PageHeader({
title,
description,
className,
displaySidebarTrigger = true,
}: React.PropsWithChildren<{
className?: string;
title?: string | React.ReactNode;
description?: string | React.ReactNode;
displaySidebarTrigger?: boolean;
}>) {
return (
<div className={cn('flex items-center justify-between py-4', className)}>
<div className={'flex flex-col gap-y-2'}>
<div className="flex items-center gap-x-2.5">
<SidebarTrigger className="text-muted-foreground hover:text-secondary-foreground h-4.5 w-4.5 cursor-pointer" />
<div
className={cn(
'flex flex-col gap-4 py-4 sm:py-5 lg:flex-row lg:items-center lg:justify-between',
className,
)}
>
<div className={'flex min-w-0 flex-col gap-y-2'}>
<div className="flex flex-wrap items-center gap-x-2.5 gap-y-1.5">
<If condition={displaySidebarTrigger}>
<SidebarTrigger className="text-muted-foreground hover:text-secondary-foreground h-4.5 w-4.5 cursor-pointer" />
</If>
<If condition={description}>
<Separator
@@ -173,7 +199,9 @@ export function PageHeader({
</If>
</div>
{children}
<div className="flex w-full flex-wrap items-center gap-2 lg:w-auto lg:justify-end">
{children}
</div>
</div>
);
}