Seazn/profit-planet-frontend
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

beautify: unified admin dashboard style

Browse Source
This commit is contained in:
DeathKaioken 2025-10-16 10:27:56 +02:00
parent 4d10052ce8
commit eab249ab1f
2 changed files with 34 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/app/admin/page.tsx
View File

@ -49,14 +49,12 @@ export default function AdminDashboardPage() {
if (!isClient) { if (!isClient) {
return ( return (
<PageLayout> <PageLayout>
<div className="relative flex flex-col flex-1 px-4 sm:px-6 lg:px-10 py-10"> <div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="relative mx-auto w-full max-w-4xl space-y-8 bg-white/95 backdrop-blur rounded-2xl shadow-2xl ring-1 ring-black/10 p-6 sm:p-10">
<div className="text-center"> <div className="text-center">
<div className="h-4 w-4 rounded-full border-2 border-blue-500 border-b-transparent animate-spin mx-auto mb-4" /> <div className="h-12 w-12 rounded-full border-2 border-blue-500 border-b-transparent animate-spin mx-auto mb-4" />
<p className="text-gray-600">Loading...</p> <p className="text-gray-600">Loading...</p>
</div> </div>
</div> </div>
</div>
</PageLayout> </PageLayout>
) )
} }
@ -65,8 +63,8 @@ export default function AdminDashboardPage() {
if (!isAdmin) { if (!isAdmin) {
return ( return (
<PageLayout> <PageLayout>
<div className="relative flex flex-col flex-1 px-4 sm:px-6 lg:px-10 py-10"> <div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="relative mx-auto w-full max-w-4xl space-y-8 bg-white/95 backdrop-blur rounded-2xl shadow-2xl ring-1 ring-red-500/20 p-6 sm:p-10"> <div className="mx-auto w-full max-w-xl rounded-2xl bg-white shadow ring-1 ring-red-500/20 p-8">
<div className="text-center"> <div className="text-center">
<h1 className="text-2xl font-bold text-red-600 mb-2">Access Denied</h1> <h1 className="text-2xl font-bold text-red-600 mb-2">Access Denied</h1>
<p className="text-gray-600">You need admin privileges to access this page.</p> <p className="text-gray-600">You need admin privileges to access this page.</p>
@ -79,43 +77,18 @@ export default function AdminDashboardPage() {
return ( return (
<PageLayout> <PageLayout>
<div className="relative flex flex-col flex-1 px-4 sm:px-6 lg:px-10 py-10"> <div className="min-h-screen bg-gray-50">
{/* Background */} <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="fixed inset-0 -z-10">
<div className="absolute inset-0 -z-20 bg-gradient-to-br from-[#0b3e98] via-[#0d51c2] to-[#1d66d9]" />
<svg aria-hidden="true" className="absolute inset-0 -z-10 h-full w-full stroke-white/10">
<defs>
<pattern id="admin-dash-pattern" x="50%" y={-1} width={200} height={200} patternUnits="userSpaceOnUse">
<path d="M.5 200V.5H200" fill="none" stroke="rgba(255,255,255,0.05)" />
</pattern>
</defs>
<rect fill="url(#admin-dash-pattern)" width="100%" height="100%" strokeWidth={0} />
</svg>
<div
aria-hidden="true"
className="absolute top-0 right-0 left-1/2 -ml-24 blur-3xl transform-gpu overflow-hidden lg:ml-24 xl:ml-48"
>
<div
className="aspect-[801/1036] w-[50.0625rem] bg-gradient-to-tr from-[#94b3ff] to-[#a78bfa] opacity-40"
style={{ clipPath: 'polygon(63.1% 29.5%,100% 17.1%,76.6% 3%,48.4% 0%,44.6% 4.7%,54.5% 25.3%,59.8% 49%,55.2% 57.8%,44.4% 57.2%,27.8% 47.9%,35.1% 81.5%,0% 97.7%,39.2% 100%,35.2% 81.4%,97.2% 52.8%,63.1% 29.5%)' }}
/>
</div>
</div>
{/* Outer container card */}
<div className="relative mx-auto w-full max-w-7xl bg-white/90 backdrop-blur rounded-2xl shadow-2xl ring-1 ring-black/10 p-6 sm:p-10 space-y-8">
{/* Heading */} {/* Heading */}
<div className="space-y-2"> <div className="mb-8">
<h1 className="text-3xl sm:text-4xl font-bold tracking-tight text-[#11306b]"> <h1 className="text-3xl font-bold text-gray-900">Admin Dashboard</h1>
Admin Dashboard <p className="text-sm sm:text-base text-gray-600 mt-2">
</h1>
<p className="text-sm sm:text-base text-[#34507d] font-medium">
Manage all administrative features, user management, permissions, and global settings. Manage all administrative features, user management, permissions, and global settings.
</p> </p>
</div> </div>
{/* Warning banner */} {/* Warning banner */}
<div className="rounded-lg border border-red-300 bg-red-50/90 text-red-700 px-5 py-4 flex gap-3 items-start text-sm"> <div className="rounded-lg border border-red-300 bg-red-50 text-red-700 px-5 py-4 flex gap-3 items-start text-sm mb-8">
<ExclamationTriangleIcon className="h-5 w-5 flex-shrink-0 text-red-500 mt-0.5" /> <ExclamationTriangleIcon className="h-5 w-5 flex-shrink-0 text-red-500 mt-0.5" />
<div className="leading-relaxed"> <div className="leading-relaxed">
<p className="font-semibold mb-0.5"> <p className="font-semibold mb-0.5">
@ -128,7 +101,7 @@ export default function AdminDashboardPage() {
</div> </div>
{/* Top grid: User Management + Permission Management */} {/* Top grid: User Management + Permission Management */}
<div className="grid gap-6 lg:grid-cols-2"> <div className="grid gap-6 lg:grid-cols-2 mb-8">
{/* User Management Card */} {/* User Management Card */}
<div className="rounded-xl border border-gray-200 bg-[#f5f9ff] p-6 shadow-sm hover:shadow-md transition"> <div className="rounded-xl border border-gray-200 bg-[#f5f9ff] p-6 shadow-sm hover:shadow-md transition">
<div className="flex items-start gap-3 mb-5"> <div className="flex items-start gap-3 mb-5">
@ -234,7 +207,6 @@ export default function AdminDashboardPage() {
<button <button
type="button" type="button"
className="w-full inline-flex items-center justify-center gap-2 rounded-md bg-violet-50 hover:bg-violet-100 border border-violet-200 text-violet-700 text-xs sm:text-sm font-medium px-4 py-2.5 transition" className="w-full inline-flex items-center justify-center gap-2 rounded-md bg-violet-50 hover:bg-violet-100 border border-violet-200 text-violet-700 text-xs sm:text-sm font-medium px-4 py-2.5 transition"
// TODO: navigate to permissions page
onClick={() => router.push('/admin/user-management')} onClick={() => router.push('/admin/user-management')}
> >
Go to Permission Management Go to Permission Management
@ -312,7 +284,7 @@ export default function AdminDashboardPage() {
</div> </div>
</div> </div>
</div> </main>
</div> </div>
</PageLayout> </PageLayout>
) )

52
src/app/admin/user-verify/page.tsx
View File

@ -106,14 +106,12 @@ export default function AdminUserVerifyPage() {
if (!isClient) { if (!isClient) {
return ( return (
<PageLayout> <PageLayout>
<div className="relative flex flex-col flex-1 px-4 sm:px-6 lg:px-10 py-10"> <div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="relative mx-auto w-full max-w-4xl space-y-8 bg-white/95 backdrop-blur rounded-2xl shadow-2xl ring-1 ring-black/10 p-6 sm:p-10">
<div className="text-center"> <div className="text-center">
<div className="h-4 w-4 rounded-full border-2 border-blue-500 border-b-transparent animate-spin mx-auto mb-4" /> <div className="h-12 w-12 rounded-full border-2 border-blue-500 border-b-transparent animate-spin mx-auto mb-4" />
<p className="text-gray-600">Loading...</p> <p className="text-gray-600">Loading...</p>
</div> </div>
</div> </div>
</div>
</PageLayout> </PageLayout>
) )
} }
@ -122,8 +120,8 @@ export default function AdminUserVerifyPage() {
if (!isAdmin) { if (!isAdmin) {
return ( return (
<PageLayout> <PageLayout>
<div className="relative flex flex-col flex-1 px-4 sm:px-6 lg:px-10 py-10"> <div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="relative mx-auto w-full max-w-4xl space-y-8 bg-white/95 backdrop-blur rounded-2xl shadow-2xl ring-1 ring-red-500/20 p-6 sm:p-10"> <div className="mx-auto w-full max-w-xl rounded-2xl bg-white shadow ring-1 ring-red-500/20 p-8">
<div className="text-center"> <div className="text-center">
<ExclamationTriangleIcon className="mx-auto h-12 w-12 text-red-500 mb-4" /> <ExclamationTriangleIcon className="mx-auto h-12 w-12 text-red-500 mb-4" />
<h1 className="text-2xl font-bold text-red-600 mb-2">Access Denied</h1> <h1 className="text-2xl font-bold text-red-600 mb-2">Access Denied</h1>
@ -137,43 +135,19 @@ export default function AdminUserVerifyPage() {
return ( return (
<PageLayout> <PageLayout>
<div className="relative flex flex-col flex-1 px-4 sm:px-6 lg:px-10 py-10"> <div className="min-h-screen bg-gray-50">
{/* Background */} <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="fixed inset-0 -z-10"> {/* Title (unified) */}
<div className="absolute inset-0 -z-20 bg-gradient-to-tr from-[#0d3894] via-[#1860d2] to-[#1d66d9]" /> <div className="mb-8 text-left">
<svg aria-hidden="true" className="absolute inset-0 h-full w-full stroke-white/10"> <h1 className="text-3xl font-bold text-gray-900">User Verification Center</h1>
<defs> <p className="mt-2 text-sm sm:text-base text-gray-600">
<pattern id="admin-user-verify-pattern" x="50%" y={-1} width={200} height={200} patternUnits="userSpaceOnUse">
<path d="M.5 200V.5H200" fill="none" stroke="rgba(255,255,255,0.05)" />
</pattern>
</defs>
<rect fill="url(#admin-user-verify-pattern)" width="100%" height="100%" strokeWidth={0} />
</svg>
<div
aria-hidden="true"
className="absolute top-0 right-0 left-1/2 -ml-24 blur-3xl transform-gpu overflow-hidden lg:ml-24 xl:ml-48"
>
<div
className="aspect-[801/1036] w-[50.0625rem] bg-gradient-to-tr from-[#5b8dff] to-[#a78bfa] opacity-40"
style={{ clipPath: 'polygon(63.1% 29.5%,100% 17.1%,76.6% 3%,48.4% 0%,44.6% 4.7%,54.5% 25.3%,59.8% 49%,55.2% 57.8%,44.4% 57.2%,27.8% 47.9%,35.1% 81.5%,0% 97.7%,39.2% 100%,35.2% 81.4%,97.2% 52.8%,63.1% 29.5%)' }}
/>
</div>
</div>
{/* Outer container */}
<div className="relative mx-auto w-full max-w-7xl space-y-8 bg-white/95 backdrop-blur rounded-2xl shadow-2xl ring-1 ring-black/10 p-6 sm:p-10">
<div className="text-center">
<h1 className="text-3xl sm:text-4xl font-bold tracking-tight text-[#0e2f63]">
User Verification Center
</h1>
<p className="mt-2 text-sm sm:text-base text-[#33507d] font-medium">
Review and verify all users who need admin approval. Users must complete all steps before verification. Review and verify all users who need admin approval. Users must complete all steps before verification.
</p> </p>
</div> </div>
{/* Error Message */} {/* Error Message */}
{error && ( {error && (
<div className="rounded-lg border border-red-300 bg-red-50 text-red-700 px-5 py-4 flex gap-3 items-start"> <div className="rounded-lg border border-red-300 bg-red-50 text-red-700 px-5 py-4 flex gap-3 items-start mb-6">
<ExclamationTriangleIcon className="h-5 w-5 flex-shrink-0 text-red-500 mt-0.5" /> <ExclamationTriangleIcon className="h-5 w-5 flex-shrink-0 text-red-500 mt-0.5" />
<div> <div>
<p className="font-semibold">Error loading data</p> <p className="font-semibold">Error loading data</p>
@ -191,7 +165,7 @@ export default function AdminUserVerifyPage() {
{/* Filter Card */} {/* Filter Card */}
<form <form
onSubmit={applyFilters} onSubmit={applyFilters}
className="bg-white rounded-xl shadow-sm ring-1 ring-gray-200 px-4 sm:px-6 py-5 flex flex-col gap-4" className="bg-white rounded-xl shadow-sm ring-1 ring-gray-200 px-4 sm:px-6 py-5 flex flex-col gap-4 mb-6"
> >
<h2 className="text-sm font-semibold text-[#0f2c55]"> <h2 className="text-sm font-semibold text-[#0f2c55]">
Search & Filter Pending Users Search & Filter Pending Users
@ -382,7 +356,7 @@ export default function AdminUserVerifyPage() {
</div> </div>
</div> </div>
</div> </div>
</div> </main>
</div> </div>
</PageLayout> </PageLayout>
) )