updates on the multiple

This commit is contained in:
2026-08-27 16:58:54 +05:30
parent c9a80cbd20
commit 1d1e51620e
2 changed files with 43 additions and 42 deletions

View File

@@ -6,6 +6,7 @@ import { LuChevronDown } from 'react-icons/lu';
import { HStack } from '@astryxdesign/core/HStack'; import { HStack } from '@astryxdesign/core/HStack';
import { VStack } from '@astryxdesign/core/VStack'; import { VStack } from '@astryxdesign/core/VStack';
import { Text } from '@astryxdesign/core/Text'; import { Text } from '@astryxdesign/core/Text';
import { IconButton } from '@astryxdesign/core/IconButton';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { ChatToolCalls } from '@astryxdesign/core/Chat'; import { ChatToolCalls } from '@astryxdesign/core/Chat';

View File

@@ -852,27 +852,27 @@ export default function MultipleOrders() {
) : previewMode === 'preview' ? ( ) : previewMode === 'preview' ? (
/* Raw spreadsheet preview table */ /* Raw spreadsheet preview table */
<table className="w-full text-left border-collapse text-xs"> <table className="w-full text-left border-collapse text-xs">
<thead className="bg-slate-50 text-[11px] font-bold text-slate-500 uppercase tracking-wider sticky top-0 border-b border-slate-200"> <thead className="bg-slate-100 text-[11px] font-bold text-slate-700 uppercase tracking-wider sticky top-0 border-b border-slate-200 z-10">
<tr> <tr>
<th className="py-2.5 pl-4 pr-2 w-10">#</th> <th className="py-3 pl-4 pr-2 w-10">#</th>
<th className="py-2.5 px-3">Customer</th> <th className="py-3 px-3">Customer</th>
<th className="py-2.5 px-3">Phone</th> <th className="py-3 px-3">Phone</th>
<th className="py-2.5 px-3">Address</th> <th className="py-3 px-3">Address</th>
<th className="py-2.5 px-3">City</th> <th className="py-3 px-3">City</th>
<th className="py-2.5 px-3">Qty</th> <th className="py-3 px-3 text-center">Qty</th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-slate-100"> <tbody className="divide-y divide-slate-100 bg-white">
{users.map((row, idx) => ( {users.map((row, idx) => (
<tr key={row._rowkey || idx} className="hover:bg-slate-50/70 transition-colors"> <tr key={row._rowkey || idx} className="hover:bg-slate-50/70 transition-colors">
<td className="py-2.5 pl-4 pr-2 text-slate-400 font-mono text-[11px]">{idx + 1}</td> <td className="py-2.5 pl-4 pr-2 text-slate-600 font-mono text-xs font-bold">{idx + 1}</td>
<td className="py-2.5 px-3 font-semibold text-slate-900">{row.firstname || '—'}</td> <td className="py-2.5 px-3 font-bold text-slate-900">{row.firstname || '—'}</td>
<td className="py-2.5 px-3 text-slate-600 font-mono text-[11px]">{row.contactno || '—'}</td> <td className="py-2.5 px-3 text-slate-700 font-mono text-xs font-medium">{row.contactno || '—'}</td>
<td className="py-2.5 px-3 text-slate-600 max-w-[200px] truncate" title={row.address}> <td className="py-2.5 px-3 text-slate-800 font-medium max-w-[200px] truncate" title={row.address}>
{row.address || '—'} {row.address || '—'}
</td> </td>
<td className="py-2.5 px-3 text-slate-600">{row.city || '—'}</td> <td className="py-2.5 px-3 text-slate-700 font-medium">{row.city || '—'}</td>
<td className="py-2.5 px-3 text-slate-700 font-bold">{row.quantity || 1}</td> <td className="py-2.5 px-3 text-center text-slate-900 font-bold">{row.quantity || 1}</td>
</tr> </tr>
))} ))}
</tbody> </tbody>
@@ -880,29 +880,29 @@ export default function MultipleOrders() {
) : ( ) : (
/* Interactive Drop List table */ /* Interactive Drop List table */
<table className="w-full text-left border-collapse text-xs"> <table className="w-full text-left border-collapse text-xs">
<thead className="bg-slate-50 text-[11px] font-bold text-slate-500 uppercase tracking-wider sticky top-0 border-b border-slate-200"> <thead className="bg-slate-100 text-[11px] font-bold text-slate-700 uppercase tracking-wider sticky top-0 border-b border-slate-200 z-10">
<tr> <tr>
<th className="py-2.5 pl-4 pr-2 w-8">#</th> <th className="py-3 pl-4 pr-2 w-8">#</th>
<th className="py-2.5 px-3 w-36">Customer</th> <th className="py-3 px-3 w-40">Customer</th>
<th className="py-2.5 px-3">Address</th> <th className="py-3 px-3">Address</th>
<th className="py-2.5 px-2 w-16 text-center">Qty</th> <th className="py-3 px-2 w-16 text-center">Qty</th>
<th className="py-2.5 px-2 w-24 text-center">Cash (₹)</th> <th className="py-3 px-2 w-24 text-center">Cash (₹)</th>
<th className="py-2.5 px-2 w-16 text-center">Km</th> <th className="py-3 px-2 w-16 text-center">Km</th>
<th className="py-2.5 px-3 w-20 text-right">Charge</th> <th className="py-3 px-3 w-20 text-right">Charge</th>
<th className="py-2.5 pr-4 pl-2 w-10 text-center"></th> <th className="py-3 pr-4 pl-2 w-10 text-center"></th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-slate-100"> <tbody className="divide-y divide-slate-100 bg-white">
{dropCust.map((row, idx) => { {dropCust.map((row, idx) => {
const needsAddress = row.latitude == null || row.longitude == null || !row.address; const needsAddress = row.latitude == null || row.longitude == null || !row.address;
return ( return (
<tr key={row._rowkey || idx} className="hover:bg-slate-50/70 transition-colors"> <tr key={row._rowkey || idx} className="hover:bg-slate-50/70 transition-colors">
<td className="py-2.5 pl-4 pr-2 text-slate-400 font-mono text-[11px]">{idx + 1}</td> <td className="py-3 pl-4 pr-2 text-slate-600 font-mono text-xs font-bold">{idx + 1}</td>
<td className="py-2.5 px-3"> <td className="py-3 px-3">
<div className="font-semibold text-slate-900 truncate max-w-[130px]">{row.firstname || '—'}</div> <div className="font-bold text-slate-900 text-xs truncate max-w-[150px]">{row.firstname || '—'}</div>
<div className="text-[10px] text-slate-400 font-mono mt-0.5">{row.contactno || '—'}</div> <div className="text-[11px] text-slate-600 font-mono font-medium mt-0.5">{row.contactno || '—'}</div>
</td> </td>
<td className="py-2.5 px-3 min-w-[220px]"> <td className="py-3 px-3 min-w-[220px]">
{needsAddress ? ( {needsAddress ? (
<AddressAutocomplete <AddressAutocomplete
id={`addr-${row._rowkey}`} id={`addr-${row._rowkey}`}
@@ -911,15 +911,15 @@ export default function MultipleOrders() {
bias={pickCust?.latitude ? { lat: Number(pickCust.latitude), lng: Number(pickCust.longitude) } : undefined} bias={pickCust?.latitude ? { lat: Number(pickCust.latitude), lng: Number(pickCust.longitude) } : undefined}
onChange={(val) => handleUpdateDropField(row._rowkey, 'address', val)} onChange={(val) => handleUpdateDropField(row._rowkey, 'address', val)}
onPlaceSelected={(place) => handleRowPlaceSelected(row._rowkey, place)} onPlaceSelected={(place) => handleRowPlaceSelected(row._rowkey, place)}
inputClassName="!h-7 text-xs border-amber-300 bg-amber-50/30" inputClassName="!h-8 text-xs border-amber-300 bg-amber-50/40 text-slate-900 font-medium"
/> />
) : ( ) : (
<div className="truncate max-w-[220px] text-slate-700" title={row.address}> <div className="truncate max-w-[220px] text-slate-800 font-medium" title={row.address}>
{row.address} {row.address}
</div> </div>
)} )}
</td> </td>
<td className="py-2.5 px-2 text-center"> <td className="py-3 px-2 text-center">
<input <input
type="number" type="number"
min="1" min="1"
@@ -927,36 +927,36 @@ export default function MultipleOrders() {
onChange={(e) => onChange={(e) =>
handleUpdateDropField(row._rowkey, 'quantity', Number(e.target.value) || 1) handleUpdateDropField(row._rowkey, 'quantity', Number(e.target.value) || 1)
} }
className="w-12 h-7 text-center font-mono text-xs border border-slate-200 rounded focus:outline-none focus:border-black" className="w-14 h-8 text-center font-bold text-slate-900 bg-white border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-black/10 focus:border-black shadow-2xs"
/> />
</td> </td>
<td className="py-2.5 px-2 text-center"> <td className="py-3 px-2 text-center">
<input <input
type="number" type="number"
min="0" min="0"
step="0.01" step="0.01"
value={row.collectionamt || ''} value={row.collectionamt != null ? row.collectionamt : ''}
placeholder="0.00" placeholder="0.00"
onChange={(e) => onChange={(e) =>
handleUpdateDropField(row._rowkey, 'collectionamt', Number(e.target.value) || 0) handleUpdateDropField(row._rowkey, 'collectionamt', Number(e.target.value) || 0)
} }
className="w-20 h-7 text-center font-mono text-xs border border-slate-200 rounded focus:outline-none focus:border-black" className="w-20 h-8 text-center font-bold text-slate-900 bg-white border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-black/10 focus:border-black shadow-2xs"
/> />
</td> </td>
<td className="py-2.5 px-2 text-center font-mono text-[11px] text-slate-600"> <td className="py-3 px-2 text-center font-mono text-xs font-semibold text-slate-800">
{row.distance ? `${row.distance}` : '—'} {row.distance ? `${row.distance} km` : '—'}
</td> </td>
<td className="py-2.5 px-3 text-right font-bold text-slate-900 font-mono text-xs"> <td className="py-3 px-3 text-right font-black text-slate-950 font-mono text-xs">
₹{Number(row.totalcharge || 0).toFixed(2)} ₹{Number(row.totalcharge || 0).toFixed(2)}
</td> </td>
<td className="py-2.5 pr-4 pl-2 text-center"> <td className="py-3 pr-4 pl-2 text-center">
<button <button
type="button" type="button"
onClick={() => handleRemoveDropRow(row._rowkey)} onClick={() => handleRemoveDropRow(row._rowkey)}
className="p-1 text-slate-400 hover:text-red-600 rounded transition-colors cursor-pointer" className="p-1.5 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors cursor-pointer"
title="Remove drop" title="Remove drop"
> >
<Trash2 className="w-3.5 h-3.5" /> <Trash2 className="w-4 h-4" />
</button> </button>
</td> </td>
</tr> </tr>