@tuturuuu/ui 0.2.0 → 0.3.1

package/src/components/ui/finance/invoices/standard-invoice.tsx

@@ -13,12 +13,20 @@ import { useQueryState } from 'nuqs';
 import { useEffect, useMemo, useState } from 'react';
 import { useDebounce } from '../../../../hooks/use-debounce';
 import { useFinanceHref } from '../finance-route-context';
+import {
+  type FinancePermissionRequestUser,
+  FinancePermissionWarningDialog,
+} from '../shared/finance-permission-warning-dialog';
 import { useFinanceConfidentialVisibility } from '../shared/use-finance-confidential-visibility';
 import { InvoiceBlockedState } from './components/invoice-blocked-state';
 import { InvoiceCheckoutSummary } from './components/invoice-checkout-summary';
 import { InvoiceContentEditor } from './components/invoice-content-editor';
 import { InvoiceCustomerSelectCard } from './components/invoice-customer-select-card';
 import { InvoicePaymentSettings } from './components/invoice-payment-settings';
+import {
+  InvoiceProductsPermissionWarning,
+  isPermissionRequestError,
+} from './components/invoice-products-permission-warning';
 import { InvoiceUserHistoryAccordion } from './components/invoice-user-history-accordion';
 import { CreatePromotionDialog } from './create-promotion-dialog';
 import type { AvailablePromotion } from './hooks';
@@ -51,6 +59,9 @@ interface Props {
   defaultCurrency?: 'VND' | 'USD';
   canChangeFinanceWallets?: boolean;
   canSetFinanceWalletsOnCreate?: boolean;
+  canReadInvoiceProducts?: boolean;
+  canReadInvoiceProductStock?: boolean;
+  permissionRequestUser?: FinancePermissionRequestUser | null;
 }
 
 export function StandardInvoice({
@@ -62,6 +73,9 @@ export function StandardInvoice({
   defaultCurrency = 'USD',
   canChangeFinanceWallets = true,
   canSetFinanceWalletsOnCreate = true,
+  canReadInvoiceProducts = true,
+  canReadInvoiceProductStock = true,
+  permissionRequestUser,
 }: Props) {
   const t = useTranslations();
   const router = useRouter();
@@ -77,6 +91,10 @@ export function StandardInvoice({
   const [selectedUserId, setSelectedUserId] = useQueryState('user_id', {
     defaultValue: '',
   });
+  const [selectedProducts, setSelectedProducts] = useState<
+    SelectedProductItem[]
+  >([]);
+  const hasSelectedProducts = selectedProducts.length > 0;
 
   // Data queries
   const {
@@ -89,24 +107,42 @@ export function StandardInvoice({
     isFetching: isFetchingCustomers,
     isFetchingNextPage: isFetchingMoreCustomers,
   } = useInvoiceCustomerSearch(wsId, debouncedCustomerSearch, selectedUserId);
-  const { data: products = [], isLoading: productsLoading } = useProducts(wsId);
-  const { data: availablePromotions = [], isLoading: promotionsLoading } =
-    useAvailablePromotions(wsId, selectedUserId);
-  const { data: promotionsAllowed = true } = useInvoicePromotionConfig(wsId);
+  const {
+    data: products = [],
+    error: productsError,
+    isLoading: productsLoading,
+  } = useProducts(wsId, { enabled: canReadInvoiceProducts });
+  const { data: availablePromotions = [] } = useAvailablePromotions(
+    wsId,
+    selectedUserId,
+    {
+      enabled: hasSelectedProducts,
+    }
+  );
+  const { data: promotionsAllowed = true } = useInvoicePromotionConfig(wsId, {
+    enabled: !!selectedUserId && hasSelectedProducts,
+  });
   const { data: linkedPromotions = [] } = useUserLinkedPromotions(
     wsId,
-    selectedUserId
+    selectedUserId,
+    { enabled: hasSelectedProducts }
   );
   const { data: referralDiscountRows = [] } = useUserReferralDiscounts(
     wsId,
-    selectedUserId
+    selectedUserId,
+    { enabled: hasSelectedProducts }
   );
-  const { data: wallets = [], isLoading: walletsLoading } = useWallets(wsId);
-  const { data: categories = [], isLoading: categoriesLoading } =
-    useCategories(wsId);
+  const { data: wallets = [] } = useWallets(wsId, {
+    enabled: hasSelectedProducts,
+  });
+  const { data: categories = [] } = useCategories(wsId, {
+    enabled: hasSelectedProducts,
+  });
 
   // Blocked groups check
-  const { data: blockedGroupIds = [] } = useInvoiceBlockedGroups(wsId);
+  const { data: blockedGroupIds = [] } = useInvoiceBlockedGroups(wsId, {
+    enabled: !!selectedUserId,
+  });
   const { data: userGroups = [], isLoading: userGroupsLoading } = useUserGroups(
     wsId,
     selectedUserId
@@ -128,9 +164,6 @@ export function StandardInvoice({
   }, [selectedUserId, blockedGroupIds, userGroups]);
 
   // State management
-  const [selectedProducts, setSelectedProducts] = useState<
-    SelectedProductItem[]
-  >([]);
   const [selectedWalletId, setSelectedWalletId] = useState<string>(
     defaultWalletId || ''
   );
@@ -139,6 +172,18 @@ export function StandardInvoice({
     canChangeFinanceWallets,
     canSetFinanceWalletsOnCreate,
   });
+  const walletPermissionWarning =
+    isWalletSelectionLocked && permissionRequestUser ? (
+      <FinancePermissionWarningDialog
+        missingPermissions={['set_finance_wallets_on_create']}
+        user={permissionRequestUser}
+        trigger={
+          <Button type="button" variant="outline" size="sm">
+            {t('finance-permission-warning.open_request')}
+          </Button>
+        }
+      />
+    ) : null;
 
   useEffect(() => {
     if (defaultWalletId) {
@@ -160,13 +205,23 @@ export function StandardInvoice({
           (promotion: AvailablePromotion) =>
             promotion.id === selectedPromotionId
         );
-  const isLoadingData =
-    usersLoading ||
-    productsLoading ||
-    promotionsLoading ||
-    walletsLoading ||
-    categoriesLoading ||
-    userGroupsLoading;
+  const isLoadingData = usersLoading || productsLoading || userGroupsLoading;
+
+  const invoiceProductMissingPermissions = useMemo(() => {
+    const missingPermissions = new Set<string>();
+
+    if (!canReadInvoiceProducts || isPermissionRequestError(productsError)) {
+      missingPermissions.add('create_inventory_sales');
+      missingPermissions.add('view_inventory_catalog');
+    }
+
+    if (!canReadInvoiceProductStock) {
+      missingPermissions.add('create_inventory_sales');
+      missingPermissions.add('view_inventory_stock');
+    }
+
+    return [...missingPermissions];
+  }, [canReadInvoiceProductStock, canReadInvoiceProducts, productsError]);
 
   const referralDiscountMap = useMemo(() => {
     const map = new Map<string, number>();
@@ -439,12 +494,18 @@ export function StandardInvoice({
         </InvoiceCustomerSelectCard>
 
         {!isBlocked && (
-          <ProductSelection
-            products={products}
-            selectedProducts={selectedProducts}
-            onSelectedProductsChange={setSelectedProducts}
-            currency={defaultCurrency}
-          />
+          <div className="space-y-3">
+            <ProductSelection
+              products={products}
+              selectedProducts={selectedProducts}
+              onSelectedProductsChange={setSelectedProducts}
+              currency={defaultCurrency}
+            />
+            <InvoiceProductsPermissionWarning
+              missingPermissions={invoiceProductMissingPermissions}
+              user={permissionRequestUser}
+            />
+          </div>
         )}
       </div>
       <div className="space-y-6">
@@ -472,6 +533,7 @@ export function StandardInvoice({
                   onWalletChange={setSelectedWalletId}
                   onCategoryChange={setSelectedCategoryId}
                   walletDisabled={isWalletSelectionLocked}
+                  walletPermissionWarning={walletPermissionWarning}
                   showPromotion
                   currency={defaultCurrency}
                   promotionsAllowed={promotionsAllowed}

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { useQueryClient } from '@tanstack/react-query';
-import { Calculator, Loader2, Plus } from '@tuturuuu/icons';
+import { AlertTriangle, Calculator, Loader2, Plus } from '@tuturuuu/icons';
 import { Button } from '@tuturuuu/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@tuturuuu/ui/card';
 import { Separator } from '@tuturuuu/ui/separator';
@@ -20,12 +20,20 @@ import {
 } from 'react';
 import { useDebounce } from '../../../../hooks/use-debounce';
 import { useFinanceHref } from '../finance-route-context';
+import {
+  type FinancePermissionRequestUser,
+  FinancePermissionWarningDialog,
+} from '../shared/finance-permission-warning-dialog';
 import { useFinanceConfidentialVisibility } from '../shared/use-finance-confidential-visibility';
 import { InvoiceBlockedState } from './components/invoice-blocked-state';
 import { InvoiceCheckoutSummary } from './components/invoice-checkout-summary';
 import { InvoiceContentEditor } from './components/invoice-content-editor';
 import { InvoiceCustomerSelectCard } from './components/invoice-customer-select-card';
 import { InvoicePaymentSettings } from './components/invoice-payment-settings';
+import {
+  InvoiceProductsPermissionWarning,
+  isPermissionRequestError,
+} from './components/invoice-products-permission-warning';
 import { SubscriptionAttendanceSummary } from './components/subscription-attendance-summary';
 import { SubscriptionGroupSelector } from './components/subscription-group-selector';
 import { CreatePromotionDialog } from './create-promotion-dialog';
@@ -62,6 +70,7 @@ import {
   getLinkedFinanceCategorySelection,
   getMonthStartDate,
   getSubscriptionAttendanceDisplayData,
+  isSubscriptionMonthPaidForGroup,
 } from './utils';
 
 interface Props {
@@ -75,6 +84,10 @@ interface Props {
   defaultCurrency?: 'VND' | 'USD';
   canChangeFinanceWallets?: boolean;
   canSetFinanceWalletsOnCreate?: boolean;
+  canReadInvoiceProducts?: boolean;
+  canReadInvoiceProductStock?: boolean;
+  canReadGroupLinkedProducts?: boolean;
+  permissionRequestUser?: FinancePermissionRequestUser | null;
 }
 
 export function SubscriptionInvoice({
@@ -88,6 +101,10 @@ export function SubscriptionInvoice({
   defaultCurrency = 'USD',
   canChangeFinanceWallets = true,
   canSetFinanceWalletsOnCreate = true,
+  canReadInvoiceProducts = true,
+  canReadInvoiceProductStock = true,
+  canReadGroupLinkedProducts = true,
+  permissionRequestUser,
 }: Props) {
   const t = useTranslations();
   const locale = useLocale();
@@ -115,6 +132,10 @@ export function SubscriptionInvoice({
 
   const [customerSearch, setCustomerSearch] = useState('');
   const [debouncedCustomerSearch] = useDebounce(customerSearch, 300);
+  const [subscriptionSelectedProducts, setSubscriptionSelectedProducts] =
+    useState<SelectedProductItem[]>([]);
+  const hasSelectedGroups = selectedGroupIds.length > 0;
+  const hasSelectedProducts = subscriptionSelectedProducts.length > 0;
 
   const updateSearchParam = useCallback(
     (key: string, value: string) => {
@@ -143,23 +164,41 @@ export function SubscriptionInvoice({
     isFetching: isFetchingCustomers,
     isFetchingNextPage: isFetchingMoreCustomers,
   } = useInvoiceCustomerSearch(wsId, debouncedCustomerSearch, selectedUserId);
-  const { data: products = [], isLoading: productsLoading } = useProducts(wsId);
-  const { data: availablePromotions = [], isLoading: promotionsLoading } =
-    useAvailablePromotions(wsId, selectedUserId);
+  const {
+    data: products = [],
+    error: productsError,
+    isLoading: productsLoading,
+  } = useProducts(wsId, {
+    enabled: canReadInvoiceProducts && hasSelectedGroups,
+  });
+  const { data: availablePromotions = [] } = useAvailablePromotions(
+    wsId,
+    selectedUserId,
+    {
+      enabled: hasSelectedProducts,
+    }
+  );
   const { data: linkedPromotions = [] } = useUserLinkedPromotions(
     wsId,
-    selectedUserId
+    selectedUserId,
+    { enabled: hasSelectedProducts }
   );
   const { data: referralDiscountRows = [] } = useUserReferralDiscounts(
     wsId,
-    selectedUserId
+    selectedUserId,
+    { enabled: hasSelectedProducts }
   );
-  const { data: wallets = [], isLoading: walletsLoading } = useWallets(wsId);
-  const { data: categories = [], isLoading: categoriesLoading } =
-    useCategories(wsId);
+  const { data: wallets = [] } = useWallets(wsId, {
+    enabled: hasSelectedProducts,
+  });
+  const { data: categories = [] } = useCategories(wsId, {
+    enabled: hasSelectedProducts,
+  });
 
   // Blocked groups check
-  const { data: blockedGroupIds = [] } = useInvoiceBlockedGroups(wsId);
+  const { data: blockedGroupIds = [] } = useInvoiceBlockedGroups(wsId, {
+    enabled: hasSelectedGroups,
+  });
 
   const isBlocked = useMemo(
     () => selectedGroupIds.some((groupId) => blockedGroupIds.includes(groupId)),
@@ -175,6 +214,18 @@ export function SubscriptionInvoice({
     canChangeFinanceWallets,
     canSetFinanceWalletsOnCreate,
   });
+  const walletPermissionWarning =
+    isWalletSelectionLocked && permissionRequestUser ? (
+      <FinancePermissionWarningDialog
+        missingPermissions={['set_finance_wallets_on_create']}
+        user={permissionRequestUser}
+        trigger={
+          <Button type="button" variant="outline" size="sm">
+            {t('finance-permission-warning.open_request')}
+          </Button>
+        }
+      />
+    ) : null;
 
   useEffect(() => {
     if (defaultWalletId) {
@@ -202,19 +253,22 @@ export function SubscriptionInvoice({
   // Track previous user ID to detect user changes (skip initial mount for reset)
   const prevUserIdRef = useRef<string | null>(null);
 
-  // Product selection state
-  const [subscriptionSelectedProducts, setSubscriptionSelectedProducts] =
-    useState<SelectedProductItem[]>([]);
-
   // Subscription-specific queries
   const { data: userGroups = [], isLoading: userGroupsLoading } = useUserGroups(
     wsId,
     selectedUserId
   );
-  const { data: groupProducts = [], isLoading: groupProductsLoading } =
-    useMultiGroupProducts(wsId, selectedGroupIds);
+  const {
+    data: groupProducts = [],
+    error: groupProductsError,
+    isLoading: groupProductsLoading,
+  } = useMultiGroupProducts(wsId, selectedGroupIds, {
+    enabled: canReadGroupLinkedProducts,
+  });
 
-  const { data: useAttendanceBased = true } = useInvoiceAttendanceConfig(wsId);
+  const { data: useAttendanceBased = true } = useInvoiceAttendanceConfig(wsId, {
+    enabled: hasSelectedGroups,
+  });
 
   const availableMonthOptions = useMemo(
     () =>
@@ -286,15 +340,15 @@ export function SubscriptionInvoice({
 
     // A month is considered paid ONLY if ALL selected groups have paid for it.
     // If ANY selected group has not paid, we allow creating an invoice.
-    return selectedGroupIds.every((groupId) => {
-      const latestInvoice = latestSubscriptionInvoices.find(
-        (inv) => inv.group_id === groupId
-      );
-      if (!latestInvoice?.valid_until) return false;
+    if (Number.isNaN(selectedMonthStart.getTime())) return false;
 
-      const validUntilMonthStart = getMonthStartDate(latestInvoice.valid_until);
-      return selectedMonthStart < validUntilMonthStart;
-    });
+    return selectedGroupIds.every((groupId) =>
+      isSubscriptionMonthPaidForGroup(
+        groupId,
+        effectiveSelectedMonth,
+        latestSubscriptionInvoices
+      )
+    );
   }, [effectiveSelectedMonth, latestSubscriptionInvoices, selectedGroupIds]);
 
   const billableAttendance = useMemo(
@@ -386,12 +440,42 @@ export function SubscriptionInvoice({
     subscriptionInvoiceContextLoading ||
     groupProductsLoading;
 
-  const isLoadingData =
-    usersLoading ||
-    productsLoading ||
-    promotionsLoading ||
-    walletsLoading ||
-    categoriesLoading;
+  const isLoadingData = usersLoading || productsLoading;
+
+  const invoiceProductMissingPermissions = useMemo(() => {
+    const missingPermissions = new Set<string>();
+
+    if (!canReadInvoiceProducts || isPermissionRequestError(productsError)) {
+      missingPermissions.add('create_inventory_sales');
+      missingPermissions.add('view_inventory_catalog');
+    }
+
+    if (!canReadInvoiceProductStock) {
+      missingPermissions.add('create_inventory_sales');
+      missingPermissions.add('view_inventory_stock');
+    }
+
+    if (
+      !canReadGroupLinkedProducts ||
+      isPermissionRequestError(groupProductsError)
+    ) {
+      missingPermissions.add('create_invoices');
+      missingPermissions.add('view_user_groups');
+    }
+
+    if (isPermissionRequestError(subscriptionInvoiceContextError)) {
+      missingPermissions.add('create_invoices');
+    }
+
+    return [...missingPermissions];
+  }, [
+    canReadGroupLinkedProducts,
+    canReadInvoiceProductStock,
+    canReadInvoiceProducts,
+    groupProductsError,
+    productsError,
+    subscriptionInvoiceContextError,
+  ]);
 
   const referralDiscountMap = useMemo(() => {
     const map = new Map<string, number>();
@@ -820,22 +904,45 @@ export function SubscriptionInvoice({
         )}
 
         {selectedGroupIds.length > 0 && !isSelectedMonthPaid && !isBlocked && (
-          <ProductSelection
-            products={products}
-            selectedProducts={subscriptionSelectedProducts}
-            onSelectedProductsChange={setSubscriptionSelectedProducts}
-            currency={defaultCurrency}
-            groupLinkedProducts={(groupProducts || [])
-              .map((item) => ({
-                productId: item.workspace_products?.id,
-                groupName:
-                  item.workspace_user_groups?.name || t('ws-invoices.no_name'),
-              }))
-              .filter(
-                (item): item is { productId: string; groupName: string } =>
-                  !!item.productId
+          <>
+            <ProductSelection
+              products={products}
+              selectedProducts={subscriptionSelectedProducts}
+              onSelectedProductsChange={setSubscriptionSelectedProducts}
+              currency={defaultCurrency}
+              groupLinkedProducts={(groupProducts || [])
+                .map((item) => ({
+                  productId: item.workspace_products?.id,
+                  groupName:
+                    item.workspace_user_groups?.name ||
+                    t('ws-invoices.no_name'),
+                }))
+                .filter(
+                  (item): item is { productId: string; groupName: string } =>
+                    !!item.productId
+                )}
+            />
+            <InvoiceProductsPermissionWarning
+              missingPermissions={invoiceProductMissingPermissions}
+              user={permissionRequestUser}
+            />
+            {!isLoadingSubscriptionData &&
+              subscriptionSelectedProducts.length === 0 && (
+                <div className="rounded-lg border border-dynamic-yellow/30 bg-dynamic-yellow/10 p-3 text-dynamic-yellow text-sm">
+                  <div className="flex items-start gap-2">
+                    <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
+                    <div>
+                      <p className="font-medium">
+                        {t('ws-invoices.month_unpaid')}
+                      </p>
+                      <p className="text-muted-foreground">
+                        {t('ws-invoices.no_products_to_invoice')}
+                      </p>
+                    </div>
+                  </div>
+                </div>
               )}
-          />
+          </>
         )}
 
         <InvoiceContentEditor
@@ -890,6 +997,7 @@ export function SubscriptionInvoice({
                       onWalletChange={setSelectedWalletId}
                       onCategoryChange={setSelectedCategoryId}
                       walletDisabled={isWalletSelectionLocked}
+                      walletPermissionWarning={walletPermissionWarning}
                       showPromotion
                       currency={defaultCurrency}
                       promotionsAllowed={true}

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

@@ -4,6 +4,8 @@ import {
   getBillableSessionsForGroups,
   getLinkedFinanceCategorySelection,
   getSubscriptionAttendanceDisplayData,
+  getSubscriptionCoverageInvoiceForGroup,
+  isSubscriptionMonthPaidForGroup,
   type UserGroup,
 } from './utils';
 
@@ -135,6 +137,54 @@ describe('subscription invoice attendance display data', () => {
   });
 });
 
+describe('subscription invoice coverage', () => {
+  it('treats valid_until as the exclusive first unpaid month', () => {
+    const latestInvoices = [{ group_id: groupId, valid_until: '2026-06-01' }];
+
+    expect(
+      isSubscriptionMonthPaidForGroup(groupId, '2026-05', latestInvoices)
+    ).toBe(true);
+    expect(
+      isSubscriptionMonthPaidForGroup(groupId, '2026-06', latestInvoices)
+    ).toBe(false);
+  });
+
+  it('treats null and invalid valid_until values as unpaid', () => {
+    expect(
+      isSubscriptionMonthPaidForGroup(groupId, '2026-05', [
+        { group_id: groupId, valid_until: null },
+      ])
+    ).toBe(false);
+    expect(
+      isSubscriptionMonthPaidForGroup(groupId, '2026-05', [
+        { group_id: groupId, valid_until: 'not-a-date' },
+      ])
+    ).toBe(false);
+  });
+
+  it('uses the furthest valid_until over the newest created_at', () => {
+    const latestInvoices = [
+      {
+        created_at: '2026-06-10T00:00:00.000Z',
+        group_id: groupId,
+        valid_until: '2026-06-01',
+      },
+      {
+        created_at: '2026-05-10T00:00:00.000Z',
+        group_id: groupId,
+        valid_until: '2026-07-01',
+      },
+    ];
+
+    expect(
+      getSubscriptionCoverageInvoiceForGroup(latestInvoices, groupId)
+    ).toEqual(latestInvoices[1]);
+    expect(
+      isSubscriptionMonthPaidForGroup(groupId, '2026-06', latestInvoices)
+    ).toBe(true);
+  });
+});
+
 describe('linked finance category selection', () => {
   it('returns the single linked finance category across selected products', () => {
     expect(