106 lines
3.9 KiB
TypeScript
106 lines
3.9 KiB
TypeScript
import { mdiPackageVariantClosed, mdiEye } from '@mdi/js';
|
|
import Head from 'next/head';
|
|
import React, { ReactElement, useEffect, useState } from 'react';
|
|
import CardBox from '../components/CardBox';
|
|
import LayoutAuthenticated from '../layouts/Authenticated';
|
|
import SectionMain from '../components/SectionMain';
|
|
import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
|
|
import { getPageTitle } from '../config';
|
|
import axios from 'axios';
|
|
import BaseButton from '../components/BaseButton';
|
|
import { useTranslation } from 'next-i18next';
|
|
import Link from 'next/link';
|
|
|
|
const MyOrdersPage = () => {
|
|
const { t } = useTranslation('common');
|
|
const [orders, setOrders] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const fetchOrders = async () => {
|
|
try {
|
|
const response = await axios.get('/orders');
|
|
setOrders(response.data.rows || []);
|
|
} catch (error) {
|
|
console.error('Error fetching orders:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchOrders();
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{getPageTitle('My Orders')}</title>
|
|
</Head>
|
|
<SectionMain>
|
|
<SectionTitleLineWithButton icon={mdiPackageVariantClosed} title="My Orders" main>
|
|
{''}
|
|
</SectionTitleLineWithButton>
|
|
|
|
{loading ? (
|
|
<div className="text-center py-10">Loading orders...</div>
|
|
) : orders.length === 0 ? (
|
|
<CardBox className="text-center py-10">
|
|
<p className="text-gray-500 mb-4 text-lg">You haven't placed any orders yet.</p>
|
|
<Link href="/">
|
|
<BaseButton color="info" label="Go Shopping" />
|
|
</Link>
|
|
</CardBox>
|
|
) : (
|
|
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
|
{orders.map((order) => (
|
|
<CardBox key={order.id} className="flex flex-col h-full hover:shadow-lg transition-shadow duration-300">
|
|
<div className="flex justify-between items-start mb-4">
|
|
<div>
|
|
<h3 className="text-lg font-bold">Order #{order.order_number || order.id.slice(0, 8)}</h3>
|
|
<p className="text-sm text-gray-500">
|
|
Placed on {new Date(order.createdAt).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
<div className={`px-3 py-1 rounded-full text-xs font-semibold uppercase ${
|
|
order.status === 'delivered' ? 'bg-green-100 text-green-800' :
|
|
order.status === 'cancelled' ? 'bg-red-100 text-red-800' :
|
|
'bg-blue-100 text-blue-800'
|
|
}`}>
|
|
{order.status || 'Pending'}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-grow">
|
|
<div className="flex justify-between mb-2">
|
|
<span className="text-gray-600 font-medium">Total:</span>
|
|
<span className="font-bold text-lg">${parseFloat(order.total).toFixed(2)}</span>
|
|
</div>
|
|
<div className="text-sm text-gray-600 line-clamp-2 mb-4">
|
|
<span className="font-medium">Shipping to:</span> {order.shipping_address}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-auto border-t pt-4 flex justify-end">
|
|
<Link href={`/order-details?id=${order.id}`}>
|
|
<BaseButton
|
|
color="info"
|
|
label="View Details"
|
|
icon={mdiEye}
|
|
small
|
|
/>
|
|
</Link>
|
|
</div>
|
|
</CardBox>
|
|
))}
|
|
</div>
|
|
)}
|
|
</SectionMain>
|
|
</>
|
|
);
|
|
};
|
|
|
|
MyOrdersPage.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
|
|
};
|
|
|
|
export default MyOrdersPage; |