diff --git a/src/components/cards/OrderCard.tsx b/src/components/cards/OrderCard.tsx index f2cd574..1c33710 100644 --- a/src/components/cards/OrderCard.tsx +++ b/src/components/cards/OrderCard.tsx @@ -58,6 +58,85 @@ export function OrderCard({ row, fields, isDetailView = false }: { row: Record 0 ? ( +
+
+
+ +
+ + ORDER PRODUCTS + +
+
+ {gridVal.map((item, i) => { + const getVal = (key: string) => { + if (item[key] !== undefined) return item[key]; + const keyPattern = new RegExp(`^${key}(_\\d+)?$`); + const match = Object.keys(item).find(k => keyPattern.test(k) || k.includes(key)); + return match ? item[match] : undefined; + }; + + const productName = formatValue(getVal('product_name') || getVal('product_category') || 'Unknown Product'); + const skuCodeRaw = getVal('sku_code') || getVal('item_code') || ''; + const skuCode = isNaN(Number(skuCodeRaw)) || String(skuCodeRaw).length > 3 ? formatValue(skuCodeRaw) : ''; + const category = formatValue(getVal('product_category') || ''); + const brCode = formatValue(getVal('br_code') || ''); + const subtitleArr = [skuCode, category, brCode].filter(v => v && v !== '—'); + const subtitle = subtitleArr.join(' . ').toUpperCase(); + + const bagsStr = formatValue(getVal('bags') || getVal('total_bags') || getVal('quantity') || 0); + const bagsNum = Number(getVal('bags') || getVal('total_bags') || getVal('quantity') || 0); + const skuNum = Number(getVal('sku') || 0); + const kgsNum = skuNum > 0 ? skuNum * bagsNum : Number(getVal('row_kgs') || getVal('kgs') || getVal('weight') || 0); + const kgsStr = kgsNum > 0 ? `${kgsNum} kg` : '0 kg'; + + return ( +
+
+ {productName} +
+
+ {bagsStr} Bags + ({kgsStr}) +
+
+ ); + })} + +
+ TOTAL +
+ {totalBags} Bags + ({totalKgs} kg) +
+
+
+
+ ) : null; + return (
@@ -88,35 +167,7 @@ export function OrderCard({ row, fields, isDetailView = false }: { row: Record{totalKgs} kg
- {gridVal.length > 0 && ( -
-

Order Products

-
- {gridVal.map((item, i) => { - const getVal = (key: string) => { - if (item[key] !== undefined) return item[key]; - const keyPattern = new RegExp(`^${key}(_\\d+)?$`); - const match = Object.keys(item).find(k => keyPattern.test(k) || k.includes(key)); - return match ? item[match] : undefined; - }; - - const productName = formatValue(getVal('product_name') || getVal('product_category') || 'Unknown Product'); - const bagsStr = formatValue(getVal('bags') || getVal('total_bags') || getVal('quantity') || 0); - const bagsNum = Number(getVal('bags') || getVal('total_bags') || getVal('quantity') || 0); - const skuNum = Number(getVal('sku') || 0); - const kgsNum = skuNum > 0 ? skuNum * bagsNum : Number(getVal('row_kgs') || getVal('kgs') || getVal('weight') || 0); - const kgsStr = kgsNum > 0 ? ` (${kgsNum} kg)` : ''; - - return ( -
- {productName} - {bagsStr} Bags{kgsStr} -
- ); - })} -
-
- )} + {productsSection} )} @@ -168,43 +219,10 @@ export function OrderCard({ row, fields, isDetailView = false }: { row: Record - {gridVal.length > 0 && ( -
-
-

Order Products

- - {totalItems} {totalItems === 1 ? 'Item' : 'Items'} - -
-
- {gridVal.map((item, i) => { - const getVal = (key: string) => { - if (item[key] !== undefined) return item[key]; - const keyPattern = new RegExp(`^${key}(_\\d+)?$`); - const match = Object.keys(item).find(k => keyPattern.test(k) || k.includes(key)); - return match ? item[match] : undefined; - }; - - const productName = formatValue(getVal('product_name') || getVal('product_category') || 'Unknown Product'); - const bagsStr = formatValue(getVal('bags') || getVal('total_bags') || getVal('quantity') || 0); - const bagsNum = Number(getVal('bags') || getVal('total_bags') || getVal('quantity') || 0); - const skuNum = Number(getVal('sku') || 0); - const kgsNum = skuNum > 0 ? skuNum * bagsNum : Number(getVal('row_kgs') || getVal('kgs') || getVal('weight') || 0); - const kgsStr = kgsNum > 0 ? ` (${kgsNum} kg)` : ''; - - return ( -
- {productName} - {bagsStr} Bags{kgsStr} -
- ); - })} -
-
- )} + {productsSection} {/* Logistics Totals at the bottom */} - {(Number(totalKgsVal) > 0 || Number(totalBagsVal) > 0) && ( + {gridVal.length === 0 && (Number(totalKgsVal) > 0 || Number(totalBagsVal) > 0) && (
Total Weight diff --git a/src/components/cards/card.css b/src/components/cards/card.css index c12534a..485437e 100644 --- a/src/components/cards/card.css +++ b/src/components/cards/card.css @@ -1,7 +1,7 @@ .z-card { position: relative; width: 100%; - background-color: var(--z-bg-neutral-100); + background-color: #FFFBF4; border-radius: var(--block-radius); padding: var(--block-padding); box-shadow: var(--block-shadow); diff --git a/src/components/dv/OrderDetail.tsx b/src/components/dv/OrderDetail.tsx index 344de6a..8c7f484 100644 --- a/src/components/dv/OrderDetail.tsx +++ b/src/components/dv/OrderDetail.tsx @@ -121,7 +121,7 @@ export function OrderDetail({ instanceId, onDataLoad, onBack }: WiredDetailViewP const totalKgs = extract('total_kgs_3', remainingData) || 0; return ( -
+
{/* Top Section */}
@@ -176,59 +176,73 @@ export function OrderDetail({ instanceId, onDataLoad, onBack }: WiredDetailViewP {/* Bottom Section */}
{/* Left Table */} -
-
- - Order Items +
+
+
+ +
+ + ORDER PRODUCTS +
-
+ +
{itemsArray.map((item: any, idx: number) => { - const product = item.product_name_3 || '-'; - const category = item.product_category_3 || '-'; - const sku = item.sku_code_3 || '-'; - const bags = item.bags_3 || '0'; - const brCode = item.br_code_3 || '-'; - const weight = item.sku_3 ? `${item.sku_3} kg` : '-'; + const productName = String(item.product_name_3 || item.product_name || 'Unknown Product'); + const skuCodeRaw = item.sku_code_3 || item.sku_code || ''; + const skuCode = isNaN(Number(skuCodeRaw)) || String(skuCodeRaw).length > 3 ? String(skuCodeRaw) : ''; + const category = String(item.product_category_3 || item.product_category || ''); + const brCode = String(item.br_code_3 || item.br_code || ''); + + const subtitleArr = [skuCode, category, brCode].filter(v => v && v !== '-' && v !== '—'); + const subtitle = subtitleArr.join(' . ').toUpperCase(); + + const bagsNum = Number(item.bags_3 || item.bags || 0); + const bagsStr = String(bagsNum); + + const skuNum = Number(item.sku_3 || item.sku || 0); + const rowKgsRaw = item.row_kgs_3 || item.row_kgs || item.weight; + const kgsNum = skuNum > 0 ? skuNum * bagsNum : Number(rowKgsRaw || 0); + const kgsStr = kgsNum > 0 ? `${kgsNum} kg` : '0 kg'; return ( -
-
-
- {String(product)} - {String(category)} -
- - {String(sku)} - +
+
+ {productName}
- -
-
- Weight - {String(weight)} -
-
- BR Code - {String(brCode)} -
-
- -
-
- Bags - {String(bags)} -
+
+ {bagsStr} Bags + ({kgsStr})
); })} -
- Total Order -
- Total Bags - {String(totalBags)} -
-
+ + {itemsArray.length > 0 && ( +
+ TOTAL +
+ {totalBags} Bags + ({Number(totalKgs).toLocaleString()} kg) +
+
+ )}
diff --git a/src/components/forms/fields/SmartGridField.tsx b/src/components/forms/fields/SmartGridField.tsx index 0922f4b..463785f 100644 --- a/src/components/forms/fields/SmartGridField.tsx +++ b/src/components/forms/fields/SmartGridField.tsx @@ -394,32 +394,34 @@ export function SmartGridField({ -
-
-
-

- Add New Item -

-
- {editingIdx === null && renderFormFields()} -
- -
- - + {!isPotentialMining && ( +
+
+
+

+ Add New Item +

+
+ {editingIdx === null && renderFormFields()} +
+ +
+ + +
-
+ )}
); } diff --git a/src/components/reusable/Modal.tsx b/src/components/reusable/Modal.tsx index 252eeb4..d843032 100644 --- a/src/components/reusable/Modal.tsx +++ b/src/components/reusable/Modal.tsx @@ -19,12 +19,13 @@ export interface ModalProps { subtitle?: ReactNode; /** @default "md" */ width?: ModalWidth; + maxHeight?: string; actions?: ReactNode; children?: ReactNode; } /** Portal modal host — backdrop, Esc / click-out close, scroll-locked body. */ -export function Modal({ open, onClose, title, subtitle, width = 'md', actions, children }: ModalProps) { +export function Modal({ open, onClose, title, subtitle, width = 'md', maxHeight = 'max-h-[80dvh]', actions, children }: ModalProps) { useEffect(() => { if (!open) return; const onKey = (e: KeyboardEvent) => { @@ -53,7 +54,8 @@ export function Modal({ open, onClose, title, subtitle, width = 'md', actions, c aria-modal="true" className={cn( 'relative w-full bg-card rounded-t-2xl sm:rounded-lg border border-border-subtle shadow-lg sm:my-auto', - 'flex flex-col max-h-[70vh]', + 'flex flex-col', + maxHeight, WIDTH[width], )} > @@ -76,7 +78,9 @@ export function Modal({ open, onClose, title, subtitle, width = 'md', actions, c
-
{children}
+
+
{children}
+
, document.body, diff --git a/src/components/reusable/reusable.css b/src/components/reusable/reusable.css index 6590c61..9f1b7b9 100644 --- a/src/components/reusable/reusable.css +++ b/src/components/reusable/reusable.css @@ -26,7 +26,7 @@ flex-direction: row; align-items: center; padding: 16px 20px; - background-color: var(--z-bg-neutral-100); + background-color: #FFFBF4; border-radius: var(--z-border-radius-lg, 12px); box-shadow: var(--block-shadow); transition: all 0.2s ease-in-out; diff --git a/src/screens/CallsPage.tsx b/src/screens/CallsPage.tsx index fa96502..7fc8061 100644 --- a/src/screens/CallsPage.tsx +++ b/src/screens/CallsPage.tsx @@ -69,7 +69,7 @@ export function CallsPage() { if (instanceId != null) { return ( -
+
{ navigate(`/calls`); setIsFabOpen(false); }} />
diff --git a/src/screens/ConsoleLayout.tsx b/src/screens/ConsoleLayout.tsx index 0a88a6a..37743c2 100644 --- a/src/screens/ConsoleLayout.tsx +++ b/src/screens/ConsoleLayout.tsx @@ -51,7 +51,7 @@ export function ConsoleLayout() {