Compare commits
2 Commits
235156a9ee
...
da366272b4
| Author | SHA1 | Date | |
|---|---|---|---|
|
da366272b4 | ||
|
|
af27190e29 |
@@ -47,6 +47,15 @@ const DynamicFormField = ({
|
||||
const hasError = errors.length > 0;
|
||||
const errorMessage = errors[0];
|
||||
|
||||
const formatPhoneNumber = (rawValue) => {
|
||||
const digits = String(rawValue || '').replace(/\D/g, '').slice(0, 10);
|
||||
if (digits.length <= 3) return digits;
|
||||
if (digits.length <= 6) {
|
||||
return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
|
||||
}
|
||||
return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
|
||||
};
|
||||
|
||||
// Common input className
|
||||
const inputClassName = `h-14 rounded-xl border-2 ${
|
||||
hasError
|
||||
@@ -59,6 +68,11 @@ const DynamicFormField = ({
|
||||
const { value: newValue, type: inputType, checked } = e.target;
|
||||
if (inputType === 'checkbox') {
|
||||
onChange(id, checked);
|
||||
return;
|
||||
}
|
||||
if (type === 'phone') {
|
||||
onChange(id, formatPhoneNumber(newValue));
|
||||
return;
|
||||
} else {
|
||||
onChange(id, newValue);
|
||||
}
|
||||
@@ -111,6 +125,8 @@ const DynamicFormField = ({
|
||||
value={value || ''}
|
||||
onChange={handleInputChange}
|
||||
placeholder={placeholder}
|
||||
inputMode={type === 'phone' ? 'numeric' : undefined}
|
||||
maxLength={type === 'phone' ? 14 : undefined}
|
||||
className={inputClassName}
|
||||
data-testid={`field-${id}`}
|
||||
/>
|
||||
|
||||
@@ -51,6 +51,7 @@ import {
|
||||
Zap,
|
||||
Copy,
|
||||
X,
|
||||
Grip
|
||||
} from 'lucide-react';
|
||||
|
||||
// Field type icons
|
||||
@@ -492,7 +493,6 @@ const AdminRegistrationBuilder = () => {
|
||||
)}
|
||||
|
||||
{/* Main Builder Layout */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||
{/* Left Sidebar - Steps & Sections */}
|
||||
<div className="lg:col-span-3">
|
||||
<Card className="p-4">
|
||||
@@ -503,14 +503,13 @@ const AdminRegistrationBuilder = () => {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex space-y-2">
|
||||
{sortedSteps.map((step, index) => (
|
||||
<div
|
||||
key={step.id}
|
||||
className={`p-3 rounded-lg border cursor-pointer transition-colors ${
|
||||
selectedStep === step.id
|
||||
? 'border-brand-purple bg-brand-lavender/10'
|
||||
: 'border-gray-200 hover:border-gray-300'
|
||||
className={`p-3 rounded-t-lg border cursor-pointer transition-colors ${selectedStep === step.id
|
||||
? ' bg-brand-lavender/10 border-b-4 border-b-brand-dark-lavender'
|
||||
: ''
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSelectedStep(step.id);
|
||||
@@ -520,11 +519,12 @@ const AdminRegistrationBuilder = () => {
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<GripVertical className="h-4 w-4 text-gray-400" />
|
||||
<div className="font-medium">Step: </div>
|
||||
<span className="font-medium text-sm">{step.title}</span>
|
||||
</div>
|
||||
{/* Mod Buttons */}
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
{/* <Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-6 w-6"
|
||||
@@ -547,17 +547,17 @@ const AdminRegistrationBuilder = () => {
|
||||
disabled={index === sortedSteps.length - 1}
|
||||
>
|
||||
<ChevronDown className="h-3 w-3" />
|
||||
</Button>
|
||||
</Button> */}
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-6 w-6 text-red-500 hover:text-red-700"
|
||||
className="h-6 w-6 text-red-500 hover:text-white ml-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteStep(step.id);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
<Trash2 className="size-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -579,8 +579,7 @@ const AdminRegistrationBuilder = () => {
|
||||
{sortedSections.map((section) => (
|
||||
<div
|
||||
key={section.id}
|
||||
className={`p-3 rounded-lg border cursor-pointer transition-colors ${
|
||||
selectedSection === section.id
|
||||
className={`p-3 rounded-lg border cursor-pointer transition-colors ${selectedSection === section.id
|
||||
? 'border-brand-purple bg-brand-lavender/10'
|
||||
: 'border-gray-200 hover:border-gray-300'
|
||||
}`}
|
||||
@@ -610,14 +609,21 @@ const AdminRegistrationBuilder = () => {
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||
|
||||
{/* Center - Form Canvas */}
|
||||
<div className="lg:col-span-6">
|
||||
<div className="lg:col-span-9">
|
||||
|
||||
<Card className="p-6">
|
||||
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div className='relative -mx-11 -my-2 flex gap-2 items-center'>
|
||||
<Grip className="size-10 text-gray-400 py-2 bg-background" />
|
||||
|
||||
<h2 className="text-xl font-semibold">
|
||||
{currentStep?.title || 'Select a step'}
|
||||
</h2>
|
||||
</div>
|
||||
{selectedSection && (
|
||||
<Button size="sm" onClick={() => setAddFieldDialogOpen(true)}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
@@ -637,8 +643,7 @@ const AdminRegistrationBuilder = () => {
|
||||
return (
|
||||
<div
|
||||
key={section.id}
|
||||
className={`mb-6 p-4 rounded-lg border-2 ${
|
||||
selectedSection === section.id
|
||||
className={`mb-6 p-4 rounded-lg border-2 ${selectedSection === section.id
|
||||
? 'border-brand-purple'
|
||||
: 'border-dashed border-gray-200'
|
||||
}`}
|
||||
@@ -656,8 +661,7 @@ const AdminRegistrationBuilder = () => {
|
||||
return (
|
||||
<div
|
||||
key={field.id}
|
||||
className={`p-3 rounded-lg border cursor-pointer transition-all ${
|
||||
selectedField === field.id
|
||||
className={`p-3 rounded-lg border cursor-pointer transition-all ${selectedField === field.id
|
||||
? 'border-brand-purple bg-brand-lavender/5 ring-2 ring-brand-purple/20'
|
||||
: 'border-gray-200 hover:border-gray-300'
|
||||
} ${field.is_fixed ? 'bg-gray-50' : ''}`}
|
||||
@@ -719,23 +723,7 @@ const AdminRegistrationBuilder = () => {
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Conditional Rules */}
|
||||
<Card className="p-6 mt-6">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Zap className="h-5 w-5 text-yellow-500" />
|
||||
<h2 className="text-lg font-semibold">Conditional Rules</h2>
|
||||
</div>
|
||||
<Button size="sm" variant="outline" onClick={() => setConditionalDialogOpen(true)}>
|
||||
<Settings className="h-4 w-4 mr-2" />
|
||||
Manage Rules
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{schema?.conditional_rules?.length || 0} conditional rule(s) configured
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Right Sidebar - Field Properties */}
|
||||
@@ -912,6 +900,23 @@ const AdminRegistrationBuilder = () => {
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
{/* Conditional Rules */}
|
||||
<Card className="p-6 mt-6">
|
||||
<div className="flex flex-col justify-between items-center mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Zap className="h-5 w-5 text-yellow-500" />
|
||||
<h2 className="text-lg font-semibold">Conditional Rules</h2>
|
||||
</div>
|
||||
<Button size="sm" variant="outline" onClick={() => setConditionalDialogOpen(true)}>
|
||||
<Settings className="h-4 w-4 mr-2" />
|
||||
Manage Rules
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{schema?.conditional_rules?.length || 0} conditional rule(s) configured
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1120,8 +1125,7 @@ const AdminRegistrationBuilder = () => {
|
||||
.map((field) => (
|
||||
<div
|
||||
key={field.id}
|
||||
className={`${
|
||||
field.width === 'full'
|
||||
className={`${field.width === 'full'
|
||||
? 'col-span-2'
|
||||
: field.width === 'third'
|
||||
? 'col-span-1'
|
||||
|
||||
@@ -354,13 +354,7 @@ const AdminValidations = () => {
|
||||
Quick Overview
|
||||
</div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
||||
<StatCard
|
||||
title="Total Pending"
|
||||
value={loading ? '-' : pendingUsers.length}
|
||||
icon={Users}
|
||||
iconBgClass="text-brand-purple"
|
||||
dataTestId="stat-total-users"
|
||||
/>
|
||||
|
||||
|
||||
<StatCard
|
||||
title="Awaiting Email"
|
||||
@@ -394,7 +388,13 @@ const AdminValidations = () => {
|
||||
dataTestId="stat-rejected"
|
||||
/>
|
||||
|
||||
|
||||
<StatCard
|
||||
title="Total Pending"
|
||||
value={loading ? '-' : pendingUsers.filter(user => ['pending_email', 'pending_validation', 'pre_validated', 'payment_pending',].includes(user.status)).length}
|
||||
icon={Users}
|
||||
iconBgClass="text-brand-purple"
|
||||
dataTestId="stat-total-users"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user