bender/af43b39a-159b-4a25-be03-b8a9d79f0d8e
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #3

Merged
bender merged 9 commits from version_2 into main 2026-03-03 13:29:02 +00:00
Conversation 0 Commits 9 Files Changed 9 +281
1 changed files with 281 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ba429dd44d - Show all commits

281
src/app/admin/page.tsx Normal file
View 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>
);
}