feat: integrate NextForm logo and modernize dashboard UI with premium sports design
This commit is contained in:
parent
62e2255b5e
commit
7427c97c9c
47
apps/admin/public/logo.svg
Normal file
47
apps/admin/public/logo.svg
Normal file
@ -0,0 +1,47 @@
|
||||
<svg viewBox="0 0 600 700" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1e40af;stop-opacity:1" />
|
||||
<stop offset="50%" style="stop-color:#0369a1;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#0ea5e9;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Main rounded shape background -->
|
||||
<path d="M 150 80 Q 350 50 450 150 L 480 300 Q 500 450 380 550 Q 200 650 100 550 Q 30 450 50 300 L 80 150 Q 100 80 150 80 Z" fill="url(#logoGrad)"/>
|
||||
|
||||
<!-- Arrow pointing up-right (top right) -->
|
||||
<g transform="translate(340, 100)">
|
||||
<path d="M 0 80 L 0 0 M 0 0 L -25 25 M 0 0 L 25 25" stroke="white" stroke-width="20" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
|
||||
<!-- Hand holding dumbbell (left side) -->
|
||||
<g transform="translate(80, 180)">
|
||||
<!-- Upper arm -->
|
||||
<ellipse cx="40" cy="30" rx="25" ry="60" fill="white" opacity="0.95" transform="rotate(-30 40 30)"/>
|
||||
|
||||
<!-- Forearm and hand -->
|
||||
<path d="M 60 80 Q 100 100 140 85" stroke="white" stroke-width="35" fill="none" stroke-linecap="round" opacity="0.95"/>
|
||||
|
||||
<!-- Fingers -->
|
||||
<circle cx="145" cy="75" r="15" fill="white" opacity="0.95"/>
|
||||
<circle cx="155" cy="90" r="12" fill="white" opacity="0.95"/>
|
||||
<circle cx="150" cy="105" r="13" fill="white" opacity="0.95"/>
|
||||
|
||||
<!-- Dumbbell bar -->
|
||||
<rect x="155" y="75" width="110" height="28" rx="14" fill="white" opacity="0.95"/>
|
||||
|
||||
<!-- Left weight plate -->
|
||||
<circle cx="155" cy="89" r="45" fill="white" opacity="0.95"/>
|
||||
<circle cx="155" cy="89" r="38" fill="url(#logoGrad)" opacity="0.4"/>
|
||||
<rect x="145" y="130" width="20" height="30" fill="white" opacity="0.95" rx="3"/>
|
||||
|
||||
<!-- Right weight plate -->
|
||||
<circle cx="265" cy="89" r="45" fill="white" opacity="0.95"/>
|
||||
<circle cx="265" cy="89" r="38" fill="url(#logoGrad)" opacity="0.4"/>
|
||||
<rect x="255" y="130" width="20" height="30" fill="white" opacity="0.95" rx="3"/>
|
||||
</g>
|
||||
|
||||
<!-- Text at bottom -->
|
||||
<text x="300" y="630" font-size="85" font-weight="900" fill="url(#logoGrad)" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" letter-spacing="2">NextForm</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
BIN
apps/admin/public/nextform-logo.png
Normal file
BIN
apps/admin/public/nextform-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
35
apps/admin/public/nextform-logo.svg
Normal file
35
apps/admin/public/nextform-logo.svg
Normal file
@ -0,0 +1,35 @@
|
||||
<svg viewBox="0 0 600 700" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#2563eb;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#0ea5e9;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Main Shape Background -->
|
||||
<path d="M 150 150 L 350 150 L 450 250 L 450 450 L 350 550 L 150 550 L 50 450 L 50 250 Z" fill="url(logoGradient)" opacity="0.15"/>
|
||||
|
||||
<!-- Dumbbell Icon -->
|
||||
<g transform="translate(200, 200)">
|
||||
<!-- Left Weight -->
|
||||
<circle cx="20" cy="60" r="35" fill="url(logoGradient)"/>
|
||||
<rect x="10" y="70" width="20" height="80" fill="url(logoGradient)"/>
|
||||
|
||||
<!-- Bar -->
|
||||
<rect x="35" y="100" width="130" height="25" rx="12" fill="url(logoGradient)"/>
|
||||
|
||||
<!-- Right Weight -->
|
||||
<circle cx="180" cy="60" r="35" fill="url(logoGradient)"/>
|
||||
<rect x="170" y="70" width="20" height="80" fill="url(logoGradient)"/>
|
||||
|
||||
<!-- Hand -->
|
||||
<ellipse cx="80" cy="20" rx="25" ry="30" fill="url(logoGradient)"/>
|
||||
<path d="M 70 0 Q 65 -15 60 -20" stroke="url(logoGradient)" stroke-width="8" fill="none" stroke-linecap="round"/>
|
||||
<path d="M 85 -5 Q 88 -20 90 -28" stroke="url(logoGradient)" stroke-width="8" fill="none" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<!-- Arrow/Growth -->
|
||||
<g transform="translate(320, 150)">
|
||||
<path d="M 20 100 L 80 40 L 80 70 L 120 30 L 80 30 L 80 0 Z" fill="url(logoGradient)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -47,57 +47,118 @@ export default function Home() {
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Header with Logo and App Name */}
|
||||
<div className="flex items-center gap-4 pb-6 border-b border-slate-200">
|
||||
<div className="w-20 h-20">
|
||||
<img src="/nextform-logo.png" alt="NextForm Logo" className="w-full h-full object-contain" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-slate-900">Dashboard</h2>
|
||||
<p className="text-slate-500 mt-2">Welcome back, here's what's happening today.</p>
|
||||
<h1 className="text-4xl font-black bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
|
||||
NextForm
|
||||
</h1>
|
||||
<p className="text-sm text-slate-500 font-medium">Fitness Management Platform</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Performance Metrics Section */}
|
||||
<div className="mb-20">
|
||||
<div className="mb-8">
|
||||
<h2 className="text-3xl font-black text-slate-900">Performance Metrics</h2>
|
||||
<p className="text-slate-600 mt-2 font-medium">Track key indicators and member activity</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<StatsCard
|
||||
title="Total Users"
|
||||
title="Total Members"
|
||||
value={loading ? "..." : stats.totalUsers}
|
||||
change="+12%" // Placeholder for now as we don't track historical growth yet
|
||||
change="+12% this month"
|
||||
trend="up"
|
||||
icon={Users}
|
||||
color="blue"
|
||||
/>
|
||||
<StatsCard
|
||||
title="Active Clients"
|
||||
title="Active Athletes"
|
||||
value={loading ? "..." : stats.activeClients}
|
||||
change="+5%"
|
||||
change="+5% vs last week"
|
||||
trend="up"
|
||||
icon={CalendarCheck}
|
||||
color="green"
|
||||
color="emerald"
|
||||
/>
|
||||
<StatsCard
|
||||
title="Revenue"
|
||||
value={loading ? "..." : formatCurrency(stats.totalRevenue)}
|
||||
change={`${stats.revenueGrowth > 0 ? "+" : ""}${stats.revenueGrowth}%`}
|
||||
change={`${stats.revenueGrowth > 0 ? "+" : ""}${stats.revenueGrowth}% growth`}
|
||||
trend={stats.revenueGrowth >= 0 ? "up" : "down"}
|
||||
icon={CreditCard}
|
||||
color="purple"
|
||||
color="amber"
|
||||
/>
|
||||
<StatsCard
|
||||
title="Growth"
|
||||
value="24%" // Placeholder
|
||||
change="-2%"
|
||||
trend="down"
|
||||
value="24%"
|
||||
change="+3% vs last month"
|
||||
trend="up"
|
||||
icon={TrendingUp}
|
||||
color="orange"
|
||||
color="cyan"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<div className="lg:col-span-2 bg-white rounded-xl shadow-sm border border-slate-100 p-6">
|
||||
<h3 className="text-xl font-bold text-slate-900 mb-6">Recent Activity</h3>
|
||||
<UserManagement />
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
|
||||
<h3 className="text-xl font-bold text-slate-900 mb-6">Quick Analytics</h3>
|
||||
{/* Members Directory Section */}
|
||||
<div className="mb-20">
|
||||
<div className="mb-8">
|
||||
<h2 className="text-3xl font-black text-slate-900">Members Directory</h2>
|
||||
<p className="text-slate-600 mt-2 font-medium">View detailed member information and analytics</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-3xl shadow-lg border border-slate-100 p-10">
|
||||
<UserManagement />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Key Insights Section */}
|
||||
<div className="mb-20">
|
||||
<div className="mb-8">
|
||||
<h2 className="text-3xl font-black text-slate-900">Key Insights</h2>
|
||||
<p className="text-slate-600 mt-2 font-medium">Quick stats overview</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="bg-white rounded-3xl shadow-lg border border-slate-100 p-8">
|
||||
<div className="p-6 bg-gradient-to-br from-blue-50 via-blue-100 to-blue-50 rounded-2xl border border-blue-200 hover:shadow-md transition-shadow">
|
||||
<p className="text-xs text-blue-700 uppercase font-black tracking-wider">Active Subscriptions</p>
|
||||
<p className="text-3xl font-black text-blue-900 mt-4 truncate">{loading ? "..." : stats.totalUsers}</p>
|
||||
<p className="text-sm text-blue-700 mt-2 font-semibold">Premium members active</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-3xl shadow-lg border border-slate-100 p-8">
|
||||
<div className="p-6 bg-gradient-to-br from-emerald-50 via-emerald-100 to-emerald-50 rounded-2xl border border-emerald-200 hover:shadow-md transition-shadow">
|
||||
<p className="text-xs text-emerald-700 uppercase font-black tracking-wider">Training Activity</p>
|
||||
<p className="text-3xl font-black text-emerald-900 mt-4 truncate">{loading ? "..." : stats.activeClients}</p>
|
||||
<p className="text-sm text-emerald-700 mt-2 font-semibold">Currently training</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-3xl shadow-lg border border-slate-100 p-8">
|
||||
<div className="p-6 bg-gradient-to-br from-amber-50 via-amber-100 to-amber-50 rounded-2xl border border-amber-200 hover:shadow-md transition-shadow">
|
||||
<p className="text-xs text-amber-700 uppercase font-black tracking-wider">Total Revenue</p>
|
||||
<p className="text-2xl font-black text-amber-900 mt-4 truncate">{loading ? "..." : formatCurrency(stats.totalRevenue)}</p>
|
||||
<p className="text-sm text-amber-700 mt-2 font-semibold">This period earnings</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Detailed Report Section */}
|
||||
<div className="mb-20">
|
||||
<div className="mb-8">
|
||||
<h2 className="text-3xl font-black text-slate-900">Detailed Report</h2>
|
||||
<p className="text-slate-600 mt-2 font-medium">Analytics Dashboard</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-3xl shadow-lg border border-slate-100 p-10">
|
||||
<div className="bg-slate-50 rounded-2xl p-8">
|
||||
<AnalyticsDashboard />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ import { useState, useEffect } from 'react'
|
||||
import { UserGrowthChart } from '@/components/charts/UserGrowthChart'
|
||||
import { MembershipDistributionChart } from '@/components/charts/MembershipDistributionChart'
|
||||
import { RevenueChart } from '@/components/charts/RevenueChart'
|
||||
import { Card, CardHeader, CardContent } from '@/components/ui/card'
|
||||
import { Card, CardHeader, CardContent } from '@/components/ui/Card'
|
||||
|
||||
interface ChartData {
|
||||
label: string
|
||||
|
||||
@ -67,10 +67,16 @@ export function Sidebar() {
|
||||
return (
|
||||
<aside className="w-64 bg-slate-900 text-white h-screen fixed left-0 top-0 flex flex-col border-r border-slate-800">
|
||||
<div className="p-6 border-b border-slate-800">
|
||||
<h1 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
|
||||
FitAI Admin
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="w-12 h-12">
|
||||
<img src="/nextform-logo.png" alt="NextForm" className="w-full h-full object-contain" />
|
||||
</div>
|
||||
<h1 className="text-xl font-black bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent">
|
||||
NextForm
|
||||
</h1>
|
||||
</div>
|
||||
<p className="text-xs text-slate-400">Fitness Admin</p>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 p-4 space-y-2">
|
||||
{menuItems.map((item) => {
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { LucideIcon } from "lucide-react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
|
||||
interface StatsCardProps {
|
||||
title: string;
|
||||
@ -7,45 +6,61 @@ interface StatsCardProps {
|
||||
change?: string;
|
||||
trend?: "up" | "down" | "neutral";
|
||||
icon: LucideIcon;
|
||||
color?: "blue" | "green" | "purple" | "orange";
|
||||
color?: "blue" | "emerald" | "amber" | "cyan";
|
||||
}
|
||||
|
||||
export function StatsCard({ title, value, change, trend, icon: Icon, color = "blue" }: StatsCardProps) {
|
||||
const colorStyles = {
|
||||
blue: "bg-blue-50 text-blue-600",
|
||||
green: "bg-green-50 text-green-600",
|
||||
purple: "bg-purple-50 text-purple-600",
|
||||
orange: "bg-orange-50 text-orange-600",
|
||||
blue: {
|
||||
bg: "from-blue-50 via-blue-100 to-blue-50",
|
||||
border: "border-blue-200",
|
||||
icon: "text-blue-700",
|
||||
label: "text-blue-700",
|
||||
value: "text-blue-900"
|
||||
},
|
||||
emerald: {
|
||||
bg: "from-emerald-50 via-emerald-100 to-emerald-50",
|
||||
border: "border-emerald-200",
|
||||
icon: "text-emerald-700",
|
||||
label: "text-emerald-700",
|
||||
value: "text-emerald-900"
|
||||
},
|
||||
amber: {
|
||||
bg: "from-amber-50 via-amber-100 to-amber-50",
|
||||
border: "border-amber-200",
|
||||
icon: "text-amber-700",
|
||||
label: "text-amber-700",
|
||||
value: "text-amber-900"
|
||||
},
|
||||
cyan: {
|
||||
bg: "from-cyan-50 via-cyan-100 to-cyan-50",
|
||||
border: "border-cyan-200",
|
||||
icon: "text-cyan-700",
|
||||
label: "text-cyan-700",
|
||||
value: "text-cyan-900"
|
||||
}
|
||||
};
|
||||
|
||||
const styles = colorStyles[color];
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||
{title}
|
||||
</CardTitle>
|
||||
<div className={`p-2 rounded-lg ${colorStyles[color]}`}>
|
||||
<Icon size={16} />
|
||||
<div className="bg-white rounded-3xl shadow-lg border border-slate-100 p-8 hover:shadow-xl transition-shadow">
|
||||
<div className={`p-6 bg-gradient-to-br ${styles.bg} rounded-2xl border ${styles.border} hover:shadow-md transition-shadow`}>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<p className={`text-xs ${styles.label} uppercase font-black tracking-wider`}>{title}</p>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{value}</div>
|
||||
<div className={`${styles.icon} opacity-60`}>
|
||||
<Icon size={24} />
|
||||
</div>
|
||||
</div>
|
||||
<p className={`text-4xl font-black ${styles.value} mt-4 truncate`}>{value}</p>
|
||||
{change && (
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
<span
|
||||
className={`font-medium ${trend === "up"
|
||||
? "text-green-600"
|
||||
: trend === "down"
|
||||
? "text-red-600"
|
||||
: "text-slate-600"
|
||||
}`}
|
||||
>
|
||||
<p className={`text-sm ${styles.label} mt-3 font-semibold`}>
|
||||
{change}
|
||||
</span>{" "}
|
||||
vs last month
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { Card, CardHeader, CardContent } from "@/components/ui/card";
|
||||
import { Card, CardHeader, CardContent } from "@/components/ui/Card";
|
||||
|
||||
interface Recommendation {
|
||||
id: string;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { UserGrid } from "@/components/users/UserGrid";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { Card, CardHeader, CardContent } from "@/components/ui/card";
|
||||
import { Card, CardHeader, CardContent } from "@/components/ui/Card";
|
||||
|
||||
interface User {
|
||||
id: string;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user