Switch to version 1: remove src/app/track/page.tsx
This commit is contained in:
@@ -1,257 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { ThemeProvider } from '@/components/theme/ThemeProvider';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import { Package, MapPin, Calendar, Truck, CheckCircle, Clock } 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 TrackingEvent {
|
||||
timestamp: string;
|
||||
status: string;
|
||||
location: string;
|
||||
description: string;
|
||||
icon: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function TrackPage() {
|
||||
const [trackingNumber, setTrackingNumber] = useState('');
|
||||
const [trackingData, setTrackingData] = useState<{
|
||||
orderId: string;
|
||||
trackingNumber: string;
|
||||
status: string;
|
||||
currentLocation: string;
|
||||
estimatedDelivery: string;
|
||||
events: TrackingEvent[];
|
||||
} | null>(null);
|
||||
|
||||
const mockTrackingData = {
|
||||
orderId: 'ORD-002',
|
||||
trackingNumber: 'TRACK-789012',
|
||||
status: 'In Transit',
|
||||
currentLocation: 'Distribution Center, Chicago, IL',
|
||||
estimatedDelivery: '2024-01-25',
|
||||
events: [
|
||||
{
|
||||
timestamp: '2024-01-23 14:30',
|
||||
status: 'Out for Delivery',
|
||||
location: 'Local Facility, New York, NY',
|
||||
description: 'Package is on its way to you',
|
||||
icon: <Truck className="text-blue-600" size={24} />,
|
||||
},
|
||||
{
|
||||
timestamp: '2024-01-22 10:15',
|
||||
status: 'In Transit',
|
||||
location: 'Distribution Center, Chicago, IL',
|
||||
description: 'Package in transit to delivery location',
|
||||
icon: <Package className="text-yellow-600" size={24} />,
|
||||
},
|
||||
{
|
||||
timestamp: '2024-01-21 18:45',
|
||||
status: 'Shipped',
|
||||
location: 'Warehouse, Los Angeles, CA',
|
||||
description: 'Package picked up and shipped',
|
||||
icon: <CheckCircle className="text-green-600" size={24} />,
|
||||
},
|
||||
{
|
||||
timestamp: '2024-01-15 09:00',
|
||||
status: 'Order Confirmed',
|
||||
location: 'Order Processing Center',
|
||||
description: 'Your order has been confirmed',
|
||||
icon: <CheckCircle className="text-green-600" size={24} />,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const handleTrack = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (trackingNumber.trim()) {
|
||||
setTrackingData(mockTrackingData);
|
||||
}
|
||||
};
|
||||
|
||||
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 text-center">
|
||||
<h1 className="text-3xl md:text-4xl font-bold mb-2 flex items-center justify-center gap-3">
|
||||
<Package size={32} className="text-primary-cta" />
|
||||
Track Your Order
|
||||
</h1>
|
||||
<p className="text-foreground/60">Enter your tracking number to see real-time updates</p>
|
||||
</div>
|
||||
|
||||
{/* Tracking Search */}
|
||||
<form onSubmit={handleTrack} className="bg-card border border-primary-cta/20 rounded-lg p-8 mb-8">
|
||||
<div className="flex gap-4">
|
||||
<input
|
||||
type="text"
|
||||
value={trackingNumber}
|
||||
onChange={(e) => setTrackingNumber(e.target.value)}
|
||||
placeholder="Enter tracking number (e.g., TRACK-789012)"
|
||||
className="flex-1 px-4 py-3 border border-primary-cta/20 rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-8 py-3 bg-primary-cta text-white rounded-lg font-semibold hover:opacity-90 transition"
|
||||
>
|
||||
Track
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* Tracking Results */}
|
||||
{trackingData && (
|
||||
<div className="space-y-8">
|
||||
{/* Current Status Card */}
|
||||
<div className="bg-gradient-to-r from-primary-cta/10 to-accent/10 border border-primary-cta/30 rounded-lg p-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<p className="text-sm text-foreground/60 mb-2">Order ID</p>
|
||||
<p className="text-xl font-bold">{trackingData.orderId}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-foreground/60 mb-2">Current Status</p>
|
||||
<p className="text-xl font-bold text-primary-cta">{trackingData.status}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-foreground/60 mb-2">Est. Delivery</p>
|
||||
<p className="text-xl font-bold">{trackingData.estimatedDelivery}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Current Location */}
|
||||
<div className="bg-card border border-primary-cta/20 rounded-lg p-6 flex items-center gap-4">
|
||||
<MapPin size={32} className="text-primary-cta" />
|
||||
<div>
|
||||
<p className="text-sm text-foreground/60 mb-1">Current Location</p>
|
||||
<p className="text-lg font-semibold">{trackingData.currentLocation}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tracking Timeline */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-8">Tracking History</h2>
|
||||
<div className="space-y-6">
|
||||
{trackingData.events.map((event, index) => (
|
||||
<div key={index} className="flex gap-6">
|
||||
{/* Timeline Line and Icon */}
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-12 h-12 bg-card rounded-full border-2 border-primary-cta flex items-center justify-center mb-2">
|
||||
{event.icon}
|
||||
</div>
|
||||
{index < trackingData.events.length - 1 && (
|
||||
<div className="w-1 h-16 bg-gradient-to-b from-primary-cta/60 to-primary-cta/20" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Event Details */}
|
||||
<div className="pb-4">
|
||||
<div className="mb-1">
|
||||
<p className="font-bold text-lg">{event.status}</p>
|
||||
<p className="text-sm text-foreground/60 flex items-center gap-1">
|
||||
<Clock size={14} />
|
||||
{event.timestamp}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-2 p-3 bg-background/50 rounded-lg border border-foreground/10">
|
||||
<p className="text-sm font-semibold text-primary-cta mb-1 flex items-center gap-1">
|
||||
<MapPin size={14} />
|
||||
{event.location}
|
||||
</p>
|
||||
<p className="text-sm text-foreground/70">{event.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Additional Info */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="bg-card border border-primary-cta/20 rounded-lg p-6">
|
||||
<h3 className="font-bold mb-3 flex items-center gap-2">
|
||||
<Package size={20} className="text-primary-cta" />
|
||||
Shipping Details
|
||||
</h3>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>
|
||||
<span className="text-foreground/60">Carrier:</span>
|
||||
<span className="font-semibold ml-2">Priority Express</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="text-foreground/60">Service:</span>
|
||||
<span className="font-semibold ml-2">Express Delivery</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="text-foreground/60">Weight:</span>
|
||||
<span className="font-semibold ml-2">2.5 lbs</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-card border border-primary-cta/20 rounded-lg p-6">
|
||||
<h3 className="font-bold mb-3 flex items-center gap-2">
|
||||
<Calendar size={20} className="text-primary-cta" />
|
||||
Important Dates
|
||||
</h3>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>
|
||||
<span className="text-foreground/60">Order Date:</span>
|
||||
<span className="font-semibold ml-2">2024-01-15</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="text-foreground/60">Shipped Date:</span>
|
||||
<span className="font-semibold ml-2">2024-01-21</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="text-foreground/60">Est. Delivery:</span>
|
||||
<span className="font-semibold ml-2">2024-01-25</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Demo Note */}
|
||||
{!trackingData && (
|
||||
<div className="bg-background border border-primary-cta/20 rounded-lg p-8 text-center">
|
||||
<p className="text-foreground/60 mb-4">Try tracking number:</p>
|
||||
<button
|
||||
onClick={() => {
|
||||
setTrackingNumber('TRACK-789012');
|
||||
setTrackingData(mockTrackingData);
|
||||
}}
|
||||
className="px-6 py-2 bg-primary-cta text-white rounded-lg font-semibold hover:opacity-90 transition"
|
||||
>
|
||||
Load Demo Tracking
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user