brazil-swift-ops/UX_UI_RECOMMENDATIONS.md

UX/UI Recommendations & Control Panel Design

Generated: 2026-01-23
Focus: User Experience, Interface Design, Navigation, Control Panel Look & Feel

---

Executive Summary

The application has solid functionality but needs significant UX/UI polish. The Dashboard is currently a placeholder, navigation is basic, and user feedback mechanisms are not integrated. This document provides detailed recommendations for creating a professional, regulator-grade control panel interface.

Current UX Score: 6/10
Target UX Score: 9/10

---

1. CRITICAL UX GAPS

1.1 Dashboard Page - Empty Placeholder

Current State:

• ❌ Dashboard shows only a dashed border box
• ❌ No content, statistics, or information
• ❌ Charts.tsx component exists but not used

Impact: CRITICAL - Users see nothing useful on the main page

Required Implementation:

• Statistics cards (transactions, volume, reporting required)
• Recent activity feed
• Compliance status indicators
• Charts and visualizations
• Quick actions

Priority: IMMEDIATE (Week 1)

---

1.2 Toast Notification System - Not Integrated

Current State:

• ✅ Toast component exists (components/Toast.tsx)
• ✅ useToast hook exists (hooks/useToast.ts)
• ❌ NOT USED ANYWHERE in the application
• ❌ All errors go to console.error
• ❌ No user feedback for actions

Impact: HIGH - Users don't know if actions succeeded or failed

Required Actions:

• Integrate useToast in all pages
• Replace console.error with toast notifications
• Add success toasts for form submissions
• Add error toasts with user-friendly messages
• Add warning toasts for validation issues

Priority: IMMEDIATE (Week 1)

---

1.3 Navigation - Basic Implementation

Current State:

• ⚠️ Functional but minimal
• ❌ No icons on menu items
• ❌ No active state indicators
• ❌ No user menu/profile
• ❌ No notifications indicator
• ❌ No breadcrumbs
• ❌ No search functionality

Impact: MEDIUM - Navigation works but lacks polish

Priority: HIGH (Week 2-3)

---

2. CONTROL PANEL LOOK & FEEL

2.1 Header/App Bar Design

Current Implementation:

// Basic text-only navigation
<nav className="bg-white shadow-sm border-b">
  <h1>Brazil SWIFT Operations</h1>
  <Link>Dashboard</Link>
  <Link>Transactions</Link>
  // ...
</nav>

Recommended Design:

┌─────────────────────────────────────────────────────────────────────┐
│ [🏦 Logo] Brazil SWIFT Operations    │ Nav │ [🔔 3] [👤] [⚙] [❓] │
├─────────────────────────────────────────────────────────────────────┤
│ Dashboard │ Transactions │ Treasury │ Reports │ Audit │ Settings   │
│   (active)                                                           │
└─────────────────────────────────────────────────────────────────────┘

Implementation Details:

1. Logo Section:

   <div className="flex items-center space-x-3">
     <img src="/logo.svg" alt="Logo" className="h-8 w-8" />
     <h1 className="text-xl font-bold">Brazil SWIFT Operations</h1>
   </div>
   

2. Navigation with Icons:

   <Link to="/" className={cn(
     "flex items-center space-x-2 px-3 py-2 rounded-md",
     isActive && "bg-blue-50 text-blue-700 border-b-2 border-blue-600"
   )}>
     <DashboardIcon className="w-5 h-5" />
     <span>Dashboard</span>
   </Link>
   

3. User Actions Bar:

   <div className="flex items-center space-x-4">
     <NotificationBell count={3} />
     <UserMenu />
     <SettingsIcon />
     <HelpIcon />
   </div>
   

Components Needed:

• Logo component
• Icon components (React Icons or Heroicons)
• NotificationBell component
• UserMenu dropdown
• Active state styling

---

2.2 Sidebar Navigation (Optional for Large Screens)

Recommended Layout:

┌──────────┬────────────────────────────┐
│          │  Main Content Area          │
│ Sidebar  │                             │
│          │                             │
│ • Home   │                             │
│ • Trans  │                             │
│ • Treas  │                             │
│ • Report │                             │
│          │                             │
│ ──────── │                             │
│ • Audit  │                             │
│ • Settings│                            │
└──────────┴────────────────────────────┘

Features:

• Collapsible sidebar (hamburger menu)
• Grouped menu items
• Active state with left border
• Icons for each menu item
• Badge counts (e.g., "Transactions (5)")
• Keyboard shortcuts shown on hover

---

2.3 Breadcrumbs

Implementation:

<nav className="flex" aria-label="Breadcrumb">
  <ol className="flex items-center space-x-2">
    <li><Link to="/">Home</Link></li>
    <li>/</li>
    <li><Link to="/treasury">Treasury</Link></li>
    <li>/</li>
    <li className="text-gray-500">Account Details</li>
  </ol>
</nav>

Features:

• Show current location
• Clickable parent pages
• Current page in gray (non-clickable)
• Responsive (hide on mobile)

---

2.4 Global Search

Implementation:

// Keyboard shortcut: Cmd/Ctrl + K
<div className="relative">
  <SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2" />
  <input
    type="text"
    placeholder="Search transactions, accounts, reports... (Cmd+K)"
    className="w-full pl-10 pr-4 py-2 border rounded-md"
  />
</div>

Features:

• Search transactions by ID, customer, amount
• Search accounts
• Search reports
• Keyboard shortcut (Cmd/Ctrl + K)
• Recent searches
• Search suggestions/autocomplete

---

3. DASHBOARD PAGE DESIGN

3.1 Layout Structure

┌─────────────────────────────────────────────────────────────┐
│ Dashboard                    [📅 Date Range] [🔄] [📥 Export]│
├─────────────────────────────────────────────────────────────┤
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐      │
│ │ Total    │ │ Volume   │ │ Reporting│ │ Pending  │      │
│ │ Trans    │ │ (USD)    │ │ Required │ │ Approvals│      │
│ │   1,234  │ │ $5.2M    │ │    45    │ │    12    │      │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘      │
├─────────────────────────────────────────────────────────────┤
│ ┌──────────────────────┐ ┌──────────────────────┐         │
│ │ Transaction Volume   │ │ Status Distribution  │         │
│ │ [Line Chart]          │ │ [Pie Chart]          │         │
│ └──────────────────────┘ └──────────────────────┘         │
├─────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────────────┐   │
│ │ Recent Activity                                       │   │
│ │ ┌──────┬──────────┬──────────┬──────────┬─────────┐ │   │
│ │ │ Time │ ID       │ Amount   │ Status   │ Action  │ │   │
│ │ ├──────┼──────────┼──────────┼──────────┼─────────┤ │   │
│ │ │ 10:30│ TXN-123  │ $15,000  │ Allow    │ [View]  │ │   │
│ │ └──────┴──────────┴──────────┴──────────┴─────────┘ │   │
│ └──────────────────────────────────────────────────────┘   │
├─────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────────────┐   │
│ │ Compliance Status                                     │   │
│ │ ✅ BCB Reporting: Compliant                          │   │
│ │ ✅ AML Checks: Active                                │   │
│ │ ⚠️  FX Contracts: 2 expiring soon                    │   │
│ └──────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘

3.2 Statistics Cards Design

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <Card className="bg-white shadow-sm hover:shadow-md transition">
    <div className="flex items-center justify-between">
      <div>
        <p className="text-sm text-gray-600">Total Transactions</p>
        <p className="text-3xl font-bold text-gray-900">1,234</p>
        <p className="text-xs text-green-600 mt-1">↑ 12% from last month</p>
      </div>
      <div className="p-3 bg-blue-100 rounded-full">
        <TransactionIcon className="w-8 h-8 text-blue-600" />
      </div>
    </div>
  </Card>
  // ... more cards
</Card>

Features:

• Icon for each metric
• Trend indicators (↑/↓ with percentage)
• Hover effects
• Clickable to drill down
• Color-coded by type

---

3.3 Charts Integration

Current State:

• Charts.tsx exists with basic SVG charts
• Not used in Dashboard

Recommendation:

• Option 1: Enhance Charts.tsx with more features
• Option 2: Replace with Chart.js or Recharts

Chart.js Implementation Example:

import { Line } from 'react-chartjs-2';

<Line
  data={chartData}
  options={{
    responsive: true,
    plugins: {
      legend: { position: 'top' },
      tooltip: { enabled: true }
    },
    scales: {
      y: { beginAtZero: true }
    }
  }}
/>

Features Needed:

• Interactive tooltips
• Zoom and pan
• Export as image
• Real-time updates
• Responsive design

---

4. NAVIGATION ENHANCEMENTS

4.1 Active State Styling

Current:

<Link to="/transactions">Transactions</Link>
// No visual indication of active page

Recommended:

<Link
  to="/transactions"
  className={cn(
    "px-3 py-2 rounded-md transition",
    isActive
      ? "bg-blue-50 text-blue-700 border-b-2 border-blue-600 font-medium"
      : "text-gray-600 hover:text-gray-900 hover:bg-gray-50"
  )}
>
  <TransactionsIcon className="w-5 h-5 inline mr-2" />
  Transactions
</Link>

---

4.2 Menu Icons

Icon Library Recommendation:

• React Icons (comprehensive, tree-shakeable)
• Heroicons (Tailwind-friendly)
• Lucide React (modern, consistent)

Implementation:

import { 
  HomeIcon, 
  DocumentTextIcon, 
  BanknotesIcon,
  ChartBarIcon,
  ShieldCheckIcon
} from '@heroicons/react/24/outline';

<Link>
  <HomeIcon className="w-5 h-5" />
  Dashboard
</Link>

---

4.3 User Menu

Design:

┌─────────────────┐
│ 👤 John Doe     │
│ john@bank.com   │
├─────────────────┤
│ Profile         │
│ Preferences     │
│ Notifications   │
│ Help            │
├─────────────────┤
│ Logout          │
└─────────────────┘

Features:

• User avatar/initials
• User name and email
• Dropdown menu
• Logout option
• Profile link
• Settings link

---

4.4 Notifications System

Design:

┌─────────────────────────────┐
│ 🔔 Notifications (3)         │
├─────────────────────────────┤
│ ⚠️ Transaction TXN-123      │
│    requires approval         │
│    2 hours ago              │
├─────────────────────────────┤
│ ✅ Report generated          │
│    BCB_Report_2026-01-23    │
│    5 hours ago              │
├─────────────────────────────┤
│ [View All]                  │
└─────────────────────────────┘

Features:

• Badge count on bell icon
• Dropdown with recent notifications
• Mark as read
• Click to navigate to related item
• Notification types (success, warning, error, info)
• Auto-dismiss after read

---

5. FORM & INPUT IMPROVEMENTS

5.1 Input Field Enhancements

Current:

<input type="text" className="border rounded-md" />

Recommended:

<div className="relative">
  <label className="block text-sm font-medium text-gray-700 mb-1">
    Amount *
    <span className="text-gray-400 text-xs ml-1">(USD)</span>
  </label>
  <div className="relative">
    <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">
      $
    </span>
    <input
      type="number"
      className="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
      placeholder="0.00"
    />
  </div>
  {error && (
    <p className="mt-1 text-sm text-red-600 flex items-center">
      <ExclamationCircleIcon className="w-4 h-4 mr-1" />
      {error}
    </p>
  )}
  {helpText && (
    <p className="mt-1 text-xs text-gray-500">{helpText}</p>
  )}
</div>

Features:

• Input icons/prefixes
• Help text below inputs
• Error messages with icons
• Focus states
• Validation feedback
• Required field indicators

---

5.2 Form Layout Improvements

Current Issues:

• Forms are functional but basic
• No visual grouping
• No progress indicators
• No field dependencies

Recommendations:

1. Visual Grouping:

   <div className="space-y-6">
     <section className="border-b pb-6">
       <h3 className="text-lg font-semibold mb-4">Transaction Details</h3>
       {/* Fields */}
     </section>
     <section>
       <h3 className="text-lg font-semibold mb-4">Customer Information</h3>
       {/* Fields */}
     </section>
   </div>
   

2. Multi-Step Forms:

   <div className="mb-6">
     <div className="flex items-center">
       <StepIndicator step={1} current={2} total={3} />
       <StepIndicator step={2} current={2} total={3} />
       <StepIndicator step={3} current={2} total={3} />
     </div>
   </div>
   

3. Field Dependencies:

   {formData.direction === 'outbound' && (
     <FXContractSelector />
   )}
   

---

6. TABLE IMPROVEMENTS

6.1 Enhanced Table Features

Current:

• Basic table with data
• No sorting
• No filtering
• No pagination
• No row selection

Recommended Features:

1. Sorting:

   <th className="cursor-pointer hover:bg-gray-50" onClick={() => handleSort('amount')}>
     Amount
     {sortField === 'amount' && (
       <span>{sortDirection === 'asc' ? '↑' : '↓'}</span>
     )}
   </th>
   

2. Filtering:

   <div className="mb-4 flex gap-2">
     <input
       type="text"
       placeholder="Search..."
       className="border rounded-md px-3 py-2"
       onChange={(e) => setSearchTerm(e.target.value)}
     />
     <select onChange={(e) => setStatusFilter(e.target.value)}>
       <option value="">All Status</option>
       <option value="pending">Pending</option>
       {/* ... */}
     </select>
   </div>
   

3. Pagination:

   <div className="flex items-center justify-between mt-4">
     <p className="text-sm text-gray-600">
       Showing 1-10 of 100 transactions
     </p>
     <div className="flex gap-2">
       <button disabled={page === 1}>Previous</button>
       <span>Page {page} of {totalPages}</span>
       <button disabled={page === totalPages}>Next</button>
     </div>
   </div>
   

4. Row Selection:

   <td>
     <input
       type="checkbox"
       checked={selectedRows.includes(row.id)}
       onChange={() => toggleRow(row.id)}
     />
   </td>
   

5. Bulk Actions:

   {selectedRows.length > 0 && (
     <div className="bg-blue-50 border border-blue-200 p-4 rounded-md">
       <p>{selectedRows.length} items selected</p>
       <button>Export Selected</button>
       <button>Approve Selected</button>
     </div>
   )}
   

6. Column Visibility:

   <button onClick={() => setShowColumns(!showColumns)}>
     Columns
   </button>
   {showColumns && (
     <div className="absolute bg-white shadow-lg p-4">
       {columns.map(col => (
         <label>
           <input type="checkbox" checked={col.visible} />
           {col.label}
         </label>
       ))}
     </div>
   )}
   

---

7. MODAL & DIALOG IMPROVEMENTS

7.1 Modal Enhancements

Current:

• Basic modals exist
• No size variants
• No animations
• Basic styling

Recommended:

1. Size Variants:

   const sizes = {
     sm: 'max-w-md',
     md: 'max-w-lg',
     lg: 'max-w-2xl',
     xl: 'max-w-4xl',
     full: 'max-w-full'
   };
   

2. Animations:

   // Fade in backdrop
   <div className="fixed inset-0 bg-black bg-opacity-50 animate-fade-in">
     {/* Slide up modal */}
     <div className="animate-slide-up">
       {/* Content */}
     </div>
   </div>
   

3. Focus Trap:

   // Use focus-trap-react library
   <FocusTrap>
     <div className="modal">
       {/* Content */}
     </div>
   </FocusTrap>
   

4. Close on Escape:

   useEffect(() => {
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') onClose();
     };
     window.addEventListener('keydown', handleEscape);
     return () => window.removeEventListener('keydown', handleEscape);
   }, [onClose]);
   

---

8. LOADING STATES

8.1 Skeleton Loaders

Current:

• LoadingSpinner component exists
• Used in some places
• No skeleton loaders

Recommended:

Replace spinners with skeletons:

// Table skeleton
<div className="animate-pulse">
  {[1,2,3,4,5].map(i => (
    <div key={i} className="h-12 bg-gray-200 rounded mb-2" />
  ))}
</div>

// Card skeleton
<div className="animate-pulse">
  <div className="h-4 bg-gray-200 rounded w-1/4 mb-2" />
  <div className="h-8 bg-gray-200 rounded w-1/2" />
</div>

Benefits:

• Better perceived performance
• Users see structure while loading
• Less jarring than spinners

---

8.2 Progress Indicators

For Long Operations:

<div className="w-full bg-gray-200 rounded-full h-2">
  <div
    className="bg-blue-600 h-2 rounded-full transition-all"
    style={{ width: `${progress}%` }}
  />
</div>
<p className="text-sm text-gray-600 mt-1">
  Processing... {progress}% (Estimated time: {estimatedTime}s)
</p>

---

9. EMPTY STATES

9.1 Empty State Design

Current:

• Basic "No data" messages
• No illustrations
• No action buttons

Recommended:

<div className="text-center py-12">
  <img src="/empty-state.svg" alt="No transactions" className="mx-auto h-48" />
  <h3 className="mt-4 text-lg font-semibold text-gray-900">
    No transactions yet
  </h3>
  <p className="mt-2 text-sm text-gray-600">
    Get started by creating your first transaction
  </p>
  <button className="mt-4 bg-blue-600 text-white px-4 py-2 rounded-md">
    Create Transaction
  </button>
</div>

Features:

• Illustrations (SVG or images)
• Helpful messages
• Action buttons
• Examples or templates

---

10. ERROR STATES

10.1 Error Page Design

Current:

• ErrorBoundary exists
• Basic error display

Recommended:

<div className="min-h-screen flex items-center justify-center">
  <div className="text-center">
    <ExclamationTriangleIcon className="w-16 h-16 text-red-500 mx-auto" />
    <h2 className="mt-4 text-2xl font-bold">Something went wrong</h2>
    <p className="mt-2 text-gray-600">{errorMessage}</p>
    <div className="mt-6 space-x-4">
      <button onClick={retry}>Try Again</button>
      <button onClick={goHome}>Go Home</button>
      <button onClick={reportIssue}>Report Issue</button>
    </div>
    {errorCode && (
      <p className="mt-4 text-xs text-gray-500">
        Error Code: {errorCode}
      </p>
    )}
  </div>
</div>

---

11. COLOR SCHEME & BRANDING

11.1 Design Tokens

Recommended Color Palette:

/* Primary Colors */
--color-primary: #2563eb;      /* Blue-600 */
--color-primary-dark: #1d4ed8;  /* Blue-700 */
--color-primary-light: #3b82f6; /* Blue-500 */

/* Status Colors */
--color-success: #10b981;        /* Green-500 */
--color-warning: #f59e0b;        /* Amber-500 */
--color-error: #ef4444;          /* Red-500 */
--color-info: #3b82f6;           /* Blue-500 */

/* Neutral Colors */
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-900: #111827;

Typography Scale:

--font-size-xs: 0.75rem;    /* 12px */
--font-size-sm: 0.875rem;   /* 14px */
--font-size-base: 1rem;     /* 16px */
--font-size-lg: 1.125rem;   /* 18px */
--font-size-xl: 1.25rem;    /* 20px */
--font-size-2xl: 1.5rem;    /* 24px */
--font-size-3xl: 1.875rem;  /* 30px */

---

12. RESPONSIVE DESIGN

12.1 Mobile Optimization

Current Issues:

• Desktop-first design
• Tables may not be mobile-friendly
• Navigation may overflow on mobile

Recommendations:

1. Mobile Navigation:

   {/* Hamburger menu for mobile */}
   <button className="md:hidden" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
     <MenuIcon />
   </button>
   
   {/* Slide-out menu */}
   {mobileMenuOpen && (
     <div className="fixed inset-0 bg-black bg-opacity-50 z-50 md:hidden">
       <div className="bg-white w-64 h-full slide-in-left">
         {/* Menu items */}
       </div>
     </div>
   )}
   

2. Responsive Tables:

   {/* Desktop: Table */}
   <table className="hidden md:table">
     {/* Table content */}
   </table>
   
   {/* Mobile: Cards */}
   <div className="md:hidden space-y-4">
     {data.map(item => (
       <Card>
         {/* Card content */}
       </Card>
     ))}
   </div>
   

3. Touch-Friendly Buttons:

   <button className="min-h-[44px] min-w-[44px]">
     {/* Minimum touch target size */}
   </button>
   

---

13. ACCESSIBILITY

13.1 WCAG 2.1 Compliance

Recommendations:

1. ARIA Labels:

   <button aria-label="Close modal">
     <XIcon />
   </button>
   

2. Keyboard Navigation:

   • Tab order should be logical
   • All interactive elements should be keyboard accessible
   • Skip links for main content

3. Focus Indicators:

   *:focus-visible {
     outline: 2px solid var(--color-primary);
     outline-offset: 2px;
   }
   

4. Color Contrast:

   • Ensure WCAG AA compliance (4.5:1 for text)
   • Don't rely solely on color for information

5. Screen Reader Support:

   <div role="alert" aria-live="polite">
     {errorMessage}
   </div>
   

---

14. IMPLEMENTATION PRIORITY

Phase 1: Critical (Week 1)

1. ✅ Implement Dashboard page (2-3 days)
2. ✅ Integrate Toast notifications (1 day)
3. ✅ Add navigation icons and active states (1 day)

Phase 2: High Priority (Week 2-3)

4. Add user menu and profile section
5. Add notifications system
6. Enhance forms with better UX
7. Add table sorting/filtering

Phase 3: Polish (Week 4-5)

8. Create design system
9. Add skeleton loaders
10. Improve empty/error states
11. Add breadcrumbs
12. Add global search

Phase 4: Advanced (Week 6+)

13. Add keyboard shortcuts
14. Add dark mode (optional)
15. Add animations/transitions
16. Performance optimization

---

15. COMPONENT LIBRARY RECOMMENDATIONS

Recommended Libraries:

1. Icons:

   • react-icons or @heroicons/react
   • Comprehensive, tree-shakeable

2. Charts:

   • recharts (React-friendly)
   • chart.js with react-chartjs-2
   • Both are good choices

3. UI Components:

   • @headlessui/react (unstyled, accessible)
   • radix-ui (accessible primitives)
   • Or build custom with Tailwind

4. Form Handling:

   • react-hook-form (already could use)
   • zod for validation

5. Animations:

   • framer-motion (smooth animations)
   • Or CSS transitions

---

16. SPECIFIC PAGE RECOMMENDATIONS

16.1 Dashboard Page

Layout:

• 4-column statistics cards at top
• 2-column chart layout below
• Full-width recent activity table
• Compliance status section at bottom

Components Needed:

• StatCard component
• Chart components (enhance existing or replace)
• ActivityFeed component
• ComplianceStatus component

---

16.2 Transactions Page

Enhancements:

• Add search bar at top
• Add filters (date range, status, currency)
• Add bulk actions toolbar
• Add export button
• Add transaction templates dropdown
• Add batch upload button

---

16.3 Treasury Page

Enhancements:

• Add account hierarchy tree view
• Add transfer history table (not just modal)
• Add account search
• Add balance alerts configuration
• Add account reconciliation UI

---

16.4 Reports Page

Enhancements:

• Add report templates
• Add scheduled reports configuration
• Add report comparison view
• Add report sharing
• Add report preview before generation

---

17. QUICK WINS (This Week)

1. Implement Dashboard (2-3 days)

   • Use existing Charts.tsx
   • Add statistics cards
   • Add recent activity

2. Integrate Toasts (1 day)

   • Add to all form submissions
   • Replace console.error

3. Add Navigation Icons (1 day)

   • Install react-icons
   • Add icons to all menu items

4. Add Active State Styling (1 day)

   • Highlight current page
   • Add visual indicators

5. Add User Menu (1 day)

   • Dropdown with profile/logout
   • Place in header

Total: ~1 week of work

---

18. CONCLUSION

The application has solid functionality but needs significant UX polish. The most critical items are:

1. Dashboard implementation (currently empty)
2. Toast notification integration (exists but unused)
3. Navigation enhancements (icons, active states)
4. User menu/profile (missing)

With focused effort, these can be completed in 1-2 weeks, significantly improving the user experience.

Target: Professional, regulator-grade control panel interface that matches the quality of the backend functionality.

---

Document Version: 1.0
Last Updated: 2026-01-23