feat: Add Source Serif 4 and Fractul font families and integrate them across the admin UI.
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user