@tuturuuu/ui 0.13.0 → 0.16.0

package/src/components/ui/custom/structure.tsx

@@ -21,6 +21,7 @@ interface StructureProps {
   children: ReactNode;
   onMouseEnter?: () => void;
   onMouseLeave?: () => void;
+  sidebarHidden?: boolean;
   sidebarCollapsedWidth?: string;
   sidebarExpandedWidth?: string;
   sidebarHeaderClassName?: string;
@@ -42,6 +43,7 @@ export function Structure({
   children,
   onMouseEnter,
   onMouseLeave,
+  sidebarHidden = false,
   sidebarCollapsedWidth = '4rem',
   sidebarExpandedWidth = '16rem',
   sidebarHeaderClassName,
@@ -60,7 +62,7 @@ export function Structure({
     if (typeof window === 'undefined') return;
 
     const isMobile = window.innerWidth < 768; // md breakpoint
-    if (isMobile && !isCollapsed) {
+    if (isMobile && !sidebarHidden && !isCollapsed) {
       const scrollY = window.scrollY;
       document.body.style.position = 'fixed';
       document.body.style.top = `-${scrollY}px`;
@@ -73,31 +75,35 @@ export function Structure({
         window.scrollTo(0, scrollY);
       };
     }
-  }, [isCollapsed]);
+  }, [isCollapsed, sidebarHidden]);
 
   return (
     <>
-      <nav className="safe-top safe-x fixed inset-x-0 top-0 z-30 max-sm:border-b md:hidden">
-        <div className="bg-background/50 p-2 font-semibold backdrop-blur-md md:px-8 lg:px-16 xl:px-32">
-          <div className="relative flex items-center justify-between gap-2 md:gap-4">
-            <div className="flex w-full items-center gap-2">{mobileHeader}</div>
-            <div className="flex w-fit items-center gap-2">
-              {userPopover}
-              <Button
-                size="icon"
-                variant="outline"
-                className="h-auto w-auto flex-none rounded-lg p-2 md:hidden"
-                onClick={() => setIsCollapsed(!isCollapsed)}
-              >
-                <Menu className="h-5 w-5" />
-              </Button>
+      {!sidebarHidden && (
+        <nav className="safe-top safe-x fixed inset-x-0 top-0 z-30 max-sm:border-b md:hidden">
+          <div className="bg-background/50 p-2 font-semibold backdrop-blur-md md:px-8 lg:px-16 xl:px-32">
+            <div className="relative flex items-center justify-between gap-2 md:gap-4">
+              <div className="flex w-full items-center gap-2">
+                {mobileHeader}
+              </div>
+              <div className="flex w-fit items-center gap-2">
+                {userPopover}
+                <Button
+                  size="icon"
+                  variant="outline"
+                  className="h-auto w-auto flex-none rounded-lg p-2 md:hidden"
+                  onClick={() => setIsCollapsed(!isCollapsed)}
+                >
+                  <Menu className="h-5 w-5" />
+                </Button>
+              </div>
             </div>
           </div>
-        </div>
-      </nav>
+        </nav>
+      )}
 
       <TooltipProvider delayDuration={0}>
-        {!isCollapsed && (
+        {!sidebarHidden && !isCollapsed && (
           <button
             type="button"
             className="fixed inset-0 z-40 bg-black/20 backdrop-blur-lg md:hidden"
@@ -105,104 +111,113 @@ export function Structure({
           />
         )}
         <div className="relative w-full">
-          <aside
-            className={cn(
-              'group fixed top-0 right-0 left-auto z-50 flex h-dvh flex-col overflow-hidden border-l backdrop-blur-lg transition-all duration-300 ease-in-out md:left-0 md:z-20 md:border-r md:border-l-0',
-              isCollapsed
-                ? 'w-[var(--sidebar-collapsed-width)] bg-background/50 max-md:w-0'
-                : 'w-[var(--sidebar-expanded-width)] bg-background max-sm:w-full',
-              isCollapsed && 'max-md:translate-x-full',
-              overlayOnExpand && !isCollapsed && 'md:z-40'
-            )}
-            onMouseEnter={onMouseEnter}
-            onMouseLeave={onMouseLeave}
-            style={sidebarStyle}
-          >
-            <div
+          {!sidebarHidden && (
+            <aside
               className={cn(
-                sidebarHeaderHeight
-                  ? 'flex h-[var(--sidebar-header-height)] shrink-0 items-center p-2 md:px-0'
-                  : 'flex min-h-12 items-center p-2 md:px-0',
-                isCollapsed ? 'justify-center' : 'py-1',
-                sidebarHeaderClassName
+                'group fixed top-0 right-0 left-auto z-50 flex h-dvh flex-col overflow-hidden border-l backdrop-blur-lg transition-all duration-300 ease-in-out md:left-0 md:z-20 md:border-r md:border-l-0',
+                isCollapsed
+                  ? 'w-[var(--sidebar-collapsed-width)] bg-background/50 max-md:w-0'
+                  : 'w-[var(--sidebar-expanded-width)] bg-background max-sm:w-full',
+                isCollapsed && 'max-md:translate-x-full',
+                overlayOnExpand && !isCollapsed && 'md:z-40'
               )}
+              onMouseEnter={onMouseEnter}
+              onMouseLeave={onMouseLeave}
+              style={sidebarStyle}
             >
               <div
                 className={cn(
-                  'flex min-h-13 w-full items-center md:px-2',
-                  isCollapsed ? 'justify-center' : ''
+                  sidebarHeaderHeight
+                    ? 'flex h-[var(--sidebar-header-height)] shrink-0 items-center p-2 md:px-0'
+                    : 'flex min-h-12 items-center p-2 md:px-0',
+                  isCollapsed ? 'justify-center' : 'py-1',
+                  sidebarHeaderClassName
                 )}
               >
                 <div
                   className={cn(
-                    'flex w-full items-center gap-2',
-                    isCollapsed ? 'justify-center' : 'justify-between'
+                    'flex min-h-13 w-full items-center md:px-2',
+                    isCollapsed ? 'justify-center' : ''
                   )}
                 >
-                  {sidebarHeader}
-                  {isCollapsed || (
-                    <Button
-                      size="icon"
-                      variant="outline"
-                      className="h-auto w-auto flex-none rounded-lg p-2 md:hidden"
-                      onClick={() => setIsCollapsed(!isCollapsed)}
-                    >
-                      <X className="h-5 w-5" />
-                    </Button>
-                  )}
+                  <div
+                    className={cn(
+                      'flex w-full items-center gap-2',
+                      isCollapsed ? 'justify-center' : 'justify-between'
+                    )}
+                  >
+                    {sidebarHeader}
+                    {isCollapsed || (
+                      <Button
+                        size="icon"
+                        variant="outline"
+                        className="h-auto w-auto flex-none rounded-lg p-2 md:hidden"
+                        onClick={() => setIsCollapsed(!isCollapsed)}
+                      >
+                        <X className="h-5 w-5" />
+                      </Button>
+                    )}
+                  </div>
                 </div>
               </div>
-            </div>
-            <div className="scrollbar-none flex flex-1 flex-col gap-y-1 overflow-y-auto overflow-x-hidden overscroll-contain">
-              {sidebarContent}
-            </div>
-            {feedbackButton && (
+              <div className="scrollbar-none flex flex-1 flex-col gap-y-1 overflow-y-auto overflow-x-hidden overscroll-contain">
+                {sidebarContent}
+              </div>
+              {feedbackButton && (
+                <div
+                  className={cn(
+                    'flex border-foreground/10 border-t p-2',
+                    isCollapsed ? 'justify-center' : ''
+                  )}
+                >
+                  {feedbackButton}
+                </div>
+              )}
               <div
                 className={cn(
-                  'flex border-foreground/10 border-t p-2',
+                  'mt-auto flex border-foreground/10 border-t p-2',
                   isCollapsed ? 'justify-center' : ''
                 )}
               >
-                {feedbackButton}
+                {isCollapsed ? userPopover : actions}
               </div>
-            )}
-            <div
-              className={cn(
-                'mt-auto flex border-foreground/10 border-t p-2',
-                isCollapsed ? 'justify-center' : ''
-              )}
-            >
-              {isCollapsed ? userPopover : actions}
-            </div>
 
-            {!hideSizeToggle && (
-              <Button
-                size="icon"
-                variant="outline"
-                className="absolute top-1/2 -right-4 z-10 hidden h-auto w-auto -translate-y-1/2 rounded-full border-2 bg-background p-1.5 pl-1.5 opacity-0 transition duration-500 hover:bg-accent group-hover:opacity-100 md:block"
-                onClick={() => setIsCollapsed(!isCollapsed)}
-              >
-                {isCollapsed ? (
-                  <ChevronRight className="mr-2 h-4 w-4" />
-                ) : (
-                  <ChevronLeft className="mr-2 h-4 w-4" />
-                )}
-              </Button>
-            )}
-          </aside>
+              {!hideSizeToggle && (
+                <Button
+                  size="icon"
+                  variant="outline"
+                  className="absolute top-1/2 -right-4 z-10 hidden h-auto w-auto -translate-y-1/2 rounded-full border-2 bg-background p-1.5 pl-1.5 opacity-0 transition duration-500 hover:bg-accent group-hover:opacity-100 md:block"
+                  onClick={() => setIsCollapsed(!isCollapsed)}
+                >
+                  {isCollapsed ? (
+                    <ChevronRight className="mr-2 h-4 w-4" />
+                  ) : (
+                    <ChevronLeft className="mr-2 h-4 w-4" />
+                  )}
+                </Button>
+              )}
+            </aside>
+          )}
           {/* Main content area - overflow-y-auto removed to prevent double scrollbars */}
           {/* Body element now handles page-level scrolling */}
           <main
             className={cn(
               'relative flex h-full min-h-screen flex-col overflow-x-clip overflow-y-visible transition-all duration-300 ease-in-out',
-              isCollapsed || overlayOnExpand
-                ? 'md:pl-[var(--sidebar-collapsed-width)]'
-                : 'md:pl-[var(--sidebar-expanded-width)]'
+              sidebarHidden
+                ? 'md:pl-0'
+                : isCollapsed || overlayOnExpand
+                  ? 'md:pl-[var(--sidebar-collapsed-width)]'
+                  : 'md:pl-[var(--sidebar-expanded-width)]'
             )}
             style={sidebarStyle}
           >
             {header && <div className="mb-4 hidden md:block">{header}</div>}
-            <div className="safe-bottom relative h-full w-full p-2 pt-17 pl-2 md:p-4 md:pt-4">
+            <div
+              className={cn(
+                'safe-bottom relative h-full w-full p-2 md:p-4 md:pt-4',
+                sidebarHidden ? 'pt-2' : 'pt-17 pl-2'
+              )}
+            >
               {children}
             </div>
           </main>

package/src/components/ui/finance/invoices/civil-month.ts

@@ -0,0 +1,224 @@
+const MONTH_VALUE_PATTERN = /^(\d{4})-(\d{2})$/;
+const DATE_VALUE_PATTERN = /^(\d{4})-(\d{2})-(\d{2})(?:$|[T\s])/;
+
+export const MAX_PREPAID_MONTH_COUNT = 12;
+export const PREPAID_MONTH_OPTION_HORIZON = 12;
+
+type CivilDateParts = {
+  day: number;
+  month: number;
+  year: number;
+};
+
+const invalidDate = () => new Date(Number.NaN);
+
+const getDaysInMonth = (year: number, month: number) =>
+  new Date(year, month, 0).getDate();
+
+const isValidCivilDate = ({ day, month, year }: CivilDateParts) =>
+  Number.isInteger(year) &&
+  Number.isInteger(month) &&
+  Number.isInteger(day) &&
+  month >= 1 &&
+  month <= 12 &&
+  day >= 1 &&
+  day <= getDaysInMonth(year, month);
+
+const parseCivilDateParts = (
+  value: string | Date | null | undefined
+): CivilDateParts | null => {
+  if (!value) return null;
+
+  if (value instanceof Date) {
+    if (Number.isNaN(value.getTime())) return null;
+    return {
+      day: value.getDate(),
+      month: value.getMonth() + 1,
+      year: value.getFullYear(),
+    };
+  }
+
+  const trimmed = value.trim();
+  const monthMatch = MONTH_VALUE_PATTERN.exec(trimmed);
+  if (monthMatch) {
+    const [, year, month] = monthMatch;
+    const parts = {
+      day: 1,
+      month: Number(month),
+      year: Number(year),
+    };
+    return isValidCivilDate(parts) ? parts : null;
+  }
+
+  const dateMatch = DATE_VALUE_PATTERN.exec(trimmed);
+  if (dateMatch) {
+    const [, year, month, day] = dateMatch;
+    const parts = {
+      day: Number(day),
+      month: Number(month),
+      year: Number(year),
+    };
+    return isValidCivilDate(parts) ? parts : null;
+  }
+
+  return null;
+};
+
+const formatCivilMonthValue = (year: number, month: number) =>
+  `${year}-${String(month).padStart(2, '0')}`;
+
+export const parseLocalCalendarDate = (
+  value: string | Date | null | undefined
+): Date => {
+  const parts = parseCivilDateParts(value);
+  return parts
+    ? new Date(parts.year, parts.month - 1, parts.day)
+    : invalidDate();
+};
+
+export const getMonthStartDate = (
+  value: string | Date | null | undefined
+): Date => {
+  const date = parseLocalCalendarDate(value);
+  if (Number.isNaN(date.getTime())) {
+    return date;
+  }
+
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+};
+
+export const formatMonthValue = (date: Date): string =>
+  formatCivilMonthValue(date.getFullYear(), date.getMonth() + 1);
+
+export const formatMonthLabel = (month: string, locale: string): string => {
+  const date = getMonthStartDate(month);
+  if (Number.isNaN(date.getTime())) {
+    return month;
+  }
+
+  return date.toLocaleDateString(locale, {
+    year: 'numeric',
+    month: 'long',
+  });
+};
+
+export const addMonthsToMonthValue = (
+  month: string,
+  monthOffset: number
+): string => {
+  const parts = parseCivilDateParts(month);
+  if (!parts) return month;
+
+  const totalMonthIndex = parts.year * 12 + (parts.month - 1) + monthOffset;
+  const year = Math.floor(totalMonthIndex / 12);
+  const monthNumber = (totalMonthIndex % 12) + 1;
+
+  return formatCivilMonthValue(year, monthNumber);
+};
+
+export const normalizePrepaidMonthCount = (
+  value: number | null | undefined
+): number => {
+  if (!Number.isFinite(value) || !value) return 1;
+
+  return Math.min(MAX_PREPAID_MONTH_COUNT, Math.max(1, Math.trunc(value)));
+};
+
+export const getCoverageMonths = (
+  selectedMonth: string,
+  prepaidMonthCount = 1
+): string[] => {
+  const monthCount = normalizePrepaidMonthCount(prepaidMonthCount);
+  const startMonth = parseCivilDateParts(selectedMonth);
+  if (!startMonth) return [];
+
+  return Array.from({ length: monthCount }, (_, index) =>
+    addMonthsToMonthValue(selectedMonth, index)
+  );
+};
+
+export const getCoverageEndMonthValue = (
+  selectedMonth: string,
+  prepaidMonthCount = 1
+): string => {
+  const coverageMonths = getCoverageMonths(selectedMonth, prepaidMonthCount);
+  return coverageMonths[coverageMonths.length - 1] ?? selectedMonth;
+};
+
+export const getCoverageValidUntilMonthValue = (
+  selectedMonth: string,
+  prepaidMonthCount = 1
+): string => addMonthsToMonthValue(selectedMonth, prepaidMonthCount);
+
+export const formatCoverageRangeLabel = ({
+  locale,
+  prepaidMonthCount,
+  selectedMonth,
+}: {
+  locale: string;
+  prepaidMonthCount?: number | null;
+  selectedMonth: string;
+}): string => {
+  const coverageMonths = getCoverageMonths(
+    selectedMonth,
+    prepaidMonthCount ?? 1
+  );
+  const firstMonth = coverageMonths[0];
+  const lastMonth = coverageMonths[coverageMonths.length - 1];
+
+  if (!firstMonth || !lastMonth || firstMonth === lastMonth) {
+    return formatMonthLabel(selectedMonth, locale);
+  }
+
+  return `${formatMonthLabel(firstMonth, locale)} - ${formatMonthLabel(
+    lastMonth,
+    locale
+  )}`;
+};
+
+export const resolveBillingTimezone = (
+  timezone: string | null | undefined
+): string => {
+  const trimmed = timezone?.trim();
+  if (!trimmed || trimmed === 'auto') return 'UTC';
+
+  try {
+    new Intl.DateTimeFormat('en-US', { timeZone: trimmed }).format(new Date(0));
+    return trimmed;
+  } catch {
+    return 'UTC';
+  }
+};
+
+export const getCurrentBillingDate = (
+  timezone: string | null | undefined,
+  now = new Date()
+): Date => {
+  const resolvedTimezone = resolveBillingTimezone(timezone);
+  const parts = new Intl.DateTimeFormat('en-US', {
+    day: '2-digit',
+    month: '2-digit',
+    timeZone: resolvedTimezone,
+    year: 'numeric',
+  }).formatToParts(now);
+  const getPart = (type: Intl.DateTimeFormatPartTypes) =>
+    parts.find((part) => part.type === type)?.value;
+  const year = Number(getPart('year'));
+  const month = Number(getPart('month'));
+  const day = Number(getPart('day'));
+  const civilDate = { day, month, year };
+
+  return isValidCivilDate(civilDate)
+    ? new Date(year, month - 1, day)
+    : invalidDate();
+};
+
+export const getCurrentMonthValue = (
+  timezone: string | null | undefined,
+  now = new Date()
+): string => formatMonthValue(getCurrentBillingDate(timezone, now));
+
+export const getCurrentMonthStartDate = (
+  timezone: string | null | undefined,
+  now = new Date()
+): Date => getMonthStartDate(getCurrentMonthValue(timezone, now));

package/src/components/ui/finance/invoices/components/subscription-invoice-proposal.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { SubscriptionInvoiceProposal } from './subscription-invoice-proposal';
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string, values?: Record<string, unknown>) =>
+    values ? `${key}:${JSON.stringify(values)}` : key,
+}));
+
+vi.mock('../../shared/finance-display-amount', () => ({
+  FinanceDisplayAmount: ({ value }: { value: string }) => <span>{value}</span>,
+}));
+
+describe('SubscriptionInvoiceProposal', () => {
+  it('shows the suggested total and billable quantity before products load', () => {
+    render(
+      <SubscriptionInvoiceProposal
+        billableQuantity={3}
+        currency="VND"
+        currentTotal={0}
+        hasSelectedProducts={false}
+        suggestedTotal={1_500_000}
+      />
+    );
+
+    expect(screen.getByText(/1[,.]500[,.]000/)).toBeInTheDocument();
+    expect(
+      screen.getByText(/based_on_billable_quantity.*"count":3/)
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('ws-invoices.suggested_total_requires_products')
+    ).toBeInTheDocument();
+  });
+
+  it('warns when selected products calculate a different total', () => {
+    render(
+      <SubscriptionInvoiceProposal
+        currency="VND"
+        currentTotal={1_200_000}
+        hasSelectedProducts
+        suggestedTotal={1_500_000}
+      />
+    );
+
+    expect(
+      screen.getByText(/ws-invoices.suggested_total_mismatch/)
+    ).toBeInTheDocument();
+  });
+});

package/src/components/ui/finance/invoices/components/subscription-invoice-proposal.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { AlertTriangle, Calculator } from '@tuturuuu/icons';
+import { Card, CardContent, CardHeader, CardTitle } from '@tuturuuu/ui/card';
+import { formatCurrency } from '@tuturuuu/utils/format';
+import { useTranslations } from 'next-intl';
+import { FinanceDisplayAmount } from '../../shared/finance-display-amount';
+
+interface SubscriptionInvoiceProposalProps {
+  billableQuantity?: number | null;
+  currency: string;
+  currentTotal: number;
+  hasSelectedProducts: boolean;
+  suggestedTotal: number;
+}
+
+export function SubscriptionInvoiceProposal({
+  billableQuantity,
+  currency,
+  currentTotal,
+  hasSelectedProducts,
+  suggestedTotal,
+}: SubscriptionInvoiceProposalProps) {
+  const t = useTranslations();
+  const totalsDiffer =
+    hasSelectedProducts && Math.abs(currentTotal - suggestedTotal) > 0.01;
+
+  return (
+    <Card className="overflow-hidden border-dynamic-blue/30 bg-dynamic-blue/5">
+      <CardHeader className="pb-3">
+        <CardTitle className="flex items-center gap-2 text-base">
+          <span className="flex h-8 w-8 items-center justify-center rounded-full bg-dynamic-blue/15 text-dynamic-blue">
+            <Calculator className="h-4 w-4" />
+          </span>
+          {t('ws-invoices.invoice_proposal')}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <div className="flex items-end justify-between gap-4 rounded-lg border bg-background/80 p-4">
+          <div>
+            <p className="text-muted-foreground text-xs uppercase tracking-wide">
+              {t('ws-invoices.suggested_invoice_total')}
+            </p>
+            {billableQuantity != null && (
+              <p className="mt-1 text-muted-foreground text-sm">
+                {t('ws-invoices.based_on_billable_quantity', {
+                  count: billableQuantity,
+                })}
+              </p>
+            )}
+          </div>
+          <FinanceDisplayAmount
+            className="shrink-0 font-bold text-2xl text-dynamic-blue tabular-nums"
+            value={formatCurrency(suggestedTotal, currency)}
+          />
+        </div>
+
+        {!hasSelectedProducts && (
+          <div className="flex items-start gap-2 rounded-lg border border-dynamic-yellow/30 bg-dynamic-yellow/10 p-3 text-sm">
+            <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-dynamic-yellow" />
+            <p className="text-muted-foreground">
+              {t('ws-invoices.suggested_total_requires_products')}
+            </p>
+          </div>
+        )}
+
+        {totalsDiffer && (
+          <div className="flex items-start gap-2 rounded-lg border border-dynamic-yellow/30 bg-dynamic-yellow/10 p-3 text-sm">
+            <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-dynamic-yellow" />
+            <p className="text-muted-foreground">
+              {t('ws-invoices.suggested_total_mismatch', {
+                current: formatCurrency(currentTotal, currency),
+                suggested: formatCurrency(suggestedTotal, currency),
+              })}
+            </p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/ui/finance/invoices/hooks/use-subscription-auto-selection.ts

@@ -38,6 +38,7 @@ interface UseSubscriptionAutoSelectionProps {
   }[];
   onSelectedProductsChange: Dispatch<SetStateAction<SelectedProductItem[]>>;
   prepaidMonthCount?: number;
+  workspaceTimezone?: string | null;
 }
 
 export type UseSubscriptionAutoSelectionResult = undefined;
@@ -162,13 +163,15 @@ const computeGroupAttendanceDaysMap = (
   selectedMonth: string,
   userAttendance: { status: string; date: string; group_id?: string }[],
   useAttendanceBased: boolean,
-  prepaidMonthCount = 1
+  prepaidMonthCount = 1,
+  workspaceTimezone?: string | null
 ) => {
   return getBillableQuantityMapForGroupsRange({
     groupIds: selectedGroupIds,
     latestInvoices: latestSubscriptionInvoices,
     prepaidMonthCount,
     selectedMonth,
+    workspaceTimezone,
     useAttendanceBased,
     userAttendance,
     userGroups,
@@ -229,6 +232,7 @@ export function useSubscriptionAutoSelection({
   latestSubscriptionInvoices,
   onSelectedProductsChange,
   prepaidMonthCount = 1,
+  workspaceTimezone,
 }: UseSubscriptionAutoSelectionProps): UseSubscriptionAutoSelectionResult {
   const t = useTranslations();
   const previousGroupIdRef = useRef<string>('');
@@ -251,7 +255,8 @@ export function useSubscriptionAutoSelection({
         selectedMonth,
         userAttendance,
         useAttendanceBased,
-        prepaidMonthCount
+        prepaidMonthCount,
+        workspaceTimezone
       ),
     [
       sortedSelectedGroupIds,
@@ -261,6 +266,7 @@ export function useSubscriptionAutoSelection({
       userAttendance,
       useAttendanceBased,
       prepaidMonthCount,
+      workspaceTimezone,
     ]
   );