9. Reusable UI Components - Purplewells/WattWise GitHub Wiki

This document outlines reusable UI components used across the React + Bootstrap application. Each component should be modular, theme-aware, and follow accessibility best practices.

📦 Layout Components

Sidebar

  • Displays navigation links grouped by category
  • Highlights active route
  • Collapsible for mobile responsiveness

Topbar

  • Contains logo, search bar, notifications, and profile avatar menu
  • Shows logged-in user and quick actions

Footer

  • Displays version number, copyright
  • Optional: links to documentation and privacy policy

PageWrapper

  • Wraps content with proper spacing and padding
  • Optional: includes breadcrumb trail

🧑‍💻 Authentication Components

LoginForm

  • Email + password fields
  • Form validation + error feedback
  • Optional: reCAPTCHA or 2FA input

RegisterForm

  • New customer signup (optional)
  • Password confirmation + terms agreement

ForgotPasswordForm / ResetPasswordForm

  • Trigger password reset flow
  • Confirm reset via secure token

📋 Form Components

InputField

  • Labelled input with built-in validation and Bootstrap styling

SelectField

  • Dropdown with options fetched dynamically (e.g., Service Providers)

DatePicker

  • Select a single date or date range
  • Used for usage filters and reports

FormWrapper

  • Shared layout for consistent form design and submission logic

🔢 Data Display Components

DataTable

  • Reusable Bootstrap-styled table with:
    • Pagination
    • Sorting
    • Row actions (edit, delete, view)
    • Empty state fallback

MeterCard

  • Summarized info on a specific meter (status, battery, signal)
  • Visual indicators for alerts

AlertCard

  • Alert summary with icon, status, and quick action (resolve/view)

UserAvatar

  • Profile picture with fallback initials
  • Used in topbar and user dropdown

📊 Charts & Visualization

UsageChart

  • Line or bar chart showing kWh usage over time
  • Can toggle between meters or time ranges

TopUpChart

  • Pie chart or bar graph of top-up frequency/value by user or meter

🔔 Notification Components

NotificationBell

  • Displays unread alert count
  • Dropdown with latest system messages or alerts

ToastAlert

  • Temporary toast messages (success, error, info)

🧰 Utility Components

LoadingSpinner

  • Full-screen or inline spinner with Bootstrap styling

Modal

  • Reusable modal with customizable header, body, and footer
  • Used for delete confirmations, meter detail popups, etc.

ConfirmDialog

  • Prompt user for confirmation before critical actions

NoData

  • Placeholder UI when data is empty or filtered out

🧑‍🔧 Admin Components

UserManagementTable

  • Admin table for managing users with roles and actions

AuditLogViewer

  • Read-only component for browsing audit log entries

SettingsPanel

  • Admin-only settings grouped into tabs or accordions

🛠️ All components should be written in TypeScript, styled with Bootstrap 5, and unit tested using React Testing Library + Jest.

📁 Component Folder Structure Example

Components (Reusable UI Blocks)

Component Name Purpose
Navbar Top navigation bar with avatar, role switch, logout
Sidebar Role-based menu navigation
ProtectedRoute Route guard logic for role-based access
PageWrapper Common layout (e.g., page title, breadcrumb, padding)
MeterCard Compact meter info (ID, location, status, battery, signal)
AlertItem Render alert detail (icon, meter, type, status)
UsageChart Line/bar chart for power consumption
TopUpForm Credit recharge form
MaintenanceForm Engineer maintenance log submission
Table Generic paginated, sortable table
Modal Bootstrap modal wrapper
FormInput, FormSelect Form field abstractions
NotificationBadge Bell icon with count and dropdown
AvatarDropdown User avatar + profile/settings/logout dropdown
Breadcrumbs Dynamic breadcrumb based on route
EmptyState UI for when no data exists
  • 🌐 General Pages
Page Name Route Path Role(s)
Dashboard /dashboard All
My Meters /meters All
Alerts /alerts All
Profile /profile All
Notifications /preferences All

-- Admin Pages

Page Name Route Path
User Management /admin/users
Role Management /admin/roles
Meter Management /admin/meters
Service Providers /admin/service-providers
Assign Meters /admin/assign-meters
Top-Up Admin Panel /admin/topups
Reports /admin/reports
Audit Logs /admin/audit-log
System Settings /admin/settings

-- Engineer Pages

Page Name Route Path
Assigned Meters /engineer/meters
Maintenance Logs /engineer/logs
Firmware Management /engineer/firmware
Connectivity Status /engineer/connectivity

-- Customer Pages

Page Name Route Path
Usage History /usage
Top-Up /topup
Credit History /topup/history

-- Utility & Support Files

Artifact Description
types.d.ts Shared TypeScript types for API/models
api.ts Axios wrapper or fetch helper
auth.ts Auth login, register, and token logic
roleGuard.tsx Role-checking logic for route protection
prisma/schema.prisma Database model definitions (Prisma ORM)
services/* API call logic (e.g. MeterService.ts)
hooks/useAuth.ts Custom auth context hook
hooks/useRole.ts Custom role-checking hook
env.ts Environment variable config

-- Folder Structure (Recommended)

src/
├── components/
│   ├── layout/
│   ├── meters/
│   ├── alerts/
│   └── shared/
├── pages/
│   ├── dashboard/
│   ├── admin/
│   ├── engineer/
│   ├── customer/
│   └── profile/
├── services/
├── hooks/
├── types/
├── utils/
├── routes/
├── prisma/
└── App.tsx