Arsitektur Frontend Apache Fineract

Ringkasan Eksekutif

Apache Fineract mengadopsi pendekatan API-First dalam arsitektur frontendnya, di mana seluruh interface pengguna dibangun di atas RESTful API yang disediakan oleh backend. Arsitektur ini memungkinkan berbagai jenis frontend (web, mobile, third-party applications) untuk berinteraksi dengan sistem menggunakan interface yang konsisten dan dapat diandalkan.

Pendekatan Arsitektur Frontend

1. API-First Architecture

Fineract mengimplementasikan API-first architecture di mana:

• Backend mengutamakan RESTful APIs sebagai primary interface
• Frontend berkomunikasi exclusively melalui API yang well-defined
• Multiple frontend applications dapat menggunakan API yang sama
• Separation of concerns antara presentation logic dan business logic

2. Technology Stack Frontend

Frontend Technologies yang Direkomendasikan:

Teknologi	Versi	Penggunaan	Kelebihan
React	18+	Modern web applications	Component-based, ecosystem besar
Angular	15+	Enterprise web applications	TypeScript, dependency injection
Vue.js	3+	Progressive web applications	Gentle learning curve, flexibility
React Native	0.72+	Mobile applications	Cross-platform, code sharing
Flutter	3.0+	Mobile applications	High performance, single codebase
Ionic	7+	Hybrid mobile applications	Web technologies, native features

Arsitektur Frontend Applications

1. Admin Dashboard Application

Tujuan dan Fitur:

• Staff operations untuk MFI staff
• Complete system administration capabilities
• Complex financial operations management
• Reporting dan analytics interface

Struktur Implementasi:

// Admin Dashboard Architecture
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { AuthProvider } from './contexts/AuthContext';

function App() {
  return (
    <AuthProvider>
      <BrowserRouter>
        <div className="admin-dashboard">
          <Routes>
            <Route path="/dashboard" element={<Dashboard />} />
            <Route path="/clients" element={<ClientManagement />} />
            <Route path="/loans" element={<LoanManagement />} />
            <Route path="/savings" element={<SavingsManagement />} />
            <Route path="/reports" element={<Reports />} />
            <Route path="/settings" element={<Settings />} />
          </Routes>
        </div>
      </BrowserRouter>
    </AuthProvider>
  );
}

// Modular Components Structure
src/
├── components/
│   ├── common/           # Shared UI components
│   ├── forms/            # Form components
│   ├── tables/           # Data table components
│   └── charts/           # Analytics components
├── pages/
│   ├── Dashboard/
│   ├── Clients/
│   ├── Loans/
│   ├── Savings/
│   └── Reports/
├── services/
│   ├── api/              # API service layer
│   ├── auth/             # Authentication services
│   └── reporting/        # Reporting services
└── contexts/             # React contexts

API Integration Pattern:

// API Service Layer
class ClientService {
  constructor(apiClient) {
    this.apiClient = apiClient;
  }

  async getClients(filters) {
    const response = await this.apiClient.get('/clients', { params: filters });
    return response.data;
  }

  async createClient(clientData) {
    const response = await this.apiClient.post('/clients', clientData);
    return response.data;
  }

  async updateClient(id, updateData) {
    const response = await this.apiClient.put(`/clients/${id}`, updateData);
    return response.data;
  }

  async deleteClient(id) {
    await this.apiClient.delete(`/clients/${id}`);
  }
}

// Hooks for State Management
import { useState, useEffect } from 'react';
import { ClientService } from '../services/ClientService';

export function useClients(filters = {}) {
  const [clients, setClients] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const clientService = new ClientService(apiClient);
    
    clientService.getClients(filters)
      .then(setClients)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [filters]);

  return { clients, loading, error };
}

2. Self-Service Portal Application

Tujuan dan Fitur:

• Customer-facing interface untuk clients
• Self-service operations (loan applications, account inquiries)
• Mobile-optimized design untuk accessibility
• Reduced staff workload through automation

Implementasi:

// Self-Service Portal Architecture
import React, { useState, useEffect } from 'react';
import { AuthenticatedRoute } from './components/Auth/AuthenticatedRoute';

function SelfServiceApp() {
  const [user, setUser] = useState(null);
  const [tenant, setTenant] = useState(null);

  useEffect(() => {
    // Initialize tenant context
    initializeTenant();
  }, []);

  return (
    <TenantProvider tenant={tenant}>
      <AuthProvider user={user}>
        <div className="self-service-portal">
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/login" element={<LoginPage />} />
            <Route path="/register" element={<RegistrationPage />} />
            
            <Route path="/dashboard" element={
              <AuthenticatedRoute>
                <CustomerDashboard />
              </AuthenticatedRoute>
            } />
            
            <Route path="/loans" element={
              <AuthenticatedRoute>
                <LoanManagement />
              </AuthenticatedRoute>
            } />
            
            <Route path="/savings" element={
              <AuthenticatedRoute>
                <SavingsManagement />
              </AuthenticatedRoute>
            } />
            
            <Route path="/profile" element={
              <AuthenticatedRoute>
                <ProfileManagement />
              </AuthenticatedRoute>
            } />
          </Routes>
        </div>
      </AuthProvider>
    </TenantProvider>
  );
}

// Self-Service Features
const SelfServiceFeatures = {
  loanApplications: {
    components: ['LoanProductSelector', 'ApplicationForm', 'DocumentUpload', 'ReviewStep'],
    apiEndpoints: ['/api/v1/self/loans/applications', '/api/v1/self/documents']
  },
  
  accountInquiries: {
    components: ['AccountSummary', 'TransactionHistory', 'StatementDownload'],
    apiEndpoints: ['/api/v1/self/accounts', '/api/v1/self/transactions']
  },
  
  payments: {
    components: ['PaymentMethods', 'PaymentForm', 'ConfirmationStep'],
    apiEndpoints: ['/api/v1/self/payments', '/api/v1/self/payment-methods']
  }
};

User Interface Components

1. Common UI Components

Form Components:

// Reusable Form Components
import React from 'react';

export const ClientForm = ({ client, onSubmit, onCancel }) => {
  const [formData, setFormData] = useState(client || {});
  const [errors, setErrors] = useState({});

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await validateForm(formData);
      await onSubmit(formData);
    } catch (error) {
      setErrors(error.errors);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="client-form">
      <TextInput
        label="First Name"
        value={formData.firstName}
        onChange={(value) => updateFormData('firstName', value)}
        error={errors.firstName}
        required
      />
      
      <TextInput
        label="Last Name"
        value={formData.lastName}
        onChange={(value) => updateFormData('lastName', value)}
        error={errors.lastName}
        required
      />
      
      <EmailInput
        label="Email"
        value={formData.email}
        onChange={(value) => updateFormData('email', value)}
        error={errors.email}
      />
      
      <DateInput
        label="Date of Birth"
        value={formData.dateOfBirth}
        onChange={(value) => updateFormData('dateOfBirth', value)}
        error={errors.dateOfBirth}
      />
      
      <div className="form-actions">
        <Button type="submit" variant="primary">Save</Button>
        <Button type="button" onClick={onCancel}>Cancel</Button>
      </div>
    </form>
  );
};

Data Table Components:

// Advanced Data Table Component
export const DataTable = ({ 
  data, 
  columns, 
  pagination, 
  filtering, 
  sorting,
  onRowClick,
  loading 
}) => {
  const [currentPage, setCurrentPage] = useState(1);
  const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });
  const [filters, setFilters] = useState({});

  const sortedAndFilteredData = useMemo(() => {
    let result = [...data];
    
    // Apply filters
    Object.entries(filters).forEach(([key, value]) => {
      if (value) {
        result = result.filter(item => 
          item[key].toLowerCase().includes(value.toLowerCase())
        );
      }
    });
    
    // Apply sorting
    if (sortConfig.key) {
      result.sort((a, b) => {
        if (a[sortConfig.key] < b[sortConfig.key]) {
          return sortConfig.direction === 'asc' ? -1 : 1;
        }
        if (a[sortConfig.key] > b[sortConfig.key]) {
          return sortConfig.direction === 'asc' ? 1 : -1;
        }
        return 0;
      });
    }
    
    return result;
  }, [data, sortConfig, filters]);

  const paginatedData = useMemo(() => {
    const startIndex = (currentPage - 1) * pagination.pageSize;
    return sortedAndFilteredData.slice(startIndex, startIndex + pagination.pageSize);
  }, [sortedAndFilteredData, currentPage, pagination]);

  return (
    <div className="data-table">
      {filtering && (
        <TableFilters 
          columns={columns}
          filters={filters}
          onFilterChange={setFilters}
        />
      )}
      
      <div className="table-container">
        <table className="table">
          <thead>
            <tr>
              {columns.map(column => (
                <th 
                  key={column.key}
                  onClick={() => handleSort(column.key)}
                  className={sortConfig.key === column.key ? `sorted-${sortConfig.direction}` : ''}
                >
                  {column.label}
                  {sortConfig.key === column.key && (
                    <SortIcon direction={sortConfig.direction} />
                  )}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {loading ? (
              <tr>
                <td colSpan={columns.length} className="loading">
                  Loading...
                </td>
              </tr>
            ) : paginatedData.map((row, index) => (
              <tr 
                key={row.id || index} 
                onClick={() => onRowClick?.(row)}
                className={onRowClick ? 'clickable' : ''}
              >
                {columns.map(column => (
                  <td key={column.key}>
                    {column.render ? column.render(row[column.key], row) : row[column.key]}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      
      {pagination && (
        <TablePagination
          currentPage={currentPage}
          totalPages={Math.ceil(sortedAndFilteredData.length / pagination.pageSize)}
          onPageChange={setCurrentPage}
        />
      )}
    </div>
  );
};

2. Financial Dashboard Components

Loan Management Dashboard:

// Loan Dashboard Component
export const LoanDashboard = () => {
  const [loanMetrics, setLoanMetrics] = useState(null);
  const [recentLoans, setRecentLoans] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadDashboardData();
  }, []);

  const loadDashboardData = async () => {
    try {
      setLoading(true);
      const [metricsResponse, loansResponse] = await Promise.all([
        loanService.getMetrics(),
        loanService.getRecentLoans({ limit: 10 })
      ]);
      
      setLoanMetrics(metricsResponse.data);
      setRecentLoans(loansResponse.data);
    } catch (error) {
      console.error('Error loading dashboard data:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="loan-dashboard">
      <div className="dashboard-header">
        <h1>Loan Management</h1>
        <button className="btn-primary">New Loan Application</button>
      </div>
      
      <div className="metrics-grid">
        <MetricCard
          title="Active Loans"
          value={loanMetrics?.activeLoans}
          icon="loan"
          trend={loanMetrics?.loansTrend}
        />
        <MetricCard
          title="Outstanding Balance"
          value={loanMetrics?.outstandingBalance}
          format="currency"
          icon="balance"
        />
        <MetricCard
          title="Overdue Loans"
          value={loanMetrics?.overdueLoans}
          icon="warning"
          alert={loanMetrics?.overdueLoans > 0}
        />
        <MetricCard
          title="Interest Rate"
          value={loanMetrics?.averageInterestRate}
          format="percentage"
          icon="interest"
        />
      </div>
      
      <div className="dashboard-content">
        <div className="recent-loans-section">
          <h2>Recent Loan Activities</h2>
          <DataTable
            data={recentLoans}
            columns={[
              { key: 'accountNo', label: 'Account No' },
              { key: 'clientName', label: 'Client' },
              { key: 'principal', label: 'Principal', format: 'currency' },
              { key: 'status', label: 'Status', render: (status) => <StatusBadge status={status} /> },
              { key: 'disbursementDate', label: 'Disbursed', format: 'date' }
            ]}
            onRowClick={(loan) => navigate(`/loans/${loan.id}`)}
          />
        </div>
        
        <div className="charts-section">
          <LoanPortfolioChart />
          <LoanDisbursementChart />
        </div>
      </div>
    </div>
  );
};

State Management

1. Global State Architecture

// Redux Store Configuration (alternative: Zustand, Context API)
import { createSlice } from '@reduxjs/toolkit';

const clientSlice = createSlice({
  name: 'clients',
  initialState: {
    clients: [],
    currentClient: null,
    loading: false,
    error: null,
    filters: {},
    pagination: { page: 1, size: 20, total: 0 }
  },
  reducers: {
    setClients: (state, action) => {
      state.clients = action.payload;
    },
    setCurrentClient: (state, action) => {
      state.currentClient = action.payload;
    },
    setLoading: (state, action) => {
      state.loading = action.payload;
    },
    setError: (state, action) => {
      state.error = action.payload;
    },
    setFilters: (state, action) => {
      state.filters = { ...state.filters, ...action.payload };
    },
    setPagination: (state, action) => {
      state.pagination = { ...state.pagination, ...action.payload };
    }
  }
});

// Async Actions
export const fetchClients = createAsyncThunk(
  'clients/fetchClients',
  async (params, { dispatch, getState }) => {
    try {
      dispatch(setLoading(true));
      const response = await clientService.getClients(params);
      dispatch(setClients(response.data));
      dispatch(setPagination(response.pagination));
      return response;
    } catch (error) {
      dispatch(setError(error.message));
      throw error;
    } finally {
      dispatch(setLoading(false));
    }
  }
);

2. API State Management

// Custom Hook for API State Management
export function useApiState(apiCall, dependencies = []) {
  const [state, setState] = useState({
    data: null,
    loading: false,
    error: null,
    lastFetched: null
  });

  const fetch = useCallback(async (...args) => {
    try {
      setState(prev => ({ ...prev, loading: true, error: null }));
      const data = await apiCall(...args);
      setState(prev => ({
        ...prev,
        data,
        loading: false,
        lastFetched: new Date()
      }));
      return data;
    } catch (error) {
      setState(prev => ({
        ...prev,
        error: error.message,
        loading: false
      }));
      throw error;
    }
  }, dependencies);

  const refetch = useCallback(() => fetch(), [fetch]);

  return { ...state, fetch, refetch };
}

// Usage Example
function ClientList() {
  const { data: clients, loading, error, refetch } = useApiState(
    (filters) => clientService.getClients(filters),
    []
  );

  if (loading) return <LoadingSpinner />;
  if (error) return <ErrorMessage error={error} onRetry={refetch} />;

  return (
    <div className="client-list">
      {clients?.map(client => (
        <ClientCard key={client.id} client={client} />
      ))}
    </div>
  );
}

Authentication & Security

1. Frontend Authentication

// Authentication Context
const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [token, setToken] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Check for existing session
    const savedToken = localStorage.getItem('auth_token');
    if (savedToken) {
      validateToken(savedToken)
        .then(userData => {
          setToken(savedToken);
          setUser(userData);
        })
        .catch(() => {
          localStorage.removeItem('auth_token');
        })
        .finally(() => setLoading(false));
    } else {
      setLoading(false);
    }
  }, []);

  const login = async (credentials) => {
    try {
      const response = await authService.login(credentials);
      const { accessToken, userData } = response;
      
      setToken(accessToken);
      setUser(userData);
      localStorage.setItem('auth_token', accessToken);
      
      return userData;
    } catch (error) {
      throw error;
    }
  };

  const logout = () => {
    setUser(null);
    setToken(null);
    localStorage.removeItem('auth_token');
    authService.logout();
  };

  const value = {
    user,
    token,
    login,
    logout,
    isAuthenticated: !!user,
    hasPermission: (permission) => 
      user?.permissions?.includes(permission) || false
  };

  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
}

// Protected Route Component
export function ProtectedRoute({ children, requiredPermission }) {
  const { isAuthenticated, hasPermission } = useAuth();
  const location = useLocation();

  if (!isAuthenticated) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  if (requiredPermission && !hasPermission(requiredPermission)) {
    return <AccessDenied />;
  }

  return children;
}

2. Security Best Practices

// API Security
class SecureApiClient {
  constructor(baseURL, getAuthToken) {
    this.baseURL = baseURL;
    this.getAuthToken = getAuthToken;
    this.interceptors = this.setupInterceptors();
  }

  setupInterceptors() {
    // Request interceptor
    this.interceptors.request.use(
      (config) => {
        const token = this.getAuthToken();
        if (token) {
          config.headers.Authorization = `Bearer ${token}`;
        }
        
        // Add tenant header
        config.headers['X-Tenant-ID'] = this.getCurrentTenant();
        
        // Add request ID for tracing
        config.headers['X-Request-ID'] = this.generateRequestId();
        
        return config;
      },
      (error) => Promise.reject(error)
    );

    // Response interceptor
    this.interceptors.response.use(
      (response) => {
        // Log successful responses
        console.log(`API Success: ${response.config.method.toUpperCase()} ${response.config.url}`);
        return response;
      },
      (error) => {
        if (error.response?.status === 401) {
          // Token expired or invalid
          this.handleAuthenticationError();
        }
        
        if (error.response?.status === 403) {
          // Permission denied
          this.handleAuthorizationError();
        }
        
        return Promise.reject(this.normalizeError(error));
      }
    );
  }

  async get(url, config) {
    return this.interceptors.request.use(async (request) => {
      return this.client.get(url, { ...config, ...request });
    });
  }

  async post(url, data, config) {
    return this.client.post(url, data, { ...config, ...request });
  }

  // ... other HTTP methods
}

Mobile Responsiveness

1. Responsive Design Patterns

/* Mobile-First Responsive Design */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Tablet */
@media (min-width: 768px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Mobile Navigation */
.mobile-nav {
  display: block;
}

.desktop-nav {
  display: none;
}

@media (min-width: 768px) {
  .mobile-nav {
    display: none;
  }
  
  .desktop-nav {
    display: block;
  }
}

2. Touch-Optimized Components

// Touch-Optimized Form Components
export const TouchInput = ({ onTouchStart, onTouchMove, onTouchEnd, children }) => {
  const handleTouchStart = (e) => {
    e.preventDefault(); // Prevent zoom
    onTouchStart?.(e);
  };

  return (
    <div
      onTouchStart={handleTouchStart}
      onTouchMove={onTouchMove}
      onTouchEnd={onTouchEnd}
      className="touch-optimized"
    >
      {children}
    </div>
  );
};

// Swipe Navigation
export const SwipeNavigation = ({ children, onSwipeLeft, onSwipeRight }) => {
  const [touchStart, setTouchStart] = useState(null);
  const [touchEnd, setTouchEnd] = useState(null);

  const handleTouchStart = (e) => {
    setTouchEnd(null);
    setTouchStart(e.targetTouches[0].clientX);
  };

  const handleTouchMove = (e) => {
    setTouchEnd(e.targetTouches[0].clientX);
  };

  const handleTouchEnd = () => {
    if (!touchStart || !touchEnd) return;
    
    const distance = touchStart - touchEnd;
    const isLeftSwipe = distance > 50;
    const isRightSwipe = distance < -50;

    if (isLeftSwipe && onSwipeLeft) {
      onSwipeLeft();
    }
    if (isRightSwipe && onSwipeRight) {
      onSwipeRight();
    }
  };

  return (
    <div
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    >
      {children}
    </div>
  );
};

Performance Optimization

1. Code Splitting & Lazy Loading

// Route-based Code Splitting
import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./pages/Dashboard'));
const ClientManagement = lazy(() => import('./pages/ClientManagement'));
const LoanManagement = lazy(() => import('./pages/LoanManagement'));

function App() {
  return (
    <Router>
      <Suspense fallback={<PageLoader />}>
        <Routes>
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/clients" element={<ClientManagement />} />
          <Route path="/loans" element={<LoanManagement />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

// Component-based Lazy Loading
const LazyDataTable = lazy(() => 
  import('./components/DataTable')
    .then(module => ({ default: module.DataTable }))
);

export function OptimizedDataTable(props) {
  return (
    <Suspense fallback={<TableSkeleton />}>
      <LazyDataTable {...props} />
    </Suspense>
  );
}

2. Caching Strategies

// React Query for API Caching
import { QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from 'react-query/devtools';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5 minutes
      cacheTime: 10 * 60 * 1000, // 10 minutes
      retry: (failureCount, error) => {
        if (error.status === 404) return false;
        return failureCount < 3;
      },
      refetchOnWindowFocus: false,
    },
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* App components */}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

// Custom Hook dengan Caching
export function useClients(filters = {}, options = {}) {
  return useQuery({
    queryKey: ['clients', filters],
    queryFn: () => clientService.getClients(filters),
    ...options,
  });
}

Testing Strategy

1. Component Testing

// React Testing Library Example
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from 'react-query';
import ClientForm from './ClientForm';

const createWrapper = () => {
  const queryClient = new QueryClient({
    defaultOptions: { queries: { retry: false } }
  });
  
  return ({ children }) => (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  );
};

describe('ClientForm', () => {
  test('should render form fields', () => {
    render(<ClientForm />, { wrapper: createWrapper() });
    
    expect(screen.getByLabelText(/first name/i)).toBeInTheDocument();
    expect(screen.getByLabelText(/last name/i)).toBeInTheDocument();
    expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
  });

  test('should handle form submission', async () => {
    const mockOnSubmit = jest.fn();
    render(<ClientForm onSubmit={mockOnSubmit} />, { wrapper: createWrapper() });
    
    fireEvent.change(screen.getByLabelText(/first name/i), {
      target: { value: 'John' }
    });
    
    fireEvent.change(screen.getByLabelText(/last name/i), {
      target: { value: 'Doe' }
    });
    
    fireEvent.submit(screen.getByRole('form'));
    
    await waitFor(() => {
      expect(mockOnSubmit).toHaveBeenCalledWith({
        firstName: 'John',
        lastName: 'Doe'
      });
    });
  });
});

Deployment & Build Process

1. Build Configuration

// package.json scripts
{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:prod": "NODE_ENV=production npm run build",
    "build:staging": "NODE_ENV=staging npm run build",
    "analyze": "npm run build && npx source-map-explorer 'build/static/js/*.js'"
  }
}

// webpack.config.js customization
module.exports = {
  // Environment-specific configuration
  env: {
    DEVELOPMENT: process.env.NODE_ENV === 'development',
    PRODUCTION: process.env.NODE_ENV === 'production'
  },
  
  // API endpoint configuration
  new webpack.DefinePlugin({
    'process.env.REACT_APP_API_URL': JSON.stringify(process.env.REACT_APP_API_URL),
    'process.env.REACT_APP_TENANT': JSON.stringify(process.env.REACT_APP_TENANT),
    'process.env.REACT_APP_VERSION': JSON.stringify(process.env.npm_package_version)
  }),
  
  // Bundle optimization
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

2. Environment Configuration

// Environment Configuration
const environments = {
  development: {
    API_URL: 'http://localhost:8080/fineract-provider/api/v1',
    TENANT_ID: 'default',
    DEBUG: true,
    LOG_LEVEL: 'debug'
  },
  staging: {
    API_URL: 'https://staging-api.fineract.com/api/v1',
    TENANT_ID: 'default',
    DEBUG: false,
    LOG_LEVEL: 'info'
  },
  production: {
    API_URL: 'https://api.fineract.com/api/v1',
    TENANT_ID: process.env.TENANT_ID,
    DEBUG: false,
    LOG_LEVEL: 'error'
  }
};

export const config = environments[process.env.NODE_ENV] || environments.development;

Kesimpulan

Arsitektur frontend Apache Fineract dibangun di atas prinsip API-first yang memungkinkan:

Kelebihan Utama:

1. Technology Flexibility: Tidak terikat pada framework frontend tertentu
2. Consistent Interface: Uniform API untuk semua frontend applications
3. Scalability: Dapat mendukung multiple frontend applications
4. Maintainability: Separation of concerns antara frontend dan backend
5. Reusability: Backend APIs dapat digunakan oleh berbagai frontend

Best Practices yang Diterapkan:

1. Modular Architecture: Component-based design patterns
2. State Management: Centralized state management dengan proper data flow
3. Security: Comprehensive authentication dan authorization di frontend
4. Performance: Code splitting, caching, dan optimization strategies
5. Mobile-First: Responsive design dan mobile-optimized components
6. Testing: Comprehensive testing strategy untuk reliability

Implementation Guidelines:

1. API Service Layer: Clean separation antara API calls dan UI logic
2. Authentication Flow: Secure token management dan session handling
3. Error Handling: User-friendly error messages dan proper error boundaries
4. Accessibility: WCAG compliance dan inclusive design
5. Internationalization: Multi-language support preparation

Arsitektur ini memberikan fondasi yang solid untuk membangun user interfaces yang powerful, secure, dan user-friendly untuk platform mikrofians Apache Fineract.

---

Dokumentasi ini menjelaskan arsitektur frontend secara umum. Implementasi spesifik dapat bervariasi berdasarkan pilihan teknologi frontend dan requirements khusus organisasi.