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

206
src/app/dashboard/profile-sections/[id]/page.tsx
View File

@@ -299,7 +299,7 @@ export default function SectionDetailPage() {
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>
);
}
@@ -307,8 +307,8 @@ export default function SectionDetailPage() {
if (!section) {
return (
<div className="text-center py-12">
<p className="text-gray-500">Section not found</p>
<Link href="/dashboard/profile-sections" className="mt-4 text-blue-600 hover:underline">
<p className="text-[#666666] font-serif">Section not found</p>
<Link href="/dashboard/profile-sections" className="mt-4 text-[#f5a623] hover:underline">
Back to sections
</Link>
</div>
@@ -323,7 +323,7 @@ export default function SectionDetailPage() {
<div>
{/* Breadcrumb */}
<div className="mb-4">
<Link href="/dashboard/profile-sections" className="text-blue-600 hover:underline text-sm">
<Link href="/dashboard/profile-sections" className="text-[#f5a623] hover:underline text-sm">
&larr; Back to Profile Sections
</Link>
</div>
@@ -333,24 +333,24 @@ export default function SectionDetailPage() {
<div>
<div className="flex items-center">
{section.icon && <span className="text-2xl mr-2">{section.icon}</span>}
<h1 className="text-2xl font-bold text-gray-900">{section.name}</h1>
<h1 className="text-2xl font-bold text-[#00293d] font-fractul">{section.name}</h1>
{section.isSystem && (
<span className="ml-3 px-2 py-1 text-xs font-semibold rounded-full bg-amber-100 text-amber-800">
System
</span>
)}
{section.isGlobal && (
<span className="ml-3 px-2 py-1 text-xs font-semibold rounded-full bg-purple-100 text-purple-800">
<span className="ml-3 px-2 py-1 text-xs font-semibold rounded-full bg-[#fff7ed] text-[#f5a623]">
Global
</span>
)}
</div>
<p className="text-gray-500 mt-1">{section.description || 'No description'}</p>
<p className="text-[#666666] font-serif mt-1">{section.description || 'No description'}</p>
</div>
<div className="flex space-x-3">
<button
onClick={fetchData}
className="px-4 py-2 border border-gray-300 hover:bg-gray-50 text-gray-700 text-sm font-medium rounded-lg transition-colors"
className="px-4 py-2 border border-[#e5e7eb] hover:bg-[#f5f9f8] text-[#00293d] text-sm font-medium rounded-lg transition-colors"
>
Refresh
</button>
@@ -366,12 +366,12 @@ export default function SectionDetailPage() {
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Fields Section */}
<div className="lg:col-span-2">
<div className="bg-white rounded-lg shadow">
<div className="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
<h2 className="text-lg font-semibold text-gray-900">Fields ({fields.length})</h2>
<div className="bg-white rounded-xl shadow-sm border border-[#e5e7eb]">
<div className="px-6 py-4 border-b border-[#e5e7eb] flex justify-between items-center">
<h2 className="text-lg font-semibold text-[#00293d] font-fractul">Fields ({fields.length})</h2>
<button
onClick={openCreateFieldModal}
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" />
@@ -380,28 +380,28 @@ export default function SectionDetailPage() {
</button>
</div>
<div className="divide-y divide-gray-200">
<div className="divide-y divide-[#e5e7eb]">
{fields.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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
<p className="mt-2 text-gray-500">No fields defined yet</p>
<p className="mt-2 text-[#666666] font-serif">No fields defined yet</p>
<button
onClick={openCreateFieldModal}
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"
>
Add First Field
</button>
</div>
) : (
fields.map((field, index) => (
<div key={field.id} className="px-6 py-4 hover:bg-gray-50">
<div key={field.id} className="px-6 py-4 hover:bg-[#f5f9f8]">
<div className="flex justify-between items-start">
<div className="flex-1">
<div className="flex items-center flex-wrap gap-2">
<span className="text-gray-400 mr-1 text-sm">#{index + 1}</span>
<span className="font-medium text-gray-900">{field.name}</span>
<span className="text-[#9ca3af] mr-1 text-sm">#{index + 1}</span>
<span className="font-medium text-[#00293d]">{field.name}</span>
{field.isRequired && (
<span className="text-red-500 text-xs">*required</span>
)}
@@ -412,12 +412,12 @@ export default function SectionDetailPage() {
)}
</div>
<div className="mt-1 flex items-center space-x-3 text-sm">
<span className="px-2 py-0.5 bg-gray-100 text-gray-600 rounded">
<span className="px-2 py-0.5 bg-[#e8f0ee] text-[#666666] rounded">
{getFieldTypeLabel(field.fieldType)}
</span>
<span className="text-gray-400">{field.slug}</span>
<span className="text-[#9ca3af]">{field.slug}</span>
{field.placeholder && (
<span className="text-gray-400 truncate max-w-xs">
<span className="text-[#9ca3af] truncate max-w-xs">
placeholder: {field.placeholder}
</span>
)}
@@ -425,12 +425,12 @@ export default function SectionDetailPage() {
{field.options && field.options.length > 0 && (
<div className="mt-2 flex flex-wrap gap-1">
{(field.options as FieldOption[]).slice(0, 5).map((opt, i) => (
<span key={i} className="px-2 py-0.5 bg-blue-50 text-blue-700 text-xs rounded">
<span key={i} className="px-2 py-0.5 bg-[#e8f0ee] text-[#5ba4a4] text-xs rounded">
{opt.label}
</span>
))}
{field.options.length > 5 && (
<span className="px-2 py-0.5 bg-gray-100 text-gray-500 text-xs rounded">
<span className="px-2 py-0.5 bg-[#e8f0ee] text-[#666666] text-xs rounded">
+{field.options.length - 5} more
</span>
)}
@@ -450,7 +450,7 @@ export default function SectionDetailPage() {
</button>
<button
onClick={() => openEditFieldModal(field)}
className="p-1 text-gray-400 hover:text-blue-600"
className="p-1 text-[#9ca3af] hover:text-[#f5a623]"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
@@ -458,7 +458,7 @@ export default function SectionDetailPage() {
</button>
<button
onClick={() => openDeleteFieldModal(field)}
className="p-1 text-gray-400 hover:text-red-600"
className="p-1 text-[#9ca3af] hover:text-red-600"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
@@ -475,13 +475,13 @@ export default function SectionDetailPage() {
{/* Agent Type Assignments */}
<div className="lg:col-span-1">
<div className="bg-white rounded-lg shadow">
<div className="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
<h2 className="text-lg font-semibold text-gray-900">Agent Types</h2>
<div className="bg-white rounded-xl shadow-sm border border-[#e5e7eb]">
<div className="px-6 py-4 border-b border-[#e5e7eb] flex justify-between items-center">
<h2 className="text-lg font-semibold text-[#00293d] font-fractul">Agent Types</h2>
{availableAgentTypes.length > 0 && (
<button
onClick={openAssignModal}
className="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
className="px-3 py-1.5 bg-[#f5a623] hover:bg-[#e09620] text-white text-sm font-medium rounded-lg transition-colors"
>
Assign
</button>
@@ -489,10 +489,10 @@ export default function SectionDetailPage() {
</div>
<div className="p-6">
{/* Global toggle */}
<div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg mb-4">
<div className="flex items-center justify-between p-3 bg-[#f5f9f8] rounded-xl mb-4">
<div>
<p className="font-medium text-gray-900">Available to all agent types</p>
<p className="text-xs text-gray-500">
<p className="font-medium text-[#00293d]">Available to all agent types</p>
<p className="text-xs text-[#666666]">
{section.isGlobal
? 'This section appears for all agent types by default'
: 'Only assigned agent types will see this section'}
@@ -500,8 +500,8 @@ export default function SectionDetailPage() {
</div>
<button
onClick={() => handleToggleGlobal(!section.isGlobal)}
className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 ${
section.isGlobal ? 'bg-purple-600' : 'bg-gray-200'
className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-[#5ba4a4] focus:ring-offset-2 ${
section.isGlobal ? 'bg-[#5ba4a4]' : 'bg-[#e8f0ee]'
}`}
role="switch"
aria-checked={section.isGlobal}
@@ -517,7 +517,7 @@ export default function SectionDetailPage() {
{/* Specific agent type assignments */}
{section.agentTypeSections && section.agentTypeSections.length > 0 ? (
<div className="space-y-3">
<p className="text-xs text-gray-500 font-medium uppercase tracking-wide mb-2">
<p className="text-xs text-[#666666] font-medium uppercase tracking-wide mb-2">
Specific Assignments
</p>
{section.agentTypeSections.map((ats) => {
@@ -525,17 +525,17 @@ export default function SectionDetailPage() {
return (
<div
key={ats.id}
className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
className="flex items-center justify-between p-3 bg-[#f5f9f8] rounded-xl"
>
<div>
<p className="font-medium text-gray-900">{agentType?.name || 'Unknown'}</p>
<p className="text-xs text-gray-500">
<p className="font-medium text-[#00293d]">{agentType?.name || 'Unknown'}</p>
<p className="text-xs text-[#666666]">
{ats.isRequired ? 'Required' : 'Optional'} &bull; Order: {ats.sortOrder}
</p>
</div>
<button
onClick={() => handleRemoveAssignment(ats.agentTypeId)}
className="p-1 text-gray-400 hover:text-red-600"
className="p-1 text-[#9ca3af] hover:text-red-600"
title="Remove assignment"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -548,7 +548,7 @@ export default function SectionDetailPage() {
</div>
) : (
<div className="text-center py-4">
<p className="text-gray-500 text-sm">
<p className="text-[#666666] text-sm font-serif">
{section.isGlobal
? 'No specific agent type configurations yet'
: 'Not assigned to any agent type'}
@@ -556,7 +556,7 @@ export default function SectionDetailPage() {
{availableAgentTypes.length > 0 && (
<button
onClick={openAssignModal}
className="mt-3 text-blue-600 hover:underline text-sm"
className="mt-3 text-[#f5a623] hover:underline text-sm"
>
{section.isGlobal ? 'Add specific configuration' : 'Assign to agent type'}
</button>
@@ -571,9 +571,9 @@ export default function SectionDetailPage() {
{/* Field Create/Edit Modal */}
{(fieldModalType === 'create' || fieldModalType === 'edit') && (
<div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50 overflow-y-auto">
<div className="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 my-8">
<div className="px-6 py-4 border-b border-gray-200">
<h3 className="text-lg font-semibold text-gray-900">
<div className="bg-white rounded-xl shadow-sm border border-[#e5e7eb]-xl max-w-2xl w-full mx-4 my-8">
<div className="px-6 py-4 border-b border-[#e5e7eb]">
<h3 className="text-lg font-semibold text-[#00293d] font-fractul">
{fieldModalType === 'create' ? 'Create Field' : 'Edit Field'}
</h3>
</div>
@@ -587,25 +587,25 @@ export default function SectionDetailPage() {
<div className="grid grid-cols-2 gap-4">
<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={fieldForm.name}
onChange={(e) => setFieldForm({ ...fieldForm, 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"
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"
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">
Field Type <span className="text-red-500">*</span>
</label>
<select
value={fieldForm.fieldType}
onChange={(e) => setFieldForm({ ...fieldForm, fieldType: e.target.value as FieldType })}
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"
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"
>
{FIELD_TYPES.map((ft) => (
<option key={ft.value} value={ft.value}>
@@ -617,46 +617,46 @@ export default function SectionDetailPage() {
</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>
<input
type="text"
value={fieldForm.description}
onChange={(e) => setFieldForm({ ...fieldForm, description: 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="Help text for this field"
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium text-[#00293d] mb-1">
Placeholder
</label>
<input
type="text"
value={fieldForm.placeholder}
onChange={(e) => setFieldForm({ ...fieldForm, placeholder: 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"
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"
/>
</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">
Default Value
</label>
<input
type="text"
value={fieldForm.defaultValue}
onChange={(e) => setFieldForm({ ...fieldForm, defaultValue: 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"
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"
/>
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<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
@@ -666,7 +666,7 @@ export default function SectionDetailPage() {
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 pt-6">
@@ -676,9 +676,9 @@ export default function SectionDetailPage() {
id="fieldIsActive"
checked={fieldForm.isActive}
onChange={(e) => setFieldForm({ ...fieldForm, 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="fieldIsActive" className="ml-2 text-sm text-gray-700">
<label htmlFor="fieldIsActive" className="ml-2 text-sm text-[#00293d] font-serif">
Active
</label>
</div>
@@ -688,9 +688,9 @@ export default function SectionDetailPage() {
id="fieldIsRequired"
checked={fieldForm.isRequired}
onChange={(e) => setFieldForm({ ...fieldForm, isRequired: e.target.checked })}
className="rounded border-gray-300 text-red-600 focus:ring-red-500"
className="rounded border-[#e5e7eb] text-red-600 focus:ring-red-500"
/>
<label htmlFor="fieldIsRequired" className="ml-2 text-sm text-gray-700">
<label htmlFor="fieldIsRequired" className="ml-2 text-sm text-[#00293d] font-serif">
Required
</label>
</div>
@@ -701,10 +701,10 @@ export default function SectionDetailPage() {
<div className="border border-amber-200 rounded-lg p-4 bg-amber-50">
<div className="flex items-start justify-between">
<div className="flex-1">
<label htmlFor="fieldIsSearchableOnly" className="text-sm font-medium text-gray-700">
<label htmlFor="fieldIsSearchableOnly" className="text-sm font-medium text-[#00293d]">
Search Only (Hidden from Public Profile)
</label>
<p className="text-xs text-gray-500 mt-1">
<p className="text-xs text-[#666666] font-serif mt-1">
This field will be shown in the agent edit form and used for search filtering,
but will NOT be visible on the public agent profile page.
</p>
@@ -714,15 +714,15 @@ export default function SectionDetailPage() {
id="fieldIsSearchableOnly"
checked={fieldForm.isSearchableOnly}
onChange={(e) => setFieldForm({ ...fieldForm, isSearchableOnly: e.target.checked })}
className="mt-1 rounded border-gray-300 text-amber-600 focus:ring-amber-500"
className="mt-1 rounded border-[#e5e7eb] text-amber-600 focus:ring-amber-500"
/>
</div>
</div>
{/* Options Editor for SELECT, RADIO, MULTI_SELECT, CHECKBOX_GROUP */}
{REQUIRES_OPTIONS.includes(fieldForm.fieldType) && (
<div className="border border-gray-200 rounded-lg p-4">
<label className="block text-sm font-medium text-gray-700 mb-3">
<div className="border border-[#e5e7eb] rounded-xl p-4">
<label className="block text-sm font-medium text-[#00293d] mb-3">
Options
</label>
<div className="flex space-x-2 mb-3">
@@ -731,19 +731,19 @@ export default function SectionDetailPage() {
value={optionInput.value}
onChange={(e) => setOptionInput({ ...optionInput, value: e.target.value })}
placeholder="Value"
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm text-gray-900 bg-white placeholder:text-gray-500"
className="flex-1 px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-sm text-[#00293d] bg-white placeholder:text-[#666666]"
/>
<input
type="text"
value={optionInput.label}
onChange={(e) => setOptionInput({ ...optionInput, label: e.target.value })}
placeholder="Label"
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm text-gray-900 bg-white placeholder:text-gray-500"
className="flex-1 px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-sm text-[#00293d] bg-white placeholder:text-[#666666]"
/>
<button
type="button"
onClick={addOption}
className="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition-colors"
className="px-4 py-2 bg-[#e8f0ee] hover:bg-[#d5e5e1] text-[#00293d] text-sm font-medium rounded-lg transition-colors"
>
Add
</button>
@@ -753,11 +753,11 @@ export default function SectionDetailPage() {
{fieldForm.options.map((opt, index) => (
<div
key={index}
className="flex items-center justify-between px-3 py-2 bg-gray-50 rounded"
className="flex items-center justify-between px-3 py-2 bg-[#f5f9f8] rounded"
>
<span className="text-sm">
<span className="font-medium text-gray-900">{opt.label}</span>
<span className="text-xs text-gray-400 ml-2">({opt.value})</span>
<span className="font-medium text-[#00293d]">{opt.label}</span>
<span className="text-xs text-[#9ca3af] ml-2">({opt.value})</span>
</span>
<button
type="button"
@@ -777,68 +777,68 @@ export default function SectionDetailPage() {
{/* Range Config for RANGE type */}
{fieldForm.fieldType === 'RANGE' && (
<div className="border border-gray-200 rounded-lg p-4">
<label className="block text-sm font-medium text-gray-700 mb-3">
<div className="border border-[#e5e7eb] rounded-xl p-4">
<label className="block text-sm font-medium text-[#00293d] mb-3">
Range Configuration
</label>
<div className="grid grid-cols-4 gap-3">
<div>
<label className="block text-xs text-gray-500 mb-1">Min</label>
<label className="block text-xs text-[#666666] mb-1">Min</label>
<input
type="number"
value={fieldForm.rangeConfig?.min || 0}
onChange={(e) => updateRangeConfig('min', e.target.value)}
onFocus={(e) => e.target.select()}
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-sm text-gray-900 bg-white"
className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-sm text-[#00293d] bg-white"
/>
</div>
<div>
<label className="block text-xs text-gray-500 mb-1">Max</label>
<label className="block text-xs text-[#666666] mb-1">Max</label>
<input
type="number"
value={fieldForm.rangeConfig?.max || 100}
onChange={(e) => updateRangeConfig('max', e.target.value)}
onFocus={(e) => e.target.select()}
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-sm text-gray-900 bg-white"
className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-sm text-[#00293d] bg-white"
/>
</div>
<div>
<label className="block text-xs text-gray-500 mb-1">Step</label>
<label className="block text-xs text-[#666666] mb-1">Step</label>
<input
type="number"
value={fieldForm.rangeConfig?.step || 1}
onChange={(e) => updateRangeConfig('step', e.target.value)}
onFocus={(e) => e.target.select()}
min={1}
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-sm text-gray-900 bg-white"
className="w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:ring-2 focus:ring-[#f5a623] focus:border-[#f5a623] text-sm text-[#00293d] bg-white"
/>
</div>
<div>
<label className="block text-xs text-gray-500 mb-1">Unit</label>
<label className="block text-xs text-[#666666] mb-1">Unit</label>
<input
type="text"
value={fieldForm.rangeConfig?.unit || ''}
onChange={(e) => updateRangeConfig('unit', e.target.value)}
placeholder="e.g., years"
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-sm 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-sm text-[#00293d] bg-white placeholder:text-[#666666]"
/>
</div>
</div>
</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={closeFieldModal}
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...' : fieldModalType === 'create' ? 'Create Field' : 'Save Changes'}
</button>
@@ -851,9 +851,9 @@ export default function SectionDetailPage() {
{/* Field Delete Modal */}
{fieldModalType === 'delete' && selectedField && (
<div className="fixed inset-0 bg-black/30 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 Field</h3>
<div className="bg-white rounded-xl shadow-sm border border-[#e5e7eb]-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 Field</h3>
</div>
<div className="px-6 py-4">
{modalError && (
@@ -861,14 +861,14 @@ export default function SectionDetailPage() {
<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 the field <span className="font-semibold">{selectedField.name}</span>?
</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={closeFieldModal}
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>
@@ -887,9 +887,9 @@ export default function SectionDetailPage() {
{/* Assign to Agent Type Modal */}
{assignModalType === 'assign' && (
<div className="fixed inset-0 bg-black/30 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">Assign to Agent Type</h3>
<div className="bg-white rounded-xl shadow-sm border border-[#e5e7eb]-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">Assign to Agent Type</h3>
</div>
<form onSubmit={handleAssign}>
<div className="px-6 py-4 space-y-4">
@@ -899,13 +899,13 @@ export default function SectionDetailPage() {
</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">
Agent Type <span className="text-red-500">*</span>
</label>
<select
value={assignForm.agentTypeId}
onChange={(e) => setAssignForm({ ...assignForm, agentTypeId: 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"
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"
required
>
<option value="">Select agent type...</option>
@@ -917,7 +917,7 @@ export default function SectionDetailPage() {
</select>
</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
@@ -927,7 +927,7 @@ export default function SectionDetailPage() {
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">
@@ -936,25 +936,25 @@ export default function SectionDetailPage() {
id="assignIsRequired"
checked={assignForm.isRequired}
onChange={(e) => setAssignForm({ ...assignForm, isRequired: 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="assignIsRequired" className="ml-2 text-sm text-gray-700">
<label htmlFor="assignIsRequired" className="ml-2 text-sm text-[#00293d] font-serif">
Required section for this agent type
</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={closeAssignModal}
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 || !assignForm.agentTypeId}
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 ? 'Assigning...' : 'Assign'}
</button>