Merge version_2 into main #3
281
src/app/admin/page.tsx
Normal file
281
src/app/admin/page.tsx
Normal file
@@ -0,0 +1,281 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import { BarChart3, Users, Heart, Settings, LogOut, Menu, X } from "lucide-react";
|
||||
|
||||
export default function AdminPage() {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true);
|
||||
const [activeTab, setActiveTab] = useState("dashboard");
|
||||
|
||||
const stats = [
|
||||
{ label: "Total Pets", value: "234", icon: Heart, color: "#15479c" },
|
||||
{ label: "Active Adoptions", value: "42", icon: Users, color: "#0a7039" },
|
||||
{ label: "Pending Applications", value: "18", icon: BarChart3, color: "#e63946" },
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="smallMedium"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="aurora"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Back to Site", id: "/" }
|
||||
]}
|
||||
brandName="PawShelter Admin"
|
||||
bottomLeftText="Admin Dashboard"
|
||||
bottomRightText="admin@pawshelter.org"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
|
||||
<div className="flex">
|
||||
{/* Sidebar */}
|
||||
<div
|
||||
className={`transition-all duration-300 ${sidebarOpen ? "w-64" : "w-20"} bg-white border-r border-gray-200 shadow-lg min-h-screen`}
|
||||
>
|
||||
<div className="p-6 flex items-center justify-between">
|
||||
{sidebarOpen && <h2 className="text-xl font-bold text-gray-800">Admin</h2>}
|
||||
<button
|
||||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
>
|
||||
{sidebarOpen ? <X size={20} /> : <Menu size={20} />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav className="space-y-2 px-3">
|
||||
{[
|
||||
{ id: "dashboard", label: "Dashboard", icon: BarChart3 },
|
||||
{ id: "pets", label: "Manage Pets", icon: Heart },
|
||||
{ id: "users", label: "Users", icon: Users },
|
||||
{ id: "settings", label: "Settings", icon: Settings },
|
||||
].map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => setActiveTab(item.id)}
|
||||
className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg transition-all ${
|
||||
activeTab === item.id
|
||||
? "bg-indigo-600 text-white"
|
||||
: "text-gray-600 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<item.icon size={20} />
|
||||
{sidebarOpen && <span>{item.label}</span>}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="absolute bottom-6 left-3 right-3">
|
||||
<button className="w-full flex items-center space-x-3 px-4 py-3 rounded-lg text-red-600 hover:bg-red-50 transition-colors">
|
||||
<LogOut size={20} />
|
||||
{sidebarOpen && <span>Logout</span>}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 p-8">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-2">Admin Dashboard</h1>
|
||||
<p className="text-gray-600">Welcome back! Here's what's happening with your shelter today.</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
{activeTab === "dashboard" && (
|
||||
<div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
{stats.map((stat, index) => {
|
||||
const Icon = stat.icon;
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-600 text-sm mb-2">{stat.label}</p>
|
||||
<p className="text-3xl font-bold text-gray-900">{stat.value}</p>
|
||||
</div>
|
||||
<div
|
||||
className="p-4 rounded-lg"
|
||||
style={{ backgroundColor: stat.color + "20" }}
|
||||
>
|
||||
<Icon size={24} style={{ color: stat.color }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Recent Activity */}
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-4">Recent Activity</h2>
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{ action: "New adoption application", pet: "Luna", time: "2 hours ago" },
|
||||
{ action: "Pet added to system", pet: "Max", time: "4 hours ago" },
|
||||
{ action: "Volunteer registered", pet: "Sarah M.", time: "6 hours ago" },
|
||||
{ action: "Adoption completed", pet: "Whiskers", time: "1 day ago" },
|
||||
].map((item, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-center justify-between py-3 border-b border-gray-100 last:border-b-0"
|
||||
>
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">{item.action}</p>
|
||||
<p className="text-sm text-gray-500">{item.pet}</p>
|
||||
</div>
|
||||
<span className="text-sm text-gray-500">{item.time}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Manage Pets Tab */}
|
||||
{activeTab === "pets" && (
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-2xl font-bold text-gray-900">Manage Pets</h2>
|
||||
<button className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
|
||||
+ Add New Pet
|
||||
</button>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50 border-b border-gray-200">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">Pet Name</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">Type</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">Status</th>
|
||||
<th className="px-6 py-3 text-left text-sm font-semibold text-gray-900">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
{ name: "Luna", type: "Dog", status: "Available" },
|
||||
{ name: "Whiskers", type: "Cat", status: "Adopted" },
|
||||
{ name: "Max", type: "Dog", status: "Available" },
|
||||
].map((pet, idx) => (
|
||||
<tr key={idx} className="border-b border-gray-200 hover:bg-gray-50">
|
||||
<td className="px-6 py-4 text-sm text-gray-900">{pet.name}</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-600">{pet.type}</td>
|
||||
<td className="px-6 py-4">
|
||||
<span
|
||||
className={`px-3 py-1 rounded-full text-sm font-medium ${
|
||||
pet.status === "Available"
|
||||
? "bg-green-100 text-green-800"
|
||||
: "bg-gray-100 text-gray-800"
|
||||
}`}
|
||||
>
|
||||
{pet.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<button className="text-indigo-600 hover:text-indigo-900 text-sm font-medium">Edit</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Users Tab */}
|
||||
{activeTab === "users" && (
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">User Management</h2>
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{ name: "Sarah Martinez", role: "Adopter", status: "Active" },
|
||||
{ name: "John Volunteer", role: "Volunteer", status: "Active" },
|
||||
{ name: "Dr. Smith", role: "Veterinarian", status: "Active" },
|
||||
].map((user, idx) => (
|
||||
<div key={idx} className="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">{user.name}</p>
|
||||
<p className="text-sm text-gray-600">{user.role}</p>
|
||||
</div>
|
||||
<span className="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium">
|
||||
{user.status}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Settings Tab */}
|
||||
{activeTab === "settings" && (
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">Settings</h2>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Organization Name</label>
|
||||
<input
|
||||
type="text"
|
||||
defaultValue="PawShelter"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-600"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
defaultValue="admin@pawshelter.org"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-600"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Phone</label>
|
||||
<input
|
||||
type="tel"
|
||||
defaultValue="+1 (555) 123-4567"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-600"
|
||||
/>
|
||||
</div>
|
||||
<button className="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-medium">
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="PawShelter"
|
||||
columns={[
|
||||
{
|
||||
title: "Admin", items: [
|
||||
{ label: "Dashboard", href: "/admin" },
|
||||
{ label: "Back to Site", href: "/" },
|
||||
]
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2025 PawShelter Admin Panel. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user