// T2 Falcon Admin — Add Client Flow (5-step creative stepper) const { useState: useStateAC, useRef: useRefAC, useEffect: useEffectAC, useMemo: useMemoAC } = React; // ===== Steps ===== const AC_STEPS = [ { id: 'info', label: 'Client Information', icon: (p) => }, { id: 'settings', label: 'Settings', icon: (p) => }, { id: 'channels', label: 'CommChannels', icon: (p) => }, { id: 'apps', label: 'Applications', icon: (p) => }, { id: 'owner', label: 'Account Owner', icon: (p) => }]; // Saudi Riyal symbol (small SVG glyph used in price inputs) // Saudi Riyal — official 2025 glyph (proxied to global IcRiyal) const RiyalGlyph = ({ size = 13 }) => ; // ===== Stepper ===== const ACStepBar = ({ current, onJump }) => { const pct = current / (AC_STEPS.length - 1) * 100; return (
{AC_STEPS.map((s, i) => { const Icon = s.icon; const state = i < current ? 'done' : i === current ? 'active' : 'idle'; return ( ); })}
{AC_STEPS.map((s, i) => {s.label} )}
); }; // ===== Profile Picture Block (matches Add User uploader) ===== const ACProfilePicture = ({ photo, onChange, label = 'Profile Picture', subLabel = 'PNG, JPG up to 2MB' }) => { const ref = useRefAC(null); const [drag, setDrag] = useStateAC(false); const handleFile = (file) => { if (!file) return; const reader = new FileReader(); reader.onload = () => onChange(reader.result); reader.readAsDataURL(file); }; return (
{e.preventDefault();setDrag(true);}} onDragLeave={() => setDrag(false)} onDrop={(e) => {e.preventDefault();setDrag(false);handleFile(e.dataTransfer.files[0]);}}>
{photo ? : } {photo && <> }
{label} {subLabel}
Drag a photo here or handleFile(e.target.files[0])} />
); }; // ===== Step 1: Client Information ===== const ACStep1 = ({ data, onChange, errors }) =>
onChange('photo', v)} label="Client Picture" /> {/* Account block */}
onChange('accountName', e.target.value)} /> {errors.accountName && *Please fill this field}
onChange('financeId', e.target.value)} />
{/* Account Official — section divider, not a nested card */}
Account Official
onChange('entityName', e.target.value)} />
onChange('sector', e.target.value)} />
onChange('budgetNo', e.target.value)} />
onChange('district', e.target.value)} />
onChange('street', e.target.value)} />
onChange('bldg', e.target.value)} />
onChange('postal', e.target.value)} />
onChange('addressExtra', e.target.value)} />
onChange('anotherId', e.target.value)} />
onChange('vat', e.target.value)} />
; // ===== Step 2: Settings ===== const ACStep2 = ({ data, onChange }) => { const [pendingIp, setPendingIp] = useStateAC(''); const removeIp = (ip) => onChange('allowedIps', data.allowedIps.filter((x) => x !== ip)); const addIp = (val) => { const v = (val || pendingIp).trim(); if (!v) return; if (data.allowedIps.includes(v)) {setPendingIp('');return;} onChange('allowedIps', [...data.allowedIps, v]); setPendingIp(''); }; return (
{/* LEFT — security + ips */}
Password Security Level
Allowed IPs
{data.allowedIps.map((ip) => {ip} )}
setPendingIp(e.target.value)} onKeyDown={(e) => {if (e.key === 'Enter') {e.preventDefault();addIp();}}} />
* Restrict platform access and limit it from these IPs only
{/* RIGHT — limitations */}
); }; const NumberStepper = ({ value, onChange, min = 0, max = 9999 }) => { const set = (v) => onChange(Math.max(min, Math.min(max, v))); return (
set(Number(e.target.value) || 0)} />
); }; // ===== Step 3 + 4 share the same row table ===== const ACServiceTable = ({ rows, onChange, t }) => { const updateRow = (id, patch) => onChange(rows.map((r) => r.id === id ? { ...r, ...patch } : r)); const [page, setPage] = useStateAC(1); const [pageSize, setPageSize] = useStateAC(10); const total = rows.length; const totalPages = Math.max(1, Math.ceil(total / pageSize)); const safePage = Math.min(page, totalPages); const startIdx = (safePage - 1) * pageSize; const visibleRows = rows.slice(startIdx, startIdx + pageSize); return (
Visibility
Name
Price Type
Price Value
Status
{visibleRows.map((r) =>
{r.name}
updateRow(r.id, { priceValue: Number(e.target.value) || 0 })} />
{!r.visible ? ------ : Inactive }
)} {window.TablePagination && {setPageSize(n);setPage(1);}} t={t || {}} /> }
); }; // Step 3: CommChannels const ACStep3 = ({ data, onChange, t }) =>
onChange('channels', rows)} t={t} />
; // Step 4: Applications const ACStep4 = ({ data, onChange, t }) =>
onChange('apps', rows)} t={t} />
; // Step 5: Account Owner const ACStep5 = ({ data, onChange }) => { return (
onChange('ownerPhoto', v)} label="Owner Picture" />
onChange('ownerFirst', e.target.value)} />
onChange('ownerLast', e.target.value)} />
onChange('ownerUser', e.target.value)} />
onChange('ownerNid', e.target.value)} />
onChange('ownerPhone', e.target.value)} />
onChange('ownerEmail', e.target.value)} />
); }; // ===== Main Flow ===== const AddClientFlow = ({ onClose, t, pushToast, parentNode }) => { const [step, setStep] = useStateAC(0); const [direction, setDirection] = useStateAC(1); const [errors, setErrors] = useStateAC({}); const [sendingOpen, setSendingOpen] = useStateAC(false); const [successOpen, setSuccessOpen] = useStateAC(false); const [delivery, setDelivery] = useStateAC('email'); const [form, setForm] = useStateAC({ photo: '', accountName: '', financeId: '', classCat: '', classSub: '', entityName: '', authority: 'Government', sector: '', budgetNo: '', country: '', city: '', district: '', street: '', bldg: '', postal: '', addressExtra: '', anotherId: '', vat: '', security: 'normal', allowedIps: ['192.168.0.1', '192.168.0.1'], maxNormal: 20, maxSystem: 5, maxNode: 2, currentNormal: 0, currentSystem: 5, currentNode: 0, channels: [ { id: 'ch1', name: 'WhatsApp', visible: true, priceType: 'Monthly', priceValue: 2000 }, { id: 'ch2', name: 'Voice', visible: false, priceType: '', priceValue: null }, { id: 'ch3', name: 'AI', visible: true, priceType: 'OneTime', priceValue: 2000 }], apps: [ { id: 'ap1', name: 'Basic Send App', visible: true, priceType: 'Monthly', priceValue: 2000 }, { id: 'ap2', name: 'Survey Engine', visible: false, priceType: '', priceValue: null }, { id: 'ap3', name: 'Campaign Engine', visible: true, priceType: 'OneTime', priceValue: 2000 }], ownerPhoto: '', ownerFirst: '', ownerLast: '', ownerUser: '', ownerPwd: '#123455', ownerNid: '', ownerPhone: '', ownerEmail: '', ownerRole: 'Account Owner' }); const update = (key, value) => { setForm((f) => ({ ...f, [key]: value })); if (errors[key]) setErrors((e) => ({ ...e, [key]: undefined })); }; const validateStep1 = () => { const errs = {}; if (!form.accountName.trim()) errs.accountName = true; setErrors(errs); return Object.keys(errs).length === 0; }; const isLast = step === AC_STEPS.length - 1; const handleNext = () => { if (step === 0 && !validateStep1()) {return;} if (isLast) { setSendingOpen(true); return; } setDirection(1); setStep((s) => s + 1); }; const handlePrev = () => { if (step === 0) return; setDirection(-1); setStep((s) => s - 1); }; return (
{/* Top bar */}
Falcon
{step > 0 && }
{/* Body */}
Create New Client
step {step + 1}/{AC_STEPS.length}
{setDirection(i > step ? 1 : -1);setStep(i);}} />
0 ? 'in-right' : 'in-left'}`}> {step === 0 && } {step === 1 && } {step === 2 && } {step === 3 && } {step === 4 && }
{sendingOpen && setSendingOpen(false)} onSend={() => {setSendingOpen(false);setSuccessOpen(true);}} /> } {successOpen && { setSuccessOpen(false); pushToast(t.toastNodeAdded || 'Client created ✓'); onClose(); }} /> }
); }; // ===== Send Credentials Modal ===== const SendCredentialsModal = ({ delivery, setDelivery, owner, onCancel, onSend }) => { const options = [ { id: 'email', label: 'Send via Email', src: 'admin/assets/send-email.svg' }, { id: 'sms', label: 'Send via SMS', src: 'admin/assets/send-sms.svg' }, { id: 'both', label: 'Both, SMS and Email', src: 'admin/assets/send-both.svg' }]; return (
e.stopPropagation()}>

Sending Credentials

An email and/or SMS with the username and password will be sent to the account owner

Delivery method:
{options.map((o) => )}
Account owner
{owner.first} {owner.last}
Phone Number
{owner.phone}
Email
{owner.email}
); }; // ===== Success Modal ===== const SuccessModal = ({ onClose }) => { return (
e.stopPropagation()}>

Completed successfully

Credentials sent to the user

); }; // ===== Illustrations ===== const SendEmailIllo = () => ; const SendSmsIllo = () => ; const SendBothIllo = () => @ SMS ; const SuccessIllo = () => {/* sparkles & circles */} {/* clipboard */} {/* lines on clipboard */} {/* check pill */} {/* check badge */} ; window.AddClientFlow = AddClientFlow;