Component Architecture

Component Architecture

BizGrow is built with a modern, scalable React architecture that emphasizes component reusability, maintainability, and performance.

🏗️ Architecture Overview

┌─────────────────────────────────────────────────────────┐
│                     Application Layer                   │
├─────────────────────────────────────────────────────────┤
│  App.jsx (Main Application)                             │
│  ├── Router (React Router)                              │
│  ├── Global State (Context Providers)                   │
│  └── Error Boundaries                                   │
├─────────────────────────────────────────────────────────┤
│                      Page Layer                         │
├─────────────────────────────────────────────────────────┤
│  Dashboard.jsx, Analytics.jsx, Settings.jsx             │
├─────────────────────────────────────────────────────────┤
│                    Component Layer                      │
├─────────────────────────────────────────────────────────┤
│  │ Feature Components │  │  UI Components  │            │
│  ├─ DataManager       │  ├─ Button         │            │
│  ├─ Analytics Suite   │  ├─ Modal          │            │
│  ├─ Charts            │  ├─ Input          │            │
│  └─ Customer CRM      │  └─ Loading        │            │
├─────────────────────────────────────────────────────────┤
│                     Service Layer                       │
├─────────────────────────────────────────────────────────┤
│  Store (dataStore.js), Utils, API Layer                 │
├─────────────────────────────────────────────────────────┤
│                      Data Layer                         │
└─────────────────────────────────────────────────────────┘
│  LocalStorage, Import/Export, Validation                │
└─────────────────────────────────────────────────────────┘

📁 Directory Structure

src/
├── components/                 # React components
│   ├── dashboard/             # Dashboard-specific components
│   │   ├── DataSummaryCards.jsx
│   │   ├── TrendSparklines.jsx
│   │   ├── CategoryPieChart.jsx
│   │   ├── RevenueChart.jsx
│   │   ├── ExpenseChart.jsx
│   │   └── CustomerGrowthChart.jsx
│   ├── ui/                    # Reusable UI components
│   │   ├── Button.jsx
│   │   ├── Modal.jsx
│   │   ├── Input.jsx
│   │   ├── Loading.jsx
│   │   ├── Toast.jsx
│   │   └── ErrorBoundary.jsx
│   ├── DataManager.jsx        # Data management hub
│   ├── TestRunner.jsx         # Testing interface
│   └── EnhancedDatePicker.jsx # Date selection component
├── pages/                     # Page-level components
│   ├── Dashboard.jsx
│   ├── Analytics.jsx
│   └── Settings.jsx
├── store/                     # State management
│   └── dataStore.js          # Main data store
├── utils/                     # Utility functions
│   ├── dataImporter.js       # Data import logic
│   ├── dataExporter.js       # Data export logic
│   ├── advancedAnalytics.js  # Analytics calculations
│   └── testSuite.js          # Testing utilities
├── entities/                  # Data models
│   ├── Customer.js
│   ├── Revenue.js
│   └── Expense.js
├── hooks/                     # Custom React hooks
│   ├── useLocalStorage.js
│   ├── useAnalytics.js
│   └── useDebounce.js
└── styles/                    # Global styles
    ├── globals.css
    └── components/

⚛️ Core Components

App.jsx - Main Application

// Application root component
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { ErrorBoundary } from './components/ui/ErrorBoundary';
import { DataStoreProvider } from './store/dataStore';
import { Toaster } from './components/ui/Toast';

function App() {
  return (
    <ErrorBoundary>
      <DataStoreProvider>
        <Router>
          <div className="min-h-screen bg-gray-50">
            <Routes>
              <Route path="/" element={<Dashboard />} />
              <Route path="/analytics" element={<Analytics />} />
              <Route path="/settings" element={<Settings />} />
            </Routes>
            <Toaster />
          </div>
        </Router>
      </DataStoreProvider>
    </ErrorBoundary>
  );
}

export default App;

Key Features:

• Router Integration: React Router for navigation
• Error Boundaries: Graceful error handling
• Global State: Context-based state management
• Toast Notifications: Global notification system

📊 Dashboard Components

DataSummaryCards.jsx

// 8 comprehensive business metric cards
import { TrendingUp, TrendingDown, Users, DollarSign } from 'lucide-react';
import { useDataStore } from '../store/dataStore';
import { calculateGrowthPercentage, formatCurrency } from '../utils/formatters';

const DataSummaryCards = () => {
  const { revenues, expenses, customers } = useDataStore();
  
  const metrics = useMemo(() => ({
    totalRevenue: calculateTotalRevenue(revenues),
    totalExpenses: calculateTotalExpenses(expenses),
    netProfit: calculateNetProfit(revenues, expenses),
    totalCustomers: customers.length,
    avgTransactionValue: calculateAvgTransactionValue(revenues),
    avgCustomerValue: calculateAvgCustomerValue(customers),
    profitMargin: calculateProfitMargin(revenues, expenses),
    dataRange: calculateDataRange(revenues, expenses)
  }), [revenues, expenses, customers]);

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
      {Object.entries(metrics).map(([key, value]) => (
        <MetricCard key={key} metric={key} value={value} />
      ))}
    </div>
  );
};

Features:

• Real-time Calculations: Auto-updates when data changes
• Growth Indicators: Visual trend indicators
• Responsive Grid: Adapts to screen size
• Performance Optimized: Memoized calculations