diff --git a/src/app/add-funds/page.tsx b/src/app/add-funds/page.tsx new file mode 100644 index 0000000..0f82970 --- /dev/null +++ b/src/app/add-funds/page.tsx @@ -0,0 +1,137 @@ +"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'; + +export default function AddFundsPage() { + return ( + + + + +
+
+

Add Funds

+

Top up your account balance securely.

+ +
+
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+
+
+
+ + + + + ); +} diff --git a/src/app/admin/dashboard/layout.tsx b/src/app/admin/dashboard/layout.tsx new file mode 100644 index 0000000..103ab53 --- /dev/null +++ b/src/app/admin/dashboard/layout.tsx @@ -0,0 +1,101 @@ +"use client"; + +import { useState, useEffect } from "react"; +import Link from "next/link"; +import { usePathname, useRouter } from "next/navigation"; +import { Home, ShoppingCart, Users, Settings, Package } from "lucide-react"; + +// Mock authentication check +const isAuthenticated = () => { + // In a real app, this would check tokens, sessions, etc. + // For this exercise, we'll simulate a logged-in state. + return typeof window !== "undefined" && localStorage.getItem("admin_logged_in") === "true"; +}; + +const logout = () => { + if (typeof window !== "undefined") { + localStorage.removeItem("admin_logged_in"); + } +}; + +const adminNavItems = [ + { name: "Overview", href: "/admin/dashboard/overview", icon: Home }, + { name: "Services", href: "/admin/dashboard/services", icon: Package }, + { name: "Orders", href: "/admin/dashboard/orders", icon: ShoppingCart }, + { name: "Users", href: "/admin/dashboard/users", icon: Users }, + { name: "Settings", href: "/admin/dashboard/settings", icon: Settings }, +]; + +export default function AdminDashboardLayout({ + children, +}: { + children: React.ReactNode; +}) { + const router = useRouter(); + const pathname = usePathname(); + const [isAuth, setIsAuth] = useState(false); + + useEffect(() => { + if (!isAuthenticated()) { + router.push("/admin/login"); + } else { + setIsAuth(true); + } + }, [router]); + + const handleLogout = () => { + logout(); + router.push("/admin/login"); + }; + + if (!isAuth) { + return ( +
+

Redirecting to login...

+
+ ); + } + + return ( +
+ {/* Sidebar */} + + + {/* Main Content */} +
{children}
+
+ ); +} \ No newline at end of file diff --git a/src/app/admin/dashboard/overview/page.tsx b/src/app/admin/dashboard/overview/page.tsx new file mode 100644 index 0000000..8aa5532 --- /dev/null +++ b/src/app/admin/dashboard/overview/page.tsx @@ -0,0 +1,139 @@ +"use client"; + +import { DollarSign, ShoppingCart, Users, TrendingUp } from "lucide-react"; +import MetricCardThree from "@/components/sections/metrics/MetricCardThree"; // Re-using existing component + +export default function AdminOverviewPage() { + const revenueMetrics = [ + { + id: "total_revenue", icon: DollarSign, + title: "Total Revenue", value: "$1,234,567"}, + { + id: "monthly_revenue", icon: TrendingUp, + title: "Monthly Revenue", value: "$89,123"}, + { + id: "total_orders", icon: ShoppingCart, + title: "Total Orders", value: "15,678"}, + { + id: "new_users", icon: Users, + title: "New Users (Last 30 Days)", value: "450"}, + ]; + + const recentOrders = [ + { + id: "ORD001", customer: "John Doe", service: "Instagram Likes", amount: "$15.00", status: "Completed", date: "2023-10-26"}, + { + id: "ORD002", customer: "Jane Smith", service: "YouTube Subscribers", amount: "$50.00", status: "Pending", date: "2023-10-25"}, + { + id: "ORD003", customer: "Alice Johnson", service: "TikTok Views", amount: "$10.50", status: "Completed", date: "2023-10-25"}, + { + id: "ORD004", customer: "Bob Brown", service: "Twitter Retweets", amount: "$5.00", status: "Processing", date: "2023-10-24"}, + { + id: "ORD005", customer: "Charlie Green", service: "Facebook Page Likes", amount: "$20.00", status: "Completed", date: "2023-10-24"}, + ]; + + return ( +
+

Dashboard Overview

+ +
+

Revenue Statistics

+ +
+ +
+

Recent Orders

+
+ + + + + + + + + + + + + {recentOrders.map((order) => ( + + + + + + + + + ))} + +
+ Order ID + + Customer + + Service + + Amount + + Status + + Date +
+ {order.id} + + {order.customer} + + {order.service} + + {order.amount} + + + {order.status} + + + {order.date} +
+
+
+
+ ); +} \ No newline at end of file diff --git a/src/app/admin/login/page.tsx b/src/app/admin/login/page.tsx index 2e6eda5..c7ba01e 100644 --- a/src/app/admin/login/page.tsx +++ b/src/app/admin/login/page.tsx @@ -1,101 +1,92 @@ "use client"; -import { useState } from 'react'; -import { useRouter } from 'next/navigation'; -import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider'; -import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; +import { useState } from "react"; +import Link from "next/link"; export default function AdminLoginPage() { - const [email, setEmail] = useState(''); - const [password, setPassword] = useState(''); - const [error, setError] = useState(''); - const router = useRouter(); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [error, setError] = useState(""); - const handleLogin = async (e: React.FormEvent) => { + const handleSubmit = (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'); + setError(""); + // In a real application, you would send these credentials to an API route + // for authentication. For this exercise, we'll simulate a basic check. + if (email === "admin@example.com" && password === "password") { + if (typeof window !== "undefined") { + localStorage.setItem("admin_logged_in", "true"); + } + alert("Login successful! Redirecting to dashboard..."); + // Simulate redirect to admin dashboard + window.location.href = "/admin/dashboard/overview"; } else { - setError('Invalid email or password.'); + 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 ( - - - -
-
-

Admin Login

-
-
- - setEmail(e.target.value)} - required - /> -
-
- - setPassword(e.target.value)} - required - /> -
- {error &&

{error}

} +
+
+

+ Admin Login +

+ +
+ + setEmail(e.target.value)} + /> +
+
+ + setPassword(e.target.value)} + /> +
+ {error &&

{error}

} +
- +
+ +
+ + Back to homepage +
- +
); } \ No newline at end of file diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx new file mode 100644 index 0000000..0098f5b --- /dev/null +++ b/src/app/dashboard/page.tsx @@ -0,0 +1,135 @@ +"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 { Wallet, ShoppingCart, Hourglass, CheckCircle, Settings, LogOut } from "lucide-react"; +import Link from "next/link"; + +export default function UserDashboardPage() { + const stats = [ + { id: "balance", title: "Current Balance", value: "$1,250.50", icon: Wallet }, + { id: "totalOrders", title: "Total Orders", value: "1,234", icon: ShoppingCart }, + { id: "pendingOrders", title: "Pending Orders", value: "42", icon: Hourglass }, + { id: "completedOrders", title: "Completed Orders", value: "1,192", icon: CheckCircle }, + ]; + + const navItems = [ + { name: "Home", id: "/" }, + { name: "Dashboard", id: "/dashboard" }, + { name: "New Order", id: "/new-order" }, + { name: "My Orders", id: "/orders" } + ]; + + const footerColumns = [ + { + title: "Company", items: [ + { label: "About Us", href: "/#features" }, + { label: "Dashboard", href: "/dashboard" }, + { label: "New Order", href: "/new-order" }, + { label: "My Orders", href: "/orders" } + ], + }, + ]; + + return ( + + + + +
+ {/* Sidebar */} + + + {/* Main Content */} +
+

Dashboard Overview

+ +
+ {stats.map((stat) => ( +
+
+ +
+
+

{stat.title}

+

{stat.value}

+
+
+ ))} +
+ + {/* Additional Dashboard Content would go here */} +
+

Recent Activity

+

Your recent orders and transactions will appear here.

+
+
+
+ + + + + ); +} diff --git a/src/app/my-orders/page.tsx b/src/app/my-orders/page.tsx new file mode 100644 index 0000000..346fd10 --- /dev/null +++ b/src/app/my-orders/page.tsx @@ -0,0 +1,146 @@ +"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'; + +export default function MyOrdersPage() { + const orders = [ + { id: "#1001", service: "Instagram Likes", quantity: "1000", status: "Completed", date: "2024-07-20" }, + { id: "#1002", service: "YouTube Views", quantity: "5000", status: "Processing", date: "2024-07-21" }, + { id: "#1003", service: "TikTok Followers", quantity: "100", status: "Pending", date: "2024-07-21" }, + { id: "#1004", service: "Twitter Retweets", quantity: "500", status: "Completed", date: "2024-07-19" }, + { id: "#1005", service: "Facebook Comments", quantity: "10", status: "Cancelled", date: "2024-07-18" } + ]; + + return ( + + + + +
+
+

My Orders

+

View and manage your recent orders.

+ +
+ +
+ +
+ + + + + + + + + + + + {orders.map((order) => ( + + + + + + + + ))} + +
IDServiceQuantityStatusDate
{order.id}{order.service}{order.quantity} + + {order.status} + + {order.date}
+
+
+
+ + + + + ); +} diff --git a/src/app/new-order/page.tsx b/src/app/new-order/page.tsx new file mode 100644 index 0000000..ad2219f --- /dev/null +++ b/src/app/new-order/page.tsx @@ -0,0 +1,152 @@ +"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 { ShoppingCart } from "lucide-react"; +import { useState, useEffect } from "react"; + +export default function NewOrderPage() { + const [service, setService] = useState("instagram-likes"); + const [link, setLink] = useState(""); + const [quantity, setQuantity] = useState(0); + const [price, setPrice] = useState(0); + + const serviceRates = { + "instagram-likes": 0.001, + "youtube-views": 0.0005, + "tiktok-followers": 0.004, + }; + + useEffect(() => { + const rate = serviceRates[service as keyof typeof serviceRates] || 0; + const calculatedPrice = quantity * rate; + setPrice(calculatedPrice); + }, [service, quantity]); + + const handleOrderSubmit = (e: React.FormEvent) => { + e.preventDefault(); + alert(`Order placed! Service: ${service}, Link: ${link}, Quantity: ${quantity}, Price: $${price.toFixed(2)}`); + // Here you would typically send data to your backend + }; + + const navItems = [ + { name: "Home", id: "/" }, + { name: "Dashboard", id: "/dashboard" }, + { name: "New Order", id: "/new-order" }, + { name: "My Orders", id: "/orders" } + ]; + + const footerColumns = [ + { + title: "Company", items: [ + { label: "About Us", href: "/#features" }, + { label: "Dashboard", href: "/dashboard" }, + { label: "New Order", href: "/new-order" }, + { label: "My Orders", href: "/orders" } + ], + }, + ]; + + return ( + + + + +
+

Create New Order

+ +
+
+
+ + +
+ +
+ + setLink(e.target.value)} + required + /> +
+ +
+ + setQuantity(parseInt(e.target.value) || 0)} + required + /> +
+ +
+

Total Price:

+

${price.toFixed(2)}

+
+ + +
+
+
+ + + + + ); +} diff --git a/src/app/orders/page.tsx b/src/app/orders/page.tsx index 6a9b61c..71cc862 100644 --- a/src/app/orders/page.tsx +++ b/src/app/orders/page.tsx @@ -2,7 +2,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import ReactLenis from "lenis/react"; -import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; +import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleStyleFullscreen/NavbarStyleFullscreen'; import FooterBase from '@/components/sections/footer/FooterBase'; import { CheckCircle, XCircle } from "lucide-react"; @@ -18,6 +18,24 @@ export default function OrdersManagementPage() { const statuses = ["All", "Completed", "Pending", "Processing", "Cancelled"]; + const navItems = [ + { name: "Home", id: "/" }, + { name: "Dashboard", id: "/dashboard" }, + { name: "New Order", id: "/new-order" }, + { name: "My Orders", id: "/orders" } + ]; + + const footerColumns = [ + { + title: "Company", items: [ + { label: "About Us", href: "/#features" }, + { label: "Dashboard", href: "/dashboard" }, + { label: "New Order", href: "/new-order" }, + { label: "My Orders", href: "/orders" } + ], + }, + ]; + return ( -
-

Orders Management

+
+

My Orders

- - {statuses.map(status => ( ))} @@ -101,7 +111,7 @@ export default function OrdersManagementPage() { - {statuses.filter(s => s !== 'All').map(status => ( ))} @@ -117,38 +127,7 @@ export default function OrdersManagementPage() {