beautify: added waves bg
This commit is contained in:
DeathKaioken
parent
94fbd080d3
commit
7defd9e596
@ -1,6 +1,7 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import PageLayout from '../components/PageLayout'
|
import PageLayout from '../components/PageLayout'
|
||||||
|
import Waves from '../components/waves'
|
||||||
import {
|
import {
|
||||||
UsersIcon,
|
UsersIcon,
|
||||||
ExclamationTriangleIcon,
|
ExclamationTriangleIcon,
|
||||||
@ -84,74 +85,94 @@ export default function AdminDashboardPage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<PageLayout>
|
<PageLayout>
|
||||||
<div className="bg-gradient-to-tr from-blue-50 via-white to-blue-100 min-h-screen">
|
<div
|
||||||
<main className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 py-8">
|
className="relative w-full flex flex-col min-h-screen overflow-hidden"
|
||||||
{/* Header */}
|
style={{ backgroundImage: 'none', background: 'none' }}
|
||||||
<header className="sticky top-0 z-10 bg-white/90 backdrop-blur border-b border-blue-100 py-10 px-8 rounded-2xl shadow-lg flex flex-col gap-4 mb-8">
|
>
|
||||||
<div>
|
<Waves
|
||||||
<h1 className="text-4xl font-extrabold text-blue-900 tracking-tight">Admin Dashboard</h1>
|
className="pointer-events-none"
|
||||||
<p className="text-lg text-blue-700 mt-2">
|
lineColor="#0f172a"
|
||||||
Manage all administrative features, user management, permissions, and global settings.
|
backgroundColor="rgba(245, 245, 240, 1)"
|
||||||
</p>
|
waveSpeedX={0.02}
|
||||||
</div>
|
waveSpeedY={0.01}
|
||||||
</header>
|
waveAmpX={40}
|
||||||
|
waveAmpY={20}
|
||||||
|
friction={0.9}
|
||||||
|
tension={0.01}
|
||||||
|
maxCursorMove={120}
|
||||||
|
xGap={12}
|
||||||
|
yGap={36}
|
||||||
|
/>
|
||||||
|
|
||||||
{/* Warning banner */}
|
<div className="relative z-10 min-h-screen flex flex-col">
|
||||||
<div className="rounded-2xl border border-red-300 bg-red-50 text-red-700 px-8 py-6 flex gap-3 items-start text-base mb-8 shadow">
|
<main className="flex-1 max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 py-8 w-full">
|
||||||
<ExclamationTriangleIcon className="h-6 w-6 flex-shrink-0 text-red-500 mt-0.5" />
|
<div className="rounded-3xl bg-white/70 backdrop-blur-md border border-white/60 shadow-lg p-6 sm:p-8">
|
||||||
<div className="leading-relaxed">
|
{/* Header */}
|
||||||
<p className="font-semibold mb-0.5">
|
<header className="flex flex-col gap-4 mb-8">
|
||||||
Warning: Settings and actions below this point can have consequences for the entire system!
|
|
||||||
</p>
|
|
||||||
<p className="text-red-600/80 hidden sm:block">
|
|
||||||
Manage all administrative features, user management, permissions, and global settings.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Stats Card */}
|
|
||||||
<div className="mb-8 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-6">
|
|
||||||
<div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
|
|
||||||
<div className="text-xs text-gray-500">Total Users</div>
|
|
||||||
<div className="text-xl font-semibold text-blue-900">{displayStats.totalUsers}</div>
|
|
||||||
</div>
|
|
||||||
<div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
|
|
||||||
<div className="text-xs text-gray-500">Admins</div>
|
|
||||||
<div className="text-xl font-semibold text-indigo-700">{displayStats.adminUsers}</div>
|
|
||||||
</div>
|
|
||||||
<div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
|
|
||||||
<div className="text-xs text-gray-500">Active</div>
|
|
||||||
<div className="text-xl font-semibold text-green-700">{displayStats.activeUsers}</div>
|
|
||||||
</div>
|
|
||||||
<div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
|
|
||||||
<div className="text-xs text-gray-500">Pending Verification</div>
|
|
||||||
<div className="text-xl font-semibold text-amber-700">{displayStats.verificationPending}</div>
|
|
||||||
</div>
|
|
||||||
<div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
|
|
||||||
<div className="text-xs text-gray-500">Personal</div>
|
|
||||||
<div className="text-xl font-semibold text-blue-700">{displayStats.personalUsers}</div>
|
|
||||||
</div>
|
|
||||||
<div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
|
|
||||||
<div className="text-xs text-gray-500">Company</div>
|
|
||||||
<div className="text-xl font-semibold text-purple-700">{displayStats.companyUsers}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Management Shortcuts Card */}
|
|
||||||
<div className="mb-8">
|
|
||||||
<div className="rounded-2xl border border-gray-100 bg-white p-8 shadow-lg hover:shadow-xl transition">
|
|
||||||
<div className="flex items-start gap-4 mb-6">
|
|
||||||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100">
|
|
||||||
<Squares2X2Icon className="h-7 w-7 text-blue-600" />
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-lg font-semibold text-blue-900">Management Shortcuts</h2>
|
<h1 className="text-4xl font-extrabold text-blue-900 tracking-tight">Admin Dashboard</h1>
|
||||||
<p className="text-sm text-blue-700 mt-0.5">
|
<p className="text-lg text-blue-700 mt-2">
|
||||||
Quick access to common admin modules.
|
Manage all administrative features, user management, permissions, and global settings.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Warning banner */}
|
||||||
|
<div className="rounded-2xl border border-red-300 bg-red-50 text-red-700 px-8 py-6 flex gap-3 items-start text-base mb-8 shadow">
|
||||||
|
<ExclamationTriangleIcon className="h-6 w-6 flex-shrink-0 text-red-500 mt-0.5" />
|
||||||
|
<div className="leading-relaxed">
|
||||||
|
<p className="font-semibold mb-0.5">
|
||||||
|
Warning: Settings and actions below this point can have consequences for the entire system!
|
||||||
|
</p>
|
||||||
|
<p className="text-red-600/80 hidden sm:block">
|
||||||
|
Manage all administrative features, user management, permissions, and global settings.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
|
{/* Stats Card */}
|
||||||
|
<div className="mb-8 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-6">
|
||||||
|
<div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
|
||||||
|
<div className="text-xs text-gray-500">Total Users</div>
|
||||||
|
<div className="text-xl font-semibold text-blue-900">{displayStats.totalUsers}</div>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
|
||||||
|
<div className="text-xs text-gray-500">Admins</div>
|
||||||
|
<div className="text-xl font-semibold text-indigo-700">{displayStats.adminUsers}</div>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
|
||||||
|
<div className="text-xs text-gray-500">Active</div>
|
||||||
|
<div className="text-xl font-semibold text-green-700">{displayStats.activeUsers}</div>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
|
||||||
|
<div className="text-xs text-gray-500">Pending Verification</div>
|
||||||
|
<div className="text-xl font-semibold text-amber-700">{displayStats.verificationPending}</div>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
|
||||||
|
<div className="text-xs text-gray-500">Personal</div>
|
||||||
|
<div className="text-xl font-semibold text-blue-700">{displayStats.personalUsers}</div>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-xl bg-white border border-gray-100 p-5 text-center shadow">
|
||||||
|
<div className="text-xs text-gray-500">Company</div>
|
||||||
|
<div className="text-xl font-semibold text-purple-700">{displayStats.companyUsers}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Management Shortcuts Card */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<div className="rounded-2xl border border-gray-100 bg-white p-8 shadow-lg hover:shadow-xl transition">
|
||||||
|
<div className="flex items-start gap-4 mb-6">
|
||||||
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100">
|
||||||
|
<Squares2X2Icon className="h-7 w-7 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-lg font-semibold text-blue-900">Management Shortcuts</h2>
|
||||||
|
<p className="text-sm text-blue-700 mt-0.5">
|
||||||
|
Quick access to common admin modules.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
{/* Matrix Management */}
|
{/* Matrix Management */}
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@ -303,80 +324,81 @@ export default function AdminDashboardPage() {
|
|||||||
}`}
|
}`}
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Server Status & Logs */}
|
|
||||||
<div className="rounded-2xl border border-gray-100 bg-white p-8 shadow-lg hover:shadow-xl transition">
|
|
||||||
<div className="flex items-start gap-4 mb-6">
|
|
||||||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gray-100">
|
|
||||||
<ServerStackIcon className="h-7 w-7 text-gray-700" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2 className="text-lg font-semibold text-gray-900">
|
|
||||||
Server Status & Logs
|
|
||||||
</h2>
|
|
||||||
<p className="text-sm text-gray-500 mt-0.5">
|
|
||||||
System health, resource usage & recent error insights.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-8 lg:grid-cols-3">
|
|
||||||
{/* Metrics */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<span className={`h-2.5 w-2.5 rounded-full ${serverStats.status === 'Online' ? 'bg-emerald-500' : 'bg-red-500'}`} />
|
|
||||||
<p className="text-base">
|
|
||||||
<span className="font-semibold">Server Status:</span>{' '}
|
|
||||||
<span className={serverStats.status === 'Online' ? 'text-emerald-600 font-medium' : 'text-red-600 font-medium'}>
|
|
||||||
{serverStats.status === 'Online' ? 'Server Online' : 'Offline'}
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="text-sm space-y-1 text-gray-600">
|
|
||||||
<p><span className="font-medium text-gray-700">Uptime:</span> {serverStats.uptime}</p>
|
|
||||||
<p><span className="font-medium text-gray-700">CPU Usage:</span> {serverStats.cpu}</p>
|
|
||||||
<p><span className="font-medium text-gray-700">Memory Usage:</span> {serverStats.memory} GB</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
|
||||||
<CpuChipIcon className="h-4 w-4" />
|
|
||||||
<span>Autoscaled environment (mock)</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Divider */}
|
{/* Server Status & Logs */}
|
||||||
<div className="hidden lg:block border-l border-gray-200" />
|
<div className="rounded-2xl border border-gray-100 bg-white p-8 shadow-lg hover:shadow-xl transition">
|
||||||
|
<div className="flex items-start gap-4 mb-6">
|
||||||
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gray-100">
|
||||||
|
<ServerStackIcon className="h-7 w-7 text-gray-700" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900">
|
||||||
|
Server Status & Logs
|
||||||
|
</h2>
|
||||||
|
<p className="text-sm text-gray-500 mt-0.5">
|
||||||
|
System health, resource usage & recent error insights.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Logs */}
|
<div className="grid gap-8 lg:grid-cols-3">
|
||||||
<div className="lg:col-span-2">
|
{/* Metrics */}
|
||||||
<h3 className="text-base font-semibold text-gray-800 mb-3">
|
<div className="space-y-4">
|
||||||
Recent Error Logs
|
<div className="flex items-center gap-3">
|
||||||
</h3>
|
<span className={`h-2.5 w-2.5 rounded-full ${serverStats.status === 'Online' ? 'bg-emerald-500' : 'bg-red-500'}`} />
|
||||||
{serverStats.recentErrors.length === 0 && (
|
<p className="text-base">
|
||||||
<p className="text-sm text-gray-500 italic">
|
<span className="font-semibold">Server Status:</span>{' '}
|
||||||
No recent logs.
|
<span className={serverStats.status === 'Online' ? 'text-emerald-600 font-medium' : 'text-red-600 font-medium'}>
|
||||||
</p>
|
{serverStats.status === 'Online' ? 'Server Online' : 'Offline'}
|
||||||
)}
|
</span>
|
||||||
{/* Placeholder for future logs list */}
|
</p>
|
||||||
{/* TODO: Replace with mapped log entries */}
|
</div>
|
||||||
<div className="mt-6">
|
<div className="text-sm space-y-1 text-gray-600">
|
||||||
<button
|
<p><span className="font-medium text-gray-700">Uptime:</span> {serverStats.uptime}</p>
|
||||||
type="button"
|
<p><span className="font-medium text-gray-700">CPU Usage:</span> {serverStats.cpu}</p>
|
||||||
className="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-gray-50 hover:bg-gray-100 text-gray-700 text-sm font-medium px-4 py-3 transition"
|
<p><span className="font-medium text-gray-700">Memory Usage:</span> {serverStats.memory} GB</p>
|
||||||
// TODO: navigate to logs / monitoring page
|
</div>
|
||||||
onClick={() => {}}
|
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||||||
>
|
<CpuChipIcon className="h-4 w-4" />
|
||||||
View Full Logs
|
<span>Autoscaled environment (mock)</span>
|
||||||
<ArrowRightIcon className="h-5 w-5" />
|
</div>
|
||||||
</button>
|
</div>
|
||||||
|
|
||||||
|
{/* Divider */}
|
||||||
|
<div className="hidden lg:block border-l border-gray-200" />
|
||||||
|
|
||||||
|
{/* Logs */}
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<h3 className="text-base font-semibold text-gray-800 mb-3">
|
||||||
|
Recent Error Logs
|
||||||
|
</h3>
|
||||||
|
{serverStats.recentErrors.length === 0 && (
|
||||||
|
<p className="text-sm text-gray-500 italic">
|
||||||
|
No recent logs.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{/* Placeholder for future logs list */}
|
||||||
|
{/* TODO: Replace with mapped log entries */}
|
||||||
|
<div className="mt-6">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-gray-50 hover:bg-gray-100 text-gray-700 text-sm font-medium px-4 py-3 transition"
|
||||||
|
// TODO: navigate to logs / monitoring page
|
||||||
|
onClick={() => {}}
|
||||||
|
>
|
||||||
|
View Full Logs
|
||||||
|
<ArrowRightIcon className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</main>
|
||||||
|
</div>
|
||||||
</main>
|
|
||||||
</div>
|
</div>
|
||||||
</PageLayout>
|
</PageLayout>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -2,6 +2,7 @@
|
|||||||
|
|
||||||
import { useEffect, useState, useMemo } from 'react'
|
import { useEffect, useState, useMemo } from 'react'
|
||||||
import PageLayout from '../components/PageLayout'
|
import PageLayout from '../components/PageLayout'
|
||||||
|
import Waves from '../components/waves'
|
||||||
|
|
||||||
type Affiliate = {
|
type Affiliate = {
|
||||||
id: string
|
id: string
|
||||||
@ -89,105 +90,127 @@ export default function AffiliateLinksPage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<PageLayout>
|
<PageLayout>
|
||||||
<div className="bg-gradient-to-tr from-blue-50 via-white to-blue-100 min-h-screen">
|
<div
|
||||||
<main className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 py-8">
|
className="relative w-full flex flex-col min-h-screen overflow-hidden"
|
||||||
{/* Header (aligned with management pages) */}
|
style={{ backgroundImage: 'none', background: 'none' }}
|
||||||
<header className="sticky top-0 z-10 bg-white/90 backdrop-blur border-b border-blue-100 py-10 px-8 rounded-2xl shadow-lg flex flex-col gap-4 mb-8">
|
>
|
||||||
<div>
|
<Waves
|
||||||
<h1 className="text-4xl font-extrabold text-blue-900 tracking-tight">Affiliate Partners</h1>
|
className="pointer-events-none"
|
||||||
<p className="text-lg text-blue-700 mt-2">
|
lineColor="#0f172a"
|
||||||
Discover our trusted partners and earn commissions through affiliate links.
|
backgroundColor="rgba(245, 245, 240, 1)"
|
||||||
</p>
|
waveSpeedX={0.02}
|
||||||
</div>
|
waveSpeedY={0.01}
|
||||||
{/* NEW: Category filter */}
|
waveAmpX={40}
|
||||||
<div className="flex items-center gap-2">
|
waveAmpY={20}
|
||||||
<label className="text-sm text-blue-900 font-medium">Filter by category:</label>
|
friction={0.9}
|
||||||
<select
|
tension={0.01}
|
||||||
value={selectedCategory}
|
maxCursorMove={120}
|
||||||
onChange={(e) => setSelectedCategory(e.target.value)}
|
xGap={12}
|
||||||
className="rounded-md border border-blue-200 bg-white px-3 py-1.5 text-sm text-blue-900 shadow-sm"
|
yGap={36}
|
||||||
>
|
/>
|
||||||
{categories.map(c => (
|
|
||||||
<option key={c} value={c}>{c === 'all' ? 'All' : c}</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
{/* States */}
|
<div className="relative z-10 min-h-screen flex flex-col">
|
||||||
{loading && (
|
<main className="flex-1 max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 py-8 w-full">
|
||||||
<div className="mx-auto max-w-2xl text-center">
|
<div className="rounded-3xl bg-white/70 backdrop-blur-md border border-white/60 shadow-lg p-6 sm:p-8">
|
||||||
<div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-indigo-400 border-b-transparent" />
|
{/* Header (aligned with management pages) */}
|
||||||
<p className="mt-4 text-sm text-gray-600">Loading affiliate partners...</p>
|
<header className="flex flex-col gap-4 mb-8">
|
||||||
</div>
|
<div>
|
||||||
)}
|
<h1 className="text-4xl font-extrabold text-blue-900 tracking-tight">Affiliate Partners</h1>
|
||||||
|
<p className="text-lg text-blue-700 mt-2">
|
||||||
{error && !loading && (
|
Discover our trusted partners and earn commissions through affiliate links.
|
||||||
<div className="mx-auto max-w-2xl rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 text-center">
|
</p>
|
||||||
{error}
|
</div>
|
||||||
</div>
|
{/* NEW: Category filter */}
|
||||||
)}
|
<div className="flex items-center gap-2">
|
||||||
|
<label className="text-sm text-blue-900 font-medium">Filter by category:</label>
|
||||||
{!loading && !error && posts.length === 0 && (
|
<select
|
||||||
<div className="mx-auto max-w-2xl text-center text-sm text-gray-600">
|
value={selectedCategory}
|
||||||
No affiliate partners available at the moment.
|
onChange={(e) => setSelectedCategory(e.target.value)}
|
||||||
</div>
|
className="rounded-md border border-blue-200 bg-white px-3 py-1.5 text-sm text-blue-900 shadow-sm"
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Cards (aligned to white panels, border, shadow) */}
|
|
||||||
{!loading && !error && posts.length > 0 && (
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
|
||||||
{posts.map((post) => {
|
|
||||||
// NEW: highlight when matches selected category (keep all visible)
|
|
||||||
const isHighlighted = selectedCategory !== 'all' && post.category.title === selectedCategory
|
|
||||||
return (
|
|
||||||
<article
|
|
||||||
key={post.id}
|
|
||||||
className={`rounded-2xl bg-white border shadow-lg overflow-hidden flex flex-col transition
|
|
||||||
${isHighlighted ? 'border-2 border-indigo-400 ring-2 ring-indigo-200' : 'border-gray-100'}`}
|
|
||||||
>
|
>
|
||||||
<div className="relative">
|
{categories.map(c => (
|
||||||
<img alt="" src={post.imageUrl} className="aspect-video w-full object-cover" />
|
<option key={c} value={c}>{c === 'all' ? 'All' : c}</option>
|
||||||
</div>
|
))}
|
||||||
<div className="p-6 flex-1 flex flex-col">
|
</select>
|
||||||
<div className="flex items-start justify-between gap-3">
|
</div>
|
||||||
<h3 className="text-xl font-semibold text-blue-900">{post.title}</h3>
|
</header>
|
||||||
{post.commissionRate && (
|
|
||||||
<span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium border border-indigo-200 bg-indigo-50 text-indigo-700">
|
{/* States */}
|
||||||
{post.commissionRate}
|
{loading && (
|
||||||
</span>
|
<div className="mx-auto max-w-2xl text-center">
|
||||||
)}
|
<div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-indigo-400 border-b-transparent" />
|
||||||
</div>
|
<p className="mt-4 text-sm text-gray-600">Loading affiliate partners...</p>
|
||||||
<div className="mt-2 flex flex-wrap gap-2 text-xs">
|
</div>
|
||||||
<a
|
)}
|
||||||
href={post.category.href}
|
|
||||||
className={`inline-flex items-center rounded-full px-2 py-0.5 border text-blue-900
|
{error && !loading && (
|
||||||
${isHighlighted ? 'border-indigo-300 bg-indigo-50' : 'border-blue-200 bg-blue-50'}`}
|
<div className="mx-auto max-w-2xl rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 text-center">
|
||||||
>
|
{error}
|
||||||
{post.category.title}
|
</div>
|
||||||
</a>
|
)}
|
||||||
</div>
|
|
||||||
<p className="mt-3 text-sm text-gray-700 line-clamp-4">{post.description}</p>
|
{!loading && !error && posts.length === 0 && (
|
||||||
<div className="mt-5 flex items-center justify-between">
|
<div className="mx-auto max-w-2xl text-center text-sm text-gray-600">
|
||||||
<a
|
No affiliate partners available at the moment.
|
||||||
href={post.href}
|
</div>
|
||||||
target="_blank"
|
)}
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2 text-sm font-medium shadow transition"
|
{/* Cards (aligned to white panels, border, shadow) */}
|
||||||
>
|
{!loading && !error && posts.length > 0 && (
|
||||||
Visit Affiliate Link
|
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||||
</a>
|
{posts.map((post) => {
|
||||||
<span className="text-[11px] text-gray-500">
|
// NEW: highlight when matches selected category (keep all visible)
|
||||||
External partner website.
|
const isHighlighted = selectedCategory !== 'all' && post.category.title === selectedCategory
|
||||||
</span>
|
return (
|
||||||
</div>
|
<article
|
||||||
</div>
|
key={post.id}
|
||||||
</article>
|
className={`rounded-2xl bg-white border shadow-lg overflow-hidden flex flex-col transition
|
||||||
)
|
${isHighlighted ? 'border-2 border-indigo-400 ring-2 ring-indigo-200' : 'border-gray-100'}`}
|
||||||
})}
|
>
|
||||||
|
<div className="relative">
|
||||||
|
<img alt="" src={post.imageUrl} className="aspect-video w-full object-cover" />
|
||||||
|
</div>
|
||||||
|
<div className="p-6 flex-1 flex flex-col">
|
||||||
|
<div className="flex items-start justify-between gap-3">
|
||||||
|
<h3 className="text-xl font-semibold text-blue-900">{post.title}</h3>
|
||||||
|
{post.commissionRate && (
|
||||||
|
<span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium border border-indigo-200 bg-indigo-50 text-indigo-700">
|
||||||
|
{post.commissionRate}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 flex flex-wrap gap-2 text-xs">
|
||||||
|
<a
|
||||||
|
href={post.category.href}
|
||||||
|
className={`inline-flex items-center rounded-full px-2 py-0.5 border text-blue-900
|
||||||
|
${isHighlighted ? 'border-indigo-300 bg-indigo-50' : 'border-blue-200 bg-blue-50'}`}
|
||||||
|
>
|
||||||
|
{post.category.title}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<p className="mt-3 text-sm text-gray-700 line-clamp-4">{post.description}</p>
|
||||||
|
<div className="mt-5 flex items-center justify-between">
|
||||||
|
<a
|
||||||
|
href={post.href}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2 text-sm font-medium shadow transition"
|
||||||
|
>
|
||||||
|
Visit Affiliate Link
|
||||||
|
</a>
|
||||||
|
<span className="text-[11px] text-gray-500">
|
||||||
|
External partner website.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
</main>
|
||||||
</main>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</PageLayout>
|
</PageLayout>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -13,7 +13,7 @@ interface CurvedLoopProps {
|
|||||||
|
|
||||||
const CurvedLoop: FC<CurvedLoopProps> = ({
|
const CurvedLoop: FC<CurvedLoopProps> = ({
|
||||||
marqueeText = '',
|
marqueeText = '',
|
||||||
speed = 2,
|
speed = 1,
|
||||||
className,
|
className,
|
||||||
curveAmount = -50,
|
curveAmount = -50,
|
||||||
direction = 'left',
|
direction = 'left',
|
||||||
|
|||||||
@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation'
|
|||||||
import useAuthStore from '../store/authStore'
|
import useAuthStore from '../store/authStore'
|
||||||
import Header from '../components/nav/Header'
|
import Header from '../components/nav/Header'
|
||||||
import Footer from '../components/Footer'
|
import Footer from '../components/Footer'
|
||||||
|
import Waves from '../components/waves'
|
||||||
import {
|
import {
|
||||||
ShoppingBagIcon,
|
ShoppingBagIcon,
|
||||||
UsersIcon,
|
UsersIcon,
|
||||||
@ -18,6 +19,7 @@ export default function DashboardPage() {
|
|||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const user = useAuthStore(state => state.user)
|
const user = useAuthStore(state => state.user)
|
||||||
const isAuthReady = useAuthStore(state => state.isAuthReady)
|
const isAuthReady = useAuthStore(state => state.isAuthReady)
|
||||||
|
const isShopEnabled = process.env.NEXT_PUBLIC_SHOW_SHOP !== 'false'
|
||||||
|
|
||||||
// Redirect if not logged in (only after auth is ready)
|
// Redirect if not logged in (only after auth is ready)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -55,7 +57,9 @@ export default function DashboardPage() {
|
|||||||
description: 'Explore sustainable products',
|
description: 'Explore sustainable products',
|
||||||
icon: ShoppingBagIcon,
|
icon: ShoppingBagIcon,
|
||||||
href: '/shop',
|
href: '/shop',
|
||||||
color: 'bg-blue-500'
|
color: 'bg-blue-500',
|
||||||
|
disabled: !isShopEnabled,
|
||||||
|
disabledText: 'This is currently disabled.'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Browse Affiliate Links',
|
title: 'Browse Affiliate Links',
|
||||||
@ -112,11 +116,31 @@ export default function DashboardPage() {
|
|||||||
]
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex flex-col bg-gray-50">
|
<div
|
||||||
<Header />
|
className="relative w-full flex flex-col min-h-screen overflow-hidden"
|
||||||
|
style={{ backgroundImage: 'none', background: 'none' }}
|
||||||
|
>
|
||||||
|
<Waves
|
||||||
|
className="pointer-events-none"
|
||||||
|
lineColor="#0f172a"
|
||||||
|
backgroundColor="rgba(245, 245, 240, 1)"
|
||||||
|
waveSpeedX={0.02}
|
||||||
|
waveSpeedY={0.01}
|
||||||
|
waveAmpX={40}
|
||||||
|
waveAmpY={20}
|
||||||
|
friction={0.9}
|
||||||
|
tension={0.01}
|
||||||
|
maxCursorMove={120}
|
||||||
|
xGap={12}
|
||||||
|
yGap={36}
|
||||||
|
/>
|
||||||
|
|
||||||
<main className="flex-1 py-8 px-4 sm:px-6 lg:px-8">
|
<div className="relative z-10 min-h-screen flex flex-col">
|
||||||
<div className="max-w-7xl mx-auto">
|
<Header />
|
||||||
|
|
||||||
|
<main className="flex-1 py-8 px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="max-w-7xl mx-auto">
|
||||||
|
<div className="rounded-3xl bg-white/70 backdrop-blur-md border border-white/60 shadow-lg p-6 sm:p-8">
|
||||||
{/* Welcome Section */}
|
{/* Welcome Section */}
|
||||||
<div className="mb-8">
|
<div className="mb-8">
|
||||||
<h1 className="text-3xl font-bold text-gray-900">
|
<h1 className="text-3xl font-bold text-gray-900">
|
||||||
@ -172,20 +196,46 @@ export default function DashboardPage() {
|
|||||||
{quickActions.map((action, index) => (
|
{quickActions.map((action, index) => (
|
||||||
<button
|
<button
|
||||||
key={index}
|
key={index}
|
||||||
onClick={() => router.push(action.href)}
|
onClick={() => {
|
||||||
className="bg-white rounded-lg p-6 shadow-sm border border-gray-200 hover:shadow-md transition-shadow text-left group"
|
if (!action.disabled) {
|
||||||
|
router.push(action.href)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
disabled={Boolean(action.disabled)}
|
||||||
|
className={`bg-white rounded-lg p-6 border border-gray-200 text-left group transition-all duration-200 ${
|
||||||
|
action.disabled
|
||||||
|
? 'opacity-60 cursor-not-allowed'
|
||||||
|
: 'shadow-sm hover:shadow-lg hover:-translate-y-1 hover:-translate-y-1 hover:-translate-y-1 transform hover:-translate-y-1'
|
||||||
|
}`}
|
||||||
>
|
>
|
||||||
<div className="flex items-start">
|
<div className="flex items-start">
|
||||||
<div className={`${action.color} rounded-lg p-3 group-hover:scale-105 transition-transform`}>
|
<div
|
||||||
|
className={`${action.color} rounded-lg p-3 ${
|
||||||
|
action.disabled
|
||||||
|
? 'grayscale'
|
||||||
|
: 'group-hover:scale-105 transition-transform'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
<action.icon className="h-6 w-6 text-white" />
|
<action.icon className="h-6 w-6 text-white" />
|
||||||
</div>
|
</div>
|
||||||
<div className="ml-4 flex-1">
|
<div className="ml-4 flex-1">
|
||||||
<h3 className="text-lg font-medium text-gray-900 group-hover:text-[#8D6B1D] transition-colors">
|
<h3
|
||||||
|
className={`text-lg font-medium transition-colors ${
|
||||||
|
action.disabled
|
||||||
|
? 'text-gray-500'
|
||||||
|
: 'text-gray-900 group-hover:text-[#8D6B1D]'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
{action.title}
|
{action.title}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-sm text-gray-600 mt-1">
|
<p className="text-sm text-gray-600 mt-1">
|
||||||
{action.description}
|
{action.description}
|
||||||
</p>
|
</p>
|
||||||
|
{action.disabled && action.disabledText && (
|
||||||
|
<p className="mt-3 text-xs font-medium text-amber-700">
|
||||||
|
{action.disabledText}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
@ -248,11 +298,13 @@ export default function DashboardPage() {
|
|||||||
<span className="text-sm text-gray-500">2 weeks ago</span>
|
<span className="text-sm text-gray-500">2 weeks ago</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user