project-3bae64eb
Prasad Hegde# Master Prompt for 8080.ai – Build an AI Cash Flow SaaS (ICAI Compliant) ## Project Name **CashFlow AI** ## Vision Build a modern AI-powered SaaS platform that automatically prepares ICAI-compliant Cash Flow Statements (Direct and Indirect Method) for any company. This is **not** another accounting software. This is **not** another dashboard like Zoho Books, Tally, QuickBooks, or Power BI. The product should feel like **ChatGPT for Cash Flow**, where users upload their financial data and instantly receive cash flow statements, explanations, forecasts, and actionable insights. The entire experience must be simple enough for business owners while remaining technically accurate for accountants, auditors, and CFOs. --- # Design Philosophy Follow these principles throughout the application: * Extremely simple interface. * Minimal clicks. * Clean modern UI. * No clutter. * White space. * Apple + Notion + Stripe inspired design. * Responsive. * Fast loading. * Elegant animations. * Premium SaaS feel. * Enterprise quality. Never overwhelm the user with accounting terminology. The application should explain finance in plain English. --- # Target Users The platform should work for every type of company: * Manufacturing * Trading * Service * IT * Hospital * Healthcare * Retail * Construction * Education * NGO * Startup * Logistics * Pharma * Hospitality * Any future business category No industry-specific hardcoding. Everything should be generic. --- # Core Concept The application should automatically generate: * Direct Cash Flow Statement * Indirect Cash Flow Statement from * Trial Balance * Balance Sheet * Profit & Loss * General Ledger * Journal * Excel * CSV * Tally Export * Zoho Books Export * QuickBooks Export without requiring manual mapping whenever possible. Use AI to classify ledgers intelligently. --- # Landing Page Create a premium landing page. Sections: Hero How it Works Features AI Projection ICAI Compliance Pricing FAQ Testimonials Footer CTA The hero should communicate: "Upload your Trial Balance. AI prepares ICAI Cash Flow Statement in minutes." --- # Dashboard Do not build a traditional accounting dashboard. Only show the most important information. Top cards: Current Cash Operating Cash Flow Investing Cash Flow Financing Cash Flow Net Cash Movement Cash Health Score Below that, show AI Insights. Nothing else. --- # Navigation Dashboard Cash Flow Forecast Insights Reports AI Copilot Settings Keep navigation minimal. --- # Upload Experience The upload flow should be extremely easy. Step 1 Upload financial files. Supported formats: Excel CSV PDF Trial Balance Balance Sheet Profit & Loss General Ledger Step 2 AI automatically detects: Assets Liabilities Income Expenses Bank Accounts Loans Investments Taxes Depreciation Inventory Receivables Payables Working Capital items Step 3 Display confidence score. Example: Cash 100% Inventory 98% Advance 90% Only ask users to confirm classifications when confidence is low. --- # AI Classification Engine Automatically classify every ledger into: Operating Investing Financing Non Cash Working Capital Current Asset Current Liability Long Term Asset Long Term Liability Equity Tax Interest Depreciation Accrual Cash Equivalent The system should continuously learn from user corrections. --- # Cash Flow Statement Generate ICAI-compliant statements. Support: Indirect Method Direct Method Users can switch between both with one click. Both reports must use the same source data. --- # AI Explanation Every number should have an Explain button. Example: Operating Cash ₹1.25 Cr Click Explain. AI should describe: * which ledgers contributed * why cash increased * why cash decreased * accounting logic * calculation flow Explain everything in simple language. --- # Cash Story Instead of only reports, generate an executive summary. Example: "Cash increased by ₹18 lakh this month. The increase was mainly driven by faster customer collections and improved operating profit. Inventory purchases reduced operating cash by ₹6 lakh. Loan repayments reduced financing cash by ₹4 lakh. Despite these outflows, the company maintained a healthy cash position." Every month generate a new AI summary automatically. --- # AI Copilot Provide a conversational AI. Users can ask: Why is cash decreasing? Can I buy machinery worth ₹50 lakh? Will I have enough cash to pay salaries next month? Which customers should I collect first? What happens if revenue falls by 20%? How can I improve operating cash flow? The AI should answer using the uploaded financial data. --- # Projection Engine Forecast future cash flow. Allow projections for: 30 Days 60 Days 90 Days 6 Months 12 Months Show: Best Case Expected Case Worst Case The projection engine should consider: Historical cash flow Receivable collection trends Payable payment trends Payroll Loan EMI schedules GST obligations Tax payments Recurring expenses Seasonality User assumptions Future invoices (optional) --- # What-if Simulator Allow users to simulate scenarios. Examples: Sales increase by 20% Sales decrease by 15% Delay customer collections by 30 days Purchase machinery Hire employees Take a new loan Repay debt early Increase inventory AI should instantly recalculate projected cash flow. --- # AI Alerts Generate proactive insights. Examples: Operating cash flow declined. Receivables are increasing. Inventory is locking cash. GST payment due soon. Payroll may exceed available cash. Loan repayment approaching. Working capital is deteriorating. Potential cash shortage predicted in 45 days. Do not require users to search for these insights. Bring them to the dashboard automatically. --- # Reports Generate: Direct Cash Flow Indirect Cash Flow Working Papers Cash Reconciliation Monthly Comparison Quarterly Comparison Yearly Comparison Variance Report Audit Trail Export formats: PDF Excel CSV Print-ready --- # Multi-Company SaaS Support: Multiple companies Multiple financial years Multiple users Role-based access Subscription plans Organization management Secure cloud storage --- # AI Learning Remember user corrections. If a ledger is reclassified once, automatically apply the same classification in future uploads. Allow administrators to approve AI learning. --- # Security Enterprise-grade security. Encrypted storage Role-based permissions Audit logs Version history Automatic backups Two-factor authentication Secure APIs GDPR-ready architecture --- # UI Style Modern SaaS. Use: Glassmorphism (subtle) Soft shadows Rounded cards Beautiful typography Smooth transitions Dark Mode Light Mode Premium icons Professional charts only where necessary Avoid dashboard clutter. --- # Technology Design the application with a scalable SaaS architecture. Frontend: React / Next.js Backend: Python / FastAPI Database: PostgreSQL AI Layer: LLM integration for explanations, classification, and forecasting Authentication: JWT + OAuth Cloud-ready deployment API-first architecture --- # Success Criteria The final product should feel like: * ChatGPT for Cash Flow * ICAI-compliant reporting software * AI CFO assistant * Enterprise SaaS platform A user should be able to upload financial data, review AI classifications if needed, generate ICAI-compliant Direct and Indirect Cash Flow Statements, understand the reasons behind every movement, forecast future cash flows, and make informed financial decisions—all within a few minutes and without requiring deep accounting expertise.
Comments (0)
Sign in to leave a comment
Project Tasks100
Define Data Models
As a developer, I need to define data models for users, companies, financial data, and cash flow statements to support the application's core functionalities.
Setup CI/CD Pipeline
As a DevOps engineer, I need to set up a CI/CD pipeline to automate testing and deployment processes for the platform.
Implement CTASection for Landing
As a frontend developer, implement the CTASection for the Landing page. This section uses the `motion` library for animations, with a `motion.div` that animates its opacity and position when in view. It includes a title, description, and two call-to-action buttons linking to the Login page. Ensure the animations are smooth and the buttons are styled according to the design. Page access: shared by all personas (Accountant, Admin, Business Owner, CFO).
Implement FeaturesSection for Landing
As a frontend developer, implement the FeaturesSection for the Landing page. This section displays a grid of feature cards, each with an icon, title, and description. The cards use `motion.div` for staggered animations as they come into view. Ensure the animations are timed correctly and the layout is responsive. Page access: shared by all personas (Accountant, Admin, Business Owner, CFO).
Implement Footer for Landing
As a frontend developer, implement the Footer for the Landing page. This section includes multiple groups of links categorized under Product, Intelligence, and Platform. Ensure the links are styled correctly and conditionally displayed based on persona access. The footer should also include branding and copyright information. Page access: shared by all personas (Accountant, Admin, Business Owner, CFO).
Implement HeroSection for Landing
As a frontend developer, implement the HeroSection for the Landing page. This section features interactive animations using `motion` and `useReducedMotion`. It includes a badge, title, and interactive hotspots that control the animation stages. Implement state management for play/pause functionality and ensure accessibility for all personas. Page access: shared by all personas (Accountant, Admin, Business Owner, CFO).
Implement HowItWorksSection for Landing
As a frontend developer, implement the HowItWorksSection for the Landing page. This section outlines the process in three steps, each represented by a card with an icon, title, and description. Use `motion.div` for animations and ensure the layout is responsive and visually appealing. Page access: shared by all personas (Accountant, Admin, Business Owner, CFO).
Implement Navbar for Landing
As a frontend developer, implement the Navbar for the Landing page. This component includes a logo, navigation links, and a responsive burger menu for mobile views. Ensure links are conditionally displayed based on persona access and the menu toggles correctly. Page access: shared by all personas (Accountant, Admin, Business Owner, CFO).
Implement StatsSection for Landing
As a frontend developer, implement the StatsSection for the Landing page. This section displays key statistics using `motion.div` for animations. Ensure the stats are visually engaging and the animations are smooth. Page access: shared by all personas (Accountant, Admin, Business Owner, CFO).
Implement DashboardHeaderGreeting for Dashboard
As a frontend developer, implement the DashboardHeaderGreeting section which displays a personalized greeting with the current date and time, a fiscal year selector, and a refresh button. This section uses state to format the date and time dynamically. It is accessible by Accountant, Admin, Business Owner, and CFO. Page access: shared by all personas (Accountant, Admin, Business Owner, CFO).
Implement DashboardSidebar for Dashboard
As a frontend developer, implement the DashboardSidebar section which includes navigation links with icons for various dashboard features. The sidebar should conditionally render links based on persona access, such as 'AI Learning' for Admin only and 'Copilot' for Business Owner and CFO. This section is accessible by Accountant, Admin, Business Owner, and CFO. Page access: shared by all personas (Accountant, Admin, Business Owner, CFO).
Implement DashboardCashSummary for Dashboard
As a frontend developer, implement the DashboardCashSummary section which displays key performance indicators (KPIs) related to cash flow. Each KPI card shows a label, value, trend, and color-coded trend indicator. This section is accessible by Accountant, Admin, Business Owner, and CFO. Page access: shared by all personas (Accountant, Admin, Business Owner, CFO).
Implement DashboardAIInsights for Dashboard
As a frontend developer, implement the DashboardAIInsights section which displays AI-generated alerts with severity levels. Each alert card includes a title, description, time, and action buttons. This section is accessible by Business Owner and CFO. Page access: shared by all personas (Accountant, Admin, Business Owner, CFO).
Implement DashboardQuickActions for Dashboard
As a frontend developer, implement the DashboardQuickActions section which provides quick access buttons for actions like 'Upload Files' and 'Generate Statement'. Each button includes an icon and label. This section is accessible by Accountant, Admin, Business Owner, and CFO. Page access: shared by all personas (Accountant, Admin, Business Owner, CFO).
Implement CopilotHeader for Copilot
As a frontend developer, implement the CopilotHeader section for the Copilot page. This section includes a header displaying the title 'Cash Flow Analysis' and a badge with company details. It provides buttons for exporting, sharing, and clearing the chat. The header should be accessible only to Business Owners and CFOs, and it includes a mobile toggle for sidebar access. Page access: Business Owner, CFO only.
Implement CopilotMessageList for Copilot
As a frontend developer, implement the CopilotMessageList section for the Copilot page. This section displays a list of messages with user and AI types, including avatars and timestamps. It supports dynamic content such as tables within messages and shows a typing indicator when the AI is typing. Ensure the message list is scrollable and updates dynamically as new messages are added. This section is accessible only to Business Owners and CFOs. Page access: Business Owner, CFO only.
Implement PeriodDropdown for Forecast
As a frontend developer, implement the PeriodDropdown section for the Forecast page. This component provides a dropdown menu for selecting the forecast period (Monthly, Quarterly, Annually) and triggers an onChange event when the selection changes. This section is accessible only by the CFO persona. Page access: CFO only.
Implement DateRangeSelector for Forecast
As a frontend developer, implement the DateRangeSelector section for the Forecast page. This component allows the CFO to select a start and end date for the forecast period, with quick selection buttons for predefined ranges (3M, 12M, 5Y). It uses useCallback for efficient state updates. Page access: CFO only.
Implement BaselineSelector for Forecast
As a frontend developer, implement the BaselineSelector section for the Forecast page. This component allows the CFO to choose between 'Last FY' and 'Custom' baselines, with an input field for custom baseline names. It manages state for baseline selection and custom input. Page access: CFO only.
Implement ProjectionChartCore for Forecast
As a frontend developer, implement the ProjectionChartCore section for the Forecast page. This component renders a scalable SVG chart based on provided data and comparison data, with dynamic scaling and axis labeling. It uses useMemo for performance optimization and is accessible only by the CFO persona. Page access: CFO only.
Implement AssumptionInputs for Forecast
As a frontend developer, implement the AssumptionInputs section for the Forecast page. This component allows the CFO to input assumptions for expense growth, revenue change, and CapEx amount. It handles numeric input validation and state updates. Page access: CFO only.
Implement ScenarioToggles for Forecast
As a frontend developer, implement the ScenarioToggles section for the Forecast page. This component provides toggle buttons for selecting different forecast scenarios (Conservative, Base Case, Optimistic, Custom) and updates the selected scenario state. It is accessible only by the CFO persona. Page access: CFO only.
Implement ScenarioComparison for Forecast
As a frontend developer, implement the ScenarioComparison section for the Forecast page. This component allows the CFO to compare different scenarios using checkboxes, with color-coded swatches for each scenario. It manages the state of selected scenarios. Page access: CFO only.
Implement SimulatorSidebar for Simulator
As a frontend developer, implement the SimulatorSidebar section for the Simulator page. This section includes scenario templates with icons and descriptions, a list of saved scenarios with options to select or delete them, and buttons to create a new scenario or save the current one. The sidebar can be toggled open or closed. This page is accessible by the CFO persona only. Page access: CFO only.
Implement SimulatorScenarioBuilder for Simulator
As a frontend developer, implement the SimulatorScenarioBuilder section for the Simulator page. This section allows users to build financial scenarios by adjusting parameters like revenue growth, expenses, and cash balance. It includes form validation, error handling, and a reset button to restore default values. The section is interactive and updates the scenario state based on user input. This page is accessible by the CFO persona only. Page access: CFO only.
Implement SimulatorImpactChart for Simulator
As a frontend developer, implement the SimulatorImpactChart section for the Simulator page. This section displays a chart of projected cash balances with options to compare against a base case. It uses SVG for rendering and includes a legend for scenario and base case. The chart dynamically adjusts based on input values. This page is accessible by the CFO persona only. Page access: CFO only.
Implement SimulatorFlowBreakdown for Simulator
As a frontend developer, implement the SimulatorFlowBreakdown section for the Simulator page. This section visualizes cash flow breakdown by activity (Operating, Investing, Financing) using a bar chart. It supports comparison with a base case and dynamically adjusts bar sizes based on input values. This page is accessible by the CFO persona only. Page access: CFO only.
Implement SimulatorMetricsGauge for Simulator
As a frontend developer, implement the SimulatorMetricsGauge section for the Simulator page. This section displays key financial metrics and a gauge indicating cash health. It includes dynamic variance indicators and supports comparison with a base case. This page is accessible by the CFO persona only. Page access: CFO only.
Implement SimulatorComparisonTable for Simulator
As a frontend developer, implement the SimulatorComparisonTable section for the Simulator page. This section provides a comparison table of scenario metrics against a base case, with sorting functionality and variance indicators. It supports exporting results in various formats. This page is accessible by the CFO persona only. Page access: CFO only.
Implement SimulatorActions for Simulator
As a frontend developer, implement the SimulatorActions section for the Simulator page. This section includes buttons for saving scenarios, exporting results, and viewing full reports. It features a save confirmation and export options in multiple formats. This page is accessible by the CFO persona only. Page access: CFO only.
Implement ReportsListContainer for Reports
As a frontend developer, implement the ReportsListContainer section which displays a list of reports with icons and colors based on report type and status. The section uses motion animations for list transitions and manages state for report filtering and sorting. This section is accessible by Accountant, Business Owner, and CFO personas. Page access: Accountant, Business Owner, CFO only.
Implement ReportListActions for Reports
As a frontend developer, implement the ReportListActions section which allows users to view, export, or delete reports. The section includes export format selection and confirmation dialogs for deletions. It manages state for viewed reports, export options, and deletion confirmations. This section is accessible by Accountant, Business Owner, and CFO personas. Page access: Accountant, Business Owner, CFO only.
Implement ReportDetailView for Reports
As a frontend developer, implement the ReportDetailView section which provides detailed views of a selected report. It includes tab navigation for different report aspects like statement, summary, and explanations. The section uses motion animations for tab transitions and manages state for active tabs. This section is accessible by Accountant, Business Owner, and CFO personas. Page access: Accountant, Business Owner, CFO only.
Implement ReportStatementTable for Reports
As a frontend developer, implement the ReportStatementTable section which displays detailed cash flow statements with expandable line items. The section uses motion animations for expanding/collapsing details and manages state for expanded items. This section is accessible by Accountant, Business Owner, and CFO personas. Page access: Accountant, Business Owner, CFO only.
Implement ReportSummaryStats for Reports
As a frontend developer, implement the ReportSummaryStats section which displays animated summary statistics of cash flows. The section uses motion animations for number transitions and manages state for animated values. This section is accessible by Accountant, Business Owner, and CFO personas. Page access: Accountant, Business Owner, CFO only.
Implement ReportExplanations for Reports
As a frontend developer, implement the ReportExplanations section which provides AI-generated explanations for cash flow entries. The section includes filters for different explanation types and uses motion animations for explanation transitions. This section is accessible by Accountant, Business Owner, and CFO personas. Page access: Accountant, Business Owner, CFO only.
Implement ReportComparison for Reports
As a frontend developer, implement the ReportComparison section which allows users to compare cash flow data across different periods. The section uses state to manage selected periods and displays variance percentages. This section is accessible by Accountant, Business Owner, and CFO personas. Page access: Accountant, Business Owner, CFO only.
Implement ExportFormatSelector for Reports
As a frontend developer, implement the ExportFormatSelector section which allows users to choose a format for exporting reports. The section manages state for selected formats and provides descriptions and features for each format. This section is accessible by Accountant, Business Owner, and CFO personas. Page access: Accountant, Business Owner, CFO only.
Create Database Migrations
As a developer, I need to create database migrations for the defined data models to ensure the database schema is up-to-date.
Implement Navbar for Login
As a frontend developer, implement the Navbar section for the Login page. This component includes a responsive navigation bar with links to Dashboard, CashFlow, Reports, Insights, and Forecast. It features a burger menu for mobile views, toggled by a button that updates the 'open' state. The Navbar also includes 'Sign In' and 'Get Started' buttons linking to the Login page. Ensure conditional rendering of links based on persona access: Dashboard (all), CashFlow (Accountant, Business Owner), Reports (Accountant, Business Owner, CFO), Insights (Business Owner, CFO), and Forecast (CFO only). Page access: shared by all personas (Accountant, Admin, Business Owner, CFO).
Implement ChartInteractions for Forecast
As a frontend developer, implement the ChartInteractions section for the Forecast page. This component provides interactive features such as tooltips, zoom controls, and export functionality for the chart. It uses useState and useCallback for managing tooltip and zoom state. Page access: CFO only.
Develop API Resources
As a backend developer, I need to develop API resources for authentication, file upload, cash flow generation, and insights to support frontend interactions.
Implement LoginFormPanel for Login
As a frontend developer, implement the LoginFormPanel section for the Login page. This component includes a form with email and password fields, validation logic, and error handling. It uses state hooks for managing form inputs and loading state. The form simulates an API call on submission and includes social login buttons for providers like Google. Ensure the form is accessible to all personas: Accountant, Admin, Business Owner, and CFO. Page access: shared by all personas (Accountant, Admin, Business Owner, CFO).
Implement LoginValueProposition for Login
As a frontend developer, implement the LoginValueProposition section for the Login page. This component highlights the benefits of Cash Flow AI, including features like AI auto-classification, scenario forecasting, and plain-English explanations. It includes a testimonial quote and a list of features with checkmarks. Ensure this section is visually appealing and accessible to all personas: Accountant, Admin, Business Owner, and CFO. Page access: shared by all personas (Accountant, Admin, Business Owner, CFO).
Implement Footer for Login
As a frontend developer, implement the Footer section for the Login page. This component includes links grouped under Product, Intelligence, and Platform categories. It features a brand area with a logo and tagline. Ensure links are conditionally rendered based on persona access: Dashboard (all), CashFlow (Accountant, Business Owner), Reports (Accountant, Business Owner, CFO), Forecast (CFO only), AI Copilot (Business Owner, CFO), AI Learning (Admin only), Simulator (CFO only), and Upload (Accountant, Business Owner). Page access: shared by all personas (Accountant, Admin, Business Owner, CFO).
Implement DashboardHeaderBreadcrumb for Dashboard
As a frontend developer, implement the DashboardHeaderBreadcrumb section which includes a breadcrumb navigation component. This component uses an ordered list to display the current page hierarchy with links to 'Dashboard' and an active 'Overview' item. Ensure accessibility by using appropriate ARIA labels. This section is accessible by Accountant, Admin, Business Owner, and CFO. Page access: shared by all personas (Accountant, Admin, Business Owner, CFO).
Implement Data Persistence
As a Data Engineer, implement data persistence for financial data uploads, cash flow statements, and user corrections. Ensure data is stored securely and efficiently in PostgreSQL with appropriate indexing and retention policies.
Implement Authentication
As a developer, I need to implement JWT and OAuth authentication to secure the platform and manage user sessions.
Integrate AI Layer
As a developer, I need to integrate the AI layer for classification, forecasting, and insights to enhance the platform's capabilities.
Implement UploadHeader for Upload
As a frontend developer, implement the UploadHeader section for the Upload page. This section includes a breadcrumb navigation to the Dashboard, a title 'Upload Financial Data', a subtitle explaining the AI classification feature, and a list of supported file formats with icons. Ensure that the breadcrumb links are conditionally shown based on persona access, as this page is accessible by Accountant and Business Owner personas only. Page access: Accountant, Business Owner only.
Implement SettingsNav for Settings
As a frontend developer, implement the SettingsNav section for the Settings page. This section includes a navigation menu with items such as 'Companies', 'Financial Years', 'Users & Roles', and 'Audit Logs', each with an SVG icon. It uses a mobile toggle button to open/close the navigation and manages state with useState for mobileOpen. The onSectionChange prop is used to handle navigation item clicks. This section is accessible by Admin ONLY and should conditionally render based on user role. Page access: Admin only.
Implement PageHeader for AI Learning
As a frontend developer, implement the PageHeader section for the AI Learning page. This section includes a breadcrumb navigation linking to the Dashboard, a page title, and a help icon with a tooltip that appears on hover or focus. The tooltip provides information about reviewing and approving AI corrections. This section is accessible only by Admins and should conditionally show navigation links based on user persona. Ensure it integrates with the Dashboard page as per the dependency. Page access: Admin only.
Implement InsightsHeader for Insights
As a frontend developer, implement the InsightsHeader section which includes a header with company and period selectors, and action buttons for refreshing and exporting insights. This section uses React state hooks to manage selected company and period. It is accessible by Business Owner and CFO personas. Ensure the component integrates with the DashboardHeaderBreadcrumb from the Dashboard page. Page access: Business Owner, CFO only.
Implement CopilotSidebar for Copilot
As a frontend developer, implement the CopilotSidebar section for the Copilot page. This section includes a sidebar that can be toggled open or closed. It displays recent chat history and quick action buttons. The sidebar uses state to manage its open/close status and includes buttons for generating reports, viewing alerts, and forecasts. Ensure the sidebar is accessible only to Business Owners and CFOs, as per the page access context. Page access: Business Owner, CFO only.
Implement ForecastHero for Forecast
As a frontend developer, implement the ForecastHero section for the Forecast page. This section uses the 'motion' library to animate its appearance with a fade-in effect when it comes into view. It includes a title, subtitle, and description that introduce the cash flow forecasting feature. This section is accessible only by the CFO persona and should depend on the DashboardHeaderBreadcrumb task from the Dashboard page. Page access: CFO only.
Develop API Endpoints
As a Backend Developer, develop API endpoints for uploading financial data, generating cash flow statements, fetching AI-generated insights, and managing user roles and permissions. Ensure endpoints are secure and comply with ICAI standards.
Setup Background Jobs
As a Backend Developer, set up background jobs for processing financial data uploads, generating reports, and sending AI alerts. Ensure jobs are scheduled efficiently and handle failures gracefully.
Setup Role-Based Access Control
As a developer, I need to set up role-based access control to ensure that users have appropriate permissions based on their roles.
Implement UploadDropZoneContainer for Upload
As a frontend developer, implement the UploadDropZoneContainer section for the Upload page. This section provides a drag-and-drop area for file uploads, with visual feedback for drag events and file selection. It supports multiple file types (Excel, CSV, PDF) and includes a button to trigger file selection. The component uses state hooks for drag state management and file input handling. Page access: Accountant, Business Owner only.
Implement SettingsHeader for Settings
As a frontend developer, implement the SettingsHeader section for the Settings page. This section displays a breadcrumb navigation and a page title. It dynamically updates the breadcrumb based on the current section title. The header includes a description of the settings page functionalities. This section is accessible by Admin ONLY. Page access: Admin only.
Implement CompaniesListView for Settings
As a frontend developer, implement the CompaniesListView section for the Settings page. This section displays a list of companies with details such as name, industry, status, and creation date. It includes actions for adding, editing, and deleting companies, with state management for open menus and delete confirmations. This section is accessible by Admin ONLY. Page access: Admin only.
Implement CompaniesForm for Settings
As a frontend developer, implement the CompaniesForm section for the Settings page. This form allows adding or editing company details such as name, industry, tax year end, and primary contact. It includes validation for required fields and email format. The form uses useState for managing form data and errors. This section is accessible by Admin ONLY. Page access: Admin only.
Implement FinancialYearsSettings for Settings
As a frontend developer, implement the FinancialYearsSettings section for the Settings page. This section displays a list of financial years with details such as label, start and end dates, company, and status. It includes actions for adding, editing, and deleting financial years. The section uses props for handling form submissions and state management for form visibility. This section is accessible by Admin ONLY. Page access: Admin only.
Implement UsersListView for Settings
As a frontend developer, implement the UsersListView section for the Settings page. This section displays a list of users with details such as name, email, role, and status. It includes actions for adding, editing, and toggling user status. The section uses useState for managing open menus. This section is accessible by Admin ONLY. Page access: Admin only.
Implement UsersFormModal for Settings
As a frontend developer, implement the UsersFormModal section for the Settings page. This modal form allows adding or editing user details such as name, email, role, and permissions. It includes validation for required fields and email format. The form uses useState for managing form data and errors. This section is accessible by Admin ONLY. Page access: Admin only.
Implement RolesAndPermissionsView for Settings
As a frontend developer, implement the RolesAndPermissionsView section for the Settings page. This section displays roles with their descriptions and associated permissions for various entities. It uses state management for handling permission toggles. This section is accessible by Admin ONLY. Page access: Admin only.
Implement AuditLogsSection for Settings
As a frontend developer, implement the AuditLogsSection for the Settings page. This section displays a list of audit logs with details such as timestamp, user, action, entity, and status. It includes filters for date range, action type, user, and entity. The section uses useState for managing filters and expanded rows. This section is accessible by Admin ONLY. Page access: Admin only.
Implement LearningTabs for AI Learning
As a frontend developer, implement the LearningTabs section for the AI Learning page. This section provides a tabbed navigation interface to filter corrections by status: Pending Review, Approved, Rejected, and All Corrections. Each tab displays a count of items in that category. The active tab is highlighted, and clicking a tab triggers a change in the displayed data. This section is accessible only by Admins. Page access: Admin only.
Implement CorrectionsTable for AI Learning
As a frontend developer, implement the CorrectionsTable section for the AI Learning page. This section displays a table of corrections with sortable columns such as Timestamp, Original Classification, User Correction, Confidence, Category, Company, and Status. It includes features like row selection, pagination, and sorting indicators. The table also visually represents confidence levels and status with color-coded badges. This section is accessible only by Admins. Page access: Admin only.
Implement ReviewPanelHeader for AI Learning
As a frontend developer, implement the ReviewPanelHeader section for the AI Learning page. This section displays metadata about a correction, including its ID and timestamp, and provides a button to close the review panel. The close button includes an SVG icon and is accessible only by Admins. Page access: Admin only.
Implement ReviewPanelDetails for AI Learning
As a frontend developer, implement the ReviewPanelDetails section for the AI Learning page. This section provides detailed information about a correction, including the original AI classification, user correction, and impact assessment. It uses color-coded badges to indicate classification changes and displays metrics on model precision improvement. This section is accessible only by Admins. Page access: Admin only.
Implement ReviewPanelComparison for AI Learning
As a frontend developer, implement the ReviewPanelComparison section for the AI Learning page. This section compares the original AI classification with the user correction, using visual indicators to show differences. It includes SVG icons to indicate pass or fail status and provides a note on the implication of the correction. This section is accessible only by Admins. Page access: Admin only.
Implement ApprovalDecision for AI Learning
As a frontend developer, implement the ApprovalDecision section for the AI Learning page. This section provides buttons for approving, rejecting, or approving and learning from a correction. It includes a confirmation modal for each action, ensuring user intent before proceeding. This section is accessible only by Admins. Page access: Admin only.
Implement ApprovalActions for AI Learning
As a frontend developer, implement the ApprovalActions section for the AI Learning page. This section allows batch approval or rejection of selected corrections, with a confirmation modal to verify user intent. It also includes a button to clear the current selection. This section is accessible only by Admins. Page access: Admin only.
Implement AlertsSummary for Insights
As a frontend developer, implement the AlertsSummary section which displays a summary of alert metrics using cards. Each card includes an icon, count, label, and a sparkline graph. This section is accessible by Business Owner and CFO personas. Ensure the sparkline component accurately represents the trend data. Page access: Business Owner, CFO only.
Implement CriticalAlertsOverview for Insights
As a frontend developer, implement the CriticalAlertsOverview section which provides controls for filtering and sorting critical alerts. This section uses React state hooks to manage filter and sort options, and includes a toggle button to expand or collapse the alerts list. It is accessible by Business Owner and CFO personas. Page access: Business Owner, CFO only.
Implement TrendingPatternsOverview for Insights
As a frontend developer, implement the TrendingPatternsOverview section which includes controls for filtering and sorting trending patterns, and toggles between card and list views. This section uses React state hooks to manage view, filter, and sort options. It is accessible by Business Owner and CFO personas. Page access: Business Owner, CFO only.
Implement FinancialMetricsDisplay for Insights
As a frontend developer, implement the FinancialMetricsDisplay section which showcases key financial metrics using cards. Each card includes a label, value, change, comparison, and a sparkline graph. This section is accessible by Business Owner and CFO personas. Page access: Business Owner, CFO only.
Implement RecommendedActionsList for Insights
As a frontend developer, implement the RecommendedActionsList section which displays a list of recommended actions. Each action includes a title, category, priority, description, impact, and confidence level. This section is accessible by Business Owner and CFO personas. Page access: Business Owner, CFO only.
Implement CashFlowHeader for CashFlow
As a frontend developer, implement the CashFlowHeader section which includes a breadcrumb navigation, page title, company name, fiscal year, and a period selector with buttons for 'This Month', 'This Quarter', 'This Year', and 'Custom'. It also includes a refresh button to update data. This section is accessible by Accountant and Business Owner personas. Ensure that the component integrates with existing styles and functionality from the Upload page. Page access: Accountant, Business Owner only.
Implement SimulatorHeader for Simulator
As a frontend developer, implement the SimulatorHeader section for the Simulator page. This section includes a fiscal year dropdown with options for FY 2024-25, FY 2023-24, and FY 2022-23, a refresh button with a spinning animation when active, and a help button that toggles a tooltip. The header also contains a breadcrumb navigation linking to the Dashboard and a title with a description. This page is accessible by the CFO persona only. Ensure the breadcrumb link to Dashboard is conditionally shown based on persona access. This section depends on the Forecast page's ForecastHero task. Page access: CFO only.
Develop AI Forecasting
As an AI Engineer, develop AI models for forecasting future cash flows based on historical data and user inputs. Ensure models are accurate and provide actionable insights.
Create Integration Tests
As a QA Engineer, create integration tests for critical user flows including file upload, cash flow generation, and AI insights retrieval. Ensure tests cover both frontend and backend interactions.
Implement API Authorization
As a developer, I need to implement API authorization to ensure that only authorized users can access specific resources.
Implement UploadDropZoneProgress for Upload
As a frontend developer, implement the UploadDropZoneProgress section for the Upload page. This section displays the upload progress of files with visual indicators for different statuses (uploading, complete, draft saved). It uses props to dynamically update the progress bar and status messages based on the file's upload state. Page access: Accountant, Business Owner only.
Implement CriticalAlertsList for Insights
As a frontend developer, implement the CriticalAlertsList section which displays a detailed list of critical alerts. Each alert includes a title, affected metric, impact, timestamp, detailed description, recommendation, and confidence level. This section is accessible by Business Owner and CFO personas. Page access: Business Owner, CFO only.
Implement TrendingPatternsList for Insights
As a frontend developer, implement the TrendingPatternsList section which displays a detailed list of trending patterns. Each pattern includes a name, category, current value, change percentage, sparkline, and description. This section is accessible by Business Owner and CFO personas. Page access: Business Owner, CFO only.
Implement MethodToggle for CashFlow
As a frontend developer, implement the MethodToggle section which allows users to switch between 'Direct' and 'Indirect' cash flow methods. This section includes a description of the selected method and a toggle button to switch methods. It is accessible by Accountant and Business Owner personas. Ensure the toggle updates the state correctly and reflects the change visually. Page access: Accountant, Business Owner only.
Implement ViewTypeSelector for CashFlow
As a frontend developer, implement the ViewTypeSelector section which allows users to switch between 'Summary' and 'Detailed' views of the cash flow statement. This section includes buttons that update the viewType state and visually indicate the active selection. It is accessible by Accountant and Business Owner personas. Page access: Accountant, Business Owner only.
Implement ExportActions for CashFlow
As a frontend developer, implement the ExportActions section which allows users to export the cash flow statement in PDF, Excel, and CSV formats, as well as print and share the statement. This section includes buttons for each export option and displays the last export timestamp. It is accessible by Accountant and Business Owner personas. Page access: Accountant, Business Owner only.
Implement ReportsHeader for Reports
As a frontend developer, implement the ReportsHeader section which includes a breadcrumb navigation, a title block with a refresh button, and a sort dropdown. The section uses motion animations for header transitions and manages state for view type, sort options, and refreshing status. This section is accessible by Accountant, Business Owner, and CFO personas. Ensure breadcrumb links conditionally show based on persona access. This section depends on the CashFlow page task ID e91fa021-b071-4a1e-8058-7ddf300b5b61. Page access: Accountant, Business Owner, CFO only.
Implement Persona Access Control
As a Backend Developer, implement persona-specific access control for restricted pages like AI Learning and Settings. Ensure route guards and backend authorization are in place.
Integrate CashFlow Feature
As a Tech Lead, verify the end-to-end integration between the CashFlow frontend implementation and the CashFlow backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.
Implement UploadedFilesMetadata for Upload
As a frontend developer, implement the UploadedFilesMetadata section for the Upload page. This section displays metadata for each uploaded file, including an icon representing the file type and the file's name and type. It uses a mapping of file types to icons for visual representation. Page access: Accountant, Business Owner only.
Implement StatementDisplay for CashFlow
As a frontend developer, implement the StatementDisplay section which displays cash flow data based on the selected method ('Direct' or 'Indirect') and view type ('Summary' or 'Detailed'). This section includes a table with categories like Operating, Investing, and Financing Activities, and allows for detailed line item explanations. It is accessible by Accountant and Business Owner personas. Page access: Accountant, Business Owner only.
Implement UploadedFilesActions for Upload
As a frontend developer, implement the UploadedFilesActions section for the Upload page. This section provides action buttons for each uploaded file, including options to download, retry (if an error occurred), and remove the file. It uses state to manage the visibility of a dropdown menu for these actions. Page access: Accountant, Business Owner only.
Implement LineItemExplanations for CashFlow
As a frontend developer, implement the LineItemExplanations section which provides AI-generated explanations for each line item in the cash flow statement. This section includes an overlay with detailed explanations based on ICAI guidelines. It is accessible by Accountant and Business Owner personas. Page access: Accountant, Business Owner only.
Implement ClassificationPreview for Upload
As a frontend developer, implement the ClassificationPreview section for the Upload page. This section displays a tabbed interface for viewing classified transactions, with tabs for different categories and a summary of transaction counts and confidence levels. It uses state to manage the active tab and filters transactions based on the selected category. Page access: Accountant, Business Owner only.
Implement ClassificationCorrection for Upload
As a frontend developer, implement the ClassificationCorrection section for the Upload page. This section allows users to review and correct AI-generated classifications, with options to approve or reject all classifications. It uses state to manage editing modes and feedback messages, and provides callbacks for classification changes. Page access: Accountant, Business Owner only.
Implement UploadActions for Upload
As a frontend developer, implement the UploadActions section for the Upload page. This section provides navigation buttons for saving progress and reviewing classifications. It conditionally renders buttons based on props and handles click events to trigger navigation actions. Page access: Accountant, Business Owner only.
No comments yet. Be the first!