implement admin dashboard with login and profile management
This commit is contained in:
parent
a3d3ff99c9
commit
61603a9175
|
|
@ -13,6 +13,7 @@
|
||||||
"@radix-ui/react-label": "^2.1.6",
|
"@radix-ui/react-label": "^2.1.6",
|
||||||
"@radix-ui/react-select": "^2.2.4",
|
"@radix-ui/react-select": "^2.2.4",
|
||||||
"@radix-ui/react-slot": "^1.2.2",
|
"@radix-ui/react-slot": "^1.2.2",
|
||||||
|
"@radix-ui/react-toast": "^1.2.13",
|
||||||
"@tailwindcss/vite": "^4.1.6",
|
"@tailwindcss/vite": "^4.1.6",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
|
|
@ -1458,6 +1459,39 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@radix-ui/react-toast": {
|
||||||
|
"version": "1.2.13",
|
||||||
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.13.tgz",
|
||||||
|
"integrity": "sha512-e/e43mQAwgYs8BY4y9l99xTK6ig1bK2uXsFLOMn9IZ16lAgulSTsotcPHVT2ZlSb/ye6Sllq7IgyDB8dGhpeXQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"@radix-ui/primitive": "1.1.2",
|
||||||
|
"@radix-ui/react-collection": "1.1.6",
|
||||||
|
"@radix-ui/react-compose-refs": "1.1.2",
|
||||||
|
"@radix-ui/react-context": "1.1.2",
|
||||||
|
"@radix-ui/react-dismissable-layer": "1.1.9",
|
||||||
|
"@radix-ui/react-portal": "1.1.8",
|
||||||
|
"@radix-ui/react-presence": "1.1.4",
|
||||||
|
"@radix-ui/react-primitive": "2.1.2",
|
||||||
|
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||||
|
"@radix-ui/react-use-controllable-state": "1.2.2",
|
||||||
|
"@radix-ui/react-use-layout-effect": "1.1.1",
|
||||||
|
"@radix-ui/react-visually-hidden": "1.2.2"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@types/react": "*",
|
||||||
|
"@types/react-dom": "*",
|
||||||
|
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||||
|
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@types/react-dom": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@radix-ui/react-use-callback-ref": {
|
"node_modules/@radix-ui/react-use-callback-ref": {
|
||||||
"version": "1.1.1",
|
"version": "1.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,7 @@
|
||||||
"@radix-ui/react-label": "^2.1.6",
|
"@radix-ui/react-label": "^2.1.6",
|
||||||
"@radix-ui/react-select": "^2.2.4",
|
"@radix-ui/react-select": "^2.2.4",
|
||||||
"@radix-ui/react-slot": "^1.2.2",
|
"@radix-ui/react-slot": "^1.2.2",
|
||||||
|
"@radix-ui/react-toast": "^1.2.13",
|
||||||
"@tailwindcss/vite": "^4.1.6",
|
"@tailwindcss/vite": "^4.1.6",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
|
|
|
||||||
|
|
@ -3,11 +3,19 @@ import HomePage from "./pages/HomePage";
|
||||||
import MigrantProfilePage from "./pages/MigrantProfilePage";
|
import MigrantProfilePage from "./pages/MigrantProfilePage";
|
||||||
import NotFoundPage from "./pages/NotFoundPage";
|
import NotFoundPage from "./pages/NotFoundPage";
|
||||||
import "./App.css";
|
import "./App.css";
|
||||||
|
import LoginPage from "./components/LoginPage";
|
||||||
|
import Migrants from "./components/Migrants";
|
||||||
|
import ProfileSettings from "./components/ui/ProfileSettings";
|
||||||
|
import AdminDashboardPage from "./pages/AdminDashboardPage";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<Router>
|
<Router>
|
||||||
<Routes>
|
<Routes>
|
||||||
|
<Route path="/admin/settings/profile" element={<ProfileSettings />} />
|
||||||
|
<Route path="/admin/migrants" element={<Migrants />} />
|
||||||
|
<Route path="/admin" element={<AdminDashboardPage />} />
|
||||||
|
<Route path="/login" element={<LoginPage />} />
|
||||||
<Route path="/" element={<HomePage />} />
|
<Route path="/" element={<HomePage />} />
|
||||||
<Route path="/migrant/:id" element={<MigrantProfilePage />} />
|
<Route path="/migrant/:id" element={<MigrantProfilePage />} />
|
||||||
<Route path="*" element={<NotFoundPage />} />
|
<Route path="*" element={<NotFoundPage />} />
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,360 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useEffect, useState } from "react"
|
||||||
|
import { useNavigate } from "react-router-dom"
|
||||||
|
import { motion } from "framer-motion"
|
||||||
|
import {
|
||||||
|
Users,
|
||||||
|
Database,
|
||||||
|
FileText,
|
||||||
|
Settings,
|
||||||
|
BarChart2,
|
||||||
|
Calendar,
|
||||||
|
Clock,
|
||||||
|
PlusCircle,
|
||||||
|
Search,
|
||||||
|
User,
|
||||||
|
Bell,
|
||||||
|
Home,
|
||||||
|
} from "lucide-react"
|
||||||
|
import { Link } from "react-router-dom"
|
||||||
|
|
||||||
|
|
||||||
|
export default function AdminDashboard() {
|
||||||
|
const [isFirstLoad, setIsFirstLoad] = useState(true)
|
||||||
|
const [isProfileDropdownOpen, setIsProfileDropdownOpen] = useState(false)
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Check if user is authenticated
|
||||||
|
const token = localStorage.getItem("adminToken")
|
||||||
|
if (!token) {
|
||||||
|
navigate("/admin/login")
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if we're navigating from another admin page
|
||||||
|
const hasVisitedAdmin = localStorage.getItem("adminNavigation")
|
||||||
|
|
||||||
|
// Skip loading if we're navigating from another admin page
|
||||||
|
if (hasVisitedAdmin) {
|
||||||
|
setIsFirstLoad(false)
|
||||||
|
} else {
|
||||||
|
// Set flag to indicate we've visited an admin page
|
||||||
|
localStorage.setItem("adminNavigation", "true")
|
||||||
|
|
||||||
|
// Only show loading state on first load
|
||||||
|
if (isFirstLoad) {
|
||||||
|
// Simulate loading dashboard data
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
setIsFirstLoad(false)
|
||||||
|
|
||||||
|
// Show welcome toast
|
||||||
|
|
||||||
|
}, 500) // Reduced loading time for better UX
|
||||||
|
|
||||||
|
return () => clearTimeout(timer)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [isFirstLoad, navigate])
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
localStorage.removeItem("adminToken")
|
||||||
|
localStorage.removeItem("adminNavigation") // Clear navigation flag on logout
|
||||||
|
|
||||||
|
navigate("/admin/login")
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// If it's the first load, show a loading state
|
||||||
|
if (isFirstLoad) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-[#E8DCCA]/10">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="w-16 h-16 border-4 border-[#9B2335] border-t-transparent rounded-full animate-spin mx-auto"></div>
|
||||||
|
<p className="mt-4 text-gray-600">Loading dashboard...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex bg-[#E8DCCA]/10">
|
||||||
|
{/* Sidebar */}
|
||||||
|
<div className="w-64 bg-[#1A2A57] text-white">
|
||||||
|
<div className="p-4 border-b border-[#1A2A57]/30">
|
||||||
|
<h2 className="text-xl font-serif font-bold">Italian Migrants</h2>
|
||||||
|
<p className="text-sm text-white/70">Northern Territory DB</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className="mt-6 px-4">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Link to="/admin" className="flex items-center px-4 py-3 text-white bg-[#1A2A57]/40 rounded-md">
|
||||||
|
<Home className="h-5 w-5 mr-3" />
|
||||||
|
Dashboard
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/admin/migrants"
|
||||||
|
className="flex items-center px-4 py-3 text-white/80 hover:bg-[#1A2A57]/40 rounded-md"
|
||||||
|
>
|
||||||
|
<User className="h-5 w-5 mr-3" />
|
||||||
|
Migrants
|
||||||
|
</Link>
|
||||||
|
<Link to="#" className="flex items-center px-4 py-3 text-white/80 hover:bg-[#1A2A57]/40 rounded-md">
|
||||||
|
<FileText className="h-5 w-5 mr-3" />
|
||||||
|
Reports
|
||||||
|
</Link>
|
||||||
|
<Link to="#" className="flex items-center px-4 py-3 text-white/80 hover:bg-[#1A2A57]/40 rounded-md">
|
||||||
|
<Database className="h-5 w-5 mr-3" />
|
||||||
|
Database
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/admin/settings/profile"
|
||||||
|
className="flex items-center px-4 py-3 text-white/80 hover:bg-[#1A2A57]/40 rounded-md"
|
||||||
|
>
|
||||||
|
<Settings className="h-5 w-5 mr-3" />
|
||||||
|
Settings
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="absolute bottom-0 w-64 p-4 border-t border-[#1A2A57]/30">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="h-8 w-8 rounded-full bg-white text-[#1A2A57] flex items-center justify-center">
|
||||||
|
<User className="h-5 w-5" />
|
||||||
|
</div>
|
||||||
|
<span className="ml-2 text-sm">Admin User</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main content */}
|
||||||
|
<div className="flex-1 overflow-auto">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="bg-white shadow-sm border-b border-gray-200">
|
||||||
|
<div className="flex justify-between items-center px-6 py-4">
|
||||||
|
<h1 className="text-xl font-medium text-[#1A2A57]">Admin Portal</h1>
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search records..."
|
||||||
|
className="pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#01796F] focus:border-[#01796F]"
|
||||||
|
/>
|
||||||
|
<Search className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Notifications */}
|
||||||
|
<button
|
||||||
|
className="relative p-2 text-gray-500 hover:text-gray-700 focus:outline-none"
|
||||||
|
>
|
||||||
|
<Bell className="h-5 w-5" />
|
||||||
|
<span className="absolute top-0 right-0 h-2 w-2 rounded-full bg-[#9B2335]"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Profile dropdown */}
|
||||||
|
<div className="relative">
|
||||||
|
<button
|
||||||
|
className="h-8 w-8 rounded-full bg-[#9B2335] text-white flex items-center justify-center focus:outline-none"
|
||||||
|
onClick={() => setIsProfileDropdownOpen(!isProfileDropdownOpen)}
|
||||||
|
>
|
||||||
|
<User className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{isProfileDropdownOpen && (
|
||||||
|
<motion.div
|
||||||
|
className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10"
|
||||||
|
initial={{ opacity: 0, y: -10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.2 }}
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
to="/admin/settings/profile"
|
||||||
|
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||||
|
onClick={() => setIsProfileDropdownOpen(false)}
|
||||||
|
>
|
||||||
|
Your Profile
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="#"
|
||||||
|
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||||
|
|
||||||
|
>
|
||||||
|
Settings
|
||||||
|
</Link>
|
||||||
|
<button
|
||||||
|
className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||||
|
onClick={handleLogout}
|
||||||
|
>
|
||||||
|
Sign out
|
||||||
|
</button>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Dashboard content */}
|
||||||
|
<div className="p-6">
|
||||||
|
{/* Stats cards */}
|
||||||
|
<motion.div
|
||||||
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.2 }}
|
||||||
|
>
|
||||||
|
<div className="bg-white rounded-lg shadow p-6 border-t-4 border-[#9B2335]">
|
||||||
|
<div className="flex justify-between items-start">
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500 text-sm">Total Migrants</p>
|
||||||
|
<h3 className="text-3xl font-bold mt-1">256</h3>
|
||||||
|
</div>
|
||||||
|
<div className="p-2 bg-[#9B2335]/10 rounded-md">
|
||||||
|
<Users className="h-6 w-6 text-[#9B2335]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 text-sm text-green-600">+12 this month</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-lg shadow p-6 border-t-4 border-[#01796F]">
|
||||||
|
<div className="flex justify-between items-start">
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500 text-sm">Total Records</p>
|
||||||
|
<h3 className="text-3xl font-bold mt-1">1,248</h3>
|
||||||
|
</div>
|
||||||
|
<div className="p-2 bg-[#01796F]/10 rounded-md">
|
||||||
|
<Database className="h-6 w-6 text-[#01796F]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 text-sm text-green-600">+86 this month</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-lg shadow p-6 border-t-4 border-[#FFC857]">
|
||||||
|
<div className="flex justify-between items-start">
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500 text-sm">Recent Updates</p>
|
||||||
|
<h3 className="text-3xl font-bold mt-1">24</h3>
|
||||||
|
</div>
|
||||||
|
<div className="p-2 bg-[#FFC857]/10 rounded-md">
|
||||||
|
<Clock className="h-6 w-6 text-[#FFC857]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 text-sm text-blue-600">Last update: Today</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-lg shadow p-6 border-t-4 border-[#1A2A57]">
|
||||||
|
<div className="flex justify-between items-start">
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500 text-sm">Pending Tasks</p>
|
||||||
|
<h3 className="text-3xl font-bold mt-1">8</h3>
|
||||||
|
</div>
|
||||||
|
<div className="p-2 bg-[#1A2A57]/10 rounded-md">
|
||||||
|
<Calendar className="h-6 w-6 text-[#1A2A57]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 text-sm text-orange-500">3 require attention</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Quick actions */}
|
||||||
|
<motion.div
|
||||||
|
className="bg-white rounded-lg shadow mb-8"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.3 }}
|
||||||
|
>
|
||||||
|
<div className="px-6 py-4 border-b border-gray-200">
|
||||||
|
<h2 className="text-lg font-medium">Quick Actions</h2>
|
||||||
|
</div>
|
||||||
|
<div className="p-6 grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<Link
|
||||||
|
to="/admin/migrants"
|
||||||
|
className="flex items-center justify-center px-4 py-3 bg-[#9B2335] text-white rounded-md hover:bg-[#9B2335]/90"
|
||||||
|
>
|
||||||
|
<PlusCircle className="h-5 w-5 mr-2" />
|
||||||
|
Add New Migrant
|
||||||
|
</Link>
|
||||||
|
<button
|
||||||
|
className="flex items-center justify-center px-4 py-3 bg-[#01796F] text-white rounded-md hover:bg-[#01796F]/90"
|
||||||
|
>
|
||||||
|
<FileText className="h-5 w-5 mr-2" />
|
||||||
|
Generate Report
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="flex items-center justify-center px-4 py-3 bg-[#1A2A57] text-white rounded-md hover:bg-[#1A2A57]/90"
|
||||||
|
|
||||||
|
>
|
||||||
|
<Database className="h-5 w-5 mr-2" />
|
||||||
|
Import Records
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Recent activity */}
|
||||||
|
<motion.div
|
||||||
|
className="bg-white rounded-lg shadow"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.4 }}
|
||||||
|
>
|
||||||
|
<div className="px-6 py-4 border-b border-gray-200">
|
||||||
|
<h2 className="text-lg font-medium">Recent Activity</h2>
|
||||||
|
</div>
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="space-y-6">
|
||||||
|
{[
|
||||||
|
{ action: "Added new migrant", user: "Admin", time: "10 minutes ago", type: "add" },
|
||||||
|
{ action: "Updated record #1248", user: "Admin", time: "2 hours ago", type: "update" },
|
||||||
|
{ action: "Generated monthly report", user: "System", time: "Yesterday", type: "report" },
|
||||||
|
{ action: "Deleted duplicate record", user: "Admin", time: "2 days ago", type: "delete" },
|
||||||
|
{ action: "Imported 15 new records", user: "Admin", time: "1 week ago", type: "import" },
|
||||||
|
].map((activity, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
className="flex items-start"
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.3, delay: 0.5 + index * 0.1 }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`p-2 rounded-full mr-4 ${
|
||||||
|
activity.type === "add"
|
||||||
|
? "bg-green-100 text-green-600"
|
||||||
|
: activity.type === "update"
|
||||||
|
? "bg-blue-100 text-blue-600"
|
||||||
|
: activity.type === "delete"
|
||||||
|
? "bg-red-100 text-red-600"
|
||||||
|
: activity.type === "report"
|
||||||
|
? "bg-purple-100 text-purple-600"
|
||||||
|
: "bg-yellow-100 text-yellow-600"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{activity.type === "add" ? (
|
||||||
|
<PlusCircle className="h-5 w-5" />
|
||||||
|
) : activity.type === "update" ? (
|
||||||
|
<FileText className="h-5 w-5" />
|
||||||
|
) : activity.type === "delete" ? (
|
||||||
|
<Users className="h-5 w-5" />
|
||||||
|
) : activity.type === "report" ? (
|
||||||
|
<BarChart2 className="h-5 w-5" />
|
||||||
|
) : (
|
||||||
|
<Database className="h-5 w-5" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium">{activity.action}</p>
|
||||||
|
<p className="text-sm text-gray-500">
|
||||||
|
By {activity.user} • {activity.time}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import Sidebar from "./Sidebar"
|
||||||
|
import Header from "./Header"
|
||||||
|
import StatsCards from "./StatsCards"
|
||||||
|
import QuickActions from "./QuickActions"
|
||||||
|
import RecentActivity from "./RecentActivity"
|
||||||
|
|
||||||
|
export default function DashboardLayout() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex bg-[#E8DCCA]/10">
|
||||||
|
<Sidebar />
|
||||||
|
<div className="flex-1 overflow-auto">
|
||||||
|
<Header />
|
||||||
|
<div className="p-6">
|
||||||
|
<StatsCards />
|
||||||
|
<QuickActions />
|
||||||
|
<RecentActivity />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { Search, Bell, ChevronDown } from "lucide-react"
|
||||||
|
|
||||||
|
export default function Header() {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-between px-6 py-4 border-b border-[#1A2A57]/20 bg-white shadow-sm">
|
||||||
|
<div className="relative w-80">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search..."
|
||||||
|
className="w-full px-4 py-2 rounded-md bg-gray-100 focus:outline-none focus:ring-2 focus:ring-[#9B2335]"
|
||||||
|
/>
|
||||||
|
<Search className="absolute top-2.5 right-3 h-5 w-5 text-gray-500" />
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-6">
|
||||||
|
<Bell className="h-6 w-6 text-[#1A2A57] cursor-pointer" />
|
||||||
|
<div className="flex items-center space-x-2 cursor-pointer">
|
||||||
|
<div className="h-8 w-8 rounded-full bg-[#1A2A57] text-white flex items-center justify-center">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
<ChevronDown className="h-4 w-4 text-[#1A2A57]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
import { motion } from "framer-motion"
|
||||||
|
import { Link } from "react-router-dom"
|
||||||
|
import { PlusCircle, FileText, Database } from "lucide-react"
|
||||||
|
|
||||||
|
export default function QuickActions() {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className="bg-white rounded-lg shadow mb-8"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.3 }}
|
||||||
|
>
|
||||||
|
<div className="px-6 py-4 border-b border-gray-200">
|
||||||
|
<h2 className="text-lg font-medium">Quick Actions</h2>
|
||||||
|
</div>
|
||||||
|
<div className="p-6 grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<Link
|
||||||
|
to="/admin/migrants"
|
||||||
|
className="flex items-center justify-center px-4 py-3 bg-[#9B2335] text-white rounded-md hover:bg-[#9B2335]/90"
|
||||||
|
>
|
||||||
|
<PlusCircle className="h-5 w-5 mr-2" />
|
||||||
|
Add New Migrant
|
||||||
|
</Link>
|
||||||
|
<button
|
||||||
|
className="flex items-center justify-center px-4 py-3 bg-[#01796F] text-white rounded-md hover:bg-[#01796F]/90"
|
||||||
|
>
|
||||||
|
<FileText className="h-5 w-5 mr-2" />
|
||||||
|
Generate Report
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="flex items-center justify-center px-4 py-3 bg-[#1A2A57] text-white rounded-md hover:bg-[#1A2A57]/90"
|
||||||
|
|
||||||
|
>
|
||||||
|
<Database className="h-5 w-5 mr-2" />
|
||||||
|
Import Records
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
import { motion } from "framer-motion"
|
||||||
|
import { PlusCircle, FileText, Users, BarChart2, Database } from "lucide-react"
|
||||||
|
|
||||||
|
export default function RecentActivity() {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className="bg-white rounded-lg shadow"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.4 }}
|
||||||
|
>
|
||||||
|
<div className="px-6 py-4 border-b border-gray-200">
|
||||||
|
<h2 className="text-lg font-medium">Recent Activity</h2>
|
||||||
|
</div>
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="space-y-6">
|
||||||
|
{[
|
||||||
|
{ action: "Added new migrant", user: "Admin", time: "10 minutes ago", type: "add" },
|
||||||
|
{ action: "Updated record #1248", user: "Admin", time: "2 hours ago", type: "update" },
|
||||||
|
{ action: "Generated monthly report", user: "System", time: "Yesterday", type: "report" },
|
||||||
|
{ action: "Deleted duplicate record", user: "Admin", time: "2 days ago", type: "delete" },
|
||||||
|
{ action: "Imported 15 new records", user: "Admin", time: "1 week ago", type: "import" },
|
||||||
|
].map((activity, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
className="flex items-start"
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.3, delay: 0.5 + index * 0.1 }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`p-2 rounded-full mr-4 ${
|
||||||
|
activity.type === "add"
|
||||||
|
? "bg-green-100 text-green-600"
|
||||||
|
: activity.type === "update"
|
||||||
|
? "bg-blue-100 text-blue-600"
|
||||||
|
: activity.type === "delete"
|
||||||
|
? "bg-red-100 text-red-600"
|
||||||
|
: activity.type === "report"
|
||||||
|
? "bg-purple-100 text-purple-600"
|
||||||
|
: "bg-yellow-100 text-yellow-600"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{activity.type === "add" ? (
|
||||||
|
<PlusCircle className="h-5 w-5" />
|
||||||
|
) : activity.type === "update" ? (
|
||||||
|
<FileText className="h-5 w-5" />
|
||||||
|
) : activity.type === "delete" ? (
|
||||||
|
<Users className="h-5 w-5" />
|
||||||
|
) : activity.type === "report" ? (
|
||||||
|
<BarChart2 className="h-5 w-5" />
|
||||||
|
) : (
|
||||||
|
<Database className="h-5 w-5" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium">{activity.action}</p>
|
||||||
|
<p className="text-sm text-gray-500">
|
||||||
|
By {activity.user} • {activity.time}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
import { Link } from "react-router-dom"
|
||||||
|
import { Home, User, FileText, Database, Settings } from "lucide-react"
|
||||||
|
|
||||||
|
export default function Sidebar() {
|
||||||
|
return (
|
||||||
|
<div className="w-64 bg-[#1A2A57] text-white">
|
||||||
|
<div className="p-4 border-b border-[#1A2A57]/30">
|
||||||
|
<h2 className="text-xl font-serif font-bold">Italian Migrants</h2>
|
||||||
|
<p className="text-sm text-white/70">Northern Territory DB</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className="mt-6 px-4">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Link to="/admin" className="flex items-center px-4 py-3 text-white bg-[#1A2A57]/40 rounded-md">
|
||||||
|
<Home className="h-5 w-5 mr-3" />
|
||||||
|
Dashboard
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/admin/migrants"
|
||||||
|
className="flex items-center px-4 py-3 text-white/80 hover:bg-[#1A2A57]/40 rounded-md"
|
||||||
|
>
|
||||||
|
<User className="h-5 w-5 mr-3" />
|
||||||
|
Migrants
|
||||||
|
</Link>
|
||||||
|
<Link to="#" className="flex items-center px-4 py-3 text-white/80 hover:bg-[#1A2A57]/40 rounded-md">
|
||||||
|
<FileText className="h-5 w-5 mr-3" />
|
||||||
|
Reports
|
||||||
|
</Link>
|
||||||
|
<Link to="#" className="flex items-center px-4 py-3 text-white/80 hover:bg-[#1A2A57]/40 rounded-md">
|
||||||
|
<Database className="h-5 w-5 mr-3" />
|
||||||
|
Database
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/admin/settings/profile"
|
||||||
|
className="flex items-center px-4 py-3 text-white/80 hover:bg-[#1A2A57]/40 rounded-md"
|
||||||
|
>
|
||||||
|
<Settings className="h-5 w-5 mr-3" />
|
||||||
|
Settings
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="absolute bottom-0 w-64 p-4 border-t border-[#1A2A57]/30">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="h-8 w-8 rounded-full bg-white text-[#1A2A57] flex items-center justify-center">
|
||||||
|
<User className="h-5 w-5" />
|
||||||
|
</div>
|
||||||
|
<span className="ml-2 text-sm">Admin User</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
import { motion } from "framer-motion"
|
||||||
|
import { Users, Database, Clock, Calendar } from "lucide-react"
|
||||||
|
|
||||||
|
export default function StatsCards() {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.2 }}
|
||||||
|
>
|
||||||
|
<div className="bg-white rounded-lg shadow p-6 border-t-4 border-[#9B2335]">
|
||||||
|
<div className="flex justify-between items-start">
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500 text-sm">Total Migrants</p>
|
||||||
|
<h3 className="text-3xl font-bold mt-1">256</h3>
|
||||||
|
</div>
|
||||||
|
<div className="p-2 bg-[#9B2335]/10 rounded-md">
|
||||||
|
<Users className="h-6 w-6 text-[#9B2335]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 text-sm text-green-600">+12 this month</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-lg shadow p-6 border-t-4 border-[#01796F]">
|
||||||
|
<div className="flex justify-between items-start">
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500 text-sm">Total Records</p>
|
||||||
|
<h3 className="text-3xl font-bold mt-1">1,248</h3>
|
||||||
|
</div>
|
||||||
|
<div className="p-2 bg-[#01796F]/10 rounded-md">
|
||||||
|
<Database className="h-6 w-6 text-[#01796F]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 text-sm text-green-600">+86 this month</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-lg shadow p-6 border-t-4 border-[#FFC857]">
|
||||||
|
<div className="flex justify-between items-start">
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500 text-sm">Recent Updates</p>
|
||||||
|
<h3 className="text-3xl font-bold mt-1">24</h3>
|
||||||
|
</div>
|
||||||
|
<div className="p-2 bg-[#FFC857]/10 rounded-md">
|
||||||
|
<Clock className="h-6 w-6 text-[#FFC857]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 text-sm text-blue-600">Last update: Today</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-lg shadow p-6 border-t-4 border-[#1A2A57]">
|
||||||
|
<div className="flex justify-between items-start">
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500 text-sm">Pending Tasks</p>
|
||||||
|
<h3 className="text-3xl font-bold mt-1">8</h3>
|
||||||
|
</div>
|
||||||
|
<div className="p-2 bg-[#1A2A57]/10 rounded-md">
|
||||||
|
<Calendar className="h-6 w-6 text-[#1A2A57]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 text-sm text-orange-500">3 require attention</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,223 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import type React from "react"
|
||||||
|
|
||||||
|
import { useState } from "react"
|
||||||
|
import { motion } from "framer-motion"
|
||||||
|
import { useNavigate } from "react-router-dom"
|
||||||
|
import { Eye, EyeOff, Lock, Mail } from "lucide-react"
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
export default function LoginPage() {
|
||||||
|
const [email, setEmail] = useState("")
|
||||||
|
const [password, setPassword] = useState("")
|
||||||
|
const [showPassword, setShowPassword] = useState(false)
|
||||||
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
|
const [error, setError] = useState("")
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setError("")
|
||||||
|
setIsLoading(true)
|
||||||
|
|
||||||
|
// Simulate API call for authentication
|
||||||
|
try {
|
||||||
|
// In a real application, this would be an API call to your Laravel backend
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 1500))
|
||||||
|
|
||||||
|
// For demo purposes, hardcoded check
|
||||||
|
if (email === "admin@example.com" && password === "password") {
|
||||||
|
// Store token in localStorage or cookies
|
||||||
|
localStorage.setItem("adminToken", "demo-token-12345")
|
||||||
|
navigate("/admin")
|
||||||
|
} else {
|
||||||
|
setError("Invalid email or password")
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
setError("Authentication failed. Please try again.")
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-[#E8DCCA] bg-opacity-30">
|
||||||
|
<div className="absolute inset-0 overflow-hidden z-0">
|
||||||
|
<motion.div
|
||||||
|
className="absolute inset-0 bg-[url('/italian-migrants-historical.jpg')] bg-cover bg-center"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 0.15 }}
|
||||||
|
transition={{ duration: 1.5 }}
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-b from-[#9B2335]/20 to-[#01796F]/20" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
className="max-w-md w-full mx-4 bg-white rounded-lg shadow-xl overflow-hidden z-10"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
>
|
||||||
|
<div className="h-2 bg-gradient-to-r from-[#9B2335] via-[#E8DCCA] to-[#01796F]" />
|
||||||
|
|
||||||
|
<div className="px-8 pt-8 pb-6">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ delay: 0.3, duration: 0.6 }}
|
||||||
|
className="text-center"
|
||||||
|
>
|
||||||
|
<h2 className="text-2xl font-serif font-bold text-[#1A2A57]">Admin Access</h2>
|
||||||
|
<p className="text-gray-600 mt-1 italic">Northern Territory Italian Migration History</p>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
className="px-8 pb-8"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ delay: 0.5, duration: 0.6 }}
|
||||||
|
>
|
||||||
|
{error && (
|
||||||
|
<motion.div
|
||||||
|
className="mb-4 p-3 bg-red-50 border-l-4 border-[#9B2335] text-[#9B2335]"
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
>
|
||||||
|
{error}
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<div className="mb-6">
|
||||||
|
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||||
|
<Mail className="h-5 w-5 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
id="email"
|
||||||
|
type="email"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[#01796F] focus:border-[#01796F]"
|
||||||
|
placeholder="admin@example.com"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-6">
|
||||||
|
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Password
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||||
|
<Lock className="h-5 w-5 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
id="password"
|
||||||
|
type={showPassword ? "text" : "password"}
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
className="block w-full pl-10 pr-10 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[#01796F] focus:border-[#01796F]"
|
||||||
|
placeholder="••••••••"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-y-0 right-0 pr-3 flex items-center">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowPassword(!showPassword)}
|
||||||
|
className="text-gray-400 hover:text-gray-500 focus:outline-none"
|
||||||
|
>
|
||||||
|
{showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<input
|
||||||
|
id="remember-me"
|
||||||
|
name="remember-me"
|
||||||
|
type="checkbox"
|
||||||
|
className="h-4 w-4 text-[#01796F] focus:ring-[#01796F] border-gray-300 rounded"
|
||||||
|
/>
|
||||||
|
<label htmlFor="remember-me" className="ml-2 block text-sm text-gray-700">
|
||||||
|
Remember me
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-sm">
|
||||||
|
<Link to="#" className="font-medium text-[#01796F] hover:text-[#01796F]/80">
|
||||||
|
Forgot password?
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<motion.button
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoading}
|
||||||
|
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-white bg-[#9B2335] hover:bg-[#9B2335]/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#9B2335] disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
whileTap={{ scale: 0.98 }}
|
||||||
|
>
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex items-center">
|
||||||
|
<svg
|
||||||
|
className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<circle
|
||||||
|
className="opacity-25"
|
||||||
|
cx="12"
|
||||||
|
cy="12"
|
||||||
|
r="10"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="4"
|
||||||
|
></circle>
|
||||||
|
<path
|
||||||
|
className="opacity-75"
|
||||||
|
fill="currentColor"
|
||||||
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
Signing in...
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
"Sign in"
|
||||||
|
)}
|
||||||
|
</motion.button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="mt-6 flex items-center justify-center">
|
||||||
|
<div className="h-px bg-gray-300 w-full" />
|
||||||
|
<span className="px-2 text-sm text-gray-500">or</span>
|
||||||
|
<div className="h-px bg-gray-300 w-full" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6 text-center">
|
||||||
|
<Link to="/" className="text-sm font-medium text-[#1A2A57] hover:text-[#1A2A57]/80">
|
||||||
|
Return to public site
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
className="absolute bottom-4 text-center text-xs text-gray-500"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ delay: 1, duration: 0.6 }}
|
||||||
|
>
|
||||||
|
© {new Date().getFullYear()} Northern Territory Italian Migration History Project
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,602 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useState, useEffect } from "react"
|
||||||
|
import { useNavigate } from "react-router-dom"
|
||||||
|
import { motion } from "framer-motion"
|
||||||
|
import { Link } from "react-router-dom"
|
||||||
|
import {
|
||||||
|
Home,
|
||||||
|
User,
|
||||||
|
FileText,
|
||||||
|
Database,
|
||||||
|
Settings,
|
||||||
|
Search,
|
||||||
|
Filter,
|
||||||
|
MoreHorizontal,
|
||||||
|
Edit,
|
||||||
|
Upload,
|
||||||
|
Trash2,
|
||||||
|
Plus,
|
||||||
|
ChevronUp,
|
||||||
|
} from "lucide-react"
|
||||||
|
|
||||||
|
interface Migrant {
|
||||||
|
id: number
|
||||||
|
name: string
|
||||||
|
birthDate: string
|
||||||
|
arrivalDate: string
|
||||||
|
origin: string
|
||||||
|
status: "Verified" | "Incomplete" | "Pending"
|
||||||
|
photos: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Migrants() {
|
||||||
|
const [isFirstLoad, setIsFirstLoad] = useState(true)
|
||||||
|
const [migrants, setMigrants] = useState<Migrant[]>([])
|
||||||
|
const [selectedMigrants, setSelectedMigrants] = useState<number[]>([])
|
||||||
|
const [activeDropdown, setActiveDropdown] = useState<number | null>(null)
|
||||||
|
const [searchQuery, setSearchQuery] = useState("")
|
||||||
|
const [arrivalDateMin, setArrivalDateMin] = useState("")
|
||||||
|
const [arrivalDateMax, setArrivalDateMax] = useState("")
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
// Add a handleLogout function that clears the adminNavigation flag
|
||||||
|
const handleLogout = () => {
|
||||||
|
localStorage.removeItem("adminToken")
|
||||||
|
localStorage.removeItem("adminNavigation") // Clear navigation flag on logout
|
||||||
|
|
||||||
|
|
||||||
|
navigate("/admin/login")
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check authentication and load data
|
||||||
|
useEffect(() => {
|
||||||
|
const token = localStorage.getItem("adminToken")
|
||||||
|
if (!token) {
|
||||||
|
navigate("/admin/login")
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if we're navigating from another admin page
|
||||||
|
const hasVisitedAdmin = localStorage.getItem("adminNavigation")
|
||||||
|
|
||||||
|
// Skip loading if we're navigating from another admin page
|
||||||
|
if (hasVisitedAdmin) {
|
||||||
|
setIsFirstLoad(false)
|
||||||
|
|
||||||
|
// Simulate API call to fetch migrants data without loading state
|
||||||
|
setMigrants([
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: "Antonio Esposito",
|
||||||
|
birthDate: "2/18/1940",
|
||||||
|
arrivalDate: "9/5/1962",
|
||||||
|
origin: "Rome, Italy",
|
||||||
|
status: "Verified",
|
||||||
|
photos: 5,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
name: "Giovanna Ferraro",
|
||||||
|
birthDate: "3/11/1955",
|
||||||
|
arrivalDate: "8/5/1978",
|
||||||
|
origin: "Turin, Italy",
|
||||||
|
status: "Incomplete",
|
||||||
|
photos: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: "Giuseppe Colombo",
|
||||||
|
birthDate: "4/7/1935",
|
||||||
|
arrivalDate: "11/28/1955",
|
||||||
|
origin: "Venice, Italy",
|
||||||
|
status: "Verified",
|
||||||
|
photos: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: "Lucia Romano",
|
||||||
|
birthDate: "8/30/1958",
|
||||||
|
arrivalDate: "1/10/1980",
|
||||||
|
origin: "Milan, Italy",
|
||||||
|
status: "Incomplete",
|
||||||
|
photos: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: "Marco Rossi",
|
||||||
|
birthDate: "5/12/1945",
|
||||||
|
arrivalDate: "3/15/1968",
|
||||||
|
origin: "Sicily, Italy",
|
||||||
|
status: "Verified",
|
||||||
|
photos: 3,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
name: "Maria Ricci",
|
||||||
|
birthDate: "12/15/1950",
|
||||||
|
arrivalDate: "6/20/1972",
|
||||||
|
origin: "Florence, Italy",
|
||||||
|
status: "Pending",
|
||||||
|
photos: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
name: "Paolo Marino",
|
||||||
|
birthDate: "9/22/1943",
|
||||||
|
arrivalDate: "4/17/1965",
|
||||||
|
origin: "Palermo, Italy",
|
||||||
|
status: "Verified",
|
||||||
|
photos: 4,
|
||||||
|
},
|
||||||
|
])
|
||||||
|
} else {
|
||||||
|
// Set flag to indicate we've visited an admin page
|
||||||
|
localStorage.setItem("adminNavigation", "true")
|
||||||
|
|
||||||
|
// Only show loading state on first load
|
||||||
|
if (isFirstLoad) {
|
||||||
|
// Simulate API call to fetch migrants data
|
||||||
|
setTimeout(() => {
|
||||||
|
setMigrants([
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: "Antonio Esposito",
|
||||||
|
birthDate: "2/18/1940",
|
||||||
|
arrivalDate: "9/5/1962",
|
||||||
|
origin: "Rome, Italy",
|
||||||
|
status: "Verified",
|
||||||
|
photos: 5,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
name: "Giovanna Ferraro",
|
||||||
|
birthDate: "3/11/1955",
|
||||||
|
arrivalDate: "8/5/1978",
|
||||||
|
origin: "Turin, Italy",
|
||||||
|
status: "Incomplete",
|
||||||
|
photos: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: "Giuseppe Colombo",
|
||||||
|
birthDate: "4/7/1935",
|
||||||
|
arrivalDate: "11/28/1955",
|
||||||
|
origin: "Venice, Italy",
|
||||||
|
status: "Verified",
|
||||||
|
photos: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: "Lucia Romano",
|
||||||
|
birthDate: "8/30/1958",
|
||||||
|
arrivalDate: "1/10/1980",
|
||||||
|
origin: "Milan, Italy",
|
||||||
|
status: "Incomplete",
|
||||||
|
photos: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: "Marco Rossi",
|
||||||
|
birthDate: "5/12/1945",
|
||||||
|
arrivalDate: "3/15/1968",
|
||||||
|
origin: "Sicily, Italy",
|
||||||
|
status: "Verified",
|
||||||
|
photos: 3,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
name: "Maria Ricci",
|
||||||
|
birthDate: "12/15/1950",
|
||||||
|
arrivalDate: "6/20/1972",
|
||||||
|
origin: "Florence, Italy",
|
||||||
|
status: "Pending",
|
||||||
|
photos: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
name: "Paolo Marino",
|
||||||
|
birthDate: "9/22/1943",
|
||||||
|
arrivalDate: "4/17/1965",
|
||||||
|
origin: "Palermo, Italy",
|
||||||
|
status: "Verified",
|
||||||
|
photos: 4,
|
||||||
|
},
|
||||||
|
])
|
||||||
|
setIsFirstLoad(false)
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [isFirstLoad, navigate])
|
||||||
|
|
||||||
|
const handleSelectMigrant = (id: number) => {
|
||||||
|
setSelectedMigrants((prev) => (prev.includes(id) ? prev.filter((migrantId) => migrantId !== id) : [...prev, id]))
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSelectAll = () => {
|
||||||
|
if (selectedMigrants.length === migrants.length) {
|
||||||
|
setSelectedMigrants([])
|
||||||
|
} else {
|
||||||
|
setSelectedMigrants(migrants.map((migrant) => migrant.id))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDropdownToggle = (id: number) => {
|
||||||
|
setActiveDropdown(activeDropdown === id ? null : id)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const filteredMigrants = migrants.filter((migrant) => migrant.name.toLowerCase().includes(searchQuery.toLowerCase()))
|
||||||
|
|
||||||
|
// If it's the first load, show a loading state
|
||||||
|
if (isFirstLoad) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-[#E8DCCA]/10">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="w-16 h-16 border-4 border-[#9B2335] border-t-transparent rounded-full animate-spin mx-auto"></div>
|
||||||
|
<p className="mt-4 text-gray-600">Loading migrants data...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex">
|
||||||
|
{/* Sidebar */}
|
||||||
|
<div className="w-64 bg-[#1A2A57] text-white">
|
||||||
|
<div className="p-4 border-b border-[#1A2A57]/30">
|
||||||
|
<h2 className="text-xl font-serif font-bold">Italian Migrants</h2>
|
||||||
|
<p className="text-sm text-white/70">Northern Territory DB</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className="mt-6 px-4">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Link
|
||||||
|
to="/admin"
|
||||||
|
className="flex items-center px-4 py-3 text-white/80 hover:bg-[#1A2A57]/40 rounded-md"
|
||||||
|
>
|
||||||
|
<Home className="h-5 w-5 mr-3" />
|
||||||
|
Dashboard
|
||||||
|
</Link>
|
||||||
|
<Link to="/admin/migrants" className="flex items-center px-4 py-3 text-white bg-[#1A2A57]/40 rounded-md">
|
||||||
|
<User className="h-5 w-5 mr-3" />
|
||||||
|
Migrants
|
||||||
|
</Link>
|
||||||
|
<Link to="#" className="flex items-center px-4 py-3 text-white/80 hover:bg-[#1A2A57]/40 rounded-md">
|
||||||
|
<FileText className="h-5 w-5 mr-3" />
|
||||||
|
Reports
|
||||||
|
</Link>
|
||||||
|
<Link to="#" className="flex items-center px-4 py-3 text-white/80 hover:bg-[#1A2A57]/40 rounded-md">
|
||||||
|
<Database className="h-5 w-5 mr-3" />
|
||||||
|
Database
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/admin/settings/profile"
|
||||||
|
className="flex items-center px-4 py-3 text-white/80 hover:bg-[#1A2A57]/40 rounded-md"
|
||||||
|
>
|
||||||
|
<Settings className="h-5 w-5 mr-3" />
|
||||||
|
Settings
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Add this to the bottom user section in the sidebar */}
|
||||||
|
<div className="absolute bottom-0 w-64 p-4 border-t border-[#1A2A57]/30">
|
||||||
|
<button
|
||||||
|
onClick={handleLogout}
|
||||||
|
className="flex items-center w-full px-4 py-2 text-white/80 hover:bg-[#1A2A57]/40 rounded-md"
|
||||||
|
>
|
||||||
|
<div className="h-8 w-8 rounded-full bg-white text-[#1A2A57] flex items-center justify-center mr-2">
|
||||||
|
<User className="h-5 w-5" />
|
||||||
|
</div>
|
||||||
|
<span className="text-sm">Admin User</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main content */}
|
||||||
|
<div className="flex-1 overflow-auto">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="bg-white shadow-sm border-b border-gray-200">
|
||||||
|
<div className="flex justify-between items-center px-6 py-4">
|
||||||
|
<h1 className="text-xl font-medium text-[#1A2A57]">Admin Portal</h1>
|
||||||
|
<div className="text-sm text-gray-600">Northern Territory</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Migrants Management content */}
|
||||||
|
<div className="p-6">
|
||||||
|
<motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
|
||||||
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-gray-800">Migrants Management</h2>
|
||||||
|
<p className="text-gray-600">Manage and organize migrant records</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className="px-4 py-2 bg-[#01796F] text-white rounded-md hover:bg-[#01796F]/90 flex items-center"
|
||||||
|
>
|
||||||
|
<Plus className="h-4 w-4 mr-2" />
|
||||||
|
Add Migrant
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Migrants Database */}
|
||||||
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
||||||
|
<div className="p-4 border-b border-gray-200">
|
||||||
|
<h3 className="text-lg font-medium text-[#1A2A57]">Migrants Database</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Search and filters */}
|
||||||
|
<div className="p-4 flex flex-wrap items-center justify-between gap-4 border-b border-gray-200">
|
||||||
|
<div className="flex flex-wrap items-center gap-4 w-full lg:w-auto">
|
||||||
|
<div className="relative w-full lg:w-64">
|
||||||
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search migrants..."
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
className="pl-10 pr-4 py-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#01796F] focus:border-[#01796F]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 w-full lg:w-auto">
|
||||||
|
<span className="text-sm text-gray-500 whitespace-nowrap">Arrival Date:</span>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
placeholder="From"
|
||||||
|
value={arrivalDateMin}
|
||||||
|
onChange={(e) => setArrivalDateMin(e.target.value)}
|
||||||
|
className="border border-gray-300 rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-[#01796F] focus:border-[#01796F] w-32"
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-gray-500">to</span>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
placeholder="To"
|
||||||
|
value={arrivalDateMax}
|
||||||
|
onChange={(e) => setArrivalDateMax(e.target.value)}
|
||||||
|
className="border border-gray-300 rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-[#01796F] focus:border-[#01796F] w-32"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<button className="p-2 border border-gray-300 rounded-md hover:bg-gray-50">
|
||||||
|
<Filter className="h-4 w-4 text-gray-500" />
|
||||||
|
</button>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-sm text-gray-500">Show:</span>
|
||||||
|
<select className="border border-gray-300 rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-[#01796F] focus:border-[#01796F]">
|
||||||
|
<option value="10">10</option>
|
||||||
|
<option value="25">25</option>
|
||||||
|
<option value="50">50</option>
|
||||||
|
<option value="100">100</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="relative">
|
||||||
|
<button className="px-3 py-1 border border-gray-300 rounded-md text-sm hover:bg-gray-50 flex items-center gap-1">
|
||||||
|
Batch Actions
|
||||||
|
<svg
|
||||||
|
className="h-4 w-4 text-gray-500"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Table */}
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="min-w-full divide-y divide-gray-200">
|
||||||
|
<thead className="bg-gray-50">
|
||||||
|
<tr>
|
||||||
|
<th scope="col" className="px-6 py-3 text-left">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="h-4 w-4 text-[#01796F] focus:ring-[#01796F] border-gray-300 rounded"
|
||||||
|
checked={selectedMigrants.length === migrants.length && migrants.length > 0}
|
||||||
|
onChange={handleSelectAll}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||||
|
>
|
||||||
|
ID
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||||
|
>
|
||||||
|
<div className="flex items-center">
|
||||||
|
Name
|
||||||
|
<ChevronUp className="h-4 w-4 ml-1" />
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||||
|
>
|
||||||
|
Birth Date
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||||
|
>
|
||||||
|
Arrival Date
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||||
|
>
|
||||||
|
Origin
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||||
|
>
|
||||||
|
Status
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||||
|
>
|
||||||
|
Photos
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||||
|
>
|
||||||
|
Actions
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="bg-white divide-y divide-gray-200">
|
||||||
|
{filteredMigrants.map((migrant) => (
|
||||||
|
<tr key={migrant.id} className="hover:bg-gray-50">
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="h-4 w-4 text-[#01796F] focus:ring-[#01796F] border-gray-300 rounded"
|
||||||
|
checked={selectedMigrants.includes(migrant.id)}
|
||||||
|
onChange={() => handleSelectMigrant(migrant.id)}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{migrant.id}</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="h-8 w-8 rounded-full bg-gray-200 flex-shrink-0"></div>
|
||||||
|
<div className="ml-4">
|
||||||
|
<div className="text-sm font-medium text-gray-900">{migrant.name}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{migrant.birthDate}</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{migrant.arrivalDate}</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{migrant.origin}</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
|
<span
|
||||||
|
className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
|
||||||
|
migrant.status === "Verified"
|
||||||
|
? "bg-green-100 text-green-800"
|
||||||
|
: migrant.status === "Incomplete"
|
||||||
|
? "bg-red-100 text-red-800"
|
||||||
|
: "bg-yellow-100 text-yellow-800"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{migrant.status}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{migrant.photos}</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium relative">
|
||||||
|
<button
|
||||||
|
onClick={() => handleDropdownToggle(migrant.id)}
|
||||||
|
className="text-gray-400 hover:text-gray-500"
|
||||||
|
>
|
||||||
|
<MoreHorizontal className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
{activeDropdown === migrant.id && (
|
||||||
|
<div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10 border border-gray-200">
|
||||||
|
<button
|
||||||
|
className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
<Edit className="h-4 w-4 inline-block mr-2" />
|
||||||
|
Edit
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
<Upload className="h-4 w-4 inline-block mr-2" />
|
||||||
|
Upload Photos
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4 inline-block mr-2" />
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Pagination */}
|
||||||
|
<div className="px-6 py-3 flex items-center justify-between border-t border-gray-200">
|
||||||
|
<div className="flex-1 flex justify-between sm:hidden">
|
||||||
|
<button className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
||||||
|
Previous
|
||||||
|
</button>
|
||||||
|
<button className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
||||||
|
Next
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-700">
|
||||||
|
Showing <span className="font-medium">1</span> to{" "}
|
||||||
|
<span className="font-medium">{filteredMigrants.length}</span> of{" "}
|
||||||
|
<span className="font-medium">{filteredMigrants.length}</span> results
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
|
||||||
|
<button className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
||||||
|
<span className="sr-only">Previous</span>
|
||||||
|
<svg
|
||||||
|
className="h-5 w-5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
||||||
|
clipRule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
aria-current="page"
|
||||||
|
className="z-10 bg-[#01796F] border-[#01796F] text-white relative inline-flex items-center px-4 py-2 border text-sm font-medium"
|
||||||
|
>
|
||||||
|
1
|
||||||
|
</button>
|
||||||
|
<button className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
||||||
|
<span className="sr-only">Next</span>
|
||||||
|
<svg
|
||||||
|
className="h-5 w-5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||||
|
clipRule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,509 @@
|
||||||
|
"use client"
|
||||||
|
|
||||||
|
import type React from "react"
|
||||||
|
|
||||||
|
import { useState, useEffect } from "react"
|
||||||
|
import { useNavigate } from "react-router-dom"
|
||||||
|
import { motion } from "framer-motion"
|
||||||
|
import { Camera, Save, User, Mail, MapPin, Lock, Bell, Home } from "lucide-react"
|
||||||
|
import { Link } from "react-router-dom"
|
||||||
|
|
||||||
|
interface UserProfile {
|
||||||
|
firstName: string
|
||||||
|
lastName: string
|
||||||
|
email: string
|
||||||
|
jobTitle: string
|
||||||
|
department: string
|
||||||
|
bio: string
|
||||||
|
avatar: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ProfileSettings() {
|
||||||
|
const [isFirstLoad, setIsFirstLoad] = useState(true)
|
||||||
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
|
const [activeTab, setActiveTab] = useState("profile")
|
||||||
|
const [profile, setProfile] = useState<UserProfile>({
|
||||||
|
firstName: "Admin",
|
||||||
|
lastName: "User",
|
||||||
|
email: "admin@example.com",
|
||||||
|
jobTitle: "Database Administrator",
|
||||||
|
department: "IT",
|
||||||
|
bio: "Experienced database administrator with a focus on migration data management.",
|
||||||
|
avatar: "",
|
||||||
|
})
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
// Add a handleLogout function that clears the adminNavigation flag
|
||||||
|
const handleLogout = () => {
|
||||||
|
localStorage.removeItem("adminToken")
|
||||||
|
localStorage.removeItem("adminNavigation") // Clear navigation flag on logout
|
||||||
|
|
||||||
|
navigate("/admin/login")
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Check if user is authenticated
|
||||||
|
const token = localStorage.getItem("adminToken")
|
||||||
|
if (!token) {
|
||||||
|
navigate("/admin/login")
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if we're navigating from another admin page
|
||||||
|
const hasVisitedAdmin = localStorage.getItem("adminNavigation")
|
||||||
|
|
||||||
|
// Skip loading if we're navigating from another admin page
|
||||||
|
if (hasVisitedAdmin) {
|
||||||
|
setIsFirstLoad(false)
|
||||||
|
} else {
|
||||||
|
// Set flag to indicate we've visited an admin page
|
||||||
|
localStorage.setItem("adminNavigation", "true")
|
||||||
|
|
||||||
|
// Only show loading state on first load
|
||||||
|
if (isFirstLoad) {
|
||||||
|
// Simulate loading profile data
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
setIsFirstLoad(false)
|
||||||
|
}, 500) // Reduced loading time for better UX
|
||||||
|
|
||||||
|
return () => clearTimeout(timer)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [isFirstLoad, navigate])
|
||||||
|
|
||||||
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||||
|
const { name, value } = e.target
|
||||||
|
setProfile((prev) => ({ ...prev, [name]: value }))
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSave = () => {
|
||||||
|
setIsLoading(true)
|
||||||
|
|
||||||
|
// Simulate API call
|
||||||
|
setTimeout(() => {
|
||||||
|
setIsLoading(false)
|
||||||
|
}, 500) // Reduced loading time for better UX
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const file = e.target.files?.[0]
|
||||||
|
if (file) {
|
||||||
|
const reader = new FileReader()
|
||||||
|
reader.onload = (event) => {
|
||||||
|
if (event.target?.result) {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
reader.readAsDataURL(file)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// If it's the first load, show a loading state
|
||||||
|
if (isFirstLoad) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-[#E8DCCA]/10">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="w-16 h-16 border-4 border-[#9B2335] border-t-transparent rounded-full animate-spin mx-auto"></div>
|
||||||
|
<p className="mt-4 text-gray-600">Loading profile...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex">
|
||||||
|
{/* Sidebar */}
|
||||||
|
<div className="w-64 bg-[#1A2A57] text-white">
|
||||||
|
<div className="p-4 border-b border-[#1A2A57]/30">
|
||||||
|
<h2 className="text-xl font-serif font-bold">Italian Migrants</h2>
|
||||||
|
<p className="text-sm text-white/70">Northern Territory DB</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className="mt-6 px-4">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Link
|
||||||
|
to="/admin"
|
||||||
|
className="flex items-center px-4 py-3 text-white/80 hover:bg-[#1A2A57]/40 rounded-md"
|
||||||
|
>
|
||||||
|
<Home className="h-5 w-5 mr-3" />
|
||||||
|
Dashboard
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/admin/migrants"
|
||||||
|
className="flex items-center px-4 py-3 text-white/80 hover:bg-[#1A2A57]/40 rounded-md"
|
||||||
|
>
|
||||||
|
<User className="h-5 w-5 mr-3" />
|
||||||
|
Migrants
|
||||||
|
</Link>
|
||||||
|
<Link to="#" className="flex items-center px-4 py-3 text-white/80 hover:bg-[#1A2A57]/40 rounded-md">
|
||||||
|
<Mail className="h-5 w-5 mr-3" />
|
||||||
|
Reports
|
||||||
|
</Link>
|
||||||
|
<Link to="#" className="flex items-center px-4 py-3 text-white/80 hover:bg-[#1A2A57]/40 rounded-md">
|
||||||
|
<MapPin className="h-5 w-5 mr-3" />
|
||||||
|
Database
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/admin/settings/profile"
|
||||||
|
className="flex items-center px-4 py-3 text-white bg-[#1A2A57]/40 rounded-md"
|
||||||
|
>
|
||||||
|
<Lock className="h-5 w-5 mr-3" />
|
||||||
|
Settings
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Update the bottom user section in the sidebar */}
|
||||||
|
<div className="absolute bottom-0 w-64 p-4 border-t border-[#1A2A57]/30">
|
||||||
|
<button
|
||||||
|
onClick={handleLogout}
|
||||||
|
className="flex items-center w-full px-4 py-2 text-white/80 hover:bg-[#1A2A57]/40 rounded-md"
|
||||||
|
>
|
||||||
|
<div className="h-8 w-8 rounded-full bg-white text-[#1A2A57] flex items-center justify-center mr-2">
|
||||||
|
<User className="h-5 w-5" />
|
||||||
|
</div>
|
||||||
|
<span className="text-sm">Admin User</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main content */}
|
||||||
|
<div className="flex-1 overflow-auto">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="bg-white shadow-sm border-b border-gray-200">
|
||||||
|
<div className="flex justify-between items-center px-6 py-4">
|
||||||
|
<h1 className="text-xl font-medium text-[#1A2A57]">Admin Portal</h1>
|
||||||
|
<div className="text-sm text-gray-600">Northern Territory</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Settings content */}
|
||||||
|
<div className="p-6">
|
||||||
|
<motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
|
||||||
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-gray-800">Settings</h2>
|
||||||
|
<p className="text-gray-600">Manage your account preferences</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={handleSave}
|
||||||
|
disabled={isLoading}
|
||||||
|
className="px-4 py-2 bg-[#01796F] text-white rounded-md hover:bg-[#01796F]/90 flex items-center disabled:opacity-70"
|
||||||
|
>
|
||||||
|
{isLoading ? (
|
||||||
|
<>
|
||||||
|
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
|
||||||
|
Saving...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Save className="h-4 w-4 mr-2" />
|
||||||
|
Save Changes
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tabs */}
|
||||||
|
<div className="flex mb-6 border-b border-gray-200">
|
||||||
|
<button
|
||||||
|
className={`px-6 py-3 font-medium flex items-center ${
|
||||||
|
activeTab === "profile"
|
||||||
|
? "text-[#1A2A57] border-b-2 border-[#1A2A57]"
|
||||||
|
: "text-gray-500 hover:text-gray-700"
|
||||||
|
}`}
|
||||||
|
onClick={() => setActiveTab("profile")}
|
||||||
|
>
|
||||||
|
<User className="h-4 w-4 mr-2" />
|
||||||
|
Profile
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`px-6 py-3 font-medium flex items-center ${
|
||||||
|
activeTab === "security"
|
||||||
|
? "text-[#1A2A57] border-b-2 border-[#1A2A57]"
|
||||||
|
: "text-gray-500 hover:text-gray-700"
|
||||||
|
}`}
|
||||||
|
onClick={() => setActiveTab("security")}
|
||||||
|
>
|
||||||
|
<Lock className="h-4 w-4 mr-2" />
|
||||||
|
Security
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`px-6 py-3 font-medium flex items-center ${
|
||||||
|
activeTab === "notifications"
|
||||||
|
? "text-[#1A2A57] border-b-2 border-[#1A2A57]"
|
||||||
|
: "text-gray-500 hover:text-gray-700"
|
||||||
|
}`}
|
||||||
|
onClick={() => setActiveTab("notifications")}
|
||||||
|
>
|
||||||
|
<Bell className="h-4 w-4 mr-2" />
|
||||||
|
Notifications
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Profile Tab Content */}
|
||||||
|
{activeTab === "profile" && (
|
||||||
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||||||
|
<h3 className="text-lg font-medium text-gray-800 mb-4">Profile Information</h3>
|
||||||
|
<p className="text-gray-600 mb-6">
|
||||||
|
Update your personal information and how it appears on your profile.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex items-start mb-8">
|
||||||
|
<div className="mr-6">
|
||||||
|
<div className="relative">
|
||||||
|
<div className="h-24 w-24 rounded-full bg-gray-200 overflow-hidden">
|
||||||
|
{profile.avatar ? (
|
||||||
|
<img
|
||||||
|
src={profile.avatar || "/placeholder.svg"}
|
||||||
|
alt="Profile"
|
||||||
|
className="h-full w-full object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="h-full w-full flex items-center justify-center bg-gray-300">
|
||||||
|
<User className="h-12 w-12 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<label
|
||||||
|
htmlFor="avatar-upload"
|
||||||
|
className="absolute bottom-0 right-0 p-1 bg-[#9B2335] text-white rounded-full cursor-pointer"
|
||||||
|
>
|
||||||
|
<Camera className="h-4 w-4" />
|
||||||
|
<input
|
||||||
|
id="avatar-upload"
|
||||||
|
type="file"
|
||||||
|
accept="image/*"
|
||||||
|
className="hidden"
|
||||||
|
onChange={handleAvatarChange}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<button className="mt-2 text-sm text-[#1A2A57] hover:underline">Change</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 grid grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label htmlFor="firstName" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
First Name
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="firstName"
|
||||||
|
name="firstName"
|
||||||
|
value={profile.firstName}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[#01796F] focus:border-[#01796F]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="lastName" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Last Name
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="lastName"
|
||||||
|
name="lastName"
|
||||||
|
value={profile.lastName}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[#01796F] focus:border-[#01796F]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-span-2">
|
||||||
|
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
value={profile.email}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[#01796F] focus:border-[#01796F]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="jobTitle" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Job Title
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="jobTitle"
|
||||||
|
name="jobTitle"
|
||||||
|
value={profile.jobTitle}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[#01796F] focus:border-[#01796F]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="department" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Department
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="department"
|
||||||
|
name="department"
|
||||||
|
value={profile.department}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[#01796F] focus:border-[#01796F]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="bio" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Bio
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
id="bio"
|
||||||
|
name="bio"
|
||||||
|
rows={4}
|
||||||
|
value={profile.bio}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[#01796F] focus:border-[#01796F]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Security Tab Content */}
|
||||||
|
{activeTab === "security" && (
|
||||||
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||||||
|
<h3 className="text-lg font-medium text-gray-800 mb-4">Security Settings</h3>
|
||||||
|
<p className="text-gray-600 mb-6">Manage your password and account security preferences.</p>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h4 className="text-md font-medium mb-2">Change Password</h4>
|
||||||
|
<div className="grid grid-cols-1 gap-4">
|
||||||
|
<div>
|
||||||
|
<label htmlFor="currentPassword" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Current Password
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="currentPassword"
|
||||||
|
className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[#01796F] focus:border-[#01796F]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label htmlFor="newPassword" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
New Password
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="newPassword"
|
||||||
|
className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[#01796F] focus:border-[#01796F]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Confirm New Password
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="confirmPassword"
|
||||||
|
className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[#01796F] focus:border-[#01796F]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button className="mt-4 px-4 py-2 bg-[#1A2A57] text-white rounded-md hover:bg-[#1A2A57]/90">
|
||||||
|
Update Password
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-6 border-t border-gray-200">
|
||||||
|
<h4 className="text-md font-medium mb-2">Two-Factor Authentication</h4>
|
||||||
|
<p className="text-sm text-gray-600 mb-4">
|
||||||
|
Add an extra layer of security to your account by enabling two-factor authentication.
|
||||||
|
</p>
|
||||||
|
<button className="px-4 py-2 bg-[#9B2335] text-white rounded-md hover:bg-[#9B2335]/90">
|
||||||
|
Enable 2FA
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Notifications Tab Content */}
|
||||||
|
{activeTab === "notifications" && (
|
||||||
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||||||
|
<h3 className="text-lg font-medium text-gray-800 mb-4">Notification Preferences</h3>
|
||||||
|
<p className="text-gray-600 mb-6">Manage how and when you receive notifications.</p>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h4 className="text-md font-medium mb-4">Email Notifications</h4>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="font-medium">System Updates</p>
|
||||||
|
<p className="text-sm text-gray-600">Receive emails about system updates and maintenance</p>
|
||||||
|
</div>
|
||||||
|
<label className="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input type="checkbox" className="sr-only peer" defaultChecked />
|
||||||
|
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[#01796F]/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#01796F]"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="font-medium">New Records</p>
|
||||||
|
<p className="text-sm text-gray-600">Receive emails when new migrant records are added</p>
|
||||||
|
</div>
|
||||||
|
<label className="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input type="checkbox" className="sr-only peer" defaultChecked />
|
||||||
|
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[#01796F]/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#01796F]"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="font-medium">Security Alerts</p>
|
||||||
|
<p className="text-sm text-gray-600">Receive emails about security-related events</p>
|
||||||
|
</div>
|
||||||
|
<label className="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input type="checkbox" className="sr-only peer" defaultChecked />
|
||||||
|
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[#01796F]/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#01796F]"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-6 border-t border-gray-200">
|
||||||
|
<h4 className="text-md font-medium mb-4">In-App Notifications</h4>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="font-medium">Record Updates</p>
|
||||||
|
<p className="text-sm text-gray-600">Receive notifications when records are updated</p>
|
||||||
|
</div>
|
||||||
|
<label className="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input type="checkbox" className="sr-only peer" defaultChecked />
|
||||||
|
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[#01796F]/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#01796F]"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="font-medium">User Activity</p>
|
||||||
|
<p className="text-sm text-gray-600">Receive notifications about other users' activity</p>
|
||||||
|
</div>
|
||||||
|
<label className="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input type="checkbox" className="sr-only peer" />
|
||||||
|
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[#01796F]/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#01796F]"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,114 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ToastPrimitives from "@radix-ui/react-toast"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
import { X } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const ToastProvider = ToastPrimitives.Provider
|
||||||
|
|
||||||
|
const ToastViewport = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ToastPrimitives.Viewport>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<ToastPrimitives.Viewport
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
ToastViewport.displayName = ToastPrimitives.Viewport.displayName
|
||||||
|
|
||||||
|
const toastVariants = cva(
|
||||||
|
"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "border bg-white text-foreground",
|
||||||
|
destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
|
||||||
|
success: "border-green-500 bg-green-50 text-green-800",
|
||||||
|
warning: "border-yellow-500 bg-yellow-50 text-yellow-800",
|
||||||
|
info: "border-blue-500 bg-blue-50 text-blue-800",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
const Toast = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ToastPrimitives.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
|
||||||
|
>(({ className, variant, ...props }, ref) => {
|
||||||
|
return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />
|
||||||
|
})
|
||||||
|
Toast.displayName = ToastPrimitives.Root.displayName
|
||||||
|
|
||||||
|
const ToastAction = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ToastPrimitives.Action>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<ToastPrimitives.Action
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
ToastAction.displayName = ToastPrimitives.Action.displayName
|
||||||
|
|
||||||
|
const ToastClose = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ToastPrimitives.Close>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<ToastPrimitives.Close
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
toast-close=""
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</ToastPrimitives.Close>
|
||||||
|
))
|
||||||
|
ToastClose.displayName = ToastPrimitives.Close.displayName
|
||||||
|
|
||||||
|
const ToastTitle = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ToastPrimitives.Title>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
|
||||||
|
))
|
||||||
|
ToastTitle.displayName = ToastPrimitives.Title.displayName
|
||||||
|
|
||||||
|
const ToastDescription = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ToastPrimitives.Description>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
|
||||||
|
))
|
||||||
|
ToastDescription.displayName = ToastPrimitives.Description.displayName
|
||||||
|
|
||||||
|
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
|
||||||
|
|
||||||
|
type ToastActionElement = React.ReactElement<typeof ToastAction>
|
||||||
|
|
||||||
|
export {
|
||||||
|
type ToastProps,
|
||||||
|
type ToastActionElement,
|
||||||
|
ToastProvider,
|
||||||
|
ToastViewport,
|
||||||
|
Toast,
|
||||||
|
ToastTitle,
|
||||||
|
ToastDescription,
|
||||||
|
ToastClose,
|
||||||
|
ToastAction,
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
// src/pages/AdminDashboardPage.tsx
|
||||||
|
import AdminDashboard from "@/components/AdminDashboard/DashboardLayout";
|
||||||
|
|
||||||
|
const AdminDashboardPage = () => {
|
||||||
|
return <AdminDashboard />;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AdminDashboardPage;
|
||||||
Loading…
Reference in New Issue