Satyam
5fef584d7d
- Added visually hidden labels, IDs, and names to form inputs across all key components and pages (modals, directories, chatbots) - Added tabIndex and onKeyDown handlers to clickable table rows in OwnerProjectDetail for keyboard accessibility - Validated existing ARIA roles and Escape key bindings on modal components
195 lines
12 KiB
React
195 lines
12 KiB
React
import React, { useState } from 'react';
|
|
import { useMockStore } from '../../data/mockStore';
|
|
import { useAuth } from '../../context/AuthContext';
|
|
import { SpotlightCard } from '../../components/SpotlightCard';
|
|
import { Package, FileText, Filter, Search, ChevronRight, CheckCircle, Clock, Truck } from 'lucide-react';
|
|
import OrderDetailsModal from '../../components/vendor/OrderDetailsModal';
|
|
|
|
const VendorOrders = () => {
|
|
const { user } = useAuth();
|
|
const { projects, orders } = useMockStore();
|
|
const [filter, setFilter] = useState('all');
|
|
const [selectedOrder, setSelectedOrder] = useState(null);
|
|
const [isOrderModalOpen, setIsOrderModalOpen] = useState(false);
|
|
|
|
// Mock ID logic
|
|
const vendorId = user.id === 'ven_001' ? 'v3' : 'v1';
|
|
|
|
// Get vendor orders from MOCK_ORDERS
|
|
const vendorOrders = orders.filter(o => o.vendorId === vendorId);
|
|
const filteredOrders = filter === 'all' ? vendorOrders : vendorOrders.filter(o => o.status === filter);
|
|
|
|
const handleOrderClick = (order) => {
|
|
setSelectedOrder(order);
|
|
setIsOrderModalOpen(true);
|
|
};
|
|
|
|
const getStatusColor = (status) => {
|
|
switch (status) {
|
|
case 'delivered': return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-400';
|
|
case 'shipped': return 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400';
|
|
default: return 'bg-zinc-100 text-zinc-700 dark:bg-white/10 dark:text-zinc-400';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="p-6 md:p-10 max-w-7xl mx-auto space-y-8 animate-in fade-in duration-500">
|
|
<header className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-zinc-900 dark:text-white">My Orders</h1>
|
|
<p className="text-zinc-500 dark:text-zinc-400 mt-1">Manage purchase orders and deliveries.</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="relative">
|
|
<label htmlFor="search-vendor-orders" className="sr-only">Search orders</label>
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={16} />
|
|
<input
|
|
id="search-vendor-orders"
|
|
name="search-vendor-orders"
|
|
type="text"
|
|
placeholder="Search orders..."
|
|
className="pl-9 pr-4 py-2 rounded-lg bg-zinc-100 dark:bg-white/5 border border-zinc-200 dark:border-white/10 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50"
|
|
/>
|
|
</div>
|
|
<button className="flex items-center gap-2 px-3 py-2 rounded-lg bg-zinc-100 dark:bg-white/5 border border-zinc-200 dark:border-white/10 text-sm font-medium hover:bg-zinc-200 dark:hover:bg-white/10 transition-colors">
|
|
<Filter size={16} /> Filter
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Status Tabs */}
|
|
<div className="flex gap-2 overflow-x-auto pb-2">
|
|
{['all', 'pending', 'confirmed', 'shipped', 'delivered'].map(tab => (
|
|
<button
|
|
key={tab}
|
|
onClick={() => setFilter(tab)}
|
|
className={`px-4 py-2 rounded-full text-sm font-bold uppercase tracking-wide whitespace-nowrap transition-colors ${filter === tab
|
|
? 'bg-zinc-900 text-white dark:bg-white dark:text-zinc-900'
|
|
: 'bg-zinc-100 text-zinc-500 hover:bg-zinc-200 dark:bg-white/5 dark:text-zinc-400 dark:hover:bg-white/10'
|
|
}`}
|
|
>
|
|
{tab}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<SpotlightCard className="overflow-hidden">
|
|
{/* Mobile Card View */}
|
|
<div className="md:hidden divide-y divide-zinc-100 dark:divide-white/5">
|
|
{filteredOrders.length > 0 ? filteredOrders.map(order => (
|
|
<div
|
|
key={order.id}
|
|
onClick={() => handleOrderClick(order)}
|
|
className="p-4 active:bg-zinc-50 dark:active:bg-white/5 transition-colors cursor-pointer"
|
|
>
|
|
<div className="flex justify-between items-start mb-2">
|
|
<div className="flex-1 min-w-0 mr-3">
|
|
<h4 className="font-medium text-sm text-zinc-900 dark:text-white truncate">
|
|
{order.projectAddress || order.project}
|
|
</h4>
|
|
<p className="text-xs text-zinc-500 font-mono mt-0.5">{order.id}</p>
|
|
</div>
|
|
<ChevronRight size={16} className="text-zinc-400 shrink-0 mt-1" />
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-2 mb-2">
|
|
<span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide ${getStatusColor(order.status)}`}>
|
|
{order.status === 'delivered' && <CheckCircle size={10} />}
|
|
{order.status === 'shipped' && <Truck size={10} />}
|
|
{(order.status === 'pending' || order.status === 'confirmed') && <Clock size={10} />}
|
|
{order.status}
|
|
</span>
|
|
<span className="text-xs text-zinc-500 flex items-center gap-1">
|
|
<Package size={12} /> {order.items ? `${order.items.length} items` : order.item}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between items-center text-xs">
|
|
<span className="text-zinc-500">Due: {order.dueDate || 'N/A'}</span>
|
|
<span className="font-mono font-semibold text-zinc-900 dark:text-white">${(order.total || order.amount).toLocaleString()}</span>
|
|
</div>
|
|
</div>
|
|
)) : (
|
|
<div className="p-12 text-center text-zinc-500">
|
|
<Package size={40} className="mx-auto mb-3 opacity-20" />
|
|
<p>No orders found matching this filter.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Desktop Table View */}
|
|
<div className="hidden md:block overflow-x-auto">
|
|
<table className="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr className="border-b border-zinc-200 dark:border-white/10 text-xs font-bold uppercase tracking-wider text-zinc-500 bg-zinc-50/50 dark:bg-white/5">
|
|
<th className="p-4">Order ID</th>
|
|
<th className="p-4">Project / Location</th>
|
|
<th className="p-4">Items / Service</th>
|
|
<th className="p-4">Due Date</th>
|
|
<th className="p-4">Amount</th>
|
|
<th className="p-4">Status</th>
|
|
<th className="p-4">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-zinc-100 dark:divide-white/5">
|
|
{filteredOrders.map(order => (
|
|
<tr
|
|
key={order.id}
|
|
onClick={() => handleOrderClick(order)}
|
|
className="hover:bg-zinc-50 dark:hover:bg-white/5 transition-colors group cursor-pointer"
|
|
>
|
|
<td className="p-4 font-mono text-sm text-zinc-500">{order.id}</td>
|
|
<td className="p-4 text-sm font-medium text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
|
|
{order.projectAddress || order.project}
|
|
</td>
|
|
<td className="p-4 text-sm text-zinc-600 dark:text-zinc-300">
|
|
<div className="flex items-center gap-2">
|
|
<Package size={16} className="text-zinc-400" />
|
|
{order.items ? `${order.items.length} items` : order.item}
|
|
</div>
|
|
</td>
|
|
<td className="p-4 text-sm text-zinc-500">{order.dueDate}</td>
|
|
<td className="p-4 text-sm font-medium text-zinc-900 dark:text-white">${(order.total || order.amount).toLocaleString()}</td>
|
|
<td className="p-4">
|
|
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold uppercase tracking-wide ${getStatusColor(order.status)}`}>
|
|
{order.status === 'delivered' && <CheckCircle size={12} className="mr-1.5" />}
|
|
{order.status === 'shipped' && <Truck size={12} className="mr-1.5" />}
|
|
{(order.status === 'pending' || order.status === 'confirmed') && <Clock size={12} className="mr-1.5" />}
|
|
{order.status}
|
|
</span>
|
|
</td>
|
|
<td className="p-4">
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleOrderClick(order);
|
|
}}
|
|
className="p-2 rounded-lg hover:bg-zinc-200 dark:hover:bg-white/10 text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors"
|
|
>
|
|
<ChevronRight size={18} />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{filteredOrders.length === 0 && (
|
|
<div className="hidden md:block p-12 text-center text-zinc-500">
|
|
<Package size={48} className="mx-auto mb-4 opacity-20" />
|
|
<p>No orders found matching this filter.</p>
|
|
</div>
|
|
)}
|
|
</SpotlightCard>
|
|
|
|
{/* Order Details Modal */}
|
|
<OrderDetailsModal
|
|
isOpen={isOrderModalOpen}
|
|
onClose={() => setIsOrderModalOpen(false)}
|
|
order={selectedOrder}
|
|
/>
|
|
<span className="attribution-ghost">igotsar.matyas | LynkedUpPro - Turns out roofing CRMs don't build themselves. Who knew?</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default VendorOrders;
|