Skip to content

Improved UI and Real time data analysis in dashboard #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
YogeshwaranOfficial merged 2 commits into from
Jun 12, 2026
Merged

Improved UI and Real time data analysis in dashboard #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7876185
fix: solve the static data in dashboard into dynamic data
YogeshwaranOfficial Jun 12, 2026
1579a04
fix: Imporve the Overall UI
YogeshwaranOfficial Jun 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 53 additions & 27 deletions client/src/features/admin/components/AdminLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ import { useAuthStore } from "../../../store/authStore";
import { motion } from "framer-motion";

// Lucide Icons matching your clean, balanced stroke layouts
import {
LayoutDashboard,
Users,
ShieldAlert,
LogOut,
import {
LayoutDashboard,
Users,
ShieldAlert,
LogOut,
Library,
User
User,
} from "lucide-react";

export const AdminLayout: React.FC = () => {
Expand All @@ -23,27 +23,44 @@ export const AdminLayout: React.FC = () => {
};

const navItems = [
{ name: "Admin Dashboard", path: "/admin/dashboard", icon: LayoutDashboard, color: "text-blue-600" },
{ name: "Manage Users", path: "/admin/users", icon: Users, color: "text-amber-700" },
{ name: "Manage Librarians", path: "/admin/librarians", icon: ShieldAlert, color: "text-rose-600" },
{
name: "Admin Dashboard",
path: "/admin/dashboard",
icon: LayoutDashboard,
color: "text-blue-600",
},
{
name: "Manage Users",
path: "/admin/users",
icon: Users,
color: "text-amber-700",
},
{
name: "Manage Librarians",
path: "/admin/librarians",
icon: ShieldAlert,
color: "text-rose-600",
},
];

return (
<div className="flex h-screen w-screen overflow-hidden bg-amber-50/40 font-sans text-slate-800 antialiased selection:bg-amber-200">

{/* Sidebar Navigation - Warm Archival Minimalist Layout (Matching 72 width) */}
<aside className="w-72 bg-white border-r border-amber-100 flex flex-col justify-between relative z-20 shadow-xs shrink-0">
<aside className="w-72 bg-card-bg border-r border-amber-100 flex flex-col justify-between relative z-20 shadow-xs shrink-0">
<div className="p-6">
<div className="flex items-center gap-3.5 py-3 border-b border-slate-100 mb-6">

{/* Elegant Institutional Identity Icon */}
<div className="w-10 h-10 bg-slate-900 text-amber-100 rounded-lg flex items-center justify-center shadow-xs shrink-0">
<Library size={20} className="stroke-[2.2]" />
</div>

<div className="flex flex-col">
<span className="font-bold text-base tracking-tight text-slate-900 leading-tight">LMS</span>
<span className="text-xs text-slate-400 font-bold uppercase tracking-wider mt-0.5">Admin Portal</span>
<span className="font-bold text-base tracking-tight text-text-main leading-tight">
LMS
</span>
<span className="text-xs text-slate-400 font-bold uppercase tracking-wider mt-0.5">
Admin Portal
</span>
</div>
</div>

Expand All @@ -63,45 +80,54 @@ export const AdminLayout: React.FC = () => {
}`
}
>
<IconComponent size={18} className={`stroke-[2.2] shrink-0 ${item.color}`} />
<IconComponent
size={18}
className={`stroke-[2.2] shrink-0 ${item.color}`}
/>
<span>{item.name}</span>
</NavLink>
);
})}
</nav>
</div>

{/* Sidebar Footer - Spacious Action Deck matches exactly */}
<div className="p-5 border-t border-slate-100 bg-slate-50/60">
<button
onClick={handleSignOut}
className="flex w-full items-center justify-center gap-2.5 px-4 py-3 rounded-lg text-sm font-bold text-orange-700 bg-orange-50 hover:bg-orange-100 border border-orange-200/60 transition-all cursor-pointer shadow-2xs"
>
<LogOut size={16} className="stroke-[2.5]" />
<span>Logout System</span>
<span>Logout</span>
</button>
</div>
</aside>

{/* Main Structural Area */}
<div className="flex-1 flex flex-col overflow-hidden">

{/* Header Frame - Formatted with identical Height h-22 and Side Padding */}
<header className="h-22 bg-white border-b border-amber-100 flex items-center justify-between px-10 shadow-2xs shrink-0">
<header className="h-22 bg-card-bg border-b border-amber-100 flex items-center justify-between px-10 shadow-2xs shrink-0">
<div>
<h1 className="text-lg font-bold text-slate-900 tracking-tight">Admin Dashboard</h1>
<p className="text-sm text-slate-400 font-medium mt-0.5">Core directory controls and active network administration</p>
<h1 className="text-lg font-bold text-text-main tracking-tight">
Admin Dashboard
</h1>
<p className="text-sm text-slate-400 font-medium mt-0.5">
Core directory controls and active network administration
</p>
</div>

<div className="flex items-center gap-5">
<div className="text-right hidden sm:block">
<p className="text-xs text-slate-400 font-medium tracking-wide uppercase mt-1">
ROLE: <span className="text-rose-600 font-bold">{user?.role || "ADMIN"}</span>
ROLE:{" "}
<span className="text-rose-600 font-bold">
{user?.role || "ADMIN"}
</span>
</p>
</div>

{/* User Profile Avatar Frame */}
<div className="w-11 h-11 bg-slate-50 border border-slate-200/60 text-slate-700 rounded-lg flex items-center justify-center shadow-2xs">
<div className="w-11 h-11 bg-slate-50 border border-border-main/60 text-text-main rounded-lg flex items-center justify-center shadow-2xs">
<User size={18} className="stroke-[2.2]" />
</div>
</div>
Expand All @@ -120,4 +146,4 @@ export const AdminLayout: React.FC = () => {
</div>
</div>
);
};
};
40 changes: 21 additions & 19 deletions client/src/features/admin/components/DeleteLibrarianProfile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,54 +20,56 @@ export const DeleteLibrarianProfile: React.FC<DeleteLibrarianProfileProps> = ({
return (
<div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans">
{/* Container: Matches the clean off-white base with soft linen-amber border */}
<div className="bg-white rounded-2xl shadow-xl w-full max-w-sm p-6 border border-amber-100/80 animate-zoom-in">

<div className="bg-card-bg rounded-2xl shadow-xl w-full max-w-sm p-6 border border-amber-100/80 animate-zoom-in">
<div className="text-center">
{/* Header: Crisp text-base alignment with deep slate-ink tone */}
<h3 className="text-base font-bold text-slate-900 tracking-tight">
<h3 className="text-base font-bold text-text-main tracking-tight">
Revoke Administrative Access
</h3>

{/* Main Paragraph: Structured at text-sm slate-600 for high editorial legibility */}
<p className="text-sm text-slate-600 mt-4 leading-relaxed">
Are you completely confident about stripping{" "}
<strong className="text-slate-900 font-bold">"{librarianName}"</strong> of all administrative privileges and access layers?
<strong className="text-text-main font-bold">
"{librarianName}"
</strong>{" "}
of all administrative privileges and access layers?
</p>

{/* Callout Block: Shipped with premium cream/rose warning surface tokens */}
<div className="text-xs text-rose-900 font-medium mt-5 bg-rose-50/60 border border-rose-100 p-4 rounded-xl text-left leading-relaxed">
<span className="font-bold uppercase tracking-wider block mb-1 text-rose-950 text-[11px]">
⚠️ Critical Reminder:
</span>
This action completely cleanses their system profile registry. They will instantly lose terminal authentication rights and management access across the network.
This action completely cleanses their system profile registry. They
will instantly lose terminal authentication rights and management
access across the network.
</div>
</div>

{/* Modal Action Footers - Crisp Touchpoints */}
<div className="mt-6 flex justify-end gap-3 pt-5 border-t border-slate-100 text-xs font-bold tracking-wide">

{/* Cancel/Abort Button */}
<button
type="button"
onClick={onClose}
<button
type="button"
onClick={onClose}
disabled={isPending}
className="px-4 py-3 bg-slate-50 border border-slate-200 text-slate-700 rounded-xl transition-all hover:bg-slate-100 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
className="px-4 py-3 bg-slate-50 border border-border-main text-text-main rounded-xl transition-all hover:bg-slate-100 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
>
Abort
</button>

{/* Action Button: Dark editorial signature signature button block */}
<button
type="button"
onClick={onConfirm}
<button
type="button"
onClick={onConfirm}
disabled={isPending}
className="px-4 py-3 bg-slate-900 hover:bg-slate-800 text-amber-50 rounded-xl transition-all cursor-pointer shadow-sm disabled:bg-slate-700 disabled:cursor-not-allowed min-w-32.5 text-center"
>
{isPending ? "Revoking..." : "Confirm Deletion"}
</button>

</div>
</div>
</div>
);
};
};
41 changes: 21 additions & 20 deletions client/src/features/admin/components/DeleteUserModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,54 +20,55 @@ export const DeleteUserModal: React.FC<DeleteUserModalProps> = ({
return (
<div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans">
{/* Container: Matches the clean off-white base with soft linen-amber border */}
<div className="bg-white rounded-2xl shadow-xl w-full max-w-sm p-6 border border-amber-100/80 animate-zoom-in">

<div className="bg-card-bg rounded-2xl shadow-xl w-full max-w-sm p-6 border border-amber-100/80 animate-zoom-in">
<div className="text-center">
{/* Header: Crisp text-base alignment with deep slate-ink tone */}
<h3 className="text-base font-bold text-slate-900 tracking-tight">
<h3 className="text-base font-bold text-text-main tracking-tight">
Confirm User Account Purge
</h3>

{/* Main Paragraph: Structured at text-sm slate-600 for high editorial legibility */}
<p className="text-sm text-slate-600 mt-4 leading-relaxed">
Are you sure you want to completely delete the system profile record for{" "}
<strong className="text-slate-900 font-bold">"{userName}"</strong> from the library management core engine?
Are you sure you want to completely delete the system profile record
for{" "}
<strong className="text-text-main font-bold">"{userName}"</strong>{" "}
from the library management core engine?
</p>

{/* Callout Block: Shipped with premium cream/rose warning surface tokens */}
<div className="text-xs text-rose-900 font-medium mt-5 bg-rose-50/60 border border-rose-100 p-4 rounded-xl text-left leading-relaxed">
<span className="font-bold uppercase tracking-wider block mb-1 text-rose-950 text-[11px]">
⚠️ Irreversible Action:
</span>
This process instantly flushes out their system user registry parameters, active resource rentals, tracking workflows, and systemic archival logs completely.
This process instantly flushes out their system user registry
parameters, active resource rentals, tracking workflows, and
systemic archival logs completely.
</div>
</div>

{/* Modal Action Footers - Crisp Touchpoints */}
<div className="mt-6 flex justify-end gap-3 pt-5 border-t border-slate-100 text-xs font-bold tracking-wide">

{/* Cancel Button */}
<button
type="button"
onClick={onClose}
<button
type="button"
onClick={onClose}
disabled={isPending}
className="px-4 py-3 bg-slate-50 border border-slate-200 text-slate-700 rounded-xl transition-all hover:bg-slate-100 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
className="px-4 py-3 bg-slate-50 border border-border-main text-text-main rounded-xl transition-all hover:bg-slate-100 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
>
Cancel
</button>

{/* Action Button: Dark editorial signature signature button block */}
<button
type="button"
onClick={onConfirm}
<button
type="button"
onClick={onConfirm}
disabled={isPending}
className="px-4 py-3 bg-slate-900 hover:bg-slate-800 text-amber-50 rounded-xl transition-all cursor-pointer shadow-sm disabled:bg-slate-700 disabled:cursor-not-allowed min-w-30 text-center"
>
{isPending ? "Purging Files..." : "Confirm Delete"}
</button>

</div>
</div>
</div>
);
};
};
Loading
Loading