138 lines
6.5 KiB
TypeScript
138 lines
6.5 KiB
TypeScript
"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 { Plus, Minus } from "lucide-react";
|
|
|
|
export default function UsersManagementPage() {
|
|
// Dummy data for users
|
|
const users = [
|
|
{ id: "u1", username: "johndoe", email: "john@example.com", balance: 150.75, status: "Active" },
|
|
{ id: "u2", username: "janesmith", email: "jane@example.com", balance: 23.50, status: "Active" },
|
|
{ id: "u3", username: "alicej", email: "alice@example.com", balance: 0.00, status: "Inactive" },
|
|
{ id: "u4", username: "bobw", email: "bob@example.com", balance: 500.00, status: "Active" },
|
|
{ id: "u5", username: "charlieb", email: "charlie@example.com", balance: 12.30, status: "Active" },
|
|
];
|
|
|
|
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">Users Management</h1>
|
|
|
|
<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">Username</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Email</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-foreground uppercase tracking-wider">Balance</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">
|
|
{users.map(user => (
|
|
<tr key={user.id} className="hover:bg-background-accent transition-colors">
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">{user.username}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">{user.email}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">${user.balance.toFixed(2)}</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 ${
|
|
user.status === 'Active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
|
|
}`}>
|
|
{user.status}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium flex space-x-2">
|
|
<button className="px-3 py-1 bg-primary-cta text-white rounded-md text-xs flex items-center hover:opacity-90 transition-opacity">
|
|
<Plus size={14} className="mr-1" /> Add Funds
|
|
</button>
|
|
<button className="px-3 py-1 bg-secondary-cta text-white rounded-md text-xs flex items-center hover:opacity-90 transition-opacity">
|
|
<Minus size={14} className="mr-1" /> Deduct Funds
|
|
</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>
|
|
);
|
|
} |