@fayz-ai/plugin-financial 0.8.0 → 0.8.3

package/src/views/InvoiceFormView.tsx

@@ -7,6 +7,7 @@ import { CurrencyInput } from '@fayz-ai/ui'
 import { DatePicker } from '@fayz-ai/ui'
 import { Button } from '@fayz-ai/ui'
 import type { EntityLookupMap } from '@fayz-ai/saas'
+import { useLimitGuard, invalidateLimit, usePermissionOptional } from '@fayz-ai/saas'
 import { SubpageHeader, useSaveBar, toast } from '@fayz-ai/ui'
 import { useTranslation } from '@fayz-ai/core'
 import type { TransactionDirection, CreateInvoiceItemInput, CreateMovementInput } from '../types'
@@ -401,6 +402,8 @@ export function InvoiceFormView({ direction, editId, onSaved }: {
     itemTypes[0]?.value ??
     'other'
   const createInvoice = useFinancialStore((s) => s.createInvoice)
+  const guardMovements = useLimitGuard('movements_month')
+  const can = usePermissionOptional()
   const hasLocations = locations.length > 0
   const isEdit = !!editId
 
@@ -565,7 +568,13 @@ export function InvoiceFormView({ direction, editId, onSaved }: {
   }
 
   async function handleSave() {
+    // Defense in depth: block creating a new invoice without the `create` action.
+    if (!isEdit && !can('financial', 'create')) return
     if (items.length === 0) { toast.error(t('common.formIncomplete')); return }
+    // Plan quantity guard (client-side): an invoice writes one financial movement
+    // per installment (min 1). Guard that many against the monthly cap before the
+    // store call — the guard opens the global UpgradeModal when it would exceed.
+    if (!isEdit && (await guardMovements(Math.max(1, installments.length))) === 'blocked') return
     setSaving(true)
     try {
       const movInputs: CreateMovementInput[] = installments.map((inst, i) => ({
@@ -609,6 +618,7 @@ export function InvoiceFormView({ direction, editId, onSaved }: {
           items: items.map(({ _id, ...rest }) => rest),
           installments: movInputs,
         })
+        invalidateLimit('movements_month')
         onSaved?.(invoice.id)
       }
     } finally {

package/src/views/InvoiceListView.tsx

@@ -4,7 +4,7 @@ import type { ColumnDef } from '@tanstack/react-table'
 import { ListView } from '@fayz-ai/ui'
 import { useFinancialConfig, useFinancialProvider, useFinancialStore, formatCurrency } from '../FinancialContext'
 import { SubpageHeader } from '@fayz-ai/ui'
-import { PersonLink } from '@fayz-ai/saas'
+import { PersonLink, usePermissionOptional } from '@fayz-ai/saas'
 import { useTranslation } from '@fayz-ai/core'
 import type { TransactionDirection, InvoiceStatus, Invoice, ChartOfAccountsNode, CostCenter } from '../types'
 
@@ -16,6 +16,30 @@ const STATUS_OPTIONS: { value: InvoiceStatus; labelKey: string; color: string; i
   { value: 'cancelled', labelKey: 'financial.invoice.statusCancelled', color: 'bg-muted text-muted-foreground', icon: Ban },
 ]
 
+const DATE_PRESETS = ['thisMonth', 'lastMonth', 'last30', 'thisYear'] as const
+type DatePreset = (typeof DATE_PRESETS)[number]
+
+const isoDate = (d: Date) =>
+  `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+
+/** Local-time boundaries so "this month" means the user's month, not UTC's. */
+function presetRange(preset: DatePreset): { from: string; to: string } {
+  const now = new Date()
+  switch (preset) {
+    case 'thisMonth':
+      return { from: isoDate(new Date(now.getFullYear(), now.getMonth(), 1)), to: isoDate(new Date(now.getFullYear(), now.getMonth() + 1, 0)) }
+    case 'lastMonth':
+      return { from: isoDate(new Date(now.getFullYear(), now.getMonth() - 1, 1)), to: isoDate(new Date(now.getFullYear(), now.getMonth(), 0)) }
+    case 'last30': {
+      const from = new Date(now)
+      from.setDate(from.getDate() - 29)
+      return { from: isoDate(from), to: isoDate(now) }
+    }
+    case 'thisYear':
+      return { from: isoDate(new Date(now.getFullYear(), 0, 1)), to: isoDate(new Date(now.getFullYear(), 11, 31)) }
+  }
+}
+
 function StatusBadge({ status }: { status: string }) {
   const t = useTranslation()
   const opt = STATUS_OPTIONS.find((o) => o.value === status)
@@ -87,6 +111,10 @@ export function InvoiceListView({ direction, onNew, onEdit }: {
   onEdit?: (id: string) => void
 }) {
   const t = useTranslation()
+  // Role-side create gate: hide the "new invoice" affordance (header + empty-state
+  // action) when the role lacks `create` — the module's single route only guards read.
+  const can = usePermissionOptional()
+  const onNewGated = can('financial', 'create') ? onNew : undefined
   const { currency } = useFinancialConfig()
   const provider = useFinancialProvider()
   const invoices = useFinancialStore((s) => s.invoices)
@@ -100,6 +128,24 @@ export function InvoiceListView({ direction, onNew, onEdit }: {
   const [costCenterId, setCostCenterId] = useState('')
   const [accounts, setAccounts] = useState<ChartOfAccountsNode[]>([])
   const [costCenters, setCostCenters] = useState<CostCenter[]>([])
+  const [datePreset, setDatePreset] = useState<DatePreset | 'all' | 'custom'>('all')
+  const [dateFrom, setDateFrom] = useState('')
+  const [dateTo, setDateTo] = useState('')
+
+  // Open-ended on either side: a missing bound becomes a sentinel the providers can compare against.
+  const dateRange = useMemo(() => {
+    if (!dateFrom && !dateTo) return undefined
+    return { from: dateFrom || '0001-01-01', to: dateTo || '9999-12-31' }
+  }, [dateFrom, dateTo])
+
+  const applyPreset = (value: DatePreset | 'all' | 'custom') => {
+    setDatePreset(value)
+    if (value === 'all') { setDateFrom(''); setDateTo(''); return }
+    if (value === 'custom') return
+    const range = presetRange(value)
+    setDateFrom(range.from)
+    setDateTo(range.to)
+  }
 
   useEffect(() => {
     let active = true
@@ -124,8 +170,9 @@ export function InvoiceListView({ direction, onNew, onEdit }: {
       search: search || undefined,
       accountId: accountId || undefined,
       costCenterId: costCenterId || undefined,
+      dateRange,
     })
-  }, [direction, statusFilter, search, accountId, costCenterId])
+  }, [direction, statusFilter, search, accountId, costCenterId, dateRange])
 
   const filtered = invoices.filter((inv) => inv.direction === direction)
   const listTitle = direction === 'debit' ? t('financial.invoice.accountsPayable') : t('financial.invoice.accountsReceivable')
@@ -158,8 +205,51 @@ export function InvoiceListView({ direction, onNew, onEdit }: {
         title={listTitle}
         subtitle={t('financial.invoice.invoices', { count: filtered.length })}
       />
-      {(accounts.length > 0 || costCenters.length > 0) && (
-        <div className="flex flex-wrap items-end gap-3 rounded-lg border bg-muted/20 px-4 py-3">
+      <div className="flex flex-wrap items-end gap-3 rounded-lg border bg-muted/20 px-4 py-3">
+          <label className="flex min-w-[180px] flex-col gap-1 text-xs font-medium text-muted-foreground">
+            {t('financial.invoice.filterPeriod')}
+            <select
+              className="h-9 rounded-md border bg-background px-3 text-sm text-foreground"
+              value={datePreset}
+              onChange={(event) => applyPreset(event.target.value as DatePreset | 'all' | 'custom')}
+            >
+              <option value="all">{t('financial.invoice.filterAllPeriods')}</option>
+              <option value="thisMonth">{t('financial.invoice.filterThisMonth')}</option>
+              <option value="lastMonth">{t('financial.invoice.filterLastMonth')}</option>
+              <option value="last30">{t('financial.invoice.filterLast30')}</option>
+              <option value="thisYear">{t('financial.invoice.filterThisYear')}</option>
+              <option value="custom">{t('financial.invoice.filterCustom')}</option>
+            </select>
+          </label>
+          <label className="flex flex-col gap-1 text-xs font-medium text-muted-foreground">
+            {t('financial.invoice.filterFrom')}
+            <input
+              type="date"
+              className="h-9 rounded-md border bg-background px-3 text-sm text-foreground"
+              value={dateFrom}
+              max={dateTo || undefined}
+              onChange={(event) => { setDateFrom(event.target.value); setDatePreset('custom') }}
+            />
+          </label>
+          <label className="flex flex-col gap-1 text-xs font-medium text-muted-foreground">
+            {t('financial.invoice.filterTo')}
+            <input
+              type="date"
+              className="h-9 rounded-md border bg-background px-3 text-sm text-foreground"
+              value={dateTo}
+              min={dateFrom || undefined}
+              onChange={(event) => { setDateTo(event.target.value); setDatePreset('custom') }}
+            />
+          </label>
+          {(dateFrom || dateTo) && (
+            <button
+              type="button"
+              className="h-9 rounded-md px-2 text-xs font-medium text-muted-foreground hover:text-foreground"
+              onClick={() => applyPreset('all')}
+            >
+              {t('financial.invoice.filterClear')}
+            </button>
+          )}
           {accounts.length > 0 && (
             <label className="flex min-w-[220px] flex-col gap-1 text-xs font-medium text-muted-foreground">
               {t('financial.invoice.filterAccount')}
@@ -190,8 +280,7 @@ export function InvoiceListView({ direction, onNew, onEdit }: {
               </select>
             </label>
           )}
-        </div>
-      )}
+      </div>
       <ListView<Invoice>
         columns={columns}
         data={filtered}
@@ -204,12 +293,12 @@ export function InvoiceListView({ direction, onNew, onEdit }: {
         activeTag={statusFilter.length === 1 ? statusFilter[0] : undefined}
         onTagChange={(v) => setStatusFilter(v ? [v as InvoiceStatus] : [])}
         newLabel={t('financial.invoice.new')}
-        onNew={onNew}
+        onNew={onNewGated}
         onRowClick={(row) => onEdit?.(row.id)}
         emptyIcon={FileText}
         emptyMessage={t('financial.invoice.noInvoices')}
-        emptyActionLabel={onNew ? t('financial.invoice.createFirst') : undefined}
-        onEmptyAction={onNew}
+        emptyActionLabel={onNewGated ? t('financial.invoice.createFirst') : undefined}
+        onEmptyAction={onNewGated}
       />
       {filtered.length > 0 && !invoicesLoading && (
         <div className="flex items-center justify-end gap-6 rounded-lg border bg-muted/30 px-5 py-3 text-sm">

package/src/views/QuickTransactionForm.tsx

@@ -7,6 +7,7 @@ import {
   Modal, ModalContent, Button, DatePicker, toast,
 } from '@fayz-ai/ui'
 import { useTranslation } from '@fayz-ai/core'
+import { useLimitGuard, invalidateLimit, usePermissionOptional } from '@fayz-ai/saas'
 import { useFinancialConfig, useFinancialProvider, useFinancialStore, formatCurrency } from '../FinancialContext'
 import type { QuickTransactionType } from '../types'
 import type { ChartOfAccountsNode, BankAccount } from '../types'
@@ -157,6 +158,8 @@ export function QuickTransactionForm({ open, onOpenChange, defaultType = 'expens
   const { currency } = useFinancialConfig()
   const provider = useFinancialProvider()
   const createQuickTransaction = useFinancialStore((s) => s.createQuickTransaction)
+  const guardMovements = useLimitGuard('movements_month')
+  const can = usePermissionOptional()
 
   const [type, setType] = useState<QuickTransactionType>(defaultType)
   const [amount, setAmount] = useState(0)
@@ -266,12 +269,19 @@ export function QuickTransactionForm({ open, onOpenChange, defaultType = 'expens
       : true)
 
   async function handleSave() {
+    // Defense in depth: never persist for a role without `create`, even if a
+    // stray affordance slipped through.
+    if (!can('financial', 'create')) return
     if (!canSave) {
       if (type === 'transfer' && accountId && accountId === toAccountId) {
         toast.error(t('financial.transfer.sameAccount'))
       }
       return
     }
+    // Plan quantity guard (client-side): a transfer writes two movements (from +
+    // to), other kinds one. Guard that many against the monthly cap before the
+    // store call — the guard opens the global UpgradeModal when it would exceed.
+    if ((await guardMovements(type === 'transfer' ? 2 : 1)) === 'blocked') return
     setSaving(true)
     try {
       await createQuickTransaction({
@@ -286,6 +296,7 @@ export function QuickTransactionForm({ open, onOpenChange, defaultType = 'expens
         recurring: type === 'transfer' ? false : recurring,
         receiptUrl: type === 'transfer' ? undefined : receiptUrl,
       })
+      invalidateLimit('movements_month')
       onOpenChange(false)
     } catch {
       // toast handled by store