@tuturuuu/ui 0.7.0 → 0.9.0

package/src/components/ui/finance/transactions/transaction-card.tsx

@@ -85,12 +85,6 @@ export function TransactionCard({
     useFinanceConfidentialVisibility();
   const isTransfer = !!transaction.transfer;
 
-  // Check if transaction is confidential
-  const isConfidential =
-    transaction.is_amount_confidential ||
-    transaction.is_description_confidential ||
-    transaction.is_category_confidential;
-
   // Get custom icon if available
   const CategoryIcon = useMemo(() => {
     if (transaction.category_icon) {
@@ -127,10 +121,17 @@ export function TransactionCard({
     return wallets.find((w) => w.id === transaction.transfer?.linked_wallet_id);
   }, [transaction.transfer?.linked_wallet_id, wallets]);
 
+  const linkedAmount = transaction.transfer?.linked_amount_redacted
+    ? undefined
+    : transaction.transfer?.linked_amount;
+  const linkedAmountIsConfidential = Boolean(
+    transaction.transfer?.linked_is_amount_confidential
+  );
   const transferDisplay = transaction.transfer
     ? transaction.transfer.is_origin
       ? {
           amount: transaction.amount,
+          amountIsConfidential: Boolean(transaction.is_amount_confidential),
           amountCurrency: transaction.wallet_currency,
           destinationIcon: linkedWallet?.icon,
           destinationImageSrc: linkedWallet?.image_src,
@@ -140,11 +141,15 @@ export function TransactionCard({
           originImageSrc: wallet?.image_src,
           originWalletId: transaction.wallet_id,
           originWalletName: transaction.wallet,
-          secondaryAmount: transaction.transfer.linked_amount,
+          secondaryAmount: linkedAmount,
           secondaryCurrency: transaction.transfer.linked_wallet_currency,
         }
       : {
-          amount: transaction.transfer.linked_amount ?? transaction.amount,
+          amount: linkedAmount ?? transaction.amount,
+          amountIsConfidential:
+            linkedAmount != null
+              ? linkedAmountIsConfidential
+              : Boolean(transaction.is_amount_confidential),
           amountCurrency:
             transaction.transfer.linked_wallet_currency ||
             transaction.wallet_currency,
@@ -161,9 +166,16 @@ export function TransactionCard({
         }
     : null;
   const displayAmount = transferDisplay?.amount ?? transaction.amount;
+  const displayAmountIsConfidential =
+    transferDisplay?.amountIsConfidential ??
+    Boolean(transaction.is_amount_confidential);
   const effectiveCurrency =
     transferDisplay?.amountCurrency || transaction.wallet_currency || currency;
   const isExpense = (displayAmount || 0) < 0;
+  const isConfidential =
+    displayAmountIsConfidential ||
+    transaction.is_description_confidential ||
+    transaction.is_category_confidential;
 
   // Currency conversion for foreign-currency transactions
   const isForeignCurrency =
@@ -434,7 +446,7 @@ export function TransactionCard({
               <div className="flex flex-col items-end">
                 <ConfidentialAmount
                   amount={displayAmount ?? null}
-                  isConfidential={transaction.is_amount_confidential || false}
+                  isConfidential={displayAmountIsConfidential}
                   currency={effectiveCurrency}
                   className={cn(
                     'font-bold text-sm tabular-nums transition-all duration-200 sm:text-xl',

package/src/components/ui/finance/transactions/transaction-edit-dialog.tsx

@@ -481,10 +481,7 @@ export function TransactionEditDialog({
   return (
     <>
       <Dialog open={isOpen} onOpenChange={handleClose} modal={true}>
-        <DialogContent
-          showCloseButton={false}
-          className="data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 inset-0! top-0! left-0! flex h-screen max-h-screen w-screen max-w-none! translate-x-0! translate-y-0! gap-0 rounded-none! border-0 p-0"
-        >
+        <DialogContent showCloseButton={false} presentation="fullscreen">
           {/* Main content area */}
           <div className="flex min-w-0 flex-1 flex-col bg-background">
             {/* Header with gradient */}

package/src/components/ui/finance/transactions/transactions-create-summary.tsx

@@ -15,6 +15,7 @@ interface TransactionsCreateSummaryProps {
   createDescription: string;
   createTitle: string;
   defaultOpen?: boolean;
+  defaultCurrency?: string;
   description: string;
   initialMode?: 'transaction' | 'transfer';
   permissionRequestUser?: FinancePermissionRequestUser | null;
@@ -32,6 +33,7 @@ export function TransactionsCreateSummary({
   createDescription,
   createTitle,
   defaultOpen = false,
+  defaultCurrency,
   description,
   initialMode = 'transaction',
   permissionRequestUser,
@@ -59,6 +61,7 @@ export function TransactionsCreateSummary({
               canCreateConfidentialTransactions
             }
             initialMode={initialMode}
+            defaultCurrency={defaultCurrency}
             timezone={timezone}
             permissionRequestUser={permissionRequestUser}
           />

package/src/components/ui/finance/transactions/transactions-page.tsx

@@ -7,6 +7,7 @@ import ExportDialogContent from '@tuturuuu/ui/finance/transactions/export-dialog
 import { TransactionsCreateSummary } from '@tuturuuu/ui/finance/transactions/transactions-create-summary';
 import { TransactionsInfinitePage } from '@tuturuuu/ui/finance/transactions/transactions-infinite-page';
 import { Separator } from '@tuturuuu/ui/separator';
+import { resolveSupportedCurrency } from '@tuturuuu/utils/currencies';
 import {
   getPermissions,
   getWorkspace,
@@ -51,6 +52,7 @@ export default async function TransactionsPage({
     ]);
   if (!resolvedWorkspace || !resolvedPermissions) return notFound();
   const { containsPermission } = resolvedPermissions;
+  const workspaceCurrency = resolveSupportedCurrency(resolvedCurrency);
 
   const canViewTransactions = containsPermission('view_transactions');
   const canExportFinanceData = containsPermission('export_finance_data');
@@ -110,13 +112,14 @@ export default async function TransactionsPage({
         canChangeFinanceWallets={canChangeFinanceWallets}
         canSetFinanceWalletsOnCreate={canSetFinanceWalletsOnCreate}
         canCreateConfidentialTransactions={canCreateConfidentialTransactions}
+        defaultCurrency={workspaceCurrency}
         timezone={resolvedWorkspace.timezone}
         permissionRequestUser={permissionRequestUser}
       />
       <Separator className="my-4" />
       <TransactionsInfinitePage
         wsId={wsId}
-        currency={resolvedCurrency ?? 'USD'}
+        currency={workspaceCurrency}
         timezone={resolvedWorkspace.timezone}
         canExport={canExportFinanceData}
         exportContent={

package/src/components/ui/finance/wallets/form.test.tsx

@@ -5,10 +5,27 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import type { WalletFormValues } from './form';
 import { WalletForm } from './form';
 
+const mocks = vi.hoisted(() => ({
+  createWallet: vi.fn(),
+  updateWallet: vi.fn(),
+}));
+
 vi.mock('@tuturuuu/ui/hooks/use-workspace-currency', () => ({
-  useWorkspaceCurrency: () => ({ currency: 'USD' }),
+  useWorkspaceCurrency: (_wsId: string, fallbackCurrency = 'USD') => ({
+    currency: fallbackCurrency,
+  }),
 }));
 
+vi.mock('@tuturuuu/internal-api/finance', async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import('@tuturuuu/internal-api/finance')>();
+  return {
+    ...actual,
+    createWallet: mocks.createWallet,
+    updateWallet: mocks.updateWallet,
+  };
+});
+
 vi.mock('next/navigation', () => ({
   useRouter: () => ({ refresh: vi.fn() }),
 }));
@@ -29,6 +46,7 @@ function renderWalletForm(
   options: {
     data?: ComponentProps<typeof WalletForm>['data'];
     defaultType?: WalletFormValues['type'];
+    defaultCurrency?: string;
   } = {}
 ) {
   const data =
@@ -41,13 +59,18 @@ function renderWalletForm(
           name: 'Primary',
           type: 'STANDARD',
         } as never);
-  const { defaultType } = options;
+  const { defaultCurrency, defaultType } = options;
 
   const queryClient = new QueryClient();
 
   return render(
     <QueryClientProvider client={queryClient}>
-      <WalletForm wsId="ws-1" data={data} defaultType={defaultType} />
+      <WalletForm
+        wsId="ws-1"
+        data={data}
+        defaultType={defaultType}
+        defaultCurrency={defaultCurrency}
+      />
     </QueryClientProvider>
   );
 }
@@ -69,6 +92,8 @@ function typeIntoCurrencyInput(input: HTMLInputElement, value: string) {
 describe('WalletForm', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    mocks.createWallet.mockResolvedValue({ message: 'success' });
+    mocks.updateWallet.mockResolvedValue({ message: 'success' });
     // biome-ignore lint/suspicious/noDocumentCookie: test resets the finance visibility cookie.
     document.cookie =
       'finance-confidential-mode=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/';
@@ -118,6 +143,29 @@ describe('WalletForm', () => {
     );
   });
 
+  it('initializes new wallet currency from the supplied workspace default', async () => {
+    renderWalletForm({
+      data: undefined,
+      defaultCurrency: 'SGD',
+    });
+
+    fireEvent.change(screen.getByLabelText('wallet-data-table.wallet_name'), {
+      target: { value: 'Singapore Cash' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'ws-wallets.create' }));
+
+    await waitFor(() =>
+      expect(mocks.createWallet).toHaveBeenCalledWith(
+        'ws-1',
+        expect.objectContaining({
+          currency: 'SGD',
+          name: 'Singapore Cash',
+          type: 'STANDARD',
+        })
+      )
+    );
+  });
+
   it('keeps accepting large credit limits after locale grouping is inserted', () => {
     renderWalletForm({
       data: {

package/src/components/ui/finance/wallets/form.tsx

@@ -20,6 +20,7 @@ import { Input } from '@tuturuuu/ui/input';
 import { zodResolver } from '@tuturuuu/ui/resolvers';
 import {
   getCurrencyLocale,
+  resolveSupportedCurrency,
   SUPPORTED_CURRENCIES,
 } from '@tuturuuu/utils/currencies';
 import { useRouter } from 'next/navigation';
@@ -97,6 +98,7 @@ interface Props {
   wsId: string;
   data?: Wallet;
   defaultType?: WalletFormValues['type'];
+  defaultCurrency?: string;
   onFinish?: (data: WalletFormValues) => void;
   isPersonalWorkspace?: boolean;
 }
@@ -105,11 +107,20 @@ export function WalletForm({
   wsId,
   data,
   defaultType = 'STANDARD',
+  defaultCurrency,
   onFinish,
   isPersonalWorkspace,
 }: Props) {
   const t = useTranslations();
-  const { currency: workspaceCurrency } = useWorkspaceCurrency(wsId);
+  const fallbackCurrency = resolveSupportedCurrency(defaultCurrency);
+  const { currency: workspaceCurrency } = useWorkspaceCurrency(
+    wsId,
+    fallbackCurrency
+  );
+  const resolvedWorkspaceCurrency = resolveSupportedCurrency(
+    workspaceCurrency,
+    fallbackCurrency
+  );
   const { isConfidential: areNumbersHidden } =
     useFinanceConfidentialVisibility();
   const queryClient = useQueryClient();
@@ -127,7 +138,7 @@ export function WalletForm({
       description: data?.description || '',
       balance: data?.balance || 0,
       type: data?.type || defaultType,
-      currency: data?.currency || workspaceCurrency || 'USD',
+      currency: data?.currency || resolvedWorkspaceCurrency,
       icon: data?.icon || null,
       image_src: data?.image_src || null,
       limit: data?.limit ?? undefined,
@@ -193,7 +204,7 @@ export function WalletForm({
                         ? ''
                         : new Intl.NumberFormat(
                             getCurrencyLocale(
-                              walletCurrency || workspaceCurrency || 'USD'
+                              walletCurrency || resolvedWorkspaceCurrency
                             ),
                             {
                               maximumFractionDigits: 2,
@@ -296,7 +307,7 @@ export function WalletForm({
           <WalletCreditFields
             form={form}
             loading={loading}
-            currency={walletCurrency || workspaceCurrency || 'USD'}
+            currency={walletCurrency || resolvedWorkspaceCurrency}
           />
         )}
 

package/src/components/ui/finance/wallets/walletId/wallet-details-actions.tsx

@@ -35,6 +35,7 @@ interface WalletDetailsActionsProps {
   canSetFinanceWalletsOnCreate?: boolean;
   canDeleteWallets: boolean;
   isPersonalWorkspace: boolean;
+  defaultCurrency?: string;
   timezone?: string | null;
   permissionRequestUser?: FinancePermissionRequestUser | null;
 }
@@ -51,6 +52,7 @@ export function WalletDetailsActions({
   canSetFinanceWalletsOnCreate,
   canDeleteWallets,
   isPersonalWorkspace,
+  defaultCurrency,
   timezone,
   permissionRequestUser,
 }: WalletDetailsActionsProps) {
@@ -110,6 +112,7 @@ export function WalletDetailsActions({
               <WalletForm
                 wsId={wsId}
                 data={wallet}
+                defaultCurrency={defaultCurrency}
                 isPersonalWorkspace={isPersonalWorkspace}
               />
             }
@@ -210,6 +213,7 @@ export function WalletDetailsActions({
                 canCreateConfidentialTransactions={
                   canCreateConfidentialTransactions
                 }
+                defaultCurrency={defaultCurrency}
                 timezone={timezone}
                 preferInitialWalletSelection={transactionAction !== 'payment'}
                 refreshPageOnFinish

package/src/components/ui/finance/wallets/walletId/wallet-details-page.tsx

@@ -11,6 +11,7 @@ import type { FinancePermissionRequestUser } from '@tuturuuu/ui/finance/shared/f
 import { InfiniteTransactionsList } from '@tuturuuu/ui/finance/transactions/infinite-transactions-list';
 import { Separator } from '@tuturuuu/ui/separator';
 import { Skeleton } from '@tuturuuu/ui/skeleton';
+import { resolveSupportedCurrency } from '@tuturuuu/utils/currencies';
 import type { ExchangeRate } from '@tuturuuu/utils/exchange-rates';
 import { getCurrencyLocale } from '@tuturuuu/utils/format';
 import {
@@ -117,8 +118,8 @@ export default async function WalletDetailsPage({
     notFound();
   }
 
-  const currency = wallet.currency || resolvedDefaultCurrency || 'USD';
-  const workspaceCurrency = resolvedDefaultCurrency || 'USD';
+  const workspaceCurrency = resolveSupportedCurrency(resolvedDefaultCurrency);
+  const currency = wallet.currency || workspaceCurrency;
   const initialAction = getInitialWalletAction(searchParams.action);
 
   // Fetch exchange rates for conversion display
@@ -153,6 +154,7 @@ export default async function WalletDetailsPage({
           canSetFinanceWalletsOnCreate={canSetFinanceWalletsOnCreate}
           canDeleteWallets={canDeleteWallets}
           isPersonalWorkspace={!!resolvedWorkspace.personal}
+          defaultCurrency={workspaceCurrency}
           timezone={resolvedWorkspace.timezone}
           permissionRequestUser={permissionRequestUser}
         />

package/src/components/ui/finance/wallets/wallets-data-table.tsx

@@ -228,6 +228,7 @@ export function WalletsDataTable({
             <WalletForm
               wsId={wsId}
               data={selectedWallet}
+              defaultCurrency={currency}
               onFinish={handleEditComplete}
               isPersonalWorkspace={isPersonalWorkspace}
             />

package/src/components/ui/finance/wallets/wallets-page.tsx

@@ -6,6 +6,7 @@ import { WalletTotalCheckDialog } from '@tuturuuu/ui/finance/wallets/checkpoints
 import { WalletForm } from '@tuturuuu/ui/finance/wallets/form';
 import { WalletsDataTable } from '@tuturuuu/ui/finance/wallets/wallets-data-table';
 import { Separator } from '@tuturuuu/ui/separator';
+import { resolveSupportedCurrency } from '@tuturuuu/utils/currencies';
 import {
   getPermissions,
   getWorkspace,
@@ -51,6 +52,7 @@ export default async function WalletsPage({
     ]);
   if (!resolvedPermissions || !resolvedWorkspace) notFound();
   const { containsPermission } = resolvedPermissions;
+  const workspaceCurrency = resolveSupportedCurrency(resolvedCurrency);
 
   const canCreateWallets = containsPermission('create_wallets');
   const canUpdateWallets = containsPermission('update_wallets');
@@ -76,6 +78,7 @@ export default async function WalletsPage({
             <WalletForm
               wsId={wsId}
               defaultType={isCreditCardCreate ? 'CREDIT' : 'STANDARD'}
+              defaultCurrency={workspaceCurrency}
             />
           ) : undefined
         }
@@ -95,7 +98,7 @@ export default async function WalletsPage({
           />
           <WalletTotalCheckDialog
             wsId={wsId}
-            currency={resolvedCurrency ?? 'USD'}
+            currency={workspaceCurrency}
             canUpdateWallets={canUpdateWallets}
             defaultOpen={searchParams.tool === 'all-wallet-check'}
           />
@@ -105,7 +108,7 @@ export default async function WalletsPage({
         wsId={wsId}
         canUpdateWallets={canUpdateWallets}
         canDeleteWallets={canDeleteWallets}
-        currency={resolvedCurrency ?? 'USD'}
+        currency={workspaceCurrency}
         financePrefix={financePrefix}
         isPersonalWorkspace={!!resolvedWorkspace?.personal}
         query={searchParams.q}

package/src/components/ui/input-otp.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { MinusIcon } from '@tuturuuu/icons';
+import { MinusIcon } from '@tuturuuu/icons/lucide-static';
 import { cn } from '@tuturuuu/utils/format';
 import { OTPInput, OTPInputContext, type SlotProps } from 'input-otp';
 import * as React from 'react';

package/src/components/ui/legacy/calendar/all-day-event-bar.tsx

@@ -9,9 +9,9 @@ import isBetween from 'dayjs/plugin/isBetween';
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
 import timezone from 'dayjs/plugin/timezone';
-import Image from 'next/image';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { MIN_COLUMN_WIDTH } from './config';
+import { CalendarEventProviderIcon } from './event-provider-display';
 import { getLocationType, LocationTimeline } from './location-timeline';
 import { useCalendarSettings } from './settings/settings-context';
 
@@ -68,18 +68,10 @@ interface DragState {
 // 1. Extract EventContent component for shared rendering
 const EventContent = ({ event }: { event: CalendarEvent }) => (
   <>
-    {typeof event.google_event_id === 'string' &&
-      event.google_event_id.trim() !== '' && (
-        <Image
-          src="/media/google-calendar-icon.png"
-          alt="Google Calendar"
-          className="mr-1 inline-block h-[1.25em] w-[1.25em] align-middle opacity-80 dark:opacity-90"
-          title="Synced from Google Calendar"
-          data-testid="google-calendar-logo"
-          width={18}
-          height={18}
-        />
-      )}
+    <CalendarEventProviderIcon
+      event={event}
+      className="mr-1 h-[1.25em] w-[1.25em] opacity-80 dark:opacity-90"
+    />
     <span className="truncate">{event.title}</span>
   </>
 );
@@ -342,27 +334,6 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
         eventStart.isBefore(lastVisibleDate.add(1, 'day'), 'day') &&
         eventEnd.isAfter(firstVisibleDate, 'day');
 
-      // Debug logging for multi-day events
-      const eventDurationDays = eventEnd.diff(eventStart, 'day');
-      if (eventDurationDays > 0) {
-        console.log('Multi-day event processing:', {
-          title: event.title,
-          eventStart: eventStart.format('YYYY-MM-DD'),
-          eventEnd: eventEnd.format('YYYY-MM-DD'),
-          durationDays: eventDurationDays,
-          isActuallyMultiDay: eventDurationDays > 1,
-          firstVisibleDate: firstVisibleDate.format('YYYY-MM-DD'),
-          lastVisibleDate: lastVisibleDate.format('YYYY-MM-DD'),
-          eventOverlaps,
-          wouldShowCutOffStart:
-            eventDurationDays > 1 &&
-            eventStart.isBefore(firstVisibleDate, 'day'),
-          wouldShowCutOffEnd:
-            eventDurationDays > 1 &&
-            eventEnd.isAfter(lastVisibleDate.add(1, 'day'), 'day'),
-        });
-      }
-
       if (!eventOverlaps) {
         return; // Skip this event if it doesn't overlap with visible dates
       }
@@ -680,7 +651,13 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
   };
 
   // Calculate dynamic height based on visible events
-  const barHeight = Math.max(1.9, eventLayout.maxVisibleEventsPerDay * 1.75);
+  const locationTopOffset =
+    locationSpans.length > 0 ? LOCATION_TIMELINE_HEIGHT_REM : 0;
+  const regularRowsHeight =
+    eventLayout.maxVisibleEventsPerDay > 0
+      ? eventLayout.maxVisibleEventsPerDay * 1.75
+      : 0;
+  const barHeight = Math.max(1.9, locationTopOffset + regularRowsHeight);
 
   // Enhanced mouse and touch handlers
   const handleEventMouseDown = (e: React.MouseEvent, eventSpan: EventSpan) => {
@@ -839,7 +816,7 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
                     onClick={() => toggleDateExpansion(dateKey)}
                     style={{
                       position: 'absolute',
-                      top: `${MAX_EVENTS_DISPLAY * 1.7}rem`,
+                      top: `${locationTopOffset + MAX_EVENTS_DISPLAY * 1.7}rem`,
                       left: `${(dateIndex * 100) / visibleDates.length}%`,
                       width: `${100 / visibleDates.length}%`,
                       zIndex: 10,
@@ -858,7 +835,7 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
                       onClick={() => toggleDateExpansion(dateKey)}
                       style={{
                         position: 'absolute',
-                        top: `${dateEvents.length * 1.7}rem`,
+                        top: `${locationTopOffset + dateEvents.length * 1.7}rem`,
                         left: `${(dateIndex * 100) / visibleDates.length}%`,
                         width: `${100 / visibleDates.length}%`,
                         zIndex: 10,
@@ -941,8 +918,18 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
             dragState.isDragging && dragState.draggedEvent?.id === event.id;
 
           // Calculate top offset based on location strip presence
-          const topOffset =
-            locationSpans.length > 0 ? LOCATION_TIMELINE_HEIGHT_REM : 0;
+          const topOffset = locationTopOffset;
+          const optimisticStatus = (
+            event as CalendarEvent & {
+              _optimisticStatus?:
+                | 'creating'
+                | 'updating'
+                | 'deleting'
+                | 'error';
+            }
+          )._optimisticStatus;
+          const isPendingMutation =
+            optimisticStatus === 'updating' || optimisticStatus === 'deleting';
 
           return (
             <div
@@ -959,6 +946,8 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
                 bg,
                 border,
                 text,
+                isPendingMutation &&
+                  'opacity-60 outline outline-dashed outline-1 outline-primary/50',
                 // Special styling for cut-off events
                 (isCutOffStart || isCutOffEnd) && 'border-dashed'
               )}

package/src/components/ui/legacy/calendar/calendar-cell.tsx

@@ -880,6 +880,8 @@ export const CalendarCell = ({ date, hour }: CalendarCellProps) => {
         height: `${HOUR_HEIGHT}px`,
       }}
       onContextMenu={(e) => {
+        const target = e.target as HTMLElement | null;
+        if (target?.closest('[data-slot="context-menu-trigger"]')) return;
         e.preventDefault();
       }}
       onMouseEnter={() => setIsHovering(true)}

package/src/components/ui/legacy/calendar/calendar-content.tsx

@@ -9,6 +9,7 @@ import { cn } from '@tuturuuu/utils/format';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { AgendaView } from './agenda-view';
 import { CalendarHeader } from './calendar-header';
+import { CalendarLoadingSkeleton } from './calendar-loading-skeleton';
 import { CalendarViewWithTrail } from './calendar-view-with-trail';
 import { EventModal } from './event-modal';
 import { EventPreviewPopover } from './event-preview-popover';
@@ -102,6 +103,7 @@ export const CalendarContent = ({
   externalState,
   extras,
   overlay,
+  disableBuiltInEventUi,
 }: {
   t: any;
   locale: string;
@@ -118,10 +120,11 @@ export const CalendarContent = ({
   };
   extras?: React.ReactNode;
   overlay?: React.ReactNode;
+  disableBuiltInEventUi?: boolean;
 }) => {
   const { transition } = useViewTransition();
   const { settings } = useCalendarSettings();
-  const { dates, setDates } = useCalendarSync();
+  const { dates, isLoading, setDates } = useCalendarSync();
 
   // Use ref to always have the latest settings without causing dependency cascades
   const settingsRef = useRef(settings);
@@ -191,7 +194,6 @@ export const CalendarContent = ({
       handleSetView('4-days');
       setDates(dates);
     });
-    console.log('enable4DayView', dates);
   }, [date, transition, handleSetView, setDates]);
 
   const enableWeekView = useCallback(() => {
@@ -578,7 +580,7 @@ export const CalendarContent = ({
   return (
     <div
       className={cn(
-        'grid h-full w-full',
+        'grid h-full min-h-0 w-full',
         view === 'month' || view === 'year'
           ? 'grid-rows-[auto_1fr]'
           : 'grid-rows-[auto_auto_1fr]'
@@ -621,7 +623,7 @@ export const CalendarContent = ({
 
       <div
         className={cn(
-          'scrollbar-none relative flex-1 overflow-auto rounded-lg focus:outline-none',
+          'scrollbar-none relative min-h-0 flex-1 overflow-auto rounded-lg focus:outline-none',
           view === 'agenda' ||
             view === 'month' ||
             view === 'year' ||
@@ -632,7 +634,9 @@ export const CalendarContent = ({
           e.currentTarget.focus();
         }}
       >
-        {view === 'month' && dates?.[0] ? (
+        {isLoading ? (
+          <CalendarLoadingSkeleton dates={dates} view={view} />
+        ) : view === 'month' && dates?.[0] ? (
           <MonthCalendar
             date={dates[0]}
             workspace={workspace}
@@ -665,7 +669,7 @@ export const CalendarContent = ({
         )}
       </div>
 
-      {disabled
+      {disabled || disableBuiltInEventUi
         ? null
         : workspace && (
             <>