Skip to content

Revert "Fix/standardize layout for i18n rtl support" #106

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
swafa-as merged 1 commit into from
Mar 30, 2026
Merged

Revert "Fix/standardize layout for i18n rtl support" #106

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
512 changes: 0 additions & 512 deletions RTL_AUDIT.md
View file
Open in desktop

This file was deleted.

483 changes: 0 additions & 483 deletions RTL_LAYOUT_AUDIT.md
View file
Open in desktop

This file was deleted.

8 changes: 4 additions & 4 deletions pos/src/components/CustomerSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ function NewCustomerForm({
className="pl-10"
aria-invalid={!!formError && !newCustomerPhone}
/>
<Phone className="absolute start-3 top-2.5 text-gray-400 w-5 h-5" />
<Phone className="absolute left-3 top-2.5 text-gray-400 w-5 h-5" />
</div>
{formError && !newCustomerPhone && (
<div className="text-xs text-red-500 mt-1">{t('customer.phone_required')}</div>
Expand Down Expand Up @@ -339,7 +339,7 @@ export function CustomerSelect({ disabled }: CustomerSelectProps) {
aria-label={t('customer.search_placeholder')}
autoComplete="off"
/>
<ChevronDown className="absolute end-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
<ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
</div>
{isOpen && (
<div className="absolute w-full mt-2 bg-white border border-gray-200 rounded-lg shadow-lg z-50 max-h-80 overflow-y-auto">
Expand All @@ -361,7 +361,7 @@ export function CustomerSelect({ disabled }: CustomerSelectProps) {
<button
key={customer.name}
type="button"
className={`w-full gap-2 px-4 py-2 text-start rounded-md text-gray-800 text-sm select-none transition-colors ${
className={`w-full gap-2 px-4 py-2 text-left rounded-md text-gray-800 text-sm select-none transition-colors ${
idx === highlightedIndex ? 'bg-primary-50 text-primary-700' : 'hover:bg-gray-50'
}`}
onMouseDown={() => {
Expand All @@ -372,7 +372,7 @@ export function CustomerSelect({ disabled }: CustomerSelectProps) {
onMouseEnter={() => setHighlightedIndex(idx)}
>
<div className="font-medium">{name}</div>
<div className="ms-auto text-xs text-gray-500">{phone}</div>
<div className="ml-auto text-xs text-gray-500">{phone}</div>
</button>
);
})}
Expand Down
8 changes: 4 additions & 4 deletions pos/src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ const Header = () => {
<div className="flex items-center justify-between h-16 px-6">
{/* Logo */}
<div className="flex items-center">
<Link to="/" className="flex items-center gap-3">
<Link to="/" className="flex items-center space-x-3">
<img
src="/assets/ury/pos/ury_pos.png"
alt="URY POS"
Expand All @@ -133,13 +133,13 @@ const Header = () => {
</div>

{/* Right side actions */}
<div className="flex items-center gap-4">
<div className="flex items-center space-x-4">
{/* User menu */}
<div className="relative" ref={userMenuRef}>
<Button
onClick={handleUserMenuToggle}
variant="ghost"
className="flex items-center gap-2 text-gray-600 hover:text-gray-900"
className="flex items-center space-x-2 text-gray-600 hover:text-gray-900"
>
<div className="w-8 h-8 bg-primary-500 rounded-full flex items-center justify-center">
<User className="w-4 h-4 text-white" />
Expand All @@ -150,7 +150,7 @@ const Header = () => {

{/* User dropdown */}
{showUserMenu && (
<div className="absolute end-0 mt-2 w-56 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
<div className="absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-lg border border-gray-200 z-50">
<div className="p-4 border-b border-gray-200">
<p className="text-sm font-medium text-gray-900">{user?.full_name || 'User'}</p>
<p className="text-sm text-gray-500">{user?.name || ''}</p>
Expand Down
6 changes: 3 additions & 3 deletions pos/src/components/OrderPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ const OrderPanel = () => {
const isInteractionDisabled = isOrderInteractionDisabled() || isSubmitting;

return (
<div className="w-96 bg-white border-s border-gray-200 flex flex-col h-[calc(100vh-4rem)] fixed end-0 z-10">
<div className="w-96 bg-white border-l border-gray-200 flex flex-col h-[calc(100vh-4rem)] fixed right-0 z-10">
<div className="p-4 border-b border-gray-200 flex-shrink-0">
<OrderTypeSelect disabled={isInteractionDisabled} />
<div className="mt-3"><CustomerSelect disabled={isInteractionDisabled} /></div>
Expand Down Expand Up @@ -217,7 +217,7 @@ const OrderPanel = () => {
<p className="text-gray-600 text-sm">{formatCurrency(calculateItemTotal(item))}</p>
</div>

<div className="flex items-center gap-2">
<div className="flex items-center space-x-2">
<Button
onClick={() => handleEdit(item)}
variant="ghost"
Expand All @@ -228,7 +228,7 @@ const OrderPanel = () => {
>
<Edit className="w-4 h-4" />
</Button>
<div className="flex items-center gap-2">
<div className="flex items-center space-x-2">
<Button
onClick={() => {
const newQuantity = Math.max(0, item.quantity - 1);
Expand Down
6 changes: 3 additions & 3 deletions pos/src/components/OrderStatusSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const OrderStatusSidebar = ({

return (
<div className={cn(
"w-64 bg-white border-e border-gray-200 h-full flex flex-col",
"w-64 bg-white border-r border-gray-200 h-full flex flex-col",
disabled && "opacity-50 pointer-events-none"
)}>
<nav className="flex-1 p-6 overflow-y-auto">
Expand All @@ -50,9 +50,9 @@ const OrderStatusSidebar = ({
>
{/* Active indicator bar */}
{selectedStatus === status.value && (
<div className="absolute start-0 top-1/2 -translate-y-1/2 w-1 h-6 bg-blue-600 rounded-e-full" />
<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 ms-1">
<div className="flex items-center gap-3 ml-1">
<FileText className="w-4 h-4 text-gray-500" />
<span>{status.label}</span>
</div>
Expand Down
6 changes: 3 additions & 3 deletions pos/src/components/PaymentDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ const PaymentDialog: React.FC<PaymentDialogProps> = ({
<Dialog open={true} onOpenChange={onClose}>
<DialogContent variant="xlarge" className="bg-white w-full max-w-4xl max-h-[90vh] flex flex-col md:flex-row p-0" showCloseButton={false}>
{/* Left Column - Discount and Payment Mode */}
<div className="md:w-1/2 p-6 border-b md:border-b-0 md:border-e border-gray-200 overflow-y-auto">
<div className="md:w-1/2 p-6 border-b md:border-b-0 md:border-r border-gray-200 overflow-y-auto">
<div className="flex justify-between items-center mb-6">
<h2 className="text-2xl font-bold text-gray-900">{t('payment.title')}</h2>
<Button
Expand Down Expand Up @@ -221,8 +221,8 @@ const PaymentDialog: React.FC<PaymentDialogProps> = ({
{formatCurrency(paymentsTotal)} / {formatCurrency(finalTotal)}
{paymentsTotal > finalTotal && (
<span className="text-yellow-700 font-semibold">
<Coins className="inline w-4 h-4 ms-1 text-yellow-500" />
<span className="text-yellow-500 font-bold ms-1">{formatCurrency(paymentsTotal - finalTotal)}</span>
<Coins className="inline w-4 h-4 ml-1 text-yellow-500" />
<span className="text-yellow-500 font-bold ml-1">{formatCurrency(paymentsTotal - finalTotal)}</span>
</span>
)}
</span>
Expand Down
16 changes: 8 additions & 8 deletions pos/src/components/ProductDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,30 +319,30 @@ const ProductDialog: React.FC<ProductDialogProps> = ({
<img
src={itemDoc.image}
alt={itemDoc.name}
className="w-full min-h-96 h-full object-cover rounded-t-lg md:rounded-s-lg md:rounded-te-none filter saturate-75 brightness-95"
className="w-full min-h-96 h-full object-cover rounded-t-lg md:rounded-l-lg md:rounded-tr-none filter saturate-75 brightness-95"
style={{ filter: 'saturate(0.7) brightness(0.95)' }}
onError={(e) => {
const target = e.target as HTMLImageElement;
target.style.display = 'none';
const parent = target.parentElement;
if (parent) {
const placeholder = document.createElement('div');
placeholder.className = 'w-full h-96 bg-gray-200 flex items-center justify-center text-[8rem] text-gray-400 font-medium rounded-t-lg md:rounded-s-lg md:rounded-te-none';
placeholder.className = 'w-full h-96 bg-gray-200 flex items-center justify-center text-[8rem] text-gray-400 font-medium rounded-t-lg md:rounded-l-lg md:rounded-tr-none';
placeholder.textContent = itemDoc.name.slice(0, 2).toUpperCase();
parent.insertBefore(placeholder, target);
}
}}
/>
) : (
<div className="w-full min-h-96 h-full bg-gray-200 flex items-center justify-center text-[8rem] text-gray-400 font-medium rounded-t-lg md:rounded-s-lg md:rounded-te-none">
<div className="w-full min-h-96 h-full bg-gray-200 flex items-center justify-center text-[8rem] text-gray-400 font-medium rounded-t-lg md:rounded-l-lg md:rounded-tr-none">
{itemDoc?.name.slice(0, 2).toUpperCase()}
</div>
)}
<Button
onClick={handleClose}
variant="outline"
size="icon"
className="absolute top-4 end-4 bg-white shadow-lg"
className="absolute top-4 right-4 bg-white shadow-lg"
>
<X className="w-5 h-5" />
</Button>
Expand All @@ -367,7 +367,7 @@ const ProductDialog: React.FC<ProductDialogProps> = ({

<div className="mt-6">
<h3 className="text-lg font-semibold mb-3">Quantity</h3>
<div className="flex items-center gap-2">
<div className="flex items-center space-x-2">
<Button
onClick={handleDecrement}
variant="outline"
Expand Down Expand Up @@ -412,7 +412,7 @@ const ProductDialog: React.FC<ProductDialogProps> = ({
key={variant.id}
onClick={() => handleVariantClick(variant.id)}
className={cn(
'p-2 rounded-lg border text-start w-full flex justify-between items-center',
'p-2 rounded-lg border text-left w-full flex justify-between items-center',
variant.id === itemDoc?.item
? 'border-blue-500 bg-blue-50'
: 'border-gray-200 hover:border-blue-200'
Expand All @@ -430,7 +430,7 @@ const ProductDialog: React.FC<ProductDialogProps> = ({


{/* Right Column - Add-ons and Order Button */}
<div className="h-auto md:w-1/3 p-6 border-t md:border-t-0 md:border-s border-gray-200 overflow-y-auto flex flex-col">
<div className="h-auto md:w-1/3 p-6 border-t md:border-t-0 md:border-l border-gray-200 overflow-y-auto flex flex-col">
<div className="overflow-y-auto mb-6">
{isAddonLoading ? (
<div className="mb-6 flex items-center justify-center text-gray-500">Loading add-ons...</div>
Expand All @@ -445,7 +445,7 @@ const ProductDialog: React.FC<ProductDialogProps> = ({
key={addon.id}
onClick={() => handleAddonToggle({ id: addon.id, name: addon.name, price: Number(addon.price) })}
className={cn(
'w-full p-3 rounded-lg border text-start',
'w-full p-3 rounded-lg border text-left',
selectedAddons.some(item => item.id === addon.id)
? 'border-blue-500 bg-blue-50'
: 'border-gray-200 hover:border-blue-200'
Expand Down
2 changes: 1 addition & 1 deletion pos/src/components/SearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export default function SearchBar({
onChange('');
}}
className={cn(
"absolute end-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-all duration-200 hover:scale-110 active:scale-90",
"absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-all duration-200 hover:scale-110 active:scale-90",
disabled && "opacity-50 cursor-not-allowed pointer-events-none"
)}
disabled={disabled}
Expand Down
10 changes: 5 additions & 5 deletions pos/src/components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const Sidebar = ({ disabled }: SidebarProps) => {

return (
<div className={cn(
"w-64 bg-white border-e border-gray-200 h-screen flex flex-col",
"w-64 bg-white border-r border-gray-200 h-screen flex flex-col",
disabled && "opacity-50 pointer-events-none"
)}>
{/* Categories List */}
Expand All @@ -58,10 +58,10 @@ const Sidebar = ({ disabled }: SidebarProps) => {
>
{/* Active indicator bar */}
{selectedCategory === '' && (
<div className="absolute start-0 top-1/2 -translate-y-1/2 w-1 h-6 bg-blue-600 rounded-e-full" />
<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 ms-1">
<div className="flex items-center gap-3 ml-1">
<Grid3X3 className="w-4 h-4 text-gray-500" />
<span>All Items</span>
</div>
Expand Down Expand Up @@ -93,9 +93,9 @@ const Sidebar = ({ disabled }: SidebarProps) => {
>
{/* Active indicator bar */}
{selectedCategory === category && (
<div className="absolute start-0 top-1/2 -translate-y-1/2 w-1 h-6 bg-blue-600 rounded-e-full" />
<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 ms-1">
<div className="flex items-center gap-3 ml-1">
<UtensilsCrossed className="w-4 h-4 text-gray-500 flex-shrink-0" />
<span className="text-start">{category}</span>
</div>
Expand Down
6 changes: 3 additions & 3 deletions pos/src/components/ui/dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
{showCloseButton && onClose && (
<button
onClick={onClose}
className="absolute top-4 end-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
className="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
>
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
Expand All @@ -127,7 +127,7 @@ const DialogHeader = React.forwardRef<
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex flex-col space-y-1.5 text-center sm:text-start p-6", className)}
className={cn("flex flex-col space-y-1.5 text-center sm:text-left p-6", className)}
{...props}
/>
))
Expand All @@ -139,7 +139,7 @@ const DialogFooter = React.forwardRef<
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2 p-6 pt-0", className)}
className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 p-6 pt-0", className)}
{...props}
/>
))
Expand Down
4 changes: 2 additions & 2 deletions pos/src/components/ui/toast.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
}

.Toastify__toast-icon {
margin-inline-end: 12px !important;
margin-right: 12px !important;
width: 20px !important;
}

Expand Down Expand Up @@ -75,7 +75,7 @@
.Toastify__close-button {
opacity: 0.8 !important;
padding: 0 !important;
margin-inline-start: 12px !important;
margin-left: 12px !important;
}

.Toastify__close-button:hover {
Expand Down
12 changes: 6 additions & 6 deletions pos/src/pages/Orders.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ export default function Orders() {
/>

{/* Middle Section - Order Cards */}
<div className="flex-1 flex flex-col h-screen overflow-hidden pe-96">
<div className="flex-1 flex flex-col h-screen overflow-hidden pr-96">
<div className="flex-1 overflow-y-auto bg-gray-50 p-4 pb-40">
{orderLoading ? (
<div className="flex items-center justify-center h-full">
Expand Down Expand Up @@ -239,7 +239,7 @@ export default function Orders() {
{order.restaurant_table ? `Table ${order.restaurant_table} • ` : ''}{order.order_type}
</p>
</div>
<Badge variant={getBadgeVariant(order.status)} className="ms-2">
<Badge variant={getBadgeVariant(order.status)} className="ml-2">
{order.status}
</Badge>
</div>
Expand Down Expand Up @@ -302,7 +302,7 @@ export default function Orders() {
</div>

{/* Right Section - Order Details */}
<div className="w-96 bg-white border-s border-gray-200 flex flex-col h-[calc(100vh-4rem)] fixed end-0 z-10">
<div className="w-96 bg-white border-l border-gray-200 flex flex-col h-[calc(100vh-4rem)] fixed right-0 z-10">
{!selectedOrder ? (
<div className="text-center h-full flex flex-col items-center justify-center text-gray-500 p-6">
<p className="text-lg font-medium mb-2">{t('order.select_to_view')}</p>
Expand Down Expand Up @@ -334,7 +334,7 @@ export default function Orders() {
disabled={editLoading}
>
<Pencil className="w-4 h-4" />
{editLoading && <span className="ms-2 text-xs">Loading...</span>}
{editLoading && <span className="ml-2 text-xs">Loading...</span>}
</button>
<button
type="button"
Expand Down Expand Up @@ -422,7 +422,7 @@ export default function Orders() {
<p className="text-sm font-medium text-gray-900">{item.item_name}</p>
<p className="text-xs text-gray-500">Qty: {item.qty}</p>
</div>
<div className="text-end">
<div className="text-right">
<p className="text-sm font-semibold text-gray-900">
{formatCurrency(item.amount)}
</p>
Expand Down Expand Up @@ -480,7 +480,7 @@ export default function Orders() {
</Button>
)}
{/* Total */}
<span className="ms-auto text-xl font-bold text-gray-900 whitespace-nowrap">
<span className="ml-auto text-xl font-bold text-gray-900 whitespace-nowrap">
{formatCurrency(selectedOrder.rounded_total)}
</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion pos/src/pages/POS.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ export default function POS() {
return (
<div className="flex flex-1 overflow-hidden">
<Sidebar disabled={isMenuInteractionDisabled()} />
<div className="flex-1 flex flex-col h-screen overflow-hidden pe-96">
<div className="flex-1 flex flex-col h-screen overflow-hidden pr-96">
<div className="p-4 bg-white border-b border-gray-200">
<div className="max-w-screen-xl mx-auto space-y-3">
<div className="flex items-center gap-2 overflow-x-auto overflow-y-hidden">
Expand Down
2 changes: 1 addition & 1 deletion pos/src/pages/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,7 @@ const TableView = () => {
>
{room.name}
{typeof roomCounts[room.name] === 'number' ? (
<Badge variant="outline" className="ms-2 bg-white/60">
<Badge variant="outline" className="ml-2 bg-white/60">
{roomCounts[room.name]}
</Badge>
) : null}
Expand Down
Loading