I18n and UI Patterns

Introduction

This document describes localization setup, shared UI components, alert/confirmation patterns, icons, and styling conventions in the Ravenxcope frontend.

---

I18n Setup

Localization is initialized in src/i18n.ts.

Resources:

Locale	File
English	src/locales/en.json
Indonesian	src/locales/id.json

Initialization behavior:

1. Read saved language from localStorage.language.
2. Default to en when no saved language exists.
3. Use en as fallback language.
4. Disable React suspense through react.useSuspense = false.
5. Persist language changes back to localStorage.language.

---

Language Switcher

The dashboard shell renders LanguageSwitcher from src/core/layout/LanguageSwitcher.tsx.

The language switcher uses useTranslation() and changes the active i18next language. Any route-level text using t(...) updates automatically.

---

Current Localization Coverage

Localized strings are used in:

• Login page.
• Dashboard shell navigation.
• Dashboard sensor summary.
• Sensor list actions and messages.
• Logout confirmation and messages.
• Language switcher.

Some management screens still use hard-coded English strings. When updating those screens, prefer adding keys to both en.json and id.json.

---

Shared UI Components

Shared UI primitives live in src/components/ui.

Component	Purpose
button.tsx	Button variants and sizes
card.tsx	Card layout primitives
dialog.tsx	Modal dialogs
alert-dialog.tsx	Alert dialog primitives
confirm-dialog.tsx	Global confirmation dialog helper
dropdown-menu.tsx	Menu/dropdown primitives
input.tsx	Text input
label.tsx	Form labels
select.tsx	Select/dropdown form control
sheet.tsx	Side sheet/mobile drawer
skeleton.tsx	Loading placeholders
sonner.tsx	Toast provider
table.tsx	Table primitives
tooltip.tsx	Tooltip primitives
badge.tsx	Status labels

Feature code should reuse these primitives before adding new local UI elements.

---

Alerts and Confirmations

There are two confirmation/alert patterns:

1. src/lib/alerts.ts wraps SweetAlert-style success, error, confirmation, and async helpers.
2. src/components/ui/confirm-dialog.tsx provides a global Radix-style confirmation dialog.

App.tsx mounts:

<Toaster />
<ConfirmDialog />

Use existing helpers consistently:

• Use showSuccess and showError for common feedback.
• Use showConfirm before destructive actions.
• Use toast from sonner for lightweight inline feature feedback.

---

Icons

The application primarily uses lucide-react for new feature icons. Some older layout data imports MUI icons.

Current practical convention:

• Use lucide-react for actions, navigation, analytics, and new UI work.
• Keep existing MUI icon usage unless refactoring the surrounding component.
• Prefer icon buttons or icon + text buttons for clear actions.

---

Styling

The frontend uses Tailwind CSS utilities with local CSS variables from src/index.css.

General conventions:

• Use shared UI primitives for base styling.
• Keep global layout in src/core/layout; route pages should use RoutePage.
• Put feature-specific sections in modules/<domain>/partials.
• Use DataTableCard for management table pages before adding a one-off card/table scaffold.
• Use responsive utility classes for table columns and mobile layouts.
• Use Skeleton for loading states in table/list pages.
• Use Badge for status and permission labels.

---

Data Display Patterns

Pattern	Current Usage
Card headers	Page title, description, and primary action
Tables	User, role, sensor, alert lists
Dialogs	Create/edit forms
Sheets	Mobile sidebar and analytics chat on smaller screens
Tooltips	Collapsed sidebar and action hints
Badges	Status, role permission count, health state
Skeletons	List loading placeholders
Toasts	Async operation feedback

---

Form Patterns

Forms are currently controlled with local useState, not React Hook Form.

Common form behavior:

• Prevent default browser submit.
• Validate required fields locally when needed.
• Disable controls while submitting.
• Call a typed api method.
• Show success/error feedback.
• Close dialog or navigate on success.
• Trigger parent refetch by toggling a state flag.

When adding new forms, match the surrounding feature style unless a broader form refactor is planned.