Add src/app/orders/page.tsx
This commit is contained in:
161
src/app/orders/page.tsx
Normal file
161
src/app/orders/page.tsx
Normal file
@@ -0,0 +1,161 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import { CheckCircle, XCircle } from "lucide-react";
|
||||
|
||||
export default function OrdersManagementPage() {
|
||||
// Dummy data for orders
|
||||
const orders = [
|
||||
{ id: "#1001", user: "John Doe", service: "Instagram Likes", quantity: 1000, status: "Completed", date: "2024-01-15", amount: "$1.00" },
|
||||
{ id: "#1002", user: "Jane Smith", service: "YouTube Views", quantity: 5000, status: "Pending", date: "2024-01-16", amount: "$5.00" },
|
||||
{ id: "#1003", user: "Alice Johnson", service: "TikTok Followers", quantity: 200, status: "Processing", date: "2024-01-17", amount: "$0.80" },
|
||||
{ id: "#1004", user: "Bob Williams", service: "Twitter Retweets", quantity: 100, status: "Cancelled", date: "2024-01-18", amount: "$0.20" },
|
||||
{ id: "#1005", user: "Charlie Brown", service: "Facebook Shares", quantity: 50, status: "Completed", date: "2024-01-19", amount: "$0.15" },
|
||||
];
|
||||
|
||||
const statuses = ["All", "Completed", "Pending", "Processing", "Cancelled"];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="large"
|
||||
background="grid"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Pricing", id: "/pricing" },
|
||||
{ name: "FAQ", id: "/faq" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
{ name: "Orders", id: "/orders" },
|
||||
{ name: "Users", id: "/users" }
|
||||
]}
|
||||
logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
|
||||
logoAlt="SocBoost Logo"
|
||||
brandName="SocBoost"
|
||||
button={{
|
||||
text: "Register", href: "/register"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
<h1 className="text-4xl font-bold mb-8">Orders Management</h1>
|
||||
|
||||
<div className="mb-6 flex justify-between items-center">
|
||||
<div className="flex items-center space-x-2">
|
||||
<label htmlFor="status-filter" className="font-medium">Filter by Status:</label>
|
||||
<select id="status-filter" className="p-2 border rounded-md bg-white dark:bg-gray-800 dark:border-gray-700">
|
||||
{statuses.map(status => (
|
||||
<option key={status} value={status.toLowerCase()}>{status}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<button className="px-4 py-2 bg-primary-cta text-white rounded-md hover:opacity-90 transition-opacity">Refresh Orders</button>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto bg-card rounded-lg shadow-lg p-6">
|
||||
<table className="min-w-full divide-y divide-border">
|
||||
<thead className="bg-background-accent">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Order ID</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">User</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Service</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Quantity</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Amount</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Date</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Status</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
{orders.map(order => (
|
||||
<tr key={order.id} className="hover:bg-background-accent transition-colors">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">{order.id}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">{order.user}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">{order.service}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">{order.quantity}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">{order.amount}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">{order.date}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
|
||||
order.status === 'Completed' ? 'bg-green-100 text-green-800' :
|
||||
order.status === 'Pending' ? 'bg-yellow-100 text-yellow-800' :
|
||||
order.status === 'Processing' ? 'bg-blue-100 text-blue-800' :
|
||||
'bg-red-100 text-red-800'
|
||||
}`}>
|
||||
{order.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<select className="p-1 border rounded-md bg-white dark:bg-gray-700 dark:border-gray-600 mr-2">
|
||||
{statuses.filter(s => s !== 'All').map(status => (
|
||||
<option key={status} value={status.toLowerCase()} selected={order.status === status}>{status}</option>
|
||||
))}
|
||||
</select>
|
||||
<button className="px-3 py-1 bg-accent text-white rounded-md text-xs hover:opacity-90 transition-opacity">Update</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "Instagram", href: "/services#instagram" },
|
||||
{ label: "YouTube", href: "/services#youtube" },
|
||||
{ label: "TikTok", href: "/services#tiktok" },
|
||||
{ label: "Twitter", href: "/services#twitter" },
|
||||
{ label: "Facebook", href: "/services#facebook" },
|
||||
{ label: "Telegram", href: "/services#telegram" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/#features" },
|
||||
{ label: "Pricing", href: "/pricing" },
|
||||
{ label: "FAQ", href: "/faq" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Terms of Service", href: "/terms" },
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "API Docs", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
|
||||
logoAlt="SocBoost Logo"
|
||||
logoText="SocBoost"
|
||||
copyrightText="© 2024 SocBoost. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user