Add src/middleware.ts

Merge version_2 into main

src/app/admin/categories/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+export default function AdminCategoriesPage() {
+  return (
+    <div className="p-4">
+      <h2 className="text-4xl font-bold text-white mb-8">Categories Management</h2>
+      <p className="text-neutral-300">Content for managing categories will go here.</p>
+    </div>
+  );
+}

src/app/admin/dashboard/page.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+
+export default function AdminDashboardPage() {
+  const router = useRouter();
+  const [isAdmin, setIsAdmin] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const token = localStorage.getItem('adminToken');
+    const cookieToken = document.cookie.split('; ').find(row => row.startsWith('adminToken='))?.split('=')[1];
+
+    if (token === 'mock-admin-token' && cookieToken === 'mock-admin-token') {
+      setIsAdmin(true);
+    } else {
+      router.push('/admin/login?message=Unauthorized');
+    }
+    setLoading(false);
+  }, [router]);
+
+  const handleLogout = () => {
+    localStorage.removeItem('adminToken');
+    document.cookie = 'adminToken=; path=/; max-age=0;';
+    router.push('/admin/login');
+  };
+
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Services", id: "/services" },
+    { name: "Pricing", id: "/pricing" },
+    { name: "FAQ", id: "/faq" },
+    { name: "Contact", id: "/contact" },
+    { name: "Admin Login", id: "/admin/login" }
+  ];
+
+  if (loading) {
+    return (
+      <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="background-highlight"
+        borderRadius="soft"
+        contentWidth="medium"
+        sizing="large"
+        background="grid"
+        cardStyle="solid"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+      >
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={navItems}
+            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>
+        <div className="flex min-h-[calc(100vh-80px)] items-center justify-center p-4 sm:p-6 lg:p-8">
+          <p className="text-foreground">Loading...</p>
+        </div>
+      </ThemeProvider>
+    );
+  }
+
+  if (!isAdmin) {
+    return null;
+  }
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="medium"
+      sizing="large"
+      background="grid"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={navItems}
+          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>
+
+      <div className="flex min-h-[calc(100vh-80px)] items-center justify-center p-4 sm:p-6 lg:p-8">
+        <div className="w-full max-w-2xl p-8 space-y-6 bg-card rounded-lg shadow-lg text-center">
+          <h2 className="text-3xl font-bold text-foreground">Welcome to Admin Dashboard!</h2>
+          <p className="text-lg text-foreground-lighter">This is a protected route, accessible only to authenticated administrators.</p>
+          <button
+            onClick={handleLogout}
+            className="mt-6 py-2 px-6 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+          >
+            Logout
+          </button>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/admin/layout.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Home, Package, LayoutGrid, ShoppingCart, Users, ReceiptText, Settings, Menu } from 'lucide-react';
+import React, { useState } from 'react';
+
+const adminNavItems = [
+  { href: '/admin', label: 'Overview', icon: Home },
+  { href: '/admin/services', label: 'Services', icon: Package },
+  { href: '/admin/categories', label: 'Categories', icon: LayoutGrid },
+  { href: '/admin/orders', label: 'Orders', icon: ShoppingCart },
+  { href: '/admin/users', label: 'Users', icon: Users },
+  { href: '/admin/transactions', label: 'Transactions', icon: ReceiptText },
+  { href: '/admin/settings', label: 'Settings', icon: Settings },
+];
+
+export default function AdminLayout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+  return (
+    <div className="flex min-h-screen bg-neutral-950 text-white">
+      {/* Mobile Menu Button */}
+      <button
+        className="fixed top-4 left-4 z-50 p-2 rounded-md bg-neutral-800 lg:hidden focus:outline-none focus:ring-2 focus:ring-primary-cta"
+        onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+        aria-label="Toggle sidebar"
+      >
+        <Menu className="h-6 w-6" />
+      </button>
+
+      {/* Sidebar */}
+      <aside
+        className={`fixed inset-y-0 left-0 z-40 w-64 bg-neutral-900 shadow-lg transform ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'} lg:translate-x-0 transition-transform duration-300 ease-in-out`}
+      >
+        <div className="p-6 border-b border-neutral-800">
+          <h1 className="text-2xl font-bold text-primary-cta">Admin Panel</h1>
+        </div>
+        <nav className="mt-6">
+          <ul>
+            {adminNavItems.map((item) => {
+              const isActive = pathname === item.href || (item.href !== '/admin' && pathname.startsWith(item.href));
+              return (
+                <li key={item.href}>
+                  <Link
+                    href={item.href}
+                    className={`flex items-center gap-3 px-6 py-3 text-lg font-medium transition-colors duration-200 ${isActive ? 'bg-primary-cta text-white' : 'text-neutral-300 hover:bg-neutral-800 hover:text-white'}`}
+                    onClick={() => setIsSidebarOpen(false)} // Close sidebar on nav item click
+                  >
+                    <item.icon className="h-5 w-5" />
+                    {item.label}
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        </nav>
+      </aside>
+
+      {/* Main Content */}
+      <main className={`flex-1 transition-all duration-300 ease-in-out ${isSidebarOpen ? 'lg:ml-64 ml-0' : 'lg:ml-64 ml-0'} p-8 pt-16 lg:pt-8`}>
+        <div className="max-w-7xl mx-auto">
+          {children}
+        </div>
+      </main>
+    </div>
+  );
+}

src/app/admin/login/page.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+
+export default function AdminLoginPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const router = useRouter();
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    if (email === "admin@demo.com" && password === "Admin@123") {
+      localStorage.setItem('adminToken', 'mock-admin-token');
+      document.cookie = 'adminToken=mock-admin-token; path=/; max-age=3600;';
+      router.push('/admin/dashboard');
+    } else {
+      setError('Invalid email or password.');
+    }
+  };
+
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Services", id: "/services" },
+    { name: "Pricing", id: "/pricing" },
+    { name: "FAQ", id: "/faq" },
+    { name: "Contact", id: "/contact" },
+    { name: "Admin Login", id: "/admin/login" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="medium"
+      sizing="large"
+      background="grid"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={navItems}
+          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>
+
+      <div className="flex min-h-[calc(100vh-80px)] items-center justify-center p-4 sm:p-6 lg:p-8">
+        <div className="w-full max-w-md p-8 space-y-6 bg-card rounded-lg shadow-lg">
+          <h2 className="text-2xl font-bold text-center text-foreground">Admin Login</h2>
+          <form onSubmit={handleLogin} className="space-y-4">
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-foreground">Email</label>
+              <input
+                type="email"
+                id="email"
+                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm text-black"
+                placeholder="admin@demo.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+              />
+            </div>
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-foreground">Password</label>
+              <input
+                type="password"
+                id="password"
+                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm text-black"
+                placeholder="Admin@123"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+              />
+            </div>
+            {error && <p className="text-red-500 text-sm text-center">{error}</p>}
+            <button
+              type="submit"
+              className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-cta hover:bg-primary-cta-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta"
+            >
+              Log In
+            </button>
+          </form>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/admin/orders/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+export default function AdminOrdersPage() {
+  return (
+    <div className="p-4">
+      <h2 className="text-4xl font-bold text-white mb-8">Orders Management</h2>
+      <p className="text-neutral-300">Content for managing orders will go here.</p>
+    </div>
+  );
+}

src/app/admin/page.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { BarChart, CreditCard, DollarSign, Package } from 'lucide-react';
+import Link from 'next/link';
+
+const revenueData = [
+  { date: 'Jan 1', revenue: 1000 }, { date: 'Jan 5', revenue: 1200 }, { date: 'Jan 10', revenue: 1500 },
+  { date: 'Jan 15', revenue: 1300 }, { date: 'Jan 20', revenue: 1700 }, { date: 'Jan 25', revenue: 1600 },
+  { date: 'Jan 30', revenue: 2000 },
+];
+
+const recentOrders = [
+  { id: '1001', customer: 'John Doe', amount: '$150.00', status: 'Completed', date: '2024-03-01' },
+  { id: '1002', customer: 'Jane Smith', amount: '$230.50', status: 'Pending', date: '2024-03-01' },
+  { id: '1003', customer: 'Alice Brown', amount: '$75.25', status: 'Completed', date: '2024-02-29' },
+  { id: '1004', customer: 'Bob White', amount: '$400.00', status: 'Processing', date: '2024-02-28' },
+  { id: '1005', customer: 'Charlie Green', amount: '$110.00', status: 'Completed', date: '2024-02-28' },
+];
+
+export default function AdminOverviewPage() {
+  return (
+    <div className="space-y-8">
+      <h2 className="text-4xl font-bold text-white mb-8">Overview</h2>
+
+      {/* Revenue Stats Display */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <div className="bg-neutral-900 p-6 rounded-lg shadow-md flex items-center justify-between">
+          <div>
+            <p className="text-neutral-400 text-sm">Total Revenue</p>
+            <p className="text-3xl font-semibold text-white">$12,450</p>
+          </div>
+          <DollarSign className="h-8 w-8 text-primary-cta" />
+        </div>
+        <div className="bg-neutral-900 p-6 rounded-lg shadow-md flex items-center justify-between">
+          <div>
+            <p className="text-neutral-400 text-sm">Total Orders</p>
+            <p className="text-3xl font-semibold text-white">850</p>
+          </div>
+          <Package className="h-8 w-8 text-primary-cta" />
+        </div>
+        <div className="bg-neutral-900 p-6 rounded-lg shadow-md flex items-center justify-between">
+          <div>
+            <p className="text-neutral-400 text-sm">Pending Orders</p>
+            <p className="text-3xl font-semibold text-white">32</p>
+          </div>
+          <CreditCard className="h-8 w-8 text-primary-cta" />
+        </div>
+        <div className="bg-neutral-900 p-6 rounded-lg shadow-md flex items-center justify-between">
+          <div>
+            <p className="text-neutral-400 text-sm">New Users</p>
+            <p className="text-3xl font-semibold text-white">120</p>
+          </div>
+          <BarChart className="h-8 w-8 text-primary-cta" />
+        </div>
+      </div>
+
+      {/* Orders Chart (Last 30 Days) */}
+      <div className="bg-neutral-900 p-6 rounded-lg shadow-md">
+        <h3 className="text-2xl font-semibold text-white mb-4">Orders Chart (Last 30 Days)</h3>
+        <div className="h-64 flex items-center justify-center bg-neutral-800 rounded-md text-neutral-500">
+          <p>Placeholder for a chart library (e.g., Recharts, Chart.js)</p>
+        </div>
+      </div>
+
+      {/* Recent Orders Table */}
+      <div className="bg-neutral-900 p-6 rounded-lg shadow-md">
+        <h3 className="text-2xl font-semibold text-white mb-4">Recent Orders</h3>
+        <div className="overflow-x-auto">
+          <table className="min-w-full divide-y divide-neutral-800">
+            <thead>
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Order ID</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Customer</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Amount</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Status</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-neutral-400 uppercase tracking-wider">Date</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-neutral-800">
+              {recentOrders.map((order) => (
+                <tr key={order.id}>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">{order.id}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">{order.customer}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">{order.amount}</td>
+                  <td className={`px-6 py-4 whitespace-nowrap text-sm ${order.status === 'Completed' ? 'text-green-500' : order.status === 'Pending' ? 'text-yellow-500' : 'text-blue-500'}`}>{order.status}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-neutral-300">{order.date}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        <div className="mt-4 text-right">
+          <Link href="/admin/orders" className="text-primary-cta hover:underline">
+            View All Orders
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/admin/services/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+export default function AdminServicesPage() {
+  return (
+    <div className="p-4">
+      <h2 className="text-4xl font-bold text-white mb-8">Services Management</h2>
+      <p className="text-neutral-300">Content for managing services will go here.</p>
+    </div>
+  );
+}

src/app/admin/settings/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+export default function AdminSettingsPage() {
+  return (
+    <div className="p-4">
+      <h2 className="text-4xl font-bold text-white mb-8">Settings</h2>
+      <p className="text-neutral-300">Content for managing settings will go here.</p>
+    </div>
+  );
+}

src/app/admin/transactions/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+export default function AdminTransactionsPage() {
+  return (
+    <div className="p-4">
+      <h2 className="text-4xl font-bold text-white mb-8">Transactions Management</h2>
+      <p className="text-neutral-300">Content for managing transactions will go here.</p>
+    </div>
+  );
+}

src/app/admin/users/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+export default function AdminUsersPage() {
+  return (
+    <div className="p-4">
+      <h2 className="text-4xl font-bold text-white mb-8">Users Management</h2>
+      <p className="text-neutral-300">Content for managing users will go here.</p>
+    </div>
+  );
+}

src/app/api/admin/check-auth/route.ts

@@ -0,0 +1,14 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function GET(req: NextRequest) {
+  // In a real app, this would verify the JWT token from headers or session cookie.
+  // For this mock, we assume the middleware handled the primary check,
+  // or a client component sends a token to be verified.
+  const token = req.cookies.get('adminToken')?.value || req.headers.get('Authorization')?.split(' ')[1];
+
+  if (token === 'mock-admin-token') {
+    return NextResponse.json({ isAuthenticated: true, role: 'admin' }, { status: 200 });
+  } else {
+    return NextResponse.json({ isAuthenticated: false }, { status: 401 });
+  }
+}

src/app/api/admin/login/route.ts

@@ -0,0 +1,13 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(req: NextRequest) {
+  const { email, password } = await req.json();
+
+  if (email === 'admin@demo.com' && password === 'Admin@123') {
+    // In a real app, generate a JWT token or create a session.
+    // For this mock, we'll just indicate success.
+    return NextResponse.json({ message: 'Login successful', token: 'mock-admin-token' }, { status: 200 });
+  } else {
+    return NextResponse.json({ message: 'Invalid credentials' }, { status: 401 });
+  }
+}

src/app/api/admin/logout/route.ts

@@ -0,0 +1,7 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(req: NextRequest) {
+  // In a real app, invalidate JWT on server or clear session.
+  // For this mock, no server-side action is strictly needed as client manages localStorage token and cookie.
+  return NextResponse.json({ message: 'Logout successful' }, { status: 200 });
+}

src/app/orders/page.tsx

@@ -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>
+  );
+}

src/app/page.tsx

@@ -34,7 +34,9 @@ export default function LandingPage() {
         { name: "Services", id: "/services" },
         { name: "Pricing", id: "/pricing" },
         { name: "FAQ", id: "/faq" },
-        { name: "Contact", id: "/contact" }
+        { name: "Contact", id: "/contact" },
+        { name: "Transactions", id: "/transactions" },
+        { name: "Settings", id: "/settings" }
       ]}
       logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
       logoAlt="SocBoost Logo"

src/app/users/page.tsx

@@ -0,0 +1,138 @@
+"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>
+  );
+}

src/middleware.ts

@@ -0,0 +1,26 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+
+  // Protect /admin routes
+  if (pathname.startsWith('/admin') && !pathname.startsWith('/admin/login')) {
+    const adminToken = request.cookies.get('adminToken');
+
+    if (adminToken?.value === 'mock-admin-token') {
+      return NextResponse.next();
+    }
+
+    const url = request.nextUrl.clone();
+    url.pathname = '/admin/login';
+    url.searchParams.set('redirected', 'true'); // Optional: Add a query param to indicate redirection
+    return NextResponse.redirect(url);
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ['/admin/:path*'], // Apply middleware to all routes under /admin
+};