nearle_daily/daily_merchant_web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

developed ui for pos

Browse Source
This commit is contained in:
abhishek
2026-06-26 10:37:20 +05:30
parent 93df333df1
commit c6a3ea51da
4 changed files with 1437 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/StoreCatalogView.tsx
View File

@@ -540,40 +540,45 @@ export default function StoreCatalogView({ locationid, storeName = 'your store',
sub="Browse the catalogue and add items to your store to request stock."
/>
) : (
<div className="bg-white border rounded-2xl overflow-hidden" style={{ borderColor: BORDER }}>
<div className="bg-white rounded-2xl border border-slate-200 shadow-[0_4px_20px_-4px_rgba(0,0,0,0.05)] overflow-hidden">
<div className="overflow-x-auto">
<table className="w-full" style={{ minWidth: 800 }}>
<table className="w-full text-left border-collapse" style={{ minWidth: 800 }}>
<thead>
<tr>
<tr className="bg-slate-50/80 border-b border-slate-200">
{['Requested At', 'Product', 'Qty', 'Status', 'Resolved At'].map((h, i) => (
<th key={i} className="px-3 py-2.5 text-left" style={TH_STYLE}>{h}</th>
<th key={i} className="px-5 py-4 text-[10px] font-black uppercase tracking-widest text-slate-500 whitespace-nowrap">{h}</th>
))}
</tr>
</thead>
<tbody>
<tbody className="divide-y divide-slate-100">
{Object.entries(picks).map(([pid, data]: [string, any]) => {
const prod = products.find(p => p.id === pid);
const isApproved = data.status === 'Approved';
const isRejected = data.status === 'Rejected';
const color = isApproved ? '#10b981' : isRejected ? '#f43f5e' : data.status === 'Cancelled' ? '#94a3b8' : '#f59e0b';
const DIVIDER_C = '#f1f5f9';
const isCancelled = data.status === 'Cancelled';
return (
<tr key={pid} className="transition-colors" style={{ borderBottom: `1px solid ${DIVIDER_C}`, background: 'transparent' }}
onMouseEnter={(e) => { e.currentTarget.style.background = SURFACE_ALT; }} onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}>
<td className="px-3 py-2.5">
<span className="text-xs font-mono" style={{ color: TEXT_3 }}>
{data.requestedAt ? new Date(data.requestedAt).toLocaleString('en-IN', { dateStyle: 'medium', timeStyle: 'short' }) : '—'}
</span>
<tr key={pid} className="transition-all duration-200 hover:bg-slate-50/80 group">
<td className="px-5 py-4 whitespace-nowrap">
<div className="flex flex-col">
<span className="text-sm font-semibold text-slate-900">
{data.requestedAt ? new Date(data.requestedAt).toLocaleDateString('en-IN', { day: 'numeric', month: 'short' }) : '—'}
</span>
<span className="text-xs font-medium text-slate-500">
{data.requestedAt ? new Date(data.requestedAt).toLocaleTimeString('en-IN', { hour: '2-digit', minute: '2-digit' }) : ''}
</span>
</div>
</td>
<td className="px-3 py-2.5">
<td className="px-5 py-4">
<div className="flex items-center gap-3">
{prod ? (
<>
<img src={prod.image} alt={prod.name} className="w-8 h-8 rounded-md object-cover border" style={{ borderColor: BORDER }} />
<div>
<p className="font-bold text-[12px] truncate max-w-[200px]" style={{ color: TEXT }}>{prod.name}</p>
<p className="text-[10px] truncate max-w-[200px]" style={{ color: TEXT_2 }}>{prod.sku}</p>
<div className="relative w-10 h-10 rounded-xl overflow-hidden border border-slate-200 bg-white shadow-sm shrink-0 group-hover:shadow transition-shadow">
<img src={prod.image} alt={prod.name} className="w-full h-full object-cover" />
</div>
<div className="min-w-0 flex-1">
<p className="font-bold text-sm text-slate-900 truncate group-hover:text-indigo-700 transition-colors">{prod.name}</p>
<p className="text-xs font-medium text-slate-500 truncate mt-0.5">{prod.sku}</p>
</div>
</>
) : (
@@ -581,14 +586,29 @@ export default function StoreCatalogView({ locationid, storeName = 'your store',
)}
</div>
</td>
<td className="px-3 py-2.5 font-mono text-[12px]" style={{ color: TEXT }}>
{data.qty || '—'}
<td className="px-5 py-4 whitespace-nowrap">
<span className="inline-flex items-center justify-center min-w-[2rem] px-2 py-1 rounded-md bg-slate-100 text-slate-700 font-bold text-sm border border-slate-200/60">
{data.qty || '—'}
</span>
</td>
<td className="px-3 py-2.5">
<StatusChip label={data.status || '—'} color={color} />
<td className="px-5 py-4 whitespace-nowrap">
<span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold border ${
isApproved ? 'bg-emerald-50 text-emerald-700 border-emerald-200' :
isRejected ? 'bg-rose-50 text-rose-700 border-rose-200' :
isCancelled ? 'bg-slate-50 text-slate-700 border-slate-200' :
'bg-amber-50 text-amber-700 border-amber-200'
}`}>
<span className={`w-1.5 h-1.5 rounded-full ${
isApproved ? 'bg-emerald-500' :
isRejected ? 'bg-rose-500' :
isCancelled ? 'bg-slate-400' :
'bg-amber-500 animate-pulse'
}`} />
{data.status || '—'}
</span>
</td>
<td className="px-3 py-2.5">
<span className="text-xs font-mono" style={{ color: TEXT_3 }}>
<td className="px-5 py-4 whitespace-nowrap">
<span className="text-xs font-medium text-slate-500">
{data.resolvedAt ? new Date(data.resolvedAt).toLocaleString('en-IN', { dateStyle: 'medium', timeStyle: 'short' }) : '—'}
</span>
</td>