feat: add ability to filter statements (#125)

Author: npv12

frontend/AGENTS.md

@@ -3,12 +3,14 @@
 ## Build, Lint, and Test Commands
 
 ### Development
+
 - `npm run dev` - Start Next.js dev server with Turbopack (port 3000)
 - `just frontend` - Start frontend dev server (from root)
 - `npm run build` - Production build
 - `npm start` - Start production server
 
 ### Formatting & Linting
+
 - `npm run format` - Format all files with Prettier
 - `npm run lint` - Run ESLint
 - `npm run lint:fix` - Auto-fix ESLint issues
@@ -29,11 +31,11 @@
 ## Code Style Guidelines
 
 ### Component Structure
+
 ```tsx
 "use client"; // Only when needed
-
-import React from "react";
 import { Button } from "@/components/ui/button";
+import React from "react";
 
 interface Props {
   // prop types
@@ -48,6 +50,7 @@ export default function ComponentName({ ...props }: Props) {
 ```
 
 ### Naming Conventions
+
 - **Files**: PascalCase (e.g., `UserProfile.tsx`, `useTransactions.ts`)
 - **Components**: PascalCase (e.g., `UserProfile`, `TransactionTable`)
 - **Hooks**: camelCase with `use` prefix (e.g., `useTransactions`, `useSession`)
@@ -57,6 +60,7 @@ export default function ComponentName({ ...props }: Props) {
 - **Event Handlers**: `handle` prefix (e.g., `handleClick`, `handleSubmit`)
 
 ### TypeScript Best Practices
+
 - Use interfaces for object shapes, types for unions/primitives
 - Avoid enums - use const objects instead
 - Use `satisfies` operator for type validation
@@ -65,19 +69,22 @@ export default function ComponentName({ ...props }: Props) {
 - Use `unknown` over `any` when type is uncertain
 
 ### React 19 Patterns
+
 - Use Server Components by default (no `"use client"`)
 - Minimize client directives - only add when needed
 - Use `useActionState` instead of deprecated `useFormState`
 - Use enhanced `useFormStatus` with new properties (data, method, action)
 - Use Suspense boundaries for async components
 
 ### State Management
+
 - **Server State**: TanStack Query with hooks in `components/hooks/`
 - **URL State**: Manage via Next.js `useSearchParams` and `router.push()`
 - **Local State**: React `useState`, `useReducer` for small UI state
 - **Global State**: React Context for session, theme (suspense-aware)
 
 ### Component Architecture
+
 ```
 components/
 ├── ui/              # Shadcn UI components (no business logic)
@@ -98,65 +105,75 @@ lib/
 ```
 
 ### Imports
+
 - Group and sort imports alphabetically
 - Use `@/` alias for absolute imports
 - Order: external, internal components, internal hooks, internal lib
+
 ```tsx
-import { Button } from "@/components/ui/button";
 import { useTransactions } from "@/components/hooks/useTransactions";
+import { Button } from "@/components/ui/button";
 import { formatCurrency } from "@/lib/utils";
 ```
 
 ### API Layer
+
 - Use `lib/api/request.ts` `apiRequest()` for all fetch calls
 - API functions in `lib/api/` correspond to backend endpoints
 - Return `{ data: T }` pattern from API functions
 - Use custom error handlers for specific status codes
 - Always include credentials for cookies
 
 ### Data Fetching (TanStack Query)
+
 - Create hooks in `components/hooks/` (e.g., `useTransactions.ts`)
 - Use `queryKeys` object from `lib/query-client.ts` for cache keys
 - Implement optimistic updates for mutations
 - Use `enabled` to prevent unnecessary requests
 - Set appropriate `staleTime` for caching
 
 ### Styling
+
 - Use Shadcn UI components - do not create custom UI components
 - Tailwind classes via `cn()` utility for conditional classes
 - Follow design tokens (primary, secondary, accent, destructive)
 - Use responsive prefixes (md:, lg:) for breakpoints
 - Dark mode via `next-themes` - use `dark:` prefix
 
 ### Error Handling
+
 - Use `ApiErrorType` from `lib/types/errors.ts`
 - `getErrorMessage()` for user-friendly error messages
 - Toast notifications via `sonner` for user feedback
 - Console.error for debugging only
 - Handle API errors in request layer, show toasts at component level
 
 ### Form Handling
+
 - Use native HTML5 validation
 - React Hook Form for complex forms
 - Zod schemas for validation (via validator)
 - `useFormStatus` for form submission state
 - Show loading states during mutations
 
 ### File Organization
+
 - Page routes in `app/` directory
 - Reusable components in `components/`
 - Shared utilities in `lib/`
 - Models/interfaces in `lib/models/`
 - Constants in `lib/constants/`
 
 ### Performance
+
 - Use React.lazy for code splitting
 - Implement proper loading states
 - Use virtualization for long lists (`@tanstack/react-virtual`)
 - Optimize images with Next.js Image component
 - Debounce search inputs
 
 ### Accessibility
+
 - Use semantic HTML
 - ARIA labels on interactive elements
 - Keyboard navigation support
@@ -166,6 +183,7 @@ import { formatCurrency } from "@/lib/utils";
 ## Testing
 
 No test framework is currently configured. Consider adding:
+
 - Vitest for unit tests
 - Testing Library for component tests
 - Playwright for E2E tests

frontend/components/custom/Modal/Statement/ImportStatementModal.tsx

@@ -66,7 +66,8 @@ function PasswordPrompt({
         <Label>File Password Required</Label>
       </div>
       <p className="text-xs text-muted-foreground mb-2">
-        This Excel file is password protected. Please enter password to continue.
+        This Excel file is password protected. Please enter password to
+        continue.
       </p>
       <Input
         type="password"
@@ -334,7 +335,13 @@ export function ImportStatementModal({
         },
       }
     );
-  }, [selectedFiles, skipRows, rowSize, filePassword, previewStatementMutation]);
+  }, [
+    selectedFiles,
+    skipRows,
+    rowSize,
+    filePassword,
+    previewStatementMutation,
+  ]);
 
   const submitUpload = useCallback(async () => {
     if (selectedFiles.length === 0 || !selectedAccountId) {
@@ -527,7 +534,16 @@ export function ImportStatementModal({
 
     lastPreviewKeyRef.current = nextPreviewKey;
     handlePreview();
-  }, [step, selectedFiles, skipRows, rowSize, filePassword, isPasswordRequired, isPreviewing, handlePreview]);
+  }, [
+    step,
+    selectedFiles,
+    skipRows,
+    rowSize,
+    filePassword,
+    isPasswordRequired,
+    isPreviewing,
+    handlePreview,
+  ]);
 
   useEffect(() => {
     setIsPasswordRequired(false);