Skip to content

RTL_AUDIT.md

Latest commit

 

History

History
512 lines (382 loc) · 15.4 KB

RTL_AUDIT.md

File metadata and controls

512 lines (382 loc) · 15.4 KB
Raw

URY POS React App - RTL (Right-to-Left) Compatibility Audit

Audit Date: 2026-03-26
Application: URY POS React App (/pos/src/)
Framework: React + TypeScript + Tailwind CSS

Executive Summary

The URY POS React app has significant RTL compatibility issues that will affect users in right-to-left language environments (Arabic, Hebrew, Persian, Urdu, etc.).

Issue Count by Category

Category Count Severity
Hardcoded directional spacing (ml-, mr-, pl-, pr-) 45 High
Absolute positioning (left-, right-, top-, bottom-) 28 High
Border directions (border-l, border-r) 12 Medium
Rounded corners (rounded-l, rounded-r, rounded-tl, etc.) 8 Medium
Space utilities (space-x-) 14 High
Fixed positioning 6 High
Icon margins 12 Medium
TOTAL 125 -

Critical Files (Most RTL Issues)

Rank File Issue Count
1 Header.tsx 12
2 LayoutView.tsx 18
3 OrderPanel.tsx 14
4 CustomerSelect.tsx 16
5 ProductDialog.tsx 15
6 Sidebar.tsx 10
7 Orders.tsx 11
8 Table.tsx 9
9 PaymentDialog.tsx 8
10 OrderStatusSidebar.tsx 7

Detailed Findings

1. Header.tsx

File: pos/src/components/Header.tsx

Line Issue Type Current Code Suggested Fix
110 Space utility space-x-3 space-x-3 rtl:space-x-reverse or use gap-3
135 Space utility space-x-4 space-x-4 rtl:space-x-reverse or use gap-4
141 Space utility space-x-2 space-x-2 rtl:space-x-reverse or use gap-2
152 Absolute position absolute right-0 absolute end-0
163 Icon margin mr-3 (Monitor icon) me-3
171 Icon margin mr-3 (RefreshCw icon) me-3
179 Icon margin mr-3 (LogOut icon) me-3

Migration Example:

// Before (LTR-only)
<Link to="/" className="flex items-center space-x-3">
<Button className="flex items-center space-x-2">
<Monitor className="w-4 h-4 mr-3" />

// After (RTL-compatible)
<Link to="/" className="flex items-center gap-3">
<Button className="flex items-center gap-2">
<Monitor className="w-4 h-4 me-3" />

2. LayoutView.tsx

File: pos/src/components/LayoutView.tsx

Line Issue Type Current Code Suggested Fix
240 Inline style left left: table.x Add rtl transform logic or use CSS logical properties
272 Absolute position absolute -top-1 -right-1 absolute -top-1 -end-1
369 Absolute position absolute top-4 left-4 absolute top-4 start-4
397 Absolute position absolute bottom-4 right-4 absolute bottom-4 end-4
443 Absolute + Border absolute right-0 ... border-l absolute end-0 ... border-s
520 Margin left ml-1 (X position) ms-1
524 Margin left ml-1 (Y position) ms-1
535 Margin left ml-1 (Width) ms-1
539 Margin left ml-1 (Height) ms-1

Note: The table positioning with left: table.x is a canvas-based coordinate system. For true RTL support, you'd need to either:

  1. Mirror the entire canvas coordinate system for RTL
  2. Transform X coordinates: x = rtl ? canvasWidth - x - tableWidth : x

3. Sidebar.tsx

File: pos/src/components/Sidebar.tsx

Line Issue Type Current Code Suggested Fix
36 Border right border-r border-gray-200 border-e border-gray-200
61 Absolute + Rounded absolute left-0 ... rounded-r-full absolute start-0 ... rounded-e-full
64 Margin left ml-1 ms-1
96 Absolute + Rounded absolute left-0 ... rounded-r-full absolute start-0 ... rounded-e-full
98 Margin left ml-1 ms-1

Migration Example:

// Before
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-6 bg-blue-600 rounded-r-full" />
<div className="flex items-center gap-3 ml-1">

// After
<div className="absolute start-0 top-1/2 -translate-y-1/2 w-1 h-6 bg-blue-600 rounded-e-full" />
<div className="flex items-center gap-3 ms-1">

4. OrderPanel.tsx

File: pos/src/components/OrderPanel.tsx

Line Issue Type Current Code Suggested Fix
182 Fixed + Border fixed right-0 ... border-l fixed end-0 ... border-s
219 Space utility space-x-2 gap-2
230 Space utility space-x-2 gap-2
314 Icon margin mr-2 (Loader2 icon) me-2

5. CustomerSelect.tsx

File: pos/src/components/CustomerSelect.tsx

Line Issue Type Current Code Suggested Fix
146 Padding left pl-10 ps-10
149 Absolute position absolute left-3 absolute start-3
200 Icon margin mr-2 (Loader icon) me-2
341 Absolute position absolute right-3 absolute end-3
363 Text align text-left text-start
374 Margin left ml-auto ms-auto

6. PaymentDialog.tsx

File: pos/src/components/PaymentDialog.tsx

Line Issue Type Current Code Suggested Fix
152 Border md:border-b-0 md:border-r md:border-b-0 md:border-e
223 Icon margin ml-1 (Coins icon) me-1
224 Text margin ml-1 ms-1

7. ProductDialog.tsx

File: pos/src/components/ProductDialog.tsx

Line Issue Type Current Code Suggested Fix
322 Border radius md:rounded-l-lg md:rounded-tr-none md:rounded-s-lg md:rounded-te-none
330 Border radius md:rounded-l-lg md:rounded-tr-none md:rounded-s-lg md:rounded-te-none
345 Absolute position absolute top-4 right-4 absolute top-4 end-4
370 Space utility space-x-2 gap-2
433 Border md:border-l md:border-s

8. SearchBar.tsx

File: pos/src/components/SearchBar.tsx

Line Issue Type Current Code Suggested Fix
60 Padding px-[12px] px-3 (or ps-3 pe-3)
73 Absolute position absolute right-2 absolute end-2

9. POSOpeningDialog.tsx

File: pos/src/components/POSOpeningDialog.tsx

Line Issue Type Current Code Suggested Fix
52 Icon margin mr-2 (RefreshCw icon) me-2
61 Icon margin mr-2 (Monitor icon) me-2

10. AggregatorSelect.tsx

File: pos/src/components/AggregatorSelect.tsx

Line Issue Type Current Code Suggested Fix
47 Icon margin ml-2 (ChevronDown icon) me-2

11. OrderStatusSidebar.tsx

File: pos/src/components/OrderStatusSidebar.tsx

Line Issue Type Current Code Suggested Fix
26 Border border-r border-e
53 Absolute + Rounded absolute left-0 ... rounded-r-full absolute start-0 ... rounded-e-full
55 Margin left ml-1 ms-1

12. Spotlight.tsx

File: pos/src/components/Spotlight.tsx

Line Issue Type Current Code Suggested Fix
66 Icon margin mr-3 (Search icon) me-3
80 Margin left ml-3 ms-3
101 Image margin mr-4 me-4
103 Text align text-left text-start

13. ScreenSizeDialog.tsx

File: pos/src/components/ScreenSizeDialog.tsx

Line Issue Type Current Code Suggested Fix
19 Absolute position absolute -top-1 -right-1 absolute -top-1 -end-1

14. Table.tsx (Page)

File: pos/src/pages/Table.tsx

Line Issue Type Current Code Suggested Fix
261 Margin left ml-2 (Badge) ms-2
323 Icon spacing Implicit flex gap Ensure gap-2 with flex-row-reverse consideration

15. Orders.tsx (Page)

File: pos/src/pages/Orders.tsx

Line Issue Type Current Code Suggested Fix
210 Fixed padding pr-96 Add rtl:pl-96 rtl:pr-0 or use CSS logical property
241 Margin left ml-2 (Badge) ms-2
336 Icon/Text margin Implicit Check gap usage
482 Margin left ml-auto ms-auto

16. POS.tsx (Page)

File: pos/src/pages/POS.tsx

Line Issue Type Current Code Suggested Fix
125 Fixed padding pr-96 Add rtl:pl-96 rtl:pr-0

17. UI Components

select.tsx

Line Issue Type Current Code Suggested Fix
47 Icon margin ml-2 (ChevronDown) me-2

dialog.tsx

Line Issue Type Current Code Suggested Fix
111 Absolute position absolute top-4 right-4 absolute top-4 end-4
142 Space utility sm:space-x-2 sm:gap-2 or sm:space-x-2 rtl:sm:space-x-reverse

toast.tsx

Line Issue Type Current Code Suggested Fix
10 CSS margin margin-right: 12px Use logical margin or RTL-aware CSS
78 CSS margin margin-left: 12px Use logical margin

toast.css

/* Before */
.Toastify__toast-icon {
  margin-right: 12px !important;
}
.Toastify__close-button {
  margin-left: 12px !important;
}

/* After - using logical properties */
.Toastify__toast-icon {
  margin-inline-end: 12px !important;
}
.Toastify__close-button {
  margin-inline-start: 12px !important;
}

Migration Strategy

Phase 1: Quick Wins (High Impact, Low Risk)

  1. Replace margin/padding utilities:

    • ml-* → ms-* (margin-start)
    • mr-* → me-* (margin-end)
    • pl-* → ps-* (padding-start)
    • pr-* → pe-* (padding-end)

  2. Replace border utilities:

    • border-l-* → border-s-* (border-start)
    • border-r-* → border-e-* (border-end)

  3. Replace rounded corner utilities:

    • rounded-l-* → rounded-s-* (rounded-start)
    • rounded-r-* → rounded-e-* (rounded-end)
    • rounded-tl-* → rounded-ts-* (rounded-top-start)
    • rounded-tr-* → rounded-te-* (rounded-top-end)
    • rounded-bl-* → rounded-bs-* (rounded-bottom-start)
    • rounded-br-* → rounded-be-* (rounded-bottom-end)

  4. Replace absolute positioning:

    • left-* → start-*
    • right-* → end-*
    • inset-x-* → inset-inline-*

Phase 2: Layout Adjustments

  1. Replace space-x-* with gap-*:

    // Before
<div className="flex items-center space-x-4">

// After
<div className="flex items-center gap-4">

  2. Update fixed positioning:

    // Before
<div className="fixed right-0 pr-96">

// After
<div className="fixed end-0 pr-96 rtl:pl-96 rtl:pr-0">

  3. Update text alignment:

    // Before
<div className="text-left">

// After
<div className="text-start">

Phase 3: Complex Components

  1. LayoutView Canvas:

    • Implement RTL coordinate transformation
    • Mirror X coordinates when in RTL mode
    • Consider using a CSS transform on the canvas container

  2. Sidebar/Panel positioning:

    • Consider flipping the entire layout for RTL
    • Sidebar should be on the right in RTL mode
    • Order panel should be on the left in RTL mode

Phase 4: CSS Configuration

  1. Update Tailwind config (if using Tailwind CSS v3.3+):

    // tailwind.config.js
module.exports = {
  // ...existing config
  corePlugins: {
   // Enable logical properties
  }
}

  2. Add RTL variant support:

    // tailwind.config.js
module.exports = {
  variants: {
    extend: {
      margin: ['rtl'],
      padding: ['rtl'],
      borderRadius: ['rtl'],
      // ...
    }
  }
}

  3. Install RTL plugin (optional):

    npm install tailwindcss-rtl
# or
npm install postcss-rtlcss

Phase 5: Testing

  1. Enable RTL in HTML:

    <html dir="rtl" lang="ar">

  2. Test scenarios:

    • Menu navigation
    • Order creation flow
    • Table layout view
    • Payment dialog
    • All form inputs
    • Dropdown menus
    • Toast notifications

Quick Reference: Tailwind Logical Properties

LTR Property RTL Equivalent Logical Property
ml-4 mr-4 (in RTL) ms-4
mr-4 ml-4 (in RTL) me-4
pl-4 pr-4 (in RTL) ps-4
pr-4 pl-4 (in RTL) pe-4
left-4 right-4 (in RTL) start-4
right-4 left-4 (in RTL) end-4
border-l border-r (in RTL) border-s
border-r border-l (in RTL) border-e
rounded-l rounded-r (in RTL) rounded-s
rounded-r rounded-l (in RTL) rounded-e
text-left text-right (in RTL) text-start
text-right text-left (in RTL) text-end

Files Requiring Updates (Priority Order)

High Priority (Core UI)

  1. Header.tsx - User menu, navigation
  2. Sidebar.tsx - Navigation sidebar
  3. OrderPanel.tsx - Order cart panel
  4. OrderStatusSidebar.tsx - Order filters

High Priority (Dialogs)

  1. PaymentDialog.tsx - Payment processing
  2. ProductDialog.tsx - Product customization
  3. CustomerSelect.tsx - Customer search/selection
  4. TableSelectionDialog.tsx - Table selection

Medium Priority (Pages)

  1. LayoutView.tsx - Table layout (complex canvas)
  2. Table.tsx - Table management
  3. Orders.tsx - Order list
  4. POS.tsx - Main POS page

Low Priority (Utilities)

  1. SearchBar.tsx - Search component
  2. Spotlight.tsx - Search spotlight (currently unused)
  3. ScreenSizeDialog.tsx - Screen size warning
  4. POSOpeningDialog.tsx - POS opening dialog
  5. UI components in components/ui/

Notes

  1. Canvas/LayoutView RTL: The table layout canvas uses absolute positioning with X/Y coordinates. True RTL support would require either:

    • Mirroring the entire canvas with CSS transform: scaleX(-1)
    • Calculating mirrored coordinates: x' = canvasWidth - x - tableWidth

  2. Fixed Panels: The order panel (fixed right-0) and sidebar positioning should flip in RTL mode. Consider using CSS Grid or Flexbox with dir attribute for automatic flipping.

  3. Icon Directionality: Some icons (arrows, chevrons) may need to be mirrored in RTL. Consider using:

    • rtl:rotate-180 for directional arrows
    • Mirror icons programmatically based on direction

  4. Number Formatting: Ensure numbers (prices, quantities) are formatted correctly for RTL locales (Arabic-Indic digits vs Eastern Arabic digits).

  5. Date/Time Formatting: Ensure dates are formatted correctly for the locale.

Recommended Next Steps

  1. Immediate: Add dir="rtl" to the HTML element and test to identify visual issues
  2. Short-term: Replace all ml-/mr- with ms-/me- utilities
  3. Medium-term: Update all border and rounded corner utilities
  4. Long-term: Implement proper RTL canvas support for LayoutView

End of Audit Report