Spaces:
Running
Running
Create this app:📋 UNIVERSAL ACCOUNTING ANALYZER - COMPREHENSIVE OVERVIEW 🎯 APPLICATION PURPOSE The Universal Accounting Analyzer is a professional desktop application designed specifically for BVA Incorporated and other audit firms to perform sophisticated accounting analysis and audit procedures. 🏢 TARGET USER: BVA Incorporated Audit, tax and advisory firm in Cape Town, South Africa ~20 people in the firm Managing Director: Carel Jordaan (17 years auditing experience, IRBA registered) Standards: IFRS, IFRS for SMEs, International Standards on Auditing Deployment: Local desktop application on each auditor's laptop 🔧 CORE FUNCTIONALITY 1. Client Management Create and manage audit clients Store client information and descriptions Track client data and import history 2. Data Import & Processing Excel files (.xlsx, .xls) - Trial Balance and General Ledger data CSV/TSV files - General Ledger transactions Comprehensive validation - Data integrity checks and error reporting Import logging - Complete audit trail of all data imports 3. Reconciliation Analysis Trial Balance reconciliation using proper accounting logic Balance Sheet accounts: Expected = Opening + GL Movement Income Statement accounts: Expected = GL Movement Equity accounts: Expected = Opening + Sum(Income Opening Balances) Difference identification with detailed explanations Export capabilities for audit documentation 4. Sankey Analysis (Cash Flow Visualization) Interactive account selection with rich context Transaction flow visualization between accounts Configurable parameters (transaction types, flow limits) Visual cash flow diagrams for audit understanding Export functionality for client presentations 5. Correlation Analysis Multi-account correlation for audit risk assessment Statistical analysis (Pearson/Spearman correlations) Time-based analysis (Monthly/Quarterly/Yearly) Source/target account selection with directional flows Exception identification for audit testing focus 6. Advanced Audit Process Flow Analysis Visual business process modeling (BPMN-compliant) Multi-leg transaction analysis (3-way, 4-way correlations) Expected vs Actual analysis with exception scoring Audit-specific templates (Sales cycle, Purchase cycle, etc.) Exception investigation with risk-based prioritization 🎨 DESIGN PHILOSOPHY Minimalistic & Professional (BVA Preference) Clean, uncluttered interface with subtle shadows Muted color palette (whites, grays, professional blues) Typography hierarchy for easy reading Responsive design for various screen sizes User Experience Focus Progress indicators for long operations Rich account context with detailed descriptions Summary data for complex datasets Clear visual feedback during processing Intuitive navigation with tab-based interface 🏗️ TECHNICAL ARCHITECTURE Backend (Python/Flask) Flask web framework with RESTful API design SQLite database (perfect for single-user desktop deployment) SQLAlchemy ORM with proper relationships Service layer architecture for business logic separation Comprehensive logging with structured output Data validation at multiple layers Frontend (HTML/CSS/JavaScript) Single-page application with tab navigation Vanilla JavaScript (no complex frameworks) Responsive CSS Grid/Flexbox layout Professional styling matching BVA preferences Real-time progress indicators and status updates Data Processing Pandas integration for efficient data analysis Excel/CSV/TSV support with robust parsing Statistical calculations for correlation analysis Financial calculations with Decimal precision Export capabilities (Excel, CSV, JSON) 🔒 SECURITY & DEPLOYMENT Local Desktop Application No authentication required (runs on user's secure laptop) No network dependencies (except for installation) Data privacy (all data stays on user's machine) Secure by design (no external data transmission) Windows Deployment Professional installer (.exe) for easy deployment Program Files installation with shortcuts and icons No Python installation required (self-contained) Automatic updates capability for future versions 📊 AUDIT-SPECIFIC FEATURES Business Process Understanding Process templates for common audit cycles Multi-dimensional analysis for complex transactions Exception identification for focused testing Risk-based prioritization for audit efficiency Professional Documentation Comprehensive export options for audit files Detailed analysis reports with explanations Visual presentations for client meetings Audit trail maintenance for regulatory compliance 🎯 VALUE PROPOSITION FOR BVA Efficiency: Automate complex analysis that would take hours manually Accuracy: Eliminate human error in calculations and reconciliations Insight: Identify patterns and exceptions not visible in spreadsheets Professional: Generate client-ready visualizations and reports Compliance: Maintain proper audit documentation and trails Scalability: Handle clients of any size with consistent methodology This application transforms traditional audit procedures into sophisticated, visual, and efficient analysis workflows while maintaining the professional standards required for audit practice. - Initial Deployment
435fe4d verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Universal Accounting Analyzer | BVA Incorporated</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Custom CSS for elements that need more precise control */ | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar-collapsed { | |
| width: 70px; | |
| } | |
| .sidebar-collapsed .nav-text { | |
| display: none; | |
| } | |
| .main-content { | |
| transition: margin-left 0.3s ease; | |
| } | |
| .sankey-link { | |
| fill: none; | |
| stroke-opacity: 0.5; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div id="sidebar" class="sidebar bg-blue-800 text-white w-64 flex flex-col"> | |
| <div class="p-4 flex items-center justify-between border-b border-blue-700"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-calculator text-2xl"></i> | |
| <span class="nav-text text-xl font-bold">UAA</span> | |
| </div> | |
| <button id="toggle-sidebar" class="text-white hover:text-blue-200"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <div class="flex-1 overflow-y-auto"> | |
| <div class="p-4"> | |
| <div class="mb-6"> | |
| <h3 class="nav-text text-xs uppercase font-semibold text-blue-300 mb-2">Main</h3> | |
| <ul> | |
| <li class="mb-1"> | |
| <a href="#" data-tab="dashboard" class="flex items-center p-2 rounded hover:bg-blue-700 transition"> | |
| <i class="fas fa-tachometer-alt mr-3"></i> | |
| <span class="nav-text">Dashboard</span> | |
| </a> | |
| </li> | |
| <li class="mb-1"> | |
| <a href="#" data-tab="clients" class="flex items-center p-2 rounded hover:bg-blue-700 transition"> | |
| <i class="fas fa-building mr-3"></i> | |
| <span class="nav-text">Client Management</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="nav-text text-xs uppercase font-semibold text-blue-300 mb-2">Data</h3> | |
| <ul> | |
| <li class="mb-1"> | |
| <a href="#" data-tab="import" class="flex items-center p-2 rounded hover:bg-blue-700 transition"> | |
| <i class="fas fa-file-import mr-3"></i> | |
| <span class="nav-text">Data Import</span> | |
| </a> | |
| </li> | |
| <li class="mb-1"> | |
| <a href="#" data-tab="reconciliation" class="flex items-center p-2 rounded hover:bg-blue-700 transition"> | |
| <i class="fas fa-balance-scale mr-3"></i> | |
| <span class="nav-text">Reconciliation</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="nav-text text-xs uppercase font-semibold text-blue-300 mb-2">Analysis</h3> | |
| <ul> | |
| <li class="mb-1"> | |
| <a href="#" data-tab="sankey" class="flex items-center p-2 rounded hover:bg-blue-700 transition"> | |
| <i class="fas fa-project-diagram mr-3"></i> | |
| <span class="nav-text">Sankey Analysis</span> | |
| </a> | |
| </li> | |
| <li class="mb-1"> | |
| <a href="#" data-tab="correlation" class="flex items-center p-2 rounded hover:bg-blue-700 transition"> | |
| <i class="fas fa-link mr-3"></i> | |
| <span class="nav-text">Correlation Analysis</span> | |
| </a> | |
| </li> | |
| <li class="mb-1"> | |
| <a href="#" data-tab="audit-process" class="flex items-center p-2 rounded hover:bg-blue-700 transition"> | |
| <i class="fas fa-sitemap mr-3"></i> | |
| <span class="nav-text">Audit Process Flow</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="nav-text text-xs uppercase font-semibold text-blue-300 mb-2">Settings</h3> | |
| <ul> | |
| <li class="mb-1"> | |
| <a href="#" data-tab="settings" class="flex items-center p-2 rounded hover:bg-blue-700 transition"> | |
| <i class="fas fa-cog mr-3"></i> | |
| <span class="nav-text">Application Settings</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-blue-700"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div class="ml-3 nav-text"> | |
| <div class="text-sm font-medium">BVA Auditor</div> | |
| <div class="text-xs text-blue-300">IRBA Registered</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="main-content flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white border-b border-gray-200 py-3 px-6 flex items-center justify-between"> | |
| <h1 class="text-xl font-semibold text-gray-800">Universal Accounting Analyzer</h1> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-bell text-gray-500"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-question-circle text-gray-500"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Content Area --> | |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> | |
| <!-- Dashboard Tab --> | |
| <div id="dashboard" class="tab-content active"> | |
| <div class="mb-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-4">Dashboard Overview</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Active Clients</p> | |
| <h3 class="text-2xl font-bold text-gray-800">24</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> | |
| <i class="fas fa-building text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-green-500 text-sm font-medium">+3 from last month</span> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Pending Reconciliations</p> | |
| <h3 class="text-2xl font-bold text-gray-800">8</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-orange-100 text-orange-600"> | |
| <i class="fas fa-balance-scale text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-red-500 text-sm font-medium">-2 from last week</span> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Data Imports Today</p> | |
| <h3 class="text-2xl font-bold text-gray-800">5</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> | |
| <i class="fas fa-file-import text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-green-500 text-sm font-medium">+1 from yesterday</span> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Identified Exceptions</p> | |
| <h3 class="text-2xl font-bold text-gray-800">12</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> | |
| <i class="fas fa-exclamation-triangle text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-red-500 text-sm font-medium">+5 from last analysis</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Recent Activities</h3> | |
| <button class="text-blue-600 text-sm font-medium">View All</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-3"> | |
| <i class="fas fa-file-import"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Imported trial balance for <span class="text-blue-600">ABC Corp</span></p> | |
| <p class="text-xs text-gray-500">10 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-green-100 text-green-600 mr-3"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Completed reconciliation for <span class="text-blue-600">XYZ Ltd</span></p> | |
| <p class="text-xs text-gray-500">2 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-purple-100 text-purple-600 mr-3"> | |
| <i class="fas fa-project-diagram"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Generated Sankey diagram for <span class="text-blue-600">Global Inc</span></p> | |
| <p class="text-xs text-gray-500">5 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-orange-100 text-orange-600 mr-3"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Identified 3 exceptions in <span class="text-blue-600">Tech Solutions</span></p> | |
| <p class="text-xs text-gray-500">Yesterday</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Quick Actions</h3> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <a href="#" data-tab="import" class="quick-action-btn bg-blue-50 hover:bg-blue-100 text-blue-600"> | |
| <i class="fas fa-file-import text-2xl mb-2"></i> | |
| <span>Import Data</span> | |
| </a> | |
| <a href="#" data-tab="reconciliation" class="quick-action-btn bg-green-50 hover:bg-green-100 text-green-600"> | |
| <i class="fas fa-balance-scale text-2xl mb-2"></i> | |
| <span>Start Reconciliation</span> | |
| </a> | |
| <a href="#" data-tab="sankey" class="quick-action-btn bg-purple-50 hover:bg-purple-100 text-purple-600"> | |
| <i class="fas fa-project-diagram text-2xl mb-2"></i> | |
| <span>Sankey Analysis</span> | |
| </a> | |
| <a href="#" data-tab="clients" class="quick-action-btn bg-orange-50 hover:bg-orange-100 text-orange-600"> | |
| <i class="fas fa-user-plus text-2xl mb-2"></i> | |
| <span>Add Client</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Client Management Tab --> | |
| <div id="clients" class="tab-content"> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between"> | |
| <h2 class="text-2xl font-semibold text-gray-800">Client Management</h2> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Add New Client | |
| </button> | |
| </div> | |
| <p class="text-gray-600 mt-2">Manage all audit clients and their information</p> | |
| </div> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200 flex items-center justify-between"> | |
| <div class="relative w-64"> | |
| <input type="text" placeholder="Search clients..." class="pl-10 pr-4 py-2 w-full border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-100"> | |
| <i class="fas fa-filter mr-1"></i> Filter | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-100"> | |
| <i class="fas fa-download mr-1"></i> Export | |
| </button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client Name</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Industry</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Standard</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Import</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-building text-blue-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">ABC Corporation</div> | |
| <div class="text-sm text-gray-500">Cape Town</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Manufacturing</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">IFRS</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 2023-06-15 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">View</button> | |
| <button class="text-gray-600 hover:text-gray-900">Edit</button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-building text-purple-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">XYZ Limited</div> | |
| <div class="text-sm text-gray-500">Johannesburg</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Technology</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">IFRS for SMEs</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 2023-06-10 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">View</button> | |
| <button class="text-gray-600 hover:text-gray-900">Edit</button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-building text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Global Industries</div> | |
| <div class="text-sm text-gray-500">Durban</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Retail</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">IFRS</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 2023-05-28 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">View</button> | |
| <button class="text-gray-600 hover:text-gray-900">Edit</button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-orange-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-building text-orange-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Tech Solutions</div> | |
| <div class="text-sm text-gray-500">Pretoria</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Software</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">IFRS for SMEs</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 2023-05-15 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Inactive</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">View</button> | |
| <button class="text-gray-600 hover:text-gray-900">Edit</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200"> | |
| <div class="flex-1 flex justify-between sm:hidden"> | |
| <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> Previous </a> | |
| <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> Next </a> | |
| </div> | |
| <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-700"> | |
| Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">24</span> clients | |
| </p> | |
| </div> | |
| <div> | |
| <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Previous</span> | |
| <i class="fas fa-chevron-left"></i> | |
| </a> | |
| <a href="#" aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 1 </a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 2 </a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 3 </a> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Next</span> | |
| <i class="fas fa-chevron-right"></i> | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Data Import Tab --> | |
| <div id="import" class="tab-content"> | |
| <div class="mb-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800">Data Import</h2> | |
| <p class="text-gray-600 mt-2">Import trial balances, general ledgers and other accounting data</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Import New Data</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Select Client</label> | |
| <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| <option>Select a client...</option> | |
| <option>ABC Corporation</option> | |
| <option>XYZ Limited</option> | |
| <option>Global Industries</option> | |
| <option>Tech Solutions</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Data Type</label> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <button class="data-type-btn border border-gray-300 rounded-lg py-2 px-3 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-balance-scale-left text-blue-500 mb-1"></i> | |
| <span class="block text-sm">Trial Balance</span> | |
| </button> | |
| <button class="data-type-btn border border-gray-300 rounded-lg py-2 px-3 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-book text-green-500 mb-1"></i> | |
| <span class="block text-sm">General Ledger</span> | |
| </button> | |
| <button class="data-type-btn border border-gray-300 rounded-lg py-2 px-3 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-file-invoice-dollar text-purple-500 mb-1"></i> | |
| <span class="block text-sm">Subledger</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">File Format</label> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <button class="file-format-btn border border-gray-300 rounded-lg py-2 px-3 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-file-excel text-green-500 mb-1"></i> | |
| <span class="block text-sm">Excel (.xlsx)</span> | |
| </button> | |
| <button class="file-format-btn border border-gray-300 rounded-lg py-2 px-3 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-file-csv text-orange-500 mb-1"></i> | |
| <span class="block text-sm">CSV (.csv)</span> | |
| </button> | |
| <button class="file-format-btn border border-gray-300 rounded-lg py-2 px-3 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-file-alt text-blue-500 mb-1"></i> | |
| <span class="block text-sm">TSV (.tsv)</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Upload File</label> | |
| <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg"> | |
| <div class="space-y-1 text-center"> | |
| <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true"> | |
| <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
| </svg> | |
| <div class="flex text-sm text-gray-600"> | |
| <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-500"> | |
| <span>Upload a file</span> | |
| <input id="file-upload" name="file-upload" type="file" class="sr-only"> | |
| </label> | |
| <p class="pl-1">or drag and drop</p> | |
| </div> | |
| <p class="text-xs text-gray-500">Excel, CSV or TSV up to 10MB</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-2"> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-upload mr-2"></i> Import Data | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Recent Imports</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-green-100 text-green-600 mr-3"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Trial Balance - ABC Corp</p> | |
| <p class="text-xs text-gray-500">Imported 15 minutes ago</p> | |
| <p class="text-xs text-green-600 mt-1">Success: 120 accounts processed</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-red-100 text-red-600 mr-3"> | |
| <i class="fas fa-exclamation"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">General Ledger - XYZ Ltd</p> | |
| <p class="text-xs text-gray-500">Imported 2 hours ago</p> | |
| <p class="text-xs text-red-600 mt-1">Error: 3 invalid transaction dates</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-green-100 text-green-600 mr-3"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Subledger - Global Inc</p> | |
| <p class="text-xs text-gray-500">Imported yesterday</p> | |
| <p class="text-xs text-green-600 mt-1">Success: 1,245 transactions processed</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-yellow-100 text-yellow-600 mr-3"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Trial Balance - Tech Solutions</p> | |
| <p class="text-xs text-gray-500">Imported 2 days ago</p> | |
| <p class="text-xs text-yellow-600 mt-1">Warning: 5 accounts with zero balances</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-200"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View all import history →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Reconciliation Tab --> | |
| <div id="reconciliation" class="tab-content"> | |
| <div class="mb-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800">Reconciliation Analysis</h2> | |
| <p class="text-gray-600 mt-2">Perform trial balance and account reconciliations with automated validation</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Run Reconciliation</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-100"> | |
| <i class="fas fa-history mr-1"></i> History | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-100"> | |
| <i class="fas fa-question-circle mr-1"></i> Help | |
| </button> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Select Client</label> | |
| <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| <option>Select a client...</option> | |
| <option>ABC Corporation</option> | |
| <option>XYZ Limited</option> | |
| <option>Global Industries</option> | |
| <option>Tech Solutions</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Period</label> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">From</label> | |
| <input type="date" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">To</label> | |
| <input type="date" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Reconciliation Type</label> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <button class="recon-type-btn border border-gray-300 rounded-lg py-2 px-3 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-balance-scale-left text-blue-500 mb-1"></i> | |
| <span class="block text-sm">Trial Balance</span> | |
| </button> | |
| <button class="recon-type-btn border border-gray-300 rounded-lg py-2 px-3 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-exchange-alt text-green-500 mb-1"></i> | |
| <span class="block text-sm">Account Level</span> | |
| </button> | |
| <button class="recon-type-btn border border-gray-300 rounded-lg py-2 px-3 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <i class="fas fa-random text-purple-500 mb-1"></i> | |
| <span class="block text-sm">Multi-Account</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="pt-2"> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-play mr-2"></i> Run Reconciliation | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 mt-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Reconciliation Results</h3> | |
| <div class="bg-gray-50 p-4 rounded-lg mb-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium">ABC Corporation - Trial Balance Reconciliation</p> | |
| <p class="text-xs text-gray-500">Period: 01 Jan 2023 - 31 Mar 2023</p> | |
| </div> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4 mb-4"> | |
| <div class="bg-blue-50 p-3 rounded-lg"> | |
| <p class="text-xs text-blue-600 font-medium">Accounts Processed</p> | |
| <p class="text-xl font-bold">142</p> | |
| </div> | |
| <div class="bg-green-50 p-3 rounded-lg"> | |
| <p class="text-xs text-green-600 font-medium">Reconciled</p> | |
| <p class="text-xl font-bold">138</p> | |
| </div> | |
| <div class="bg-red-50 p-3 rounded-lg"> | |
| <p class="text-xs text-red-600 font-medium">Exceptions</p> | |
| <p class="text-xl font-bold">4</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <p class="text-sm font-medium text-gray-700">Reconciliation Progress</p> | |
| <p class="text-xs text-gray-500">97% complete</p> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full progress-bar" style="width: 97%"></div> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Account</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Difference</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1000</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Cash and Cash Equivalents</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Reconciled</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1100</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Accounts Receivable</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Reconciled</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1200</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Inventory</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Exception</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">12,450.00</td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2000</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Accounts Payable</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Reconciled</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">3000</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Share Capital</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Exception</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">5,000.00</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div> | |
| <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50"> | |
| <i class="fas fa-download mr-1"></i> Export Report | |
| </button> | |
| </div> | |
| <div> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"> | |
| <i class="fas fa-search mr-1"></i> Investigate Exceptions | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Exception Details</h3> | |
| <div class="space-y-4"> | |
| <div class="border border-red-200 rounded-lg p-4 bg-red-50"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="font-medium text-red-800">Account 1200 - Inventory</p> | |
| <p class="text-sm text-red-600">Difference: ZAR 12,450.00</p> | |
| </div> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">High Risk</span> | |
| </div> | |
| <p class="text-sm text-gray-700 mt-2">Opening balance + GL movement does not equal closing balance. Possible inventory counting error or missing transactions.</p> | |
| <div class="mt-3 pt-3 border-t border-red-200"> | |
| <button class="text-xs text-red-600 hover:text-red-800"> | |
| <i class="fas fa-search mr-1"></i> View Transactions | |
| </button> | |
| </div> | |
| </div> | |
| <div class="border border-red-200 rounded-lg p-4 bg-red-50"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="font-medium text-red-800">Account 3000 - Share Capital</p> | |
| <p class="text-sm text-red-600">Difference: ZAR 5,000.00</p> | |
| </div> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Medium Risk</span> | |
| </div> | |
| <p class="text-sm text-gray-700 mt-2">Equity account movement doesn't match income statement balances. Possible dividend declaration not recorded.</p> | |
| <div class="mt-3 pt-3 border-t border-red-200"> | |
| <button class="text-xs text-red-600 hover:text-red-800"> | |
| <i class="fas fa-search mr-1"></i> View Transactions | |
| </button> | |
| </div> | |
| </div> | |
| <div class="border border-blue-200 rounded-lg p-4 bg-blue-50"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="font-medium text-blue-800">Account 4000 - Revenue</p> | |
| <p class="text-sm text-blue-600">Difference: ZAR 0.00</p> | |
| </div> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Reconciled</span> | |
| </div> | |
| <p class="text-sm text-gray-700 mt-2">All revenue transactions properly accounted for in the period.</p> | |
| <div class="mt-3 pt-3 border-t border-blue-200"> | |
| <button class="text-xs text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-search mr-1"></i> View Transactions | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h4 class="text-sm font-semibold text-gray-700 mb-2">Reconciliation Notes</h4> | |
| <textarea rows="4" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Add notes about this reconciliation..."></textarea> | |
| <button class="mt-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm"> | |
| Save Notes | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sankey Analysis Tab --> | |
| <div id="sankey" class="tab-content"> | |
| <div class="mb-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800">Sankey Analysis</h2> | |
| <p class="text-gray-600 mt-2">Visualize transaction flows between accounts for audit understanding</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Configuration</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Select Client</label> | |
| <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| <option>ABC Corporation</option> | |
| <option>XYZ Limited</option> | |
| <option>Global Industries</option> | |
| <option>Tech Solutions</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Period</label> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">From</label> | |
| <input type="date" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" value="2023-01-01"> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">To</label> | |
| <input type="date" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" value="2023-03-31"> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Source Accounts</label> | |
| <select multiple class="w-full border border-gray-300 rounded-lg px-4 py-2 h-32 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| <option>1000 - Cash and Cash Equivalents</option> | |
| <option selected>1100 - Accounts Receivable</option> | |
| <option>1200 - Inventory</option> | |
| <option>1300 - Prepaid Expenses</option> | |
| <option selected>2000 - Accounts Payable</option> | |
| <option>2100 - Accrued Liabilities</option> | |
| <option>3000 - Share Capital</option> | |
| <option>3100 - Retained Earnings</option> | |
| <option selected>4000 - Revenue</option> | |
| <option>5000 - Cost of Sales</option> | |
| <option>6000 - Operating Expenses</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Minimum Flow Amount</label> | |
| <input type="number" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="1000" value="5000"> | |
| </div> | |
| <div class="pt-2"> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-project-diagram mr-2"></i> Generate Diagram | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-3"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Cash Flow Visualization</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-100"> | |
| <i class="fas fa-download mr-1"></i> Export | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-100"> | |
| <i class="fas fa-cog mr-1"></i> Settings | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-4 mb-4"> | |
| <p class="text-sm text-gray-700"> | |
| <span class="font-medium">ABC Corporation</span> | | |
| <span>01 Jan 2023 - 31 Mar 2023</span> | | |
| <span>Showing flows ≥ ZAR 5,000.00</span> | |
| </p> | |
| </div> | |
| <div id="sankey-diagram" class="w-full h-96 border border-gray-200 rounded-lg flex items-center justify-center bg-gray-50"> | |
| <div class="text-center"> | |
| <i class="fas fa-project-diagram text-4xl text-gray-300 mb-2"></i> | |
| <p class="text-gray-500">Sankey diagram will appear here</p> | |
| <p class="text-sm text-gray-400 mt-2">Select accounts and click "Generate Diagram"</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h4 class="text-sm font-semibold text-gray-700 mb-2">Key Observations</h4> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-green-500 mt-1"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <p class="text-sm text-gray-700 ml-2">Revenue (4000) flows primarily to Accounts Receivable (1100) and Cash (1000) as expected for this retail business.</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-yellow-500 mt-1"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| </div> | |
| <p class="text-sm text-gray-700 ml-2">Unusually large flow (ZAR 45,200) from Accounts Payable (2000) to Operating Expenses (6000) in February - verify supporting documentation.</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-5 w-5 text-red-500 mt-1"> | |
| <i class="fas fa-times-circle"></i> | |
| </div> | |
| <p class="text-sm text-gray-700 ml-2">Missing expected flow from Inventory (1200) to Cost of Sales (5000) - potential inventory recognition issue.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-6 border-t border-gray-200"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"> | |
| <i class="fas fa-file-alt mr-1"></i> Generate Audit Memo | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Correlation Analysis Tab --> | |
| <div id="correlation" class="tab-content"> | |
| <div class="mb-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800">Correlation Analysis</h2> | |
| <p class="text-gray-600 mt-2">Identify statistical relationships between accounts for risk assessment</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Analysis Parameters</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Select Client</label> | |
| <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| <option>ABC Corporation</option> | |
| <option>XYZ Limited</option> | |
| <option>Global Industries</option> | |
| <option>Tech Solutions</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Time Period</label> | |
| <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| <option>Monthly (Last 12 months)</option> | |
| <option selected>Quarterly (Last 4 quarters)</option> | |
| <option>Yearly (Last 3 years)</option> | |
| <option>Custom...</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Correlation Method</label> | |
| <div class="space-y-2"> | |
| <div class="flex items-center"> | |
| <input id="pearson" name="correlation-method" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" checked> | |
| <label for="pearson" class="ml-2 block text-sm text-gray-700">Pearson (Linear)</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="spearman" name="correlation-method" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300"> | |
| <label for="spearman" class="ml-2 block text-sm text-gray-700">Spearman (Rank)</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Account Selection</label> | |
| <select multiple class="w-full border border-gray-300 rounded-lg px-4 py-2 h-32 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| <option selected>1000 - Cash and Cash Equivalents</option> | |
| <option selected>1100 - Accounts Receivable</option> | |
| <option selected>1200 - Inventory</option> | |
| <option>1300 - Prepaid Expenses</option> | |
| <option selected>2000 - Accounts Payable</option> | |
| <option>2100 - Accrued Liabilities</option> | |
| <option>3000 - Share Capital</option> | |
| <option>3100 - Retained Earnings</option> | |
| <option selected>4000 - Revenue</option> | |
| <option selected>5000 - Cost of Sales</option> | |
| <option selected>6000 - Operating Expenses</option> | |
| </select> | |
| </div> | |
| <div class="pt-2"> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-chart-line mr-2"></i> Run Analysis | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 mt-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Analysis History</h3> | |
| <div class="space-y-3"> | |
| <div class="p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer"> | |
| <p class="text-sm font-medium">ABC Corporation - Q1 2023</p> | |
| <p class="text-xs text-gray-500">8 accounts | Pearson | 15 Apr 2023</p> | |
| </div> | |
| <div class="p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer"> | |
| <p class="text-sm font-medium">XYZ Limited - Monthly 2022</p> | |
| <p class="text-xs text-gray-500">12 accounts | Spearman | 2 Mar 2023</p> | |
| </div> | |
| <div class="p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer"> | |
| <p class="text-sm font-medium">Global Industries - FY2022</p> | |
| <p class="text-xs text-gray-500">6 accounts | Pearson | 15 Feb 2023</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-200"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">View all history →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-3"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Correlation Matrix</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-100"> | |
| <i class="fas fa-download mr-1"></i> Export | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-100"> | |
| <i class="fas fa-filter mr-1"></i> Filter | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-4 mb-4"> | |
| <p class="text-sm text-gray-700"> | |
| <span class="font-medium">ABC Corporation</span> | | |
| <span>Quarterly Analysis (Q1 2022 - Q1 2023)</span> | | |
| <span>Pearson Correlation</span> | |
| </p> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Account</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">1000</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">1100</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">1200</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">2000</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">4000</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">5000</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">6000</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1000 - Cash</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600 font-medium">0.87</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0.12</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-medium">-0.79</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600 font-medium">0.92</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0.23</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-medium">-0.65</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1100 - AR</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600 font-medium">0.87</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0.34</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-medium">-0.45</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600 font-medium">0.95</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0.41</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-medium">-0.32</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1200 - Inventory</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0.12</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0.34</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0.08 | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Hugelemming/test2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |