Frontend Overview

Architecture

Frontend CLM dibangun dengan React 19 + TypeScript + Vite dan menggunakan shadcn/ui sebagai UI component library.

Directory Structure

frontend/
├── src/
│   ├── api/                    # API client modules
│   │   ├── auth.ts             # Authentication API
│   │   ├── logs.ts             # Log search API
│   │   ├── http.ts             # Core fetch wrapper
│   │   ├── service.ts          # Service management API
│   │   └── rbac.ts             # RBAC management API
│   ├── components/
│   │   ├── ui/                 # shadcn/ui primitives (46 components)
│   │   ├── sidebar.tsx         # Navigation sidebar
│   │   ├── header.tsx          # Top header
│   │   └── charts/            # Chart components
│   ├── data/
│   │   ├── roles.ts           # Role definitions
│   │   ├── compliance.ts      # Compliance data
│   │   └── sizing.ts          # Layout sizing
│   ├── hooks/                  # Custom React hooks
│   ├── lib/
│   │   ├── app-context.tsx     # Auth & tenant state
│   │   ├── utils.ts            # Utility functions
│   │   └── types.ts            # TypeScript types
│   ├── routes/                 # Page components
│   │   ├── login.tsx           # Login page
│   │   ├── index.tsx           # Dashboard
│   │   ├── search.tsx          # Log search
│   │   ├── sources.tsx         # Log sources
│   │   ├── alerting.tsx        # Alert management
│   │   ├── security.tsx        # Security monitoring
│   │   ├── compliance.tsx      # Compliance dashboard
│   │   ├── apm.tsx             # Application monitoring
│   │   ├── reporting.tsx       # Reports
│   │   ├── master-data.tsx     # Master data management
│   │   ├── architecture.tsx    # System architecture
│   │   └── infrastructure.tsx  # Infrastructure monitoring
│   ├── router.tsx              # React Router config
│   ├── app.tsx                 # Root app component
│   ├── main.tsx                # React root mount
│   ├── i18n.ts                 # Internationalization
│   └── styles.css              # Tailwind CSS styles
├── package.json
├── vite.config.ts
├── tsconfig.json
└── Dockerfile.prod

Key Files

File	Description
router.tsx	Route definitions dengan AuthGuard
app-context.tsx	Auth state, tenant management
http.ts	Core fetch wrapper dengan JWT injection
app.tsx	Root component (QueryClient, Auth, Router)
main.tsx	React mount point

Pages

Login Page (/login)

• Authentication form
• Keycloak integration
• JWT token storage

Dashboard (/)

• Pipeline status overview
• Data center monitoring
• Throughput metrics
• Log volume charts

Log Search (/search)

• Full-text log search
• Time range filtering
• Field-based filtering
• Paginated results
• Log histogram visualization

Log Sources (/sources)

• Docker container logs
• System logs
• Application logs
• Source configuration

Alerting (/alerting)

• Alert rules management
• Active alerts list
• Alert history
• Telegram notification setup

Security (/security)

• Wazuh alerts
• Security monitoring
• Threat detection
• Alert correlation

Compliance (/compliance)

• ISO 27001 compliance
• ISO 20022 compliance
• ISO 22301 compliance
• Audit trail

APM (/apm)

• Service map visualization
• Distributed tracing
• Service trace analysis

Reporting (/reporting)

• Report generation
• Data export
• Scheduled reports

Master Data (/master-data)

• Tenant management
• User management
• Role management
• Application management
• Permission management

Architecture (/architecture)

• System architecture view
• Component diagram
• Data flow diagram

Infrastructure (/infrastructure)

• Container metrics (cAdvisor)
• Host metrics (Node Exporter)
• Network monitoring
• Collector health

Component Library

shadcn/ui Components (46)

Frontend menggunakan shadcn/ui dengan style New York dan base color Slate:

Category	Components
Layout	Accordion, Aspect Ratio, Resizable Panel, Separator, Scroll Area
Forms	Button, Checkbox, Input, Label, Radio Group, Select, Slider, Switch, Textarea, Toggle, Toggle Group
Data Display	Avatar, Badge, Card, Table, Calendar
Feedback	Alert, Alert Dialog, Dialog, Drawer, Popover, Tooltip, Sonner (Toast)
Navigation	Breadcrumb, Command, Context Menu, Dropdown Menu, Menubar, Navigation Menu, Pagination, Tabs
Overlay	Collapsible, Hover Card

Custom Components

Component	Description
Sidebar	Navigation sidebar dengan role-based menu
Header	Top header dengan user info dan tenant selector
Charts	Recharts-based chart components
LogTable	Log search results table
AlertCard	Alert display card
ServiceMap	Service dependency visualization

State Management

AppContext

type AppState = {
  tenantId: string;
  setTenantId: (t: string) => void;
  roleId: RoleId;
  setRoleId: (r: RoleId) => void;
  isAuthed: boolean;
  setAuthed: (v: boolean) => void;
  userName: string;
  setUserName: (n: string) => void;
  userRoles: string[];
  setUserRoles: (r: string[]) => void;
  tenantIdClaim: string;
  setTenantIdClaim: (t: string) => void;
  tenantName: string;
  setTenantName: (n: string) => void;
};

localStorage Persistence

State disimpan di localStorage dengan key tssmartlog-state-v1:

// Restore on mount
useEffect(() => {
  const raw = localStorage.getItem(KEY);
  if (raw) {
    const s = JSON.parse(raw);
    if (s.tenantId) setTenantId(s.tenantId);
    if (s.roleId) setRoleId(s.roleId);
    if (typeof s.isAuthed === 'boolean') setAuthed(s.isAuthed);
  }
}, []);

// Persist on change
useEffect(() => {
  localStorage.setItem(KEY, JSON.stringify({
    tenantId, roleId, isAuthed, userName, userRoles
  }));
}, [tenantId, roleId, isAuthed, userName, userRoles]);

Next Steps

• Technology Stack - Detail tech stack
• Components - Component documentation
• Routing - Route configuration