9db589d43f
feat(admin-web): implement basic layout and navigation feat(admin-web): implement dashboard page with key metrics feat(admin-web): implement user management page feat(admin-web): implement analytics page with user stats feat(admin-web): implement logs explorer page style(admin-web): add tailwind css and shadcn/ui components build(admin-web): configure eslint and prettier for code quality This commit introduces the admin-web application, a React-based administration console built with Vite. - The application provides a central interface for managing users, monitoring platform health, and troubleshooting issues. - It includes a basic layout with navigation, a dashboard displaying key metrics, a user management page, an analytics page with user statistics, and a logs explorer page. - Tailwind CSS and shadcn/ui components are used for styling. - ESLint and Prettier are configured to ensure code quality.
61 lines
2.1 KiB
JavaScript
61 lines
2.1 KiB
JavaScript
import React from "react";
|
|
|
|
const topUsers = [
|
|
{ email: "ian.gomez@example.com", visits: 6950 },
|
|
{ email: "admin@krow.com", visits: 193 },
|
|
{ email: "paula.orte@example.com", visits: 81 },
|
|
{ email: "test.user@example.com", visits: 50 },
|
|
];
|
|
|
|
const topPages = [
|
|
{ name: "VendorManagement", visits: 718 },
|
|
{ name: "Dashboard", visits: 600 },
|
|
{ name: "unknown", visits: 587 },
|
|
{ name: "ClientDashboard", visits: 475 },
|
|
{ name: "Events", visits: 456 },
|
|
];
|
|
|
|
export default function Analytics() {
|
|
return (
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-slate-800">Analytics</h1>
|
|
<p className="mt-2 text-base text-slate-600">
|
|
An overview of your application's data.
|
|
</p>
|
|
|
|
<div className="mt-8">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div className="bg-white shadow-lg rounded-2xl p-6">
|
|
<h3 className="text-lg font-medium text-gray-900">Total Unique Users</h3>
|
|
<p className="mt-2 text-4xl font-bold text-blue-600">3</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<div>
|
|
<h3 className="text-xl font-semibold text-gray-900">Top Users</h3>
|
|
<ul className="mt-4 space-y-4">
|
|
{topUsers.map((user) => (
|
|
<li key={user.email} className="bg-white shadow-lg rounded-2xl p-4">
|
|
<p className="font-semibold text-slate-800">{user.email}</p>
|
|
<p className="text-slate-500">{user.visits.toLocaleString()} visits</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-semibold text-gray-900">Top Pages</h3>
|
|
<ul className="mt-4 space-y-4">
|
|
{topPages.map((page) => (
|
|
<li key={page.name} className="bg-white shadow-lg rounded-2xl p-4 flex justify-between items-center">
|
|
<p className="font-semibold text-slate-800">{page.name}</p>
|
|
<p className="text-slate-500 font-medium">{page.visits.toLocaleString()}</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |