import { useState, useEffect } from 'react'; import { Button } from "/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "/components/ui/card"; import { ArrowRight, Clock, Users, Home, Search, Calendar, TrendingUp, RefreshCw, Banknote, Upload } from "lucide-react"; import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'; // Type Definitions interface Transaction { id: number | string; date: string; description: string; amount: number; category: string; } interface FinancialInstitution { id: string; name: string; logo: string; } interface ForecastData { month: string; predicted: number; optimistic: number; pessimistic: number; } // Sample Data const sampleData = [ { name: 'Jan', revenue: 4000, expenses: 2400, profit: 1600 }, { name: 'Feb', revenue: 3000, expenses: 1398, profit: 1602 }, { name: 'Mar', revenue: 9800, expenses: 2000, profit: 7800 }, { name: 'Apr', revenue: 3908, expenses: 2780, profit: 1128 }, { name: 'May', revenue: 4800, expenses: 1890, profit: 2910 }, { name: 'Jun', revenue: 3800, expenses: 2390, profit: 1410 }, ]; const forecastData: ForecastData[] = [ { month: 'Jul', predicted: 4200, optimistic: 5000, pessimistic: 3500 }, { month: 'Aug', predicted: 4500, optimistic: 5500, pessimistic: 3800 }, { month: 'Sep', predicted: 4800, optimistic: 6000, pessimistic: 4000 }, { month: 'Oct', predicted: 5200, optimistic: 6500, pessimistic: 4500 }, ]; const initialTransactions: Transaction[] = [ { id: 1, date: '2023-06-01', description: 'Office Supplies', amount: 120.50, category: 'Supplies' }, { id: 2, date: '2023-06-02', description: 'Client Payment', amount: 2500.00, category: 'Revenue' }, { id: 3, date: '2023-06-03', description: 'Software Subscription', amount: 99.00, category: 'Technology' }, { id: 4, date: '2023-06-04', description: 'Marketing Services', amount: 450.00, category: 'Marketing' }, { id: 5, date: '2023-06-05', description: 'Consulting Fee', amount: 1800.00, category: 'Revenue' }, ]; const supportedInstitutions: FinancialInstitution[] = [ { id: 'chase', name: 'Chase Bank', logo: 'chase-logo' }, { id: 'bankofamerica', name: 'Bank of America', logo: 'boa-logo' }, { id: 'wellsfargo', name: 'Wells Fargo', logo: 'wells-logo' }, { id: 'stripe', name: 'Stripe', logo: 'stripe-logo' }, { id: 'paypal', name: 'PayPal', logo: 'paypal-logo' }, ]; export default function FinovateDashboard() { const [activeTab, setActiveTab] = useState<'dashboard' | 'transactions' | 'forecasting' | 'connections'>('dashboard'); const [transactions, setTransactions] = useState(initialTransactions); const [newTransaction, setNewTransaction] = useState({ description: '', amount: '', category: '' }); const [isLoading, setIsLoading] = useState(false); const [connectedAccounts, setConnectedAccounts] = useState([]); const [lastUpdated, setLastUpdated] = useState(new Date()); const [syncStatus, setSyncStatus] = useState('Up to date'); const [error, setError] = useState(null); // Calculate financial metrics const totalRevenue = transactions .filter(t => t.category === 'Revenue') .reduce((sum, t) => sum + t.amount, 0); const totalExpenses = transactions .filter(t => t.category !== 'Revenue') .reduce((sum, t) => sum + t.amount, 0); const profit = totalRevenue - totalExpenses; // Simulate real-time updates useEffect(() => { const interval = setInterval(() => { setLastUpdated(new Date()); }, 60000); return () => clearInterval(interval); }, []); const handleAddTransaction = () => { if (!newTransaction.description || !newTransaction.amount) { setError('Description and amount are required'); return; } const transaction: Transaction = { id: Date.now(), date: new Date().toISOString().split('T')[0], description: newTransaction.description, amount: parseFloat(newTransaction.amount), category: newTransaction.category || 'Uncategorized' }; setTransactions([...transactions, transaction]); setNewTransaction({ description: '', amount: '', category: '' }); setError(null); setSyncStatus('Transaction added'); setLastUpdated(new Date()); }; const handleCSVUpload = (event: React.ChangeEvent) => { const file = event.target.files?.[0]; if (!file) return; setIsLoading(true); setSyncStatus('Processing CSV file...'); // Simulate CSV processing setTimeout(() => { try { const newTransactions = [ ...transactions, { id: Date.now() + 1, date: new Date().toISOString().split('T')[0], description: 'CSV Import: Office Rent', amount: 1200.00, category: 'Rent' }, { id: Date.now() + 2, date: new Date().toISOString().split('T')[0], description: 'CSV Import: Client Payment', amount: 3500.00, category: 'Revenue' } ]; setTransactions(newTransactions); setSyncStatus('CSV imported successfully'); setLastUpdated(new Date()); } catch (err) { setError('Failed to process CSV file'); setSyncStatus('CSV import failed'); } finally { setIsLoading(false); } }, 1500); }; const connectBankAccount = async (institutionId: string) => { if (connectedAccounts.includes(institutionId)) return; setIsLoading(true); setSyncStatus(`Connecting to ${institutionId}...`); setError(null); try { const newTransactions = await fetchBankTransactions(institutionId) as Transaction[]; setTransactions(prev => [...prev, ...newTransactions]); setConnectedAccounts(prev => [...prev, institutionId]); setSyncStatus('Sync completed successfully'); setLastUpdated(new Date()); } catch (err) { setError(`Failed to connect to ${institutionId}`); setSyncStatus('Connection failed'); } finally { setIsLoading(false); } }; const refreshData = async () => { setIsLoading(true); setSyncStatus('Refreshing data...'); setError(null); try { // Simulate API refresh await new Promise(resolve => setTimeout(resolve, 1000)); setSyncStatus('Data refreshed successfully'); setLastUpdated(new Date()); } catch (err) { setError('Failed to refresh data'); setSyncStatus('Refresh failed'); } finally { setIsLoading(false); } }; // Mock API function const fetchBankTransactions = async (institution: string): Promise => { return new Promise((resolve) => { setTimeout(() => { resolve([ { id: Date.now() + Math.random(), date: new Date().toISOString().split('T')[0], description: `POS Purchase ${institution}`, amount: 45.99, category: 'Expense' }, { id: Date.now() + Math.random(), date: new Date().toISOString().split('T')[0], description: `Deposit ${institution}`, amount: 1200.00, category: 'Revenue' } ]); }, 1000); }); }; return (

{/* Header */}

FINOVATE

Track. Predict. Thrive.

{error || syncStatus} • {lastUpdated.toLocaleTimeString()}

{/* Mobile Navigation */}

{/* Status Bar (Mobile) */}

{error || syncStatus} • {lastUpdated.toLocaleTimeString()}

{/* Dashboard Tab */} {activeTab === 'dashboard' && (

Total Revenue

${totalRevenue.toLocaleString()}

Updated: {lastUpdated.toLocaleTimeString()}

Total Expenses

${totalExpenses.toLocaleString()}

Updated: {lastUpdated.toLocaleTimeString()}

Profit

${profit.toLocaleString()}

Updated: {lastUpdated.toLocaleTimeString()}

Financial Overview Last updated: {lastUpdated.toLocaleString()}

AI Insights Powered by FINOVATE Intelligence

Revenue Growth

Your revenue is growing at a healthy rate of 12% month-over-month.

Expense Alert

Your technology expenses have increased by 22% this month.

Recent Transactions Showing latest transactions

{transactions.slice(0, 4).map(transaction => (

{transaction.description}

{transaction.date} • {transaction.category}

{transaction.category === 'Revenue' ? '+' : '-'}${transaction.amount.toFixed(2)}

))}

)} {/* Transactions Tab */} {activeTab === 'transactions' && (

Transaction Management Add and categorize your financial data

{error && (

{error}

)}

Description setNewTransaction({ ...newTransaction, description: e.target.value })} placeholder="Enter transaction description" />

Amount setNewTransaction({ ...newTransaction, amount: e.target.value })} placeholder="0.00" />

Date	Description	Category	Amount
{transaction.date}	{transaction.description}	{transaction.category}	{transaction.category === 'Revenue' ? '+' : '-'}${transaction.amount.toFixed(2)}

Marketing Expansion

Increasing marketing spend by 15% could boost revenue by 22%.

Cost Optimization

Review technology subscriptions for potential savings.

Cash Flow Projection Predicted monthly revenue

{forecastData.map((month) => (

{month.month}

Projected Revenue

${month.predicted.toLocaleString()}

Range: ${month.pessimistic.toLocaleString()} - ${month.optimistic.toLocaleString()}

))}

)} {/* Connections Tab */} {activeTab === 'connections' && (

Connect Financial Accounts Automatically sync your transactions

{supportedInstitutions.map((institution) => (

{institution.name}

))}

Manual Import Options Alternative ways to import data

CSV File Import

Upload your bank statements in CSV format

Select CSV File

)}

); }