page wise astryx conversion completed

This commit is contained in:
2026-08-14 12:33:42 +05:30
parent 0daec5311d
commit cd079950eb
18 changed files with 1154 additions and 696 deletions

View File

@@ -772,8 +772,10 @@ export default function PosView({ locationid, tenantId = FIESTA_TENANT_ID }: Pos
{/* PAY keeps its own emerald face and full width: it is the one
control the whole screen exists to reach, and it is hit hundreds of
times a shift. Everything around it is Astryx; this stays a
deliberate exception, marked as one. */}
times a shift. Keeping that face never required keeping a raw
<button> — the classes ride on an Astryx Button unchanged. What it
gains is a name that says what is about to be charged: the visible
word stays "PAY", while a screen reader hears the amount. */}
<div className="flex gap-2 pos-pay-row">
<IconButton
label="Clear cart"
@@ -783,13 +785,16 @@ export default function PosView({ locationid, tenantId = FIESTA_TENANT_ID }: Pos
isDisabled={cart.length === 0}
onClick={clearCart}
/>
<button
<Button
label={grandTotal < 0 ? `Refund ₹${Math.abs(grandTotal).toFixed(2)}` : `Pay ₹${grandTotal.toFixed(2)}`}
endContent={<ChevronRight className="w-5 h-5" />}
isDisabled={cart.length === 0 || !customer}
onClick={handleCheckoutBtn}
disabled={cart.length === 0 || !customer}
className="flex-1 h-12 bg-emerald-600 hover:bg-emerald-700 disabled:bg-slate-200 disabled:text-slate-400 text-white rounded-xl font-black text-lg transition-all shadow-lg shadow-emerald-600/25 disabled:shadow-none flex items-center justify-center gap-2 active:scale-[0.98]"
style={{ height: 48 }}
className="flex-1 h-12 bg-emerald-600 hover:bg-emerald-700 disabled:bg-slate-200 disabled:text-slate-400 text-white border-none rounded-xl font-black text-lg transition-all shadow-lg shadow-emerald-600/25 disabled:shadow-none flex items-center justify-center gap-2 active:scale-[0.98]"
>
PAY <ChevronRight className="w-5 h-5" />
</button>
PAY
</Button>
</div>
</div>
</div>
@@ -828,12 +833,22 @@ export default function PosView({ locationid, tenantId = FIESTA_TENANT_ID }: Pos
// whole surface is the hit target, which Button's fixed
// padding and centred label cannot express. It already had a
// disabled state and a text label, so nothing is lost.
<button
// Each row's name was assembled from the four scraps of text
// inside it, so a reader heard the SKU, price and stock line
// run together before knowing what the product was.
<Button
key={product.id}
disabled={product.closing <= 0}
label={
product.closing <= 0
? `${product.name} — out of stock`
: `Add ${product.name}, ₹${product.price.toFixed(2)} per ${product.unit}`
}
isDisabled={product.closing <= 0}
onClick={() => { handleProductScanned(product); setSearch(''); }}
className="w-full text-left px-5 py-3.5 flex justify-between items-center border-b border-slate-100 hover:bg-slate-50 transition-colors disabled:opacity-40 disabled:cursor-not-allowed group"
style={{ height: 'auto' }}
className="w-full text-left px-5 py-3.5 flex justify-between items-center border-b border-slate-100 bg-transparent hover:bg-slate-50 transition-colors group"
>
<span className="w-full flex justify-between items-center">
<div>
<p className="font-bold text-slate-900 text-sm">{product.name}</p>
<p className="text-[11px] text-slate-400 font-mono mt-0.5">SKU: {product.sku}</p>
@@ -844,7 +859,8 @@ export default function PosView({ locationid, tenantId = FIESTA_TENANT_ID }: Pos
{product.closing <= 0 ? 'Out of stock' : `${product.closing} in stock`}
</p>
</div>
</button>
</span>
</Button>
))}
</div>
</PosModal>
@@ -1118,13 +1134,19 @@ export default function PosView({ locationid, tenantId = FIESTA_TENANT_ID }: Pos
{/* Same exception as PAY, and for the same reason: this is the
commit point of the transaction. */}
<button
<Button
label={
grandTotal < 0
? `Confirm refund of ₹${Math.abs(grandTotal).toFixed(2)}`
: `Confirm payment of ₹${grandTotal.toFixed(2)}`
}
isDisabled={payMethod === 'store_credit' && !customer}
onClick={confirmPayment}
disabled={payMethod === 'store_credit' && !customer}
className="w-full py-4 bg-emerald-600 hover:bg-emerald-700 disabled:bg-slate-200 disabled:text-slate-400 text-white rounded-xl font-black text-lg transition-all shadow-lg shadow-emerald-600/25 disabled:shadow-none"
style={{ height: 'auto' }}
className="w-full py-4 bg-emerald-600 hover:bg-emerald-700 disabled:bg-slate-200 disabled:text-slate-400 text-white border-none rounded-xl font-black text-lg transition-all shadow-lg shadow-emerald-600/25 disabled:shadow-none"
>
Confirm {grandTotal < 0 ? 'Refund' : 'Payment'}
</button>
</Button>
</div>
</PosModal>
)}