@tuturuuu/ui 0.2.0 → 0.3.2

package/src/components/ui/custom/sidebar-remote-behavior-bridge.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import {
+  useUpdateUserConfig,
+  useUserConfig,
+} from '@tuturuuu/ui/hooks/use-user-config';
+import { useEffect, useRef } from 'react';
+
+type SidebarBehavior = 'expanded' | 'collapsed' | 'hover';
+
+const SIDEBAR_BEHAVIOR_CONFIG_KEY = 'SIDEBAR_BEHAVIOR';
+
+const isValidBehavior = (value: string | undefined): value is SidebarBehavior =>
+  value === 'expanded' || value === 'collapsed' || value === 'hover';
+
+interface SidebarRemoteBehaviorBridgeProps {
+  behavior: SidebarBehavior;
+  localOverride: boolean;
+  localOverrideVersion: number;
+  onApplyRemoteBehavior: (newBehavior: SidebarBehavior) => void;
+  onRemoteBehaviorAvailable: (remoteBehavior: SidebarBehavior) => void;
+  userChangeVersion: number;
+}
+
+export function SidebarRemoteBehaviorBridge({
+  behavior,
+  localOverride,
+  localOverrideVersion,
+  onApplyRemoteBehavior,
+  onRemoteBehaviorAvailable,
+  userChangeVersion,
+}: SidebarRemoteBehaviorBridgeProps) {
+  const { data: remoteBehavior, isSuccess: remoteLoaded } = useUserConfig(
+    SIDEBAR_BEHAVIOR_CONFIG_KEY,
+    'expanded'
+  );
+  const updateConfig = useUpdateUserConfig();
+  const hasAppliedRemote = useRef(false);
+  const persistedUserChangeVersion = useRef(0);
+  const handledLocalOverrideVersion = useRef(0);
+
+  useEffect(() => {
+    if (!remoteLoaded || !isValidBehavior(remoteBehavior)) return;
+
+    onRemoteBehaviorAvailable(remoteBehavior);
+  }, [onRemoteBehaviorAvailable, remoteBehavior, remoteLoaded]);
+
+  useEffect(() => {
+    if (
+      !remoteLoaded ||
+      localOverride ||
+      hasAppliedRemote.current ||
+      userChangeVersion > 0 ||
+      !isValidBehavior(remoteBehavior)
+    ) {
+      return;
+    }
+
+    hasAppliedRemote.current = true;
+
+    if (remoteBehavior !== behavior) {
+      onApplyRemoteBehavior(remoteBehavior);
+    }
+  }, [
+    behavior,
+    localOverride,
+    onApplyRemoteBehavior,
+    remoteBehavior,
+    remoteLoaded,
+    userChangeVersion,
+  ]);
+
+  useEffect(() => {
+    if (
+      !remoteLoaded ||
+      localOverride ||
+      userChangeVersion === 0 ||
+      persistedUserChangeVersion.current === userChangeVersion
+    ) {
+      return;
+    }
+
+    persistedUserChangeVersion.current = userChangeVersion;
+    updateConfig.mutate({
+      configId: SIDEBAR_BEHAVIOR_CONFIG_KEY,
+      value: behavior,
+    });
+  }, [behavior, localOverride, remoteLoaded, updateConfig, userChangeVersion]);
+
+  useEffect(() => {
+    if (
+      !remoteLoaded ||
+      localOverrideVersion === 0 ||
+      handledLocalOverrideVersion.current === localOverrideVersion
+    ) {
+      return;
+    }
+
+    handledLocalOverrideVersion.current = localOverrideVersion;
+
+    if (localOverride) {
+      updateConfig.mutate({
+        configId: SIDEBAR_BEHAVIOR_CONFIG_KEY,
+        value: behavior,
+      });
+      return;
+    }
+
+    if (isValidBehavior(remoteBehavior)) {
+      onApplyRemoteBehavior(remoteBehavior);
+    }
+  }, [
+    behavior,
+    localOverride,
+    localOverrideVersion,
+    onApplyRemoteBehavior,
+    remoteBehavior,
+    remoteLoaded,
+    updateConfig,
+  ]);
+
+  return null;
+}

package/src/components/ui/custom/tuturuuu-logo-urls.ts

@@ -0,0 +1,6 @@
+/** Absolute URL to the Tuturuuu logo hosted on the production domain. */
+export const TUTURUUU_REMOTE_LOGO_URL =
+  'https://tuturuuu.com/media/logos/transparent.png';
+
+export const TUTURUUU_LOCAL_LOGO_URL = '/media/logos/transparent.png';
+export const TUTURUUU_LOGO_URL = TUTURUUU_REMOTE_LOGO_URL;

package/src/components/ui/custom/tuturuuu-logo.tsx

@@ -1,16 +1,34 @@
-import Image from 'next/image';
+import Image, { type ImageProps } from 'next/image';
+import { TUTURUUU_LOGO_URL } from './tuturuuu-logo-urls';
 
-/** Absolute URL to the Tuturuuu logo hosted on the production domain. */
-export const TUTURUUU_LOGO_URL =
-  'https://tuturuuu.com/media/logos/transparent.png';
+export {
+  TUTURUUU_LOCAL_LOGO_URL,
+  TUTURUUU_LOGO_URL,
+  TUTURUUU_REMOTE_LOGO_URL,
+} from './tuturuuu-logo-urls';
 
 /**
  * Convenience wrapper around `<Image>` pre-configured with the Tuturuuu logo.
- * Uses `unoptimized` so no per-app `remotePatterns` config is required.
+ * Remote logo usage stays unoptimized so no per-app `remotePatterns` config is required.
  */
 export function TuturuuLogo({
   alt = 'Tuturuuu Logo',
+  src = TUTURUUU_LOGO_URL,
+  unoptimized,
   ...props
-}: Omit<React.ComponentProps<typeof Image>, 'src' | 'alt'> & { alt?: string }) {
-  return <Image src={TUTURUUU_LOGO_URL} alt={alt} unoptimized {...props} />;
+}: Omit<ImageProps, 'alt' | 'src'> & {
+  alt?: string;
+  src?: ImageProps['src'];
+}) {
+  const shouldSkipOptimization =
+    unoptimized ?? (typeof src === 'string' && /^https?:\/\//u.test(src));
+
+  return (
+    <Image
+      src={src}
+      alt={alt}
+      unoptimized={shouldSkipOptimization}
+      {...props}
+    />
+  );
 }

package/src/components/ui/custom/workspace-select-helpers.ts

@@ -0,0 +1,20 @@
+import type { InternalApiWorkspaceSummary } from '@tuturuuu/types';
+
+export function mergeWorkspaceSelectWorkspaces(
+  workspaces: InternalApiWorkspaceSummary[] | undefined,
+  currentWorkspaceFallback: InternalApiWorkspaceSummary | null | undefined
+) {
+  const workspaceList = workspaces ?? [];
+
+  if (!currentWorkspaceFallback) return workspaceList;
+
+  if (
+    workspaceList.some(
+      (workspace) => workspace.id === currentWorkspaceFallback.id
+    )
+  ) {
+    return workspaceList;
+  }
+
+  return [...workspaceList, currentWorkspaceFallback];
+}

package/src/components/ui/custom/workspace-select.tsx

@@ -10,7 +10,10 @@ import {
   Star,
 } from '@tuturuuu/icons';
 import { updateCurrentUserDefaultWorkspace } from '@tuturuuu/internal-api/users';
-import { acceptWorkspaceInvite } from '@tuturuuu/internal-api/workspaces';
+import {
+  acceptWorkspaceInvite,
+  getWorkspace,
+} from '@tuturuuu/internal-api/workspaces';
 import type { InternalApiWorkspaceSummary } from '@tuturuuu/types';
 import type { WorkspaceUser } from '@tuturuuu/types/primitives/WorkspaceUser';
 import {
@@ -63,6 +66,7 @@ import {
 import { Input } from '../input';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 import { TUTURUUU_LOGO_URL } from './tuturuuu-logo';
+import { mergeWorkspaceSelectWorkspaces } from './workspace-select-helpers';
 
 const FormSchema = z.object({
   name: z.string().min(1).max(100),
@@ -161,17 +165,34 @@ export function WorkspaceSelect({
   const pathname = usePathname();
   const queryClient = useQueryClient();
 
-  const { data: workspaces } = useQuery({
+  const resolvedWorkspaceId =
+    wsId && wsId !== PERSONAL_WORKSPACE_SLUG
+      ? resolveWorkspaceId(wsId)
+      : undefined;
+  const { data: listedWorkspaces } = useQuery({
     queryKey: ['workspaces'],
     queryFn: fetchWorkspaces,
     enabled: !!wsId,
   });
+  const hasListedCurrentWorkspace = Boolean(
+    resolvedWorkspaceId &&
+      listedWorkspaces?.some(
+        (workspace) => workspace.id === resolvedWorkspaceId
+      )
+  );
+  const { data: currentWorkspaceFallback } = useQuery({
+    queryKey: ['workspace-select-current-workspace', resolvedWorkspaceId],
+    queryFn: async () =>
+      (await getWorkspace(resolvedWorkspaceId!)) as InternalApiWorkspaceSummary,
+    enabled: Boolean(resolvedWorkspaceId && !hasListedCurrentWorkspace),
+    retry: 1,
+  });
+  const workspaces = mergeWorkspaceSelectWorkspaces(
+    listedWorkspaces,
+    currentWorkspaceFallback
+  );
   const { data: currentUser } = useWorkspaceUser();
 
-  const resolvedWorkspaceId =
-    wsId && wsId !== PERSONAL_WORKSPACE_SLUG
-      ? resolveWorkspaceId(wsId)
-      : undefined;
   const defaultWorkspaceId = currentUser?.default_workspace_id || null;
 
   const form = useForm({
@@ -435,9 +456,12 @@ export function WorkspaceSelect({
   const workspace =
     wsId === PERSONAL_WORKSPACE_SLUG
       ? personalWorkspace
-      : workspaces?.find((ws) => ws.id === resolvedWorkspaceId);
+      : (workspaces.find((ws) => ws.id === resolvedWorkspaceId) ??
+        guestWorkspaces.find((ws) => ws.id === resolvedWorkspaceId));
   if (!wsId) return <div />;
 
+  const hasSelectableWorkspaces = workspaces.length > 0;
+
   async function onJoinByHandleSubmit(
     formData: z.infer<typeof JoinWorkspaceByHandleFormSchema>
   ) {
@@ -540,10 +564,7 @@ export function WorkspaceSelect({
         }}
       >
         <Popover open={open} onOpenChange={setOpen}>
-          <PopoverTrigger
-            asChild
-            disabled={!workspaces || workspaces.length === 0}
-          >
+          <PopoverTrigger asChild disabled={!hasSelectableWorkspaces}>
             <Button
               size="xs"
               variant="outline"
@@ -553,7 +574,7 @@ export function WorkspaceSelect({
                 hideLeading ? 'justify-center p-0' : 'justify-start',
                 'w-full whitespace-normal text-start'
               )}
-              disabled={!workspaces || workspaces.length === 0}
+              disabled={!hasSelectableWorkspaces}
             >
               <WorkspaceIcon
                 fallbackLogoUrl={fallbackLogoUrl}

package/src/components/ui/finance/invoices/components/invoice-checkout-summary.tsx

@@ -45,7 +45,10 @@ export function InvoiceCheckoutSummary({
           <span className="text-muted-foreground">
             {t('ws-invoices.subtotal')}
           </span>
-          <FinanceDisplayAmount value={formatCurrency(subtotal, currency)} />
+          <FinanceDisplayAmount
+            alwaysShow
+            value={formatCurrency(subtotal, currency)}
+          />
         </div>
 
         {discountAmount !== undefined && discountLabel && (
@@ -54,6 +57,7 @@ export function InvoiceCheckoutSummary({
               {t('ws-invoices.discount')} ({discountLabel})
             </span>
             <FinanceDisplayAmount
+              alwaysShow
               className={discountClassName}
               value={`-${formatCurrency(discountAmount, currency)}`}
             />
@@ -65,6 +69,7 @@ export function InvoiceCheckoutSummary({
         <div className="flex justify-between font-semibold">
           <span>{t('ws-invoices.total')}</span>
           <FinanceDisplayAmount
+            alwaysShow
             value={formatCurrency(roundedTotal, currency)}
           />
         </div>
@@ -73,6 +78,7 @@ export function InvoiceCheckoutSummary({
           <div className="flex justify-between text-muted-foreground text-sm">
             <span>{t('ws-invoices.adjustment')}</span>
             <FinanceDisplayAmount
+              alwaysShow
               value={`${roundedTotal > totalBeforeRounding ? '+' : ''}${formatCurrency(
                 roundedTotal - totalBeforeRounding,
                 currency

package/src/components/ui/finance/invoices/components/invoice-payment-settings.tsx

@@ -51,6 +51,7 @@ interface InvoicePaymentSettingsProps {
   categoryLabelClassName?: string;
   currency?: string;
   walletDisabled?: boolean;
+  walletPermissionWarning?: ReactNode;
 }
 
 export function InvoicePaymentSettings({
@@ -76,6 +77,7 @@ export function InvoicePaymentSettings({
   categoryLabelClassName = 'text-dynamic-red',
   currency = 'USD',
   walletDisabled = false,
+  walletPermissionWarning,
 }: InvoicePaymentSettingsProps) {
   const t = useTranslations();
   const shouldShowPromotion = showPromotion && promotionsAllowed;
@@ -168,6 +170,7 @@ export function InvoicePaymentSettings({
             ))}
           </SelectContent>
         </Select>
+        {walletDisabled && walletPermissionWarning}
       </div>
 
       <div className="space-y-2">

package/src/components/ui/finance/invoices/components/invoice-products-permission-warning.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { AlertTriangle } from '@tuturuuu/icons';
+import { Button } from '@tuturuuu/ui/button';
+import { useTranslations } from 'next-intl';
+import {
+  type FinancePermissionRequestUser,
+  FinancePermissionWarningDialog,
+} from '../../shared/finance-permission-warning-dialog';
+
+interface InvoiceProductsPermissionWarningProps {
+  missingPermissions: string[];
+  user?: FinancePermissionRequestUser | null;
+}
+
+export function InvoiceProductsPermissionWarning({
+  missingPermissions,
+  user,
+}: InvoiceProductsPermissionWarningProps) {
+  const t = useTranslations();
+  const uniqueMissingPermissions = [...new Set(missingPermissions)];
+
+  if (uniqueMissingPermissions.length === 0) return null;
+
+  return (
+    <div className="rounded-lg border border-dynamic-orange/30 bg-dynamic-orange/5 p-3">
+      <div className="flex items-start gap-3">
+        <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-dynamic-orange" />
+        <div className="space-y-3">
+          <div className="space-y-1">
+            <p className="font-medium text-sm">
+              {t('finance-permission-warning.summary')}
+            </p>
+            <p className="text-muted-foreground text-sm">
+              {t('finance-permission-warning.description')}
+            </p>
+          </div>
+          <FinancePermissionWarningDialog
+            missingPermissions={uniqueMissingPermissions}
+            user={user}
+            trigger={
+              <Button type="button" variant="outline" size="sm">
+                {t('finance-permission-warning.open_request')}
+              </Button>
+            }
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function isPermissionRequestError(error: unknown) {
+  if (!error || typeof error !== 'object') return false;
+
+  const status = 'status' in error ? Number(error.status) : 0;
+  return status === 401 || status === 403;
+}

package/src/components/ui/finance/invoices/components/subscription-group-selector.tsx

@@ -26,7 +26,8 @@ import { useState } from 'react';
 import {
   type GroupPaymentStatus,
   getGroupPaymentStatus,
-  getMonthStartDate,
+  getSubscriptionCoverageInvoiceForGroup,
+  isSubscriptionMonthPaidForGroup,
   parseLocalCalendarDate,
 } from '../utils';
 
@@ -47,18 +48,6 @@ function hasSchedule(group: UserGroupItem['workspace_user_groups']): boolean {
   return Array.isArray(sessions) && sessions.length > 0;
 }
 
-function isMonthPaidForGroup(
-  groupId: string,
-  selectedMonth: string,
-  latestInvoices: LatestInvoice[]
-): boolean {
-  const inv = latestInvoices.find((i) => i.group_id === groupId);
-  if (!inv?.valid_until) return false;
-  const monthStart = getMonthStartDate(selectedMonth);
-  const validUntilStart = getMonthStartDate(inv.valid_until);
-  return monthStart < validUntilStart;
-}
-
 interface SubscriptionGroupSelectorProps {
   userGroups: UserGroupItem[];
   userGroupsLoading: boolean;
@@ -267,10 +256,11 @@ export function SubscriptionGroupSelector({
                 const group = groupItem.workspace_user_groups;
                 if (!group) return null;
                 const isSelected = selectedGroupIds.includes(group.id);
-                const latestInvoice = latestSubscriptionInvoices.find(
-                  (inv) => inv.group_id === group.id
+                const latestInvoice = getSubscriptionCoverageInvoiceForGroup(
+                  latestSubscriptionInvoices,
+                  group.id
                 );
-                const isMonthPaid = isMonthPaidForGroup(
+                const isMonthPaid = isSubscriptionMonthPaidForGroup(
                   group.id,
                   selectedMonth,
                   latestSubscriptionInvoices
@@ -312,10 +302,12 @@ export function SubscriptionGroupSelector({
                       const group = groupItem.workspace_user_groups;
                       if (!group) return null;
                       const isSelected = selectedGroupIds.includes(group.id);
-                      const latestInvoice = latestSubscriptionInvoices.find(
-                        (inv) => inv.group_id === group.id
-                      );
-                      const isMonthPaid = isMonthPaidForGroup(
+                      const latestInvoice =
+                        getSubscriptionCoverageInvoiceForGroup(
+                          latestSubscriptionInvoices,
+                          group.id
+                        );
+                      const isMonthPaid = isSubscriptionMonthPaidForGroup(
                         group.id,
                         selectedMonth,
                         latestSubscriptionInvoices

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

@@ -18,10 +18,11 @@ import type { UserGroup } from '../utils';
 import {
   getEffectiveAttendanceDays,
   getEffectiveDays,
-  getMonthStartDate,
   getSessionsForMonth,
   getSessionsUntilMonth,
+  getSubscriptionCoverageInvoiceForGroup,
   getTotalSessionsForGroups,
+  isSubscriptionMonthPaidForGroup,
   parseLocalCalendarDate,
 } from '../utils';
 
@@ -174,19 +175,19 @@ const computeGroupAttendanceDaysMap = (
     );
     if (!group) continue;
 
-    const latestInvoice = latestSubscriptionInvoices.find(
-      (inv) => inv.group_id === groupId
+    const latestInvoice = getSubscriptionCoverageInvoiceForGroup(
+      latestSubscriptionInvoices,
+      groupId
     );
     const validUntil = latestInvoice?.valid_until
       ? parseLocalCalendarDate(latestInvoice.valid_until)
       : null;
 
-    const isGroupPaid = (() => {
-      if (!validUntil) return false;
-      const selectedMonthStart = getMonthStartDate(selectedMonth);
-      const validUntilMonthStart = getMonthStartDate(validUntil);
-      return selectedMonthStart < validUntilMonthStart;
-    })();
+    const isGroupPaid = isSubscriptionMonthPaidForGroup(
+      groupId,
+      selectedMonth,
+      latestSubscriptionInvoices
+    );
 
     const sessionsArray = group.workspace_user_groups?.sessions || [];
     const groupSessions = isGroupPaid

package/src/components/ui/finance/invoices/hooks/use-subscription-invoice-content.ts

@@ -5,6 +5,7 @@ import type { UserGroup } from '../utils';
 import {
   formatMonthLabel,
   getAttendanceStats,
+  getSubscriptionCoverageInvoiceForGroup,
   getTotalSessionsForGroups,
   parseLocalCalendarDate,
 } from '../utils';
@@ -72,8 +73,9 @@ export function useSubscriptionInvoiceContent({
       if (!group) return;
 
       const groupName = group.workspace_user_groups?.name || 'Unknown Group';
-      const latestInvoice = latestSubscriptionInvoices.find(
-        (inv) => inv.group_id === groupId
+      const latestInvoice = getSubscriptionCoverageInvoiceForGroup(
+        latestSubscriptionInvoices,
+        groupId
       );
 
       const startMonth = latestInvoice?.valid_until
@@ -126,9 +128,12 @@ export function useSubscriptionInvoiceContent({
     let autoNotes: string | null = null;
     if (selectedGroupIds.length > 0 && userAttendance.length > 0) {
       const filteredAttendance = userAttendance.filter((a) => {
-        const latestInvoice = latestSubscriptionInvoices.find(
-          (inv) => inv.group_id === a.group_id
-        );
+        const latestInvoice = a.group_id
+          ? getSubscriptionCoverageInvoiceForGroup(
+              latestSubscriptionInvoices,
+              a.group_id
+            )
+          : undefined;
         if (!latestInvoice?.valid_until) return true;
         const validUntil = parseLocalCalendarDate(latestInvoice.valid_until);
         const attendanceDate = parseLocalCalendarDate(a.date);