bender/437f4e98-ef5c-4514-9247-4a4844a40e22
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Switch to version 1: remove src/app/orders/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-09 09:33:47 +00:00
parent e7c6747f7a
commit a865d834f5
1 changed files with 0 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

276
src/app/orders/page.tsx
View File

@@ -1,276 +0,0 @@
'use client';
import { useState } from 'react';
import { ThemeProvider } from '@/components/theme/ThemeProvider';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import { Package, ChevronDown, MapPin, Calendar, DollarSign } from 'lucide-react';
const navItems = [
{ name: 'Home', id: '/' },
{ name: 'Register', id: '/register' },
{ name: 'Login', id: '/login' },
{ name: 'Dashboard', id: '/dashboard' },
{ name: 'Orders', id: '/orders' },
];
interface OrderItem {
name: string;
sku: string;
quantity: number;
price: string;
}
interface Order {
id: string;
date: string;
status: 'Delivered' | 'In Transit' | 'Processing' | 'Pending';
total: string;
items: OrderItem[];
shippingAddress: string;
estimatedDelivery: string;
trackingNumber: string;
}
export default function OrdersPage() {
const [expandedOrder, setExpandedOrder] = useState<string | null>(null);
const orders: Order[] = [
{
id: 'ORD-001',
date: '2024-01-20',
status: 'Delivered',
total: '$89.99',
items: [
{ name: 'Wireless Headphones', sku: 'WH-001', quantity: 1, price: '$79.99' },
{ name: 'Audio Cable', sku: 'AC-002', quantity: 1, price: '$10.00' },
],
shippingAddress: '123 Main St, New York, NY 10001',
estimatedDelivery: '2024-01-22',
trackingNumber: 'TRACK-123456',
},
{
id: 'ORD-002',
date: '2024-01-15',
status: 'In Transit',
total: '$145.50',
items: [
{ name: 'USB-C Hub', sku: 'UH-001', quantity: 1, price: '$49.99' },
{ name: 'Laptop Stand', sku: 'LS-001', quantity: 1, price: '$79.99' },
{ name: 'Cable Organizer', sku: 'CO-001', quantity: 1, price: '$15.52' },
],
shippingAddress: '123 Main St, New York, NY 10001',
estimatedDelivery: '2024-01-25',
trackingNumber: 'TRACK-789012',
},
{
id: 'ORD-003',
date: '2024-01-10',
status: 'Processing',
total: '$62.25',
items: [
{ name: 'Wireless Mouse', sku: 'WM-001', quantity: 1, price: '$62.25' },
],
shippingAddress: '123 Main St, New York, NY 10001',
estimatedDelivery: '2024-01-28',
trackingNumber: 'TRACK-345678',
},
{
id: 'ORD-004',
date: '2024-01-05',
status: 'Delivered',
total: '$156.00',
items: [
{ name: 'Mechanical Keyboard', sku: 'MK-001', quantity: 1, price: '$120.00' },
{ name: 'Keycap Set', sku: 'KS-001', quantity: 1, price: '$36.00' },
],
shippingAddress: '123 Main St, New York, NY 10001',
estimatedDelivery: '2024-01-08',
trackingNumber: 'TRACK-567890',
},
];
const getStatusColor = (status: string) => {
switch (status) {
case 'Delivered':
return 'text-green-600 bg-green-50';
case 'In Transit':
return 'text-blue-600 bg-blue-50';
case 'Processing':
return 'text-yellow-600 bg-yellow-50';
case 'Pending':
return 'text-gray-600 bg-gray-50';
default:
return 'text-gray-600 bg-gray-50';
}
};
const getStatusTimeline = (status: string) => {
const stages = ['Pending', 'Processing', 'In Transit', 'Delivered'];
const currentIndex = stages.indexOf(status);
return stages.map((stage, index) => ({
stage,
completed: index <= currentIndex,
}));
};
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="none"
cardStyle="solid"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<NavbarStyleApple navItems={navItems} brandName="Customer Portal" />
<main className="bg-background text-foreground min-h-screen p-6">
<div className="max-w-4xl mx-auto">
{/* Header */}
<div className="mb-8">
<h1 className="text-3xl md:text-4xl font-bold mb-2 flex items-center gap-3">
<Package size={32} className="text-primary-cta" />
Order History
</h1>
<p className="text-foreground/60">View and track all your orders</p>
</div>
{/* Orders List */}
<div className="space-y-4">
{orders.map((order) => (
<div key={order.id} className="bg-card border border-primary-cta/20 rounded-lg overflow-hidden">
{/* Order Header */}
<button
onClick={() => setExpandedOrder(expandedOrder === order.id ? null : order.id)}
className="w-full p-6 hover:bg-background/50 transition flex items-center justify-between"
>
<div className="text-left flex-1">
<div className="flex items-center gap-4 flex-wrap">
<div>
<p className="font-bold text-lg">{order.id}</p>
<p className="text-sm text-foreground/60">Ordered on {order.date}</p>
</div>
<span className={`text-xs font-bold px-3 py-1 rounded-full ${getStatusColor(order.status)}`}>
{order.status}
</span>
</div>
</div>
<div className="text-right mr-4">
<p className="font-bold text-lg">{order.total}</p>
<p className="text-sm text-foreground/60">{order.items.length} item(s)</p>
</div>
<ChevronDown
size={24}
className={`transition-transform ${
expandedOrder === order.id ? 'rotate-180' : ''
}`}
/>
</button>
{/* Expanded Order Details */}
{expandedOrder === order.id && (
<div className="bg-background/50 p-6 border-t border-primary-cta/10 space-y-6">
{/* Timeline */}
<div>
<h3 className="font-semibold mb-4">Order Status</h3>
<div className="flex items-center justify-between">
{getStatusTimeline(order.status).map((item, index) => (
<div key={item.stage} className="flex flex-col items-center flex-1">
<div
className={`w-10 h-10 rounded-full flex items-center justify-center font-bold mb-2 transition ${
item.completed
? 'bg-primary-cta text-white'
: 'bg-foreground/10 text-foreground/60'
}`}
>
{item.completed ? '✓' : index + 1}
</div>
<p className={`text-xs text-center ${
item.completed
? 'text-foreground font-semibold'
: 'text-foreground/60'
}`}>
{item.stage}
</p>
</div>
))}
</div>
</div>
{/* Tracking and Delivery Info */}
<div className="grid grid-cols-2 gap-4">
<div className="p-4 bg-card rounded-lg border border-foreground/10">
<div className="flex items-center gap-2 text-foreground/60 mb-2">
<MapPin size={16} />
<p className="text-sm">Shipping To</p>
</div>
<p className="font-semibold">{order.shippingAddress}</p>
</div>
<div className="p-4 bg-card rounded-lg border border-foreground/10">
<div className="flex items-center gap-2 text-foreground/60 mb-2">
<Calendar size={16} />
<p className="text-sm">Est. Delivery</p>
</div>
<p className="font-semibold">{order.estimatedDelivery}</p>
</div>
</div>
{/* Tracking Number */}
<div className="p-4 bg-card rounded-lg border border-foreground/10">
<p className="text-sm text-foreground/60 mb-1">Tracking Number</p>
<p className="font-mono font-bold text-lg">{order.trackingNumber}</p>
<a
href="#"
className="text-primary-cta text-sm font-semibold hover:underline mt-2 inline-block"
>
Track Package →
</a>
</div>
{/* Items */}
<div>
<h3 className="font-semibold mb-4">Items in Order</h3>
<div className="space-y-2">
{order.items.map((item, index) => (
<div key={index} className="flex justify-between items-center p-3 bg-card rounded-lg border border-foreground/10">
<div>
<p className="font-semibold">{item.name}</p>
<p className="text-sm text-foreground/60">SKU: {item.sku}</p>
</div>
<div className="text-right">
<p className="font-semibold">{item.price}</p>
<p className="text-sm text-foreground/60">Qty: {item.quantity}</p>
</div>
</div>
))}
</div>
</div>
{/* Order Total */}
<div className="pt-4 border-t border-foreground/10 flex justify-between items-center">
<p className="font-semibold text-lg">Order Total:</p>
<p className="text-2xl font-bold text-primary-cta">{order.total}</p>
</div>
</div>
)}
</div>
))}
</div>
{/* Back to Dashboard */}
<div className="mt-8 text-center">
<a
href="/dashboard"
className="inline-flex items-center gap-2 px-6 py-2 border border-primary-cta text-primary-cta rounded-lg hover:bg-primary-cta hover:text-white transition font-semibold"
>
← Back to Dashboard
</a>
</div>
</div>
</main>
</ThemeProvider>
);
}