feat: Add Source Serif 4 and Fractul font families and integrate them across the admin UI.

This commit is contained in:
pradeepkumar
2026-02-11 03:22:06 +05:30
parent 41df986d77
commit 33bd968d50
99 changed files with 829 additions and 454 deletions

View File

@@ -57,7 +57,7 @@ export default function DashboardPage() {
if (isLoading) {
return (
<div className="flex items-center justify-center py-12">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#f5a623]"></div>
</div>
);
}
@@ -66,17 +66,17 @@ export default function DashboardPage() {
<div>
{/* Page Title */}
<div className="mb-6">
<h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
<p className="text-gray-500">Welcome to Re-Quest Admin Panel</p>
<h1 className="text-2xl font-bold text-[#00293d] font-fractul">Dashboard</h1>
<p className="text-[#666666] font-serif">Welcome to Re-Quest Admin Panel</p>
</div>
{/* Stats Cards */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
<div className="bg-white rounded-lg shadow p-6">
<div className="bg-white rounded-xl shadow-sm border border-[#e5e7eb] p-6 card-hover">
<div className="flex items-center">
<div className="p-3 bg-blue-100 rounded-lg">
<div className="p-3 bg-[#e8f0ee] rounded-xl">
<svg
className="w-6 h-6 text-blue-600"
className="w-6 h-6 text-[#5ba4a4]"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@@ -90,14 +90,14 @@ export default function DashboardPage() {
</svg>
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-500">Total Users</p>
<p className="text-2xl font-bold text-gray-900">{stats.totalUsers}</p>
<p className="text-sm font-medium text-[#666666] font-serif">Total Users</p>
<p className="text-2xl font-bold text-[#00293d] font-fractul">{stats.totalUsers}</p>
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow p-6">
<div className="bg-white rounded-xl shadow-sm border border-[#e5e7eb] p-6 card-hover">
<div className="flex items-center">
<div className="p-3 bg-green-100 rounded-lg">
<div className="p-3 bg-green-50 rounded-xl">
<svg
className="w-6 h-6 text-green-600"
fill="none"
@@ -113,16 +113,16 @@ export default function DashboardPage() {
</svg>
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-500">Active</p>
<p className="text-2xl font-bold text-gray-900">{stats.activeUsers}</p>
<p className="text-sm font-medium text-[#666666] font-serif">Active</p>
<p className="text-2xl font-bold text-[#00293d] font-fractul">{stats.activeUsers}</p>
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow p-6">
<div className="bg-white rounded-xl shadow-sm border border-[#e5e7eb] p-6 card-hover">
<div className="flex items-center">
<div className="p-3 bg-purple-100 rounded-lg">
<div className="p-3 bg-[#fff7ed] rounded-xl">
<svg
className="w-6 h-6 text-purple-600"
className="w-6 h-6 text-[#f5a623]"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@@ -136,14 +136,14 @@ export default function DashboardPage() {
</svg>
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-500">Agents</p>
<p className="text-2xl font-bold text-gray-900">{stats.agents}</p>
<p className="text-sm font-medium text-[#666666] font-serif">Agents</p>
<p className="text-2xl font-bold text-[#00293d] font-fractul">{stats.agents}</p>
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow p-6">
<div className="bg-white rounded-xl shadow-sm border border-[#e5e7eb] p-6 card-hover">
<div className="flex items-center">
<div className="p-3 bg-yellow-100 rounded-lg">
<div className="p-3 bg-yellow-50 rounded-xl">
<svg
className="w-6 h-6 text-yellow-600"
fill="none"
@@ -159,21 +159,21 @@ export default function DashboardPage() {
</svg>
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-500">Pending</p>
<p className="text-2xl font-bold text-gray-900">{stats.pendingUsers}</p>
<p className="text-sm font-medium text-[#666666] font-serif">Pending</p>
<p className="text-2xl font-bold text-[#00293d] font-fractul">{stats.pendingUsers}</p>
</div>
</div>
</div>
</div>
{/* Recent Users */}
<div className="bg-white rounded-lg shadow">
<div className="px-6 py-4 border-b border-gray-200">
<div className="bg-white rounded-xl shadow-sm border border-[#e5e7eb]">
<div className="px-6 py-4 border-b border-[#e5e7eb]">
<div className="flex justify-between items-center">
<h2 className="text-lg font-semibold text-gray-900">Recent Users</h2>
<h2 className="text-lg font-semibold text-[#00293d] font-fractul">Recent Users</h2>
<Link
href="/dashboard/users"
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
className="text-[#f5a623] hover:text-[#e09620] text-sm font-medium font-serif transition-colors"
>
View All
</Link>
@@ -183,7 +183,7 @@ export default function DashboardPage() {
{recentUsers.length === 0 ? (
<div className="text-center py-12">
<svg
className="mx-auto h-12 w-12 text-gray-400"
className="mx-auto h-12 w-12 text-[#9ca3af]"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@@ -195,29 +195,29 @@ export default function DashboardPage() {
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
/>
</svg>
<p className="mt-2 text-gray-500">No users found</p>
<p className="mt-2 text-[#666666] font-serif">No users found</p>
</div>
) : (
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<table className="min-w-full divide-y divide-[#e5e7eb]">
<thead className="bg-[#f5f9f8]">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
<th className="px-6 py-3 text-left text-xs font-medium text-[#666666] uppercase tracking-wider font-serif">
User
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
<th className="px-6 py-3 text-left text-xs font-medium text-[#666666] uppercase tracking-wider font-serif">
Role
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
<th className="px-6 py-3 text-left text-xs font-medium text-[#666666] uppercase tracking-wider font-serif">
Status
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
<th className="px-6 py-3 text-left text-xs font-medium text-[#666666] uppercase tracking-wider font-serif">
Joined
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
<tbody className="bg-white divide-y divide-[#e5e7eb]">
{recentUsers.map((user) => (
<tr key={user.id} className="hover:bg-gray-50">
<tr key={user.id} className="hover:bg-[#f5f9f8] transition-colors">
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center">
<div className="flex-shrink-0 h-10 w-10">
@@ -228,18 +228,18 @@ export default function DashboardPage() {
alt=""
/>
) : (
<div className="h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center">
<span className="text-gray-500 font-medium text-sm">
<div className="h-10 w-10 rounded-full bg-[#e8f0ee] flex items-center justify-center">
<span className="text-[#00293d] font-medium text-sm font-fractul">
{user.profile?.firstName?.[0] || user.email[0].toUpperCase()}
</span>
</div>
)}
</div>
<div className="ml-4">
<div className="text-sm font-medium text-gray-900">
<div className="text-sm font-medium text-[#00293d] font-serif">
{user.profile?.firstName} {user.profile?.lastName}
</div>
<div className="text-sm text-gray-500">{user.email}</div>
<div className="text-sm text-[#666666]">{user.email}</div>
</div>
</div>
</td>
@@ -249,8 +249,8 @@ export default function DashboardPage() {
user.role === 'ADMIN'
? 'bg-red-100 text-red-800'
: user.role === 'AGENT'
? 'bg-purple-100 text-purple-800'
: 'bg-blue-100 text-blue-800'
? 'bg-[#fff7ed] text-[#f5a623]'
: 'bg-[#e8f0ee] text-[#5ba4a4]'
}`}
>
{user.role}
@@ -271,7 +271,7 @@ export default function DashboardPage() {
{user.status === 'PENDING_VERIFICATION' ? 'PENDING' : user.status}
</span>
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<td className="px-6 py-4 whitespace-nowrap text-sm text-[#666666] font-serif">
{new Date(user.createdAt).toLocaleDateString()}
</td>
</tr>