Add src/app/admin/page.tsx

2026-03-09 19:52:00 +00:00
parent 6e186cb9e6
commit b463bbdd4f
1 changed files with 342 additions and 0 deletions
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -0,0 +1,342 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import { useState } from "react";
+import { Plus, Edit2, Trash2, Search, Settings, Users, BarChart3, Heart } from "lucide-react";
+
+export default function AdminPage() {
+  const [activeTab, setActiveTab] = useState<"animals" | "adoptions" | "users" | "settings">("animals");
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Browse Animals", id: "/animals" },
+    { name: "Admin", id: "/admin" },
+    { name: "About", id: "about" },
+    { name: "Contact", id: "contact" },
+  ];
+
+  const footerColumns = [
+    {
+      title: "Adoption",      items: [
+        { label: "Browse Pets", href: "/animals" },
+        { label: "How to Adopt", href: "#how-it-works" },
+      ],
+    },
+    {
+      title: "Company",      items: [
+        { label: "About Us", href: "/about" },
+        { label: "Our Team", href: "#team" },
+      ],
+    },
+  ];
+
+  const sampleAnimals = [
+    { id: 1, name: "Luna", species: "Dog", breed: "Golden Retriever", status: "Available", adoptionFee: "$150" },
+    { id: 2, name: "Max", species: "Cat", breed: "Tabby", status: "Pending", adoptionFee: "$75" },
+    { id: 3, name: "Bella", species: "Dog", breed: "Border Collie", status: "Available", adoptionFee: "$120" },
+  ];
+
+  const sampleAdoptions = [
+    { id: 1, animalName: "Buddy", familyName: "Johnson", status: "Completed", date: "2025-01-10" },
+    { id: 2, animalName: "Whiskers", familyName: "Smith", status: "In Progress", date: "2025-01-15" },
+    { id: 3, animalName: "Charlie", familyName: "Williams", status: "Pending Review", date: "2025-01-20" },
+  ];
+
+  const sampleUsers = [
+    { id: 1, name: "John Doe", email: "john@example.com", role: "Admin", status: "Active" },
+    { id: 2, name: "Jane Smith", email: "jane@example.com", role: "Staff", status: "Active" },
+    { id: 3, name: "Bob Wilson", email: "bob@example.com", role: "Volunteer", status: "Inactive" },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="compact"
+      sizing="largeSmallSizeMediumTitles"
+      background="noise"
+      cardStyle="soft-shadow"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          navItems={navItems}
+          brandName="PawsHome Admin"
+          button={{ text: "Dashboard", href: "/admin" }}
+        />
+      </div>
+
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-950 dark:to-slate-900 pt-32 pb-20">
+        <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
+          {/* Header */}
+          <div className="mb-12">
+            <h1 className="text-4xl font-bold text-slate-900 dark:text-white mb-2">Admin Dashboard</h1>
+            <p className="text-lg text-slate-600 dark:text-slate-400">Manage animals, adoptions, users, and platform settings</p>
+          </div>
+
+          {/* Tab Navigation */}
+          <div className="flex flex-wrap gap-2 mb-8 bg-white dark:bg-slate-800 p-2 rounded-lg shadow-sm">
+            <button
+              onClick={() => setActiveTab("animals")}
+              className={`flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition ${
+                activeTab === "animals"
+                  ? "bg-blue-500 text-white"
+                  : "text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700"
+              }`}
+            >
+              <Heart size={20} />
+              Animals
+            </button>
+            <button
+              onClick={() => setActiveTab("adoptions")}
+              className={`flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition ${
+                activeTab === "adoptions"
+                  ? "bg-blue-500 text-white"
+                  : "text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700"
+              }`}
+            >
+              <BarChart3 size={20} />
+              Adoptions
+            </button>
+            <button
+              onClick={() => setActiveTab("users")}
+              className={`flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition ${
+                activeTab === "users"
+                  ? "bg-blue-500 text-white"
+                  : "text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700"
+              }`}
+            >
+              <Users size={20} />
+              Users
+            </button>
+            <button
+              onClick={() => setActiveTab("settings")}
+              className={`flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition ${
+                activeTab === "settings"
+                  ? "bg-blue-500 text-white"
+                  : "text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700"
+              }`}
+            >
+              <Settings size={20} />
+              Settings
+            </button>
+          </div>
+
+          {/* Search & Controls */}
+          {activeTab !== "settings" && (
+            <div className="flex gap-4 mb-8">
+              <div className="flex-1 relative">
+                <Search className="absolute left-3 top-3 text-slate-400" size={20} />
+                <input
+                  type="text"
+                  placeholder="Search..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="w-full pl-10 pr-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder-slate-500"
+                />
+              </div>
+              <button className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition font-medium">
+                <Plus size={20} />
+                Add New
+              </button>
+            </div>
+          )}
+
+          {/* Content Sections */}
+          {activeTab === "animals" && (
+            <div className="bg-white dark:bg-slate-800 rounded-lg shadow-md overflow-hidden">
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead className="bg-slate-100 dark:bg-slate-700 border-b border-slate-200 dark:border-slate-600">
+                    <tr>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900 dark:text-white">Name</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900 dark:text-white">Species</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900 dark:text-white">Breed</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900 dark:text-white">Status</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900 dark:text-white">Fee</th>
+                      <th className="px-6 py-3 text-center text-sm font-semibold text-slate-900 dark:text-white">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-slate-200 dark:divide-slate-700">
+                    {sampleAnimals.map((animal) => (
+                      <tr key={animal.id} className="hover:bg-slate-50 dark:hover:bg-slate-700 transition">
+                        <td className="px-6 py-4 text-sm font-medium text-slate-900 dark:text-white">{animal.name}</td>
+                        <td className="px-6 py-4 text-sm text-slate-600 dark:text-slate-300">{animal.species}</td>
+                        <td className="px-6 py-4 text-sm text-slate-600 dark:text-slate-300">{animal.breed}</td>
+                        <td className="px-6 py-4 text-sm">
+                          <span className={`px-3 py-1 rounded-full text-xs font-semibold ${
+                            animal.status === "Available"
+                              ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
+                              : "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
+                          }`}>
+                            {animal.status}
+                          </span>
+                        </td>
+                        <td className="px-6 py-4 text-sm text-slate-900 dark:text-white font-medium">{animal.adoptionFee}</td>
+                        <td className="px-6 py-4 text-center">
+                          <div className="flex justify-center gap-2">
+                            <button className="p-2 text-blue-500 hover:bg-blue-50 dark:hover:bg-slate-700 rounded transition" title="Edit">
+                              <Edit2 size={18} />
+                            </button>
+                            <button className="p-2 text-red-500 hover:bg-red-50 dark:hover:bg-slate-700 rounded transition" title="Delete">
+                              <Trash2 size={18} />
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+
+          {activeTab === "adoptions" && (
+            <div className="bg-white dark:bg-slate-800 rounded-lg shadow-md overflow-hidden">
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead className="bg-slate-100 dark:bg-slate-700 border-b border-slate-200 dark:border-slate-600">
+                    <tr>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900 dark:text-white">Animal</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900 dark:text-white">Family</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900 dark:text-white">Status</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900 dark:text-white">Date</th>
+                      <th className="px-6 py-3 text-center text-sm font-semibold text-slate-900 dark:text-white">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-slate-200 dark:divide-slate-700">
+                    {sampleAdoptions.map((adoption) => (
+                      <tr key={adoption.id} className="hover:bg-slate-50 dark:hover:bg-slate-700 transition">
+                        <td className="px-6 py-4 text-sm font-medium text-slate-900 dark:text-white">{adoption.animalName}</td>
+                        <td className="px-6 py-4 text-sm text-slate-600 dark:text-slate-300">{adoption.familyName}</td>
+                        <td className="px-6 py-4 text-sm">
+                          <span className={`px-3 py-1 rounded-full text-xs font-semibold ${
+                            adoption.status === "Completed"
+                              ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
+                              : adoption.status === "In Progress"
+                              ? "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
+                              : "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
+                          }`}>
+                            {adoption.status}
+                          </span>
+                        </td>
+                        <td className="px-6 py-4 text-sm text-slate-600 dark:text-slate-300">{adoption.date}</td>
+                        <td className="px-6 py-4 text-center">
+                          <div className="flex justify-center gap-2">
+                            <button className="p-2 text-blue-500 hover:bg-blue-50 dark:hover:bg-slate-700 rounded transition" title="Edit">
+                              <Edit2 size={18} />
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+
+          {activeTab === "users" && (
+            <div className="bg-white dark:bg-slate-800 rounded-lg shadow-md overflow-hidden">
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead className="bg-slate-100 dark:bg-slate-700 border-b border-slate-200 dark:border-slate-600">
+                    <tr>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900 dark:text-white">Name</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900 dark:text-white">Email</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900 dark:text-white">Role</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900 dark:text-white">Status</th>
+                      <th className="px-6 py-3 text-center text-sm font-semibold text-slate-900 dark:text-white">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-slate-200 dark:divide-slate-700">
+                    {sampleUsers.map((user) => (
+                      <tr key={user.id} className="hover:bg-slate-50 dark:hover:bg-slate-700 transition">
+                        <td className="px-6 py-4 text-sm font-medium text-slate-900 dark:text-white">{user.name}</td>
+                        <td className="px-6 py-4 text-sm text-slate-600 dark:text-slate-300">{user.email}</td>
+                        <td className="px-6 py-4 text-sm text-slate-600 dark:text-slate-300">{user.role}</td>
+                        <td className="px-6 py-4 text-sm">
+                          <span className={`px-3 py-1 rounded-full text-xs font-semibold ${
+                            user.status === "Active"
+                              ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
+                              : "bg-slate-100 text-slate-800 dark:bg-slate-700 dark:text-slate-300"
+                          }`}>
+                            {user.status}
+                          </span>
+                        </td>
+                        <td className="px-6 py-4 text-center">
+                          <div className="flex justify-center gap-2">
+                            <button className="p-2 text-blue-500 hover:bg-blue-50 dark:hover:bg-slate-700 rounded transition" title="Edit">
+                              <Edit2 size={18} />
+                            </button>
+                            <button className="p-2 text-red-500 hover:bg-red-50 dark:hover:bg-slate-700 rounded transition" title="Delete">
+                              <Trash2 size={18} />
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+
+          {activeTab === "settings" && (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="bg-white dark:bg-slate-800 rounded-lg shadow-md p-6">
+                <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">Platform Settings</h3>
+                <div className="space-y-4">
+                  <div>
+                    <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Platform Name</label>
+                    <input type="text" defaultValue="PawsHome" className="w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-white" />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Contact Email</label>
+                    <input type="email" defaultValue="support@pawshome.com" className="w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-white" />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Maximum Adoption Fee</label>
+                    <input type="text" defaultValue="$500" className="w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-white" />
+                  </div>
+                  <button className="w-full px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition font-medium">Save Settings</button>
+                </div>
+              </div>
+              <div className="bg-white dark:bg-slate-800 rounded-lg shadow-md p-6">
+                <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">System Status</h3>
+                <div className="space-y-3">
+                  <div className="flex justify-between items-center">
+                    <span className="text-slate-600 dark:text-slate-400">Database</span>
+                    <span className="px-3 py-1 bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 text-xs font-semibold rounded-full">Operational</span>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-slate-600 dark:text-slate-400">API Server</span>
+                    <span className="px-3 py-1 bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 text-xs font-semibold rounded-full">Operational</span>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-slate-600 dark:text-slate-400">Email Service</span>
+                    <span className="px-3 py-1 bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 text-xs font-semibold rounded-full">Operational</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="PawsHome"
+          columns={footerColumns}
+          copyrightText="© 2025 PawsHome Admin. All rights reserved."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}