@tuturuuu/ui 0.1.0 → 0.3.1

package/src/components/ui/finance/invoices/utils.ts

@@ -20,7 +20,8 @@ export type UserGroup = {
   workspace_user_groups: WorkspaceUserGroup | null;
 };
 
-type Invoice = {
+export type SubscriptionCoverageInvoice = {
+  created_at?: string | null;
   group_id?: string;
   valid_until?: string | null;
 };
@@ -119,6 +120,67 @@ export const formatMonthLabel = (month: string, locale: string): string => {
   });
 };
 
+const getComparableTimestamp = (value: string | null | undefined): number => {
+  if (!value) return 0;
+  const timestamp = new Date(value).getTime();
+  return Number.isNaN(timestamp) ? 0 : timestamp;
+};
+
+const getComparableValidUntilTimestamp = (
+  invoice: SubscriptionCoverageInvoice
+): number => {
+  const validUntil = parseLocalCalendarDate(invoice.valid_until);
+  return Number.isNaN(validUntil.getTime()) ? 0 : validUntil.getTime();
+};
+
+export const getSubscriptionCoverageInvoiceForGroup = (
+  latestInvoices: SubscriptionCoverageInvoice[],
+  groupId: string
+): SubscriptionCoverageInvoice | undefined =>
+  latestInvoices
+    .filter((invoice) => invoice.group_id === groupId)
+    .filter((invoice) => getComparableValidUntilTimestamp(invoice) > 0)
+    .sort((a, b) => {
+      const validUntilDiff =
+        getComparableValidUntilTimestamp(b) -
+        getComparableValidUntilTimestamp(a);
+      if (validUntilDiff !== 0) return validUntilDiff;
+
+      return (
+        getComparableTimestamp(b.created_at) -
+        getComparableTimestamp(a.created_at)
+      );
+    })[0];
+
+export const isSubscriptionMonthCoveredByInvoice = (
+  selectedMonth: string,
+  invoice: SubscriptionCoverageInvoice | null | undefined
+): boolean => {
+  if (!invoice?.valid_until) return false;
+
+  const selectedMonthStart = getMonthStartDate(selectedMonth);
+  const validUntilMonthStart = getMonthStartDate(invoice.valid_until);
+
+  if (
+    Number.isNaN(selectedMonthStart.getTime()) ||
+    Number.isNaN(validUntilMonthStart.getTime())
+  ) {
+    return false;
+  }
+
+  return selectedMonthStart < validUntilMonthStart;
+};
+
+export const isSubscriptionMonthPaidForGroup = (
+  groupId: string,
+  selectedMonth: string,
+  latestInvoices: SubscriptionCoverageInvoice[]
+): boolean =>
+  isSubscriptionMonthCoveredByInvoice(
+    selectedMonth,
+    getSubscriptionCoverageInvoiceForGroup(latestInvoices, groupId)
+  );
+
 export const getAttendanceStats = (
   attendance: AttendanceRecord[]
 ): AttendanceStats => {
@@ -159,10 +221,13 @@ export const getEffectiveAttendanceDays = (
 };
 
 const getGroupValidUntilDate = (
-  latestInvoices: Invoice[],
+  latestInvoices: SubscriptionCoverageInvoice[],
   groupId: string
 ): Date | null => {
-  const latestInvoice = latestInvoices.find((inv) => inv.group_id === groupId);
+  const latestInvoice = getSubscriptionCoverageInvoiceForGroup(
+    latestInvoices,
+    groupId
+  );
   if (!latestInvoice?.valid_until) return null;
 
   const validUntil = parseLocalCalendarDate(latestInvoice.valid_until);
@@ -185,7 +250,7 @@ export const getBillableSessionsForGroups = (
   userGroups: UserGroup[],
   groupIds: string[],
   selectedMonth: string,
-  latestInvoices: Invoice[] = []
+  latestInvoices: SubscriptionCoverageInvoice[] = []
 ): BillableSession[] => {
   if (!selectedMonth || groupIds.length === 0) return [];
 
@@ -220,7 +285,7 @@ export const getBillableAttendanceRecords = (
   attendance: AttendanceRecord[],
   groupIds: string[],
   selectedMonth: string,
-  latestInvoices: Invoice[] = []
+  latestInvoices: SubscriptionCoverageInvoice[] = []
 ): AttendanceRecord[] => {
   if (!Array.isArray(attendance) || !selectedMonth || groupIds.length === 0) {
     return [];
@@ -384,7 +449,7 @@ export type AvailableMonthOption = {
 export const getAvailableMonths = (
   userGroups: UserGroup[],
   groupIds: string[],
-  latestInvoices: { group_id?: string; valid_until?: string | null }[],
+  latestInvoices: SubscriptionCoverageInvoice[],
   locale: string,
   selectedMonthFallback: string | null = null
 ): AvailableMonthOption[] => {
@@ -411,17 +476,10 @@ export const getAvailableMonths = (
   while (currentDate <= normalizedLatestEnd) {
     const value = formatMonthValue(currentDate);
     const label = formatMonthLabel(value, locale);
-    const itemMonthStart = new Date(currentDate);
-    itemMonthStart.setDate(1);
 
-    const isPaid = groupIds.every((groupId) => {
-      const latestInvoice = latestInvoices.find(
-        (inv) => inv.group_id === groupId
-      );
-      if (!latestInvoice?.valid_until) return false;
-      const validUntilMonthStart = getMonthStartDate(latestInvoice.valid_until);
-      return itemMonthStart < validUntilMonthStart;
-    });
+    const isPaid = groupIds.every((groupId) =>
+      isSubscriptionMonthPaidForGroup(groupId, value, latestInvoices)
+    );
 
     months.push({ value, label, isPaid });
     currentDate.setMonth(currentDate.getMonth() + 1);
@@ -434,7 +492,7 @@ export const getTotalSessionsForGroups = (
   userGroups: UserGroup[],
   groupIds: string[],
   selectedMonth: string,
-  latestInvoices: Invoice[] = []
+  latestInvoices: SubscriptionCoverageInvoice[] = []
 ): number => {
   return getBillableSessionsForGroups(
     userGroups,

package/src/components/ui/finance/shared/finance-display-amount.tsx

@@ -8,18 +8,20 @@ import {
 interface FinanceDisplayAmountProps {
   value: string;
   className?: string;
+  alwaysShow?: boolean;
 }
 
 export function FinanceDisplayAmount({
   value,
   className,
+  alwaysShow = false,
 }: FinanceDisplayAmountProps) {
   const { isConfidential: areNumbersHidden } =
     useFinanceConfidentialVisibility();
 
   return (
     <span className={className}>
-      {areNumbersHidden ? FINANCE_HIDDEN_AMOUNT : value}
+      {areNumbersHidden && !alwaysShow ? FINANCE_HIDDEN_AMOUNT : value}
     </span>
   );
 }

package/src/components/ui/finance/shared/finance-permission-warning-dialog.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { FinancePermissionWarningContent } from './finance-permission-warning-dialog';
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string, values?: Record<string, string>) =>
+    values ? `${key}:${Object.values(values).join(',')}` : key,
+}));
+
+vi.mock('@tuturuuu/ui/sonner', () => ({
+  toast: {
+    error: vi.fn(),
+    success: vi.fn(),
+  },
+}));
+
+describe('FinancePermissionWarningContent', () => {
+  it('shows missing permissions and request identity details', () => {
+    render(
+      <FinancePermissionWarningContent
+        missingPermissions={['create_invoices']}
+        user={{
+          displayName: 'Jane Doe',
+          email: 'jane@example.com',
+          id: 'user-1',
+        }}
+      />
+    );
+
+    expect(screen.getByText('create_invoices')).toBeVisible();
+    expect(screen.getByText('user-1')).toBeVisible();
+    expect(screen.getByText('Jane Doe')).toBeVisible();
+  });
+});

package/src/components/ui/finance/shared/finance-permission-warning-dialog.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+import { AlertTriangle, Copy } from '@tuturuuu/icons';
+import { Button } from '@tuturuuu/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@tuturuuu/ui/dialog';
+import { toast } from '@tuturuuu/ui/sonner';
+import { useTranslations } from 'next-intl';
+import type { ReactNode } from 'react';
+import { useMemo, useState } from 'react';
+
+export interface FinancePermissionRequestUser {
+  displayName?: string | null;
+  email?: string | null;
+  id: string;
+}
+
+interface FinancePermissionWarningContentProps {
+  missingPermissions: string[];
+  user?: FinancePermissionRequestUser | null;
+}
+
+interface FinancePermissionWarningDialogProps
+  extends FinancePermissionWarningContentProps {
+  defaultOpen?: boolean;
+  trigger?: ReactNode;
+}
+
+function resolveDisplayName(
+  user: FinancePermissionRequestUser | null | undefined,
+  fallback: string
+) {
+  return user?.displayName || user?.email || user?.id || fallback;
+}
+
+export function FinancePermissionWarningContent({
+  missingPermissions,
+  user,
+}: FinancePermissionWarningContentProps) {
+  const t = useTranslations();
+  const fallbackUser = t('finance-permission-warning.unknown_user');
+  const displayName = resolveDisplayName(user, fallbackUser);
+  const userId = user?.id || fallbackUser;
+  const permissionList = missingPermissions.join(', ');
+  const requestText = useMemo(
+    () =>
+      t('finance-permission-warning.request_template', {
+        displayName,
+        permissions: permissionList,
+        userId,
+      }),
+    [displayName, permissionList, t, userId]
+  );
+
+  const copyRequest = async () => {
+    try {
+      await navigator.clipboard.writeText(requestText);
+      toast.success(t('finance-permission-warning.copy_success'));
+    } catch {
+      toast.error(t('finance-permission-warning.copy_error'));
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <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-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>
+        </div>
+      </div>
+
+      <div className="grid gap-3 rounded-lg border p-3 text-sm">
+        <div className="grid gap-1">
+          <span className="font-medium text-muted-foreground">
+            {t('finance-permission-warning.permissions_to_add')}
+          </span>
+          <div className="flex flex-wrap gap-2">
+            {missingPermissions.map((permission) => (
+              <code
+                key={permission}
+                className="rounded bg-muted px-2 py-1 font-mono text-xs"
+              >
+                {permission}
+              </code>
+            ))}
+          </div>
+        </div>
+
+        <div className="grid gap-1">
+          <span className="font-medium text-muted-foreground">
+            {t('finance-permission-warning.user_id')}
+          </span>
+          <code className="break-all rounded bg-muted px-2 py-1 font-mono text-xs">
+            {userId}
+          </code>
+        </div>
+
+        <div className="grid gap-1">
+          <span className="font-medium text-muted-foreground">
+            {t('finance-permission-warning.display_name')}
+          </span>
+          <span>{displayName}</span>
+        </div>
+      </div>
+
+      <DialogFooter>
+        <Button type="button" variant="outline" onClick={copyRequest}>
+          <Copy className="mr-2 h-4 w-4" />
+          {t('finance-permission-warning.copy_request')}
+        </Button>
+      </DialogFooter>
+    </div>
+  );
+}
+
+export function FinancePermissionWarningDialog({
+  defaultOpen = false,
+  missingPermissions,
+  trigger,
+  user,
+}: FinancePermissionWarningDialogProps) {
+  const t = useTranslations();
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('finance-permission-warning.title')}</DialogTitle>
+          <DialogDescription>
+            {t('finance-permission-warning.dialog_description')}
+          </DialogDescription>
+        </DialogHeader>
+        <FinancePermissionWarningContent
+          missingPermissions={missingPermissions}
+          user={user}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ui/finance/transactions/form-basic-tab.tsx

@@ -27,6 +27,7 @@ import { computeAccessibleLabelStyles } from '@tuturuuu/utils/label-colors';
 import { format } from 'date-fns';
 import { enUS, vi } from 'date-fns/locale';
 import { useTranslations } from 'next-intl';
+import type { ReactNode } from 'react';
 import type { UseFormReturn } from 'react-hook-form';
 
 import type { TransactionFormValues } from './form-schema';
@@ -44,7 +45,9 @@ interface FormBasicTabProps {
   loading: boolean;
   hasFormPermission: boolean;
   originWalletDisabled?: boolean;
+  originWalletPermissionWarning?: ReactNode;
   destinationWalletDisabled?: boolean;
+  destinationWalletPermissionWarning?: ReactNode;
   isTransfer: boolean;
   suggestedExchangeRate: number | null;
   isDestinationOverridden: boolean;
@@ -73,7 +76,9 @@ export function FormBasicTab({
   loading,
   hasFormPermission,
   originWalletDisabled = false,
+  originWalletPermissionWarning,
   destinationWalletDisabled = false,
+  destinationWalletPermissionWarning,
   isTransfer,
   suggestedExchangeRate,
   isDestinationOverridden,
@@ -138,6 +143,7 @@ export function FormBasicTab({
                     })}
                   </FormDescription>
                 )}
+              {originWalletDisabled && originWalletPermissionWarning}
               <FormMessage />
             </FormItem>
           )}
@@ -192,6 +198,8 @@ export function FormBasicTab({
                     destinationWalletDisabled
                   }
                 />
+                {destinationWalletDisabled &&
+                  destinationWalletPermissionWarning}
                 <FormMessage />
               </FormItem>
             )}

package/src/components/ui/finance/transactions/form-more-tab.tsx

@@ -12,6 +12,7 @@ import {
 } from '@tuturuuu/ui/form';
 import { Switch } from '@tuturuuu/ui/switch';
 import { useTranslations } from 'next-intl';
+import type { ReactNode } from 'react';
 import type { UseFormReturn } from 'react-hook-form';
 import type { TransactionFormValues } from './form-schema';
 import type { NewContent, NewContentType } from './form-types';
@@ -23,6 +24,7 @@ interface FormMoreTabProps {
   loading: boolean;
   hasFormPermission: boolean;
   canManageConfidential: boolean;
+  confidentialPermissionWarning?: ReactNode;
   isTransfer: boolean;
   setNewContentType: (value: NewContentType) => void;
   setNewContent: (value: NewContent) => void;
@@ -35,6 +37,7 @@ export function FormMoreTab({
   loading,
   hasFormPermission,
   canManageConfidential,
+  confidentialPermissionWarning,
   isTransfer,
   setNewContentType,
   setNewContent,
@@ -198,6 +201,11 @@ export function FormMoreTab({
           </div>
         </div>
       )}
+
+      {!canManageConfidential &&
+        !isTransfer &&
+        hasFormPermission &&
+        confidentialPermissionWarning}
     </div>
   );
 }

package/src/components/ui/finance/transactions/form-types.ts

@@ -1,4 +1,5 @@
 import type { Database } from '@tuturuuu/types';
+import type { FinancePermissionRequestUser } from '../shared/finance-permission-warning-dialog';
 import type { TransactionFormValues } from './form-schema';
 
 type DbTransaction = Database['public']['Tables']['wallet_transactions']['Row'];
@@ -32,6 +33,7 @@ export interface TransactionFormProps {
   canUpdateConfidentialTransactions?: boolean;
   canChangeFinanceWallets?: boolean;
   canSetFinanceWalletsOnCreate?: boolean;
+  permissionRequestUser?: FinancePermissionRequestUser | null;
 }
 
 export type NewContentType = 'wallet' | 'transaction-category' | 'tag';

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

@@ -63,6 +63,13 @@ vi.mock('@tuturuuu/internal-api/finance', () => ({
   updateWallet: vi.fn(),
 }));
 
+vi.mock('@tuturuuu/ui/sonner', () => ({
+  toast: {
+    error: vi.fn(),
+    success: vi.fn(),
+  },
+}));
+
 function renderTransactionForm() {
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -148,4 +155,40 @@ describe('TransactionForm', () => {
 
     expect(screen.getByText('transaction-data-table.tab_basic')).toBeVisible();
   });
+
+  it('shows a permission request when create transaction access is missing', () => {
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+      },
+    });
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <TransactionsCreateSummary
+          canChangeFinanceWallets
+          canCreateConfidentialTransactions={false}
+          canCreateTransactions={false}
+          canSetFinanceWalletsOnCreate
+          createDescription="Create description"
+          createTitle="Create"
+          defaultOpen
+          description="Transactions description"
+          permissionRequestUser={{
+            displayName: 'Jane Doe',
+            id: 'user-1',
+          }}
+          pluralTitle="Transactions"
+          singularTitle="Transaction"
+          wsId="ws-1"
+        />
+      </QueryClientProvider>
+    );
+
+    expect(screen.getByText('create_transactions')).toBeVisible();
+    expect(screen.getByText('user-1')).toBeVisible();
+    expect(screen.getByText('Jane Doe')).toBeVisible();
+  });
 });

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

@@ -21,6 +21,10 @@ import {
   type WorkspaceStorageListItem,
 } from '@tuturuuu/internal-api';
 import { Button } from '@tuturuuu/ui/button';
+import {
+  FinancePermissionWarningContent,
+  FinancePermissionWarningDialog,
+} from '@tuturuuu/ui/finance/shared/finance-permission-warning-dialog';
 import { Form } from '@tuturuuu/ui/form';
 import { useExchangeRates } from '@tuturuuu/ui/hooks/use-exchange-rates';
 import { useFinanceTransactionPreferences } from '@tuturuuu/ui/hooks/use-finance-transaction-preferences';
@@ -69,6 +73,7 @@ export function TransactionForm({
   canUpdateConfidentialTransactions,
   canChangeFinanceWallets = true,
   canSetFinanceWalletsOnCreate = true,
+  permissionRequestUser,
 }: TransactionFormProps) {
   const t = useTranslations();
   const locale = useLocale();
@@ -325,6 +330,43 @@ export function TransactionForm({
     isEditMode &&
     !canChangeFinanceWallets &&
     !!data?.transfer?.linked_wallet_id;
+  const createWalletPermissionWarning = (
+    <FinancePermissionWarningDialog
+      missingPermissions={['set_finance_wallets_on_create']}
+      user={permissionRequestUser}
+      trigger={
+        <Button type="button" variant="outline" size="sm">
+          {t('finance-permission-warning.open_request')}
+        </Button>
+      }
+    />
+  );
+  const editWalletPermissionWarning = (
+    <FinancePermissionWarningDialog
+      missingPermissions={['change_finance_wallets']}
+      user={permissionRequestUser}
+      trigger={
+        <Button type="button" variant="outline" size="sm">
+          {t('finance-permission-warning.open_request')}
+        </Button>
+      }
+    />
+  );
+  const confidentialPermissionWarning = (
+    <FinancePermissionWarningDialog
+      missingPermissions={[
+        isCreateMode
+          ? 'create_confidential_transactions'
+          : 'update_confidential_transactions',
+      ]}
+      user={permissionRequestUser}
+      trigger={
+        <Button type="button" variant="outline" size="sm">
+          {t('finance-permission-warning.open_request')}
+        </Button>
+      }
+    />
+  );
 
   const refreshTransactions = async () => {
     await invalidateTransactionMutationQueries(queryClient, wsId);
@@ -790,6 +832,17 @@ export function TransactionForm({
   // Disable transfer mode when editing existing non-transfer transactions
   const canToggleTransfer = !data?.id || !!data?.transfer;
 
+  if (!hasFormPermission) {
+    return (
+      <FinancePermissionWarningContent
+        missingPermissions={[
+          isCreateMode ? 'create_transactions' : 'update_transactions',
+        ]}
+        user={permissionRequestUser}
+      />
+    );
+  }
+
   return (
     <>
       <FormContentDialog
@@ -858,7 +911,13 @@ export function TransactionForm({
                 originWalletDisabled={
                   shouldLockCreateOriginWallet || shouldLockEditOriginWallet
                 }
+                originWalletPermissionWarning={
+                  shouldLockCreateOriginWallet
+                    ? createWalletPermissionWarning
+                    : editWalletPermissionWarning
+                }
                 destinationWalletDisabled={shouldLockEditDestinationWallet}
+                destinationWalletPermissionWarning={editWalletPermissionWarning}
                 isTransfer={isTransfer}
                 suggestedExchangeRate={suggestedExchangeRate}
                 isDestinationOverridden={isDestinationOverridden}
@@ -913,6 +972,7 @@ export function TransactionForm({
                 loading={loading}
                 hasFormPermission={!!hasFormPermission}
                 canManageConfidential={!!canManageConfidential}
+                confidentialPermissionWarning={confidentialPermissionWarning}
                 isTransfer={isTransfer}
                 setNewContentType={setNewContentType}
                 setNewContent={setNewContent}

package/src/components/ui/finance/transactions/infinite-transactions-list.tsx

@@ -51,6 +51,10 @@ dayjs.extend(timezone);
 dayjs.extend(isoWeek);
 
 import ModifiableDialogTrigger from '@tuturuuu/ui/custom/modifiable-dialog-trigger';
+import {
+  type FinancePermissionRequestUser,
+  FinancePermissionWarningDialog,
+} from '@tuturuuu/ui/finance/shared/finance-permission-warning-dialog';
 import { useLocale, useTranslations } from 'next-intl';
 import { parseAsArrayOf, parseAsString, useQueryState } from 'nuqs';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -92,6 +96,7 @@ interface InfiniteTransactionsListProps {
   canViewConfidentialCategory?: boolean;
   /** Hide transaction creator (useful for personal workspaces) */
   isPersonalWorkspace?: boolean;
+  permissionRequestUser?: FinancePermissionRequestUser | null;
 }
 
 interface TransactionResponse {
@@ -133,6 +138,7 @@ export function InfiniteTransactionsList({
   canViewConfidentialDescription: _canViewConfidentialDescription,
   canViewConfidentialCategory: _canViewConfidentialCategory,
   isPersonalWorkspace,
+  permissionRequestUser,
 }: InfiniteTransactionsListProps) {
   const t = useTranslations();
   const locale = useLocale();
@@ -886,6 +892,25 @@ export function InfiniteTransactionsList({
                       </span>
                     </Button>
                   )}
+                  {canCreateTransactions === false && (
+                    <FinancePermissionWarningDialog
+                      missingPermissions={['create_transactions']}
+                      user={permissionRequestUser}
+                      trigger={
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="icon"
+                          className="h-8 w-8 shrink-0"
+                        >
+                          <Plus className="h-4 w-4" />
+                          <span className="sr-only">
+                            {t('finance-permission-warning.open_request')}
+                          </span>
+                        </Button>
+                      }
+                    />
+                  )}
                 </div>
               </div>
             </div>
@@ -1029,6 +1054,7 @@ export function InfiniteTransactionsList({
               canUpdateConfidentialTransactions={
                 canUpdateConfidentialTransactions
               }
+              permissionRequestUser={permissionRequestUser}
               onFinish={() => {
                 handleTransactionUpdate();
                 handleCloseDialog();
@@ -1061,6 +1087,7 @@ export function InfiniteTransactionsList({
               canCreateConfidentialTransactions={
                 canCreateConfidentialTransactions
               }
+              permissionRequestUser={permissionRequestUser}
               onFinish={() => {
                 handleTransactionUpdate();
                 setCreateForGroupDate(null);