g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

testing

Browse Source
This commit is contained in:
NotII
2025-03-19 14:06:58 +01:00
parent 6bdcb15552
commit 57e196cc6a
3 changed files with 499 additions and 902 deletions
Download Patch File Download Diff File Expand all files Collapse all files

287
app/dashboard/admin/page.tsx
View File

@@ -1,172 +1,161 @@
"use client"; "use client";
import React, { useState, useEffect } from "react"; import React, { useEffect, useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; // Example chart library:
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; // import { LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid } from "recharts";
import { Button } from "@/components/ui/button";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; interface DailyDataPoint {
import { date: string;
AlertCircle, Users, MessageSquare, BarChart as BarChartIcon, Trash2, Bot, Database, count: number;
DollarSign, CreditCard, Landmark, Shield, Tag }
} from "lucide-react";
import AdminAnalytics from "@/components/admin/AdminAnalytics"; interface AnalyticsData {
success?: boolean;
orders?: {
total: number;
today: number;
week: number;
dailyOrders: DailyDataPoint[];
};
revenue?: {
total: number;
today: number;
week: number;
dailyRevenue: DailyDataPoint[];
};
vendors?: {
total: number;
newToday: number;
newThisWeek: number;
dailyVendors: DailyDataPoint[];
};
engagement?: {
totalChats: number;
activeChatsToday: number;
dailyChats: DailyDataPoint[];
};
products?: {
total: number;
};
message?: string;
}
export default function AdminDashboardPage() { export default function AdminDashboardPage() {
const [activeTab, setActiveTab] = useState("overview"); const [analytics, setAnalytics] = useState<AnalyticsData | null>(null);
const [isAdmin, setIsAdmin] = useState(false);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
useEffect(() => { const fetchAnalytics = async () => {
// Check if the current user is an admin try {
const checkAdminStatus = async () => { setLoading(true);
try { const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/admin/analytics`, {
// Get auth token from cookies headers: {
const token = document.cookie 'Authorization': `Bearer ${process.env.NEXT_PUBLIC_JWT_SECRET}`
.split("; ")
.find((row) => row.startsWith("Authorization="))
?.split("=")[1];
if (!token) {
setIsAdmin(false);
setLoading(false);
return;
} }
});
const data = await response.json();
setAnalytics(data);
} catch (error) {
console.error("Error fetching analytics:", error);
} finally {
setLoading(false);
}
};
const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/auth/me`, { useEffect(() => {
method: "GET", fetchAnalytics();
headers: {
Authorization: `Bearer ${token}`,
},
});
const data = await response.json();
// Check if vendor has admin privileges
setIsAdmin(data.vendor?.isAdmin === true);
} catch (error) {
console.error("Error checking admin status:", error);
setIsAdmin(false);
} finally {
setLoading(false);
}
};
checkAdminStatus();
}, []); }, []);
if (loading) { if (loading) {
return <div className="p-4">Loading Admin Dashboard...</div>;
}
if (!analytics?.success) {
return ( return (
<div className="flex justify-center items-center h-screen"> <div className="p-4">
<div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full"></div> <h2>Error Fetching Analytics</h2>
<p>{analytics?.message || "Unknown error occurred."}</p>
</div> </div>
); );
} }
if (!isAdmin) { // Deconstruct the analytics data
return ( const {
<div className="container mx-auto p-6"> orders,
<Alert variant="destructive"> revenue,
<AlertCircle className="h-4 w-4" /> vendors,
<AlertTitle>Access Denied</AlertTitle> engagement,
<AlertDescription> products,
You do not have permission to access the admin dashboard. } = analytics;
</AlertDescription>
</Alert>
</div>
);
}
return ( return (
<div className="container mx-auto p-4"> <div className="p-4">
<h1 className="text-2xl font-bold mb-6">Admin Dashboard</h1> <h1 className="text-2xl font-bold mb-4">Admin Dashboard</h1>
<Tabs defaultValue="overview" value={activeTab} onValueChange={setActiveTab}>
<TabsList className="grid grid-cols-5 w-full mb-6">
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="vendors">Vendors</TabsTrigger>
<TabsTrigger value="bot">Bot Management</TabsTrigger>
<TabsTrigger value="sessions">Sessions</TabsTrigger>
<TabsTrigger value="analytics">Analytics</TabsTrigger>
</TabsList>
<TabsContent value="overview">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<Card className="cursor-pointer hover:shadow-md transition-shadow" onClick={() => setActiveTab("vendors")}>
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-md font-medium">Vendor Management</CardTitle>
<Users className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<CardDescription>
View and manage vendors across the platform.
</CardDescription>
</CardContent>
</Card>
<Card className="cursor-pointer hover:shadow-md transition-shadow" onClick={() => setActiveTab("bot")}>
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-md font-medium">Bot Management</CardTitle>
<Bot className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<CardDescription>
Configure and manage the Telegram bot settings.
</CardDescription>
</CardContent>
</Card>
<Card className="cursor-pointer hover:shadow-md transition-shadow" onClick={() => setActiveTab("sessions")}>
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-md font-medium">Session Management</CardTitle>
<Database className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<CardDescription>
Manage active sessions and clear inactive ones.
</CardDescription>
</CardContent>
</Card>
<Card className="cursor-pointer hover:shadow-md transition-shadow" onClick={() => setActiveTab("analytics")}>
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-md font-medium">Analytics</CardTitle>
<BarChartIcon className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<CardDescription>
View platform statistics and performance metrics.
</CardDescription>
</CardContent>
</Card>
<Card className="cursor-pointer hover:shadow-md transition-shadow" onClick={() => setActiveTab("analytics")}> {/* Quick stats row */}
<CardHeader className="flex flex-row items-center justify-between pb-2"> <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
<CardTitle className="text-md font-medium">Promotions</CardTitle> <div className="bg-white rounded shadow p-4">
<Tag className="h-4 w-4 text-muted-foreground" /> <h2 className="font-bold text-lg mb-2">Total Orders</h2>
</CardHeader> <p className="text-xl">{orders?.total || 0}</p>
<CardContent> <p className="text-sm text-gray-600">
<CardDescription> Today: {orders?.today || 0} | This Week: {orders?.week || 0}
Track promotion usage and performance metrics. </p>
</CardDescription> </div>
</CardContent>
</Card>
<Card className="cursor-pointer hover:shadow-md transition-shadow" onClick={() => setActiveTab("analytics")}> <div className="bg-white rounded shadow p-4">
<CardHeader className="flex flex-row items-center justify-between pb-2"> <h2 className="font-bold text-lg mb-2">Revenue</h2>
<CardTitle className="text-md font-medium">Payments & Escrow</CardTitle> <p className="text-xl">£{revenue?.total?.toFixed(2) || 0}</p>
<Landmark className="h-4 w-4 text-muted-foreground" /> <p className="text-sm text-gray-600">
</CardHeader> Today: £{revenue?.today?.toFixed(2) || 0} | This Week: £{revenue?.week?.toFixed(2) || 0}
<CardContent> </p>
<CardDescription> </div>
Monitor escrow status and financial operations.
</CardDescription> <div className="bg-white rounded shadow p-4">
</CardContent> <h2 className="font-bold text-lg mb-2">Vendors</h2>
</Card> <p className="text-xl">{vendors?.total || 0}</p>
</div> <p className="text-sm text-gray-600">
</TabsContent> New Today: {vendors?.newToday || 0} | This Week: {vendors?.newThisWeek || 0}
<TabsContent value="analytics"> </p>
<AdminAnalytics /> </div>
</TabsContent>
</Tabs> <div className="bg-white rounded shadow p-4">
<h2 className="font-bold text-lg mb-2">Chats</h2>
<p className="text-xl">{engagement?.totalChats || 0}</p>
<p className="text-sm text-gray-600">
Active Today: {engagement?.activeChatsToday || 0}
</p>
</div>
<div className="bg-white rounded shadow p-4">
<h2 className="font-bold text-lg mb-2">Products</h2>
<p className="text-xl">{products?.total || 0}</p>
</div>
</div>
{/* Example chart section */}
<div className="mt-8 bg-white p-4 rounded shadow">
<h2 className="text-lg font-bold mb-4">Orders This Week</h2>
{/*
Uncomment and customize if using a chart library like Recharts:
<LineChart
width={800}
height={300}
data={orders?.dailyOrders || []}
margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
>
<CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
<XAxis dataKey="date" />
<YAxis />
<Tooltip />
<Line type="monotone" dataKey="count" stroke="#8884d8" />
</LineChart>
*/}
<pre className="text-sm bg-gray-100 p-2 rounded mt-2">
{JSON.stringify(orders?.dailyOrders, null, 2)}
</pre>
</div>
</div> </div>
); );
} }

24
app/dashboard/orders/[id]/page.tsx
View File

@@ -132,11 +132,17 @@ export default function OrderDetailsPage() {
const results = await Promise.all(responses.map((res) => res)); const results = await Promise.all(responses.map((res) => res));
results.forEach((product, index) => { results.forEach((product, index) => {
productNamesMap[productIds[index]] = product.name || "Unknown Product"; productNamesMap[productIds[index]] = product.name || "Unknown Product (Deleted)";
}); });
} catch (err) { } catch (err) {
console.error("Failed to fetch product names:", err); console.error("Failed to fetch product names:", err);
// Initialize product names that failed to load
productIds.forEach(id => {
if (!productNamesMap[id]) {
productNamesMap[id] = "Unknown Product (Deleted)";
}
});
} }
return productNamesMap; return productNamesMap;
}; };
@@ -323,6 +329,20 @@ export default function OrderDetailsPage() {
const productIds = data.products.map((product) => product.productId); const productIds = data.products.map((product) => product.productId);
const productNamesMap = await fetchProductNames(productIds, authToken); const productNamesMap = await fetchProductNames(productIds, authToken);
setProductNames(productNamesMap); setProductNames(productNamesMap);
// Add a short timeout to ensure any products still showing as loading
// are marked as deleted/unknown
setTimeout(() => {
setProductNames(prev => {
const newMap = {...prev};
productIds.forEach(id => {
if (!newMap[id] || newMap[id] === "Loading...") {
newMap[id] = "Unknown Product (Deleted)";
}
});
return newMap;
});
}, 3000); // 3 second timeout
if (data.status === "paid") { if (data.status === "paid") {
setIsPaid(true); setIsPaid(true);
@@ -603,7 +623,7 @@ export default function OrderDetailsPage() {
{order?.products.map((product) => ( {order?.products.map((product) => (
<TableRow key={product._id}> <TableRow key={product._id}>
<TableCell> <TableCell>
{productNames[product.productId] || "Loading..."} {productNames[product.productId] || "Unknown Product (Deleted)"}
</TableCell> </TableCell>
<TableCell>{product.quantity}</TableCell> <TableCell>{product.quantity}</TableCell>
<TableCell>£{product.pricePerUnit.toFixed(2)}</TableCell> <TableCell>£{product.pricePerUnit.toFixed(2)}</TableCell>

1090
components/admin/AdminAnalytics.tsx
View File

File diff suppressed because it is too large Load Diff