Re-Quest/adminpanel
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

128
src/app/dashboard/profile-sections/page.tsx
View File

@@ -159,21 +159,21 @@ export default function ProfileSectionsPage() {
<div>
{/* Page Title */}
<div className="mb-6">
<h1 className="text-2xl font-bold text-gray-900">Profile Sections</h1>
<p className="text-gray-500">Manage profile sections and their fields for agent types</p>
<h1 className="text-2xl font-bold text-[#00293d] font-fractul">Profile Sections</h1>
<p className="text-[#666666] font-serif">Manage profile sections and their fields for agent types</p>
</div>
{/* Sections Table */}
<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">
<div className="flex items-center space-x-4">
<label className="flex items-center space-x-2 text-sm text-gray-600">
<label className="flex items-center space-x-2 text-sm text-[#666666] font-serif">
<input
type="checkbox"
checked={showInactive}
onChange={(e) => setShowInactive(e.target.checked)}
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
className="rounded border-[#e5e7eb] text-[#f5a623] focus:ring-[#f5a623]"
/>
<span>Show Inactive</span>
</label>
@@ -181,7 +181,7 @@ export default function ProfileSectionsPage() {
<div className="flex space-x-3">
<button
onClick={fetchSections}
className="px-4 py-2 border border-gray-300 hover:bg-gray-50 text-gray-700 text-sm font-medium rounded-lg transition-colors flex items-center"
className="px-4 py-2 border border-[#e5e7eb] hover:bg-[#f5f9f8] text-[#00293d] text-sm font-medium rounded-lg transition-colors flex items-center"
>
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
@@ -190,7 +190,7 @@ export default function ProfileSectionsPage() {
</button>
<button
onClick={openCreateModal}
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors flex items-center"
className="px-4 py-2 bg-[#f5a623] hover:bg-[#e09620] text-white text-sm font-medium rounded-lg transition-colors flex items-center"
>
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
@@ -210,73 +210,73 @@ export default function ProfileSectionsPage() {
<div className="overflow-x-auto">
{isLoading ? (
<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>
) : sections.length === 0 ? (
<div className="text-center py-12">
<svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="mx-auto h-12 w-12 text-[#9ca3af]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
</svg>
<p className="mt-2 text-gray-500">No profile sections found</p>
<p className="mt-2 text-[#666666] font-serif">No profile sections found</p>
<button
onClick={openCreateModal}
className="mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
className="mt-4 px-4 py-2 bg-[#f5a623] hover:bg-[#e09620] text-white text-sm font-medium rounded-lg transition-colors"
>
Create First Section
</button>
</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">
Section
</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">
Description
</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">
Fields
</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">
Agent Types
</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">
Global
</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">
Status
</th>
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
<th className="px-6 py-3 text-right text-xs font-medium text-[#666666] uppercase tracking-wider">
Actions
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
<tbody className="bg-white divide-y divide-[#e5e7eb]">
{sections.map((section) => (
<tr key={section.id} className="hover:bg-gray-50">
<tr key={section.id} className="hover:bg-[#f5f9f8]">
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center">
{section.icon && (
<span className="mr-3 text-gray-500">
<span className="mr-3 text-[#666666]">
<SectionIcon name={section.icon} className="w-5 h-5" />
</span>
)}
<div>
<div className="text-sm font-medium text-gray-900">{section.name}</div>
<div className="text-xs text-gray-500">{section.slug}</div>
<div className="text-sm font-medium text-[#00293d]">{section.name}</div>
<div className="text-xs text-[#666666]">{section.slug}</div>
</div>
</div>
</td>
<td className="px-6 py-4">
<div className="text-sm text-gray-500 max-w-xs truncate">
<div className="text-sm text-[#666666] max-w-xs truncate">
{section.description || '-'}
</div>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<Link
href={`/dashboard/profile-sections/${section.id}`}
className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 hover:bg-blue-200"
className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-[#e8f0ee] text-[#5ba4a4] hover:bg-[#d5e5e1]"
>
{section._count?.fields || 0} fields
<svg className="ml-1 w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -285,9 +285,9 @@ export default function ProfileSectionsPage() {
</Link>
</td>
<td className="px-6 py-4 whitespace-nowrap">
<div className="text-sm text-gray-500">
<div className="text-sm text-[#666666]">
{section.isGlobal ? (
<span className="text-purple-600 font-medium">All (Global)</span>
<span className="text-[#5ba4a4] font-medium">All (Global)</span>
) : (
`${section._count?.agentTypeSections || 0} assigned`
)}
@@ -296,15 +296,15 @@ export default function ProfileSectionsPage() {
<td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center space-x-2">
{section.isSystem && (
<span className="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-amber-100 text-amber-800">
<span className="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-[#fff7ed] text-[#f5a623]">
System
</span>
)}
<span
className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${
section.isGlobal
? 'bg-purple-100 text-purple-800'
: 'bg-gray-100 text-gray-600'
? 'bg-[#fff7ed] text-[#f5a623]'
: 'bg-[#e8f0ee] text-[#666666]'
}`}
>
{section.isGlobal ? 'Global' : 'Specific'}
@@ -331,19 +331,19 @@ export default function ProfileSectionsPage() {
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<Link
href={`/dashboard/profile-sections/${section.id}`}
className="text-blue-600 hover:text-blue-900 mr-4"
className="text-[#f5a623] hover:text-[#e09620] mr-4"
>
Manage
</Link>
<button
onClick={() => openEditModal(section)}
className="text-gray-600 hover:text-gray-900 mr-4"
className="text-[#5ba4a4] hover:text-[#5ba4a4]/80 mr-4"
>
Edit
</button>
{section.isSystem ? (
<span
className="text-gray-400 cursor-not-allowed"
className="text-[#9ca3af] cursor-not-allowed"
title="System sections cannot be deleted"
>
Delete
@@ -367,10 +367,10 @@ export default function ProfileSectionsPage() {
{/* Create/Edit Modal */}
{(modalType === 'create' || modalType === 'edit') && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
<div className="px-6 py-4 border-b border-gray-200">
<h3 className="text-lg font-semibold text-gray-900">
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<div className="bg-white rounded-xl shadow-xl max-w-md w-full mx-4">
<div className="px-6 py-4 border-b border-[#e5e7eb]">
<h3 className="text-lg font-semibold text-[#00293d] font-fractul">
{modalType === 'create' ? 'Create Profile Section' : 'Edit Profile Section'}
</h3>
</div>
@@ -382,44 +382,44 @@ export default function ProfileSectionsPage() {
</div>
)}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium text-[#00293d] mb-1">
Name <span className="text-red-500">*</span>
</label>
<input
type="text"
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white placeholder:text-gray-500"
className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
placeholder="e.g., Location, Experience, Education"
required
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium text-[#00293d] mb-1">
Description
</label>
<textarea
value={formData.description}
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
rows={3}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white placeholder:text-gray-500"
className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
placeholder="Brief description of this section"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium text-[#00293d] mb-1">
Icon (emoji)
</label>
<input
type="text"
value={formData.icon}
onChange={(e) => setFormData({ ...formData, icon: e.target.value })}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white placeholder:text-gray-500"
className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
placeholder="e.g., location_on"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium text-[#00293d] mb-1">
Sort Order
</label>
<input
@@ -429,7 +429,7 @@ export default function ProfileSectionsPage() {
onFocus={(e) => e.target.select()}
placeholder="0"
min={0}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white placeholder:text-gray-500"
className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]"
/>
</div>
<div className="flex items-center space-x-6">
@@ -439,9 +439,9 @@ export default function ProfileSectionsPage() {
id="isActive"
checked={formData.isActive}
onChange={(e) => setFormData({ ...formData, isActive: e.target.checked })}
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
className="rounded border-[#e5e7eb] text-[#f5a623] focus:ring-[#f5a623]"
/>
<label htmlFor="isActive" className="ml-2 text-sm text-gray-700">
<label htmlFor="isActive" className="ml-2 text-sm text-[#00293d] font-serif">
Active
</label>
</div>
@@ -451,9 +451,9 @@ export default function ProfileSectionsPage() {
id="isGlobal"
checked={formData.isGlobal}
onChange={(e) => setFormData({ ...formData, isGlobal: e.target.checked })}
className="rounded border-gray-300 text-purple-600 focus:ring-purple-500"
className="rounded border-[#e5e7eb] text-[#5ba4a4] focus:ring-[#5ba4a4]"
/>
<label htmlFor="isGlobal" className="ml-2 text-sm text-gray-700">
<label htmlFor="isGlobal" className="ml-2 text-sm text-[#00293d] font-serif">
Global (all agent types)
</label>
</div>
@@ -464,25 +464,25 @@ export default function ProfileSectionsPage() {
id="isRepeatable"
checked={formData.isRepeatable}
onChange={(e) => setFormData({ ...formData, isRepeatable: e.target.checked })}
className="rounded border-gray-300 text-orange-600 focus:ring-orange-500"
className="rounded border-[#e5e7eb] text-[#f5a623] focus:ring-[#f5a623]"
/>
<label htmlFor="isRepeatable" className="ml-2 text-sm text-gray-700">
<label htmlFor="isRepeatable" className="ml-2 text-sm text-[#00293d] font-serif">
Allow Multiple Entries (e.g., certifications, education)
</label>
</div>
</div>
<div className="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
<div className="px-6 py-4 border-t border-[#e5e7eb] flex justify-end space-x-3">
<button
type="button"
onClick={closeModal}
className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
className="px-4 py-2 border border-[#e5e7eb] text-[#00293d] rounded-xl hover:bg-[#f5f9f8] transition-colors"
>
Cancel
</button>
<button
type="submit"
disabled={isSubmitting}
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
className="px-4 py-2 bg-[#f5a623] text-white rounded-xl hover:bg-[#e09620] transition-colors disabled:opacity-50"
>
{isSubmitting ? 'Saving...' : modalType === 'create' ? 'Create' : 'Save Changes'}
</button>
@@ -494,10 +494,10 @@ export default function ProfileSectionsPage() {
{/* Delete Confirmation Modal */}
{modalType === 'delete' && selectedSection && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
<div className="px-6 py-4 border-b border-gray-200">
<h3 className="text-lg font-semibold text-gray-900">Delete Profile Section</h3>
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<div className="bg-white rounded-xl shadow-xl max-w-md w-full mx-4">
<div className="px-6 py-4 border-b border-[#e5e7eb]">
<h3 className="text-lg font-semibold text-[#00293d] font-fractul">Delete Profile Section</h3>
</div>
<div className="px-6 py-4">
{modalError && (
@@ -505,7 +505,7 @@ export default function ProfileSectionsPage() {
<p className="text-red-700 text-sm">{modalError}</p>
</div>
)}
<p className="text-gray-600">
<p className="text-[#666666] font-serif">
Are you sure you want to delete <span className="font-semibold">{selectedSection.name}</span>?
</p>
{(selectedSection._count?.fields && selectedSection._count.fields > 0) && (
@@ -514,10 +514,10 @@ export default function ProfileSectionsPage() {
</p>
)}
</div>
<div className="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
<div className="px-6 py-4 border-t border-[#e5e7eb] flex justify-end space-x-3">
<button
onClick={closeModal}
className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
className="px-4 py-2 border border-[#e5e7eb] text-[#00293d] rounded-xl hover:bg-[#f5f9f8] transition-colors"
>
Cancel
</button>