andika/membership-fe
3
1
Fork 1
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge from dev to loaf-prod for DEMO #25

Merged
andika merged 45 commits from dev into loaf-prod 2026-02-02 11:12:58 +00:00
Conversation 0 Commits 45 Files Changed 84 +202 -182
3 changed files with 202 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit af27190e29 - Show all commits

16
src/components/registration/DynamicFormField.js
View File

@@ -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}`}
/>

76
src/pages/admin/AdminRegistrationBuilder.js
View File

@@ -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'

16
src/pages/admin/AdminValidations.js
View File

@@ -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.length}
icon={Users}
iconBgClass="text-brand-purple"
dataTestId="stat-total-users"
/>
</div>
</Card>