Nutqi β Gap Analysis, Fixes & Recommendations
Every gap found while deep-navigating the Figma. Severity: π΄ blocks a core journey Β· π degrades a journey Β· π‘ polish/consistency. Each entry: Gap β Fix (what we implement) β Status in build.
A. Missing screens / dead ends#
G01 π΄ The guardian "Payments" screen is empty. The sidebar links to payments, the frame exists (node 1202-31659) but its body is blank; the design system only contains the specialist wallet ("Main" / "Transactions").
β Fix: build the guardian payments page: per-booking payment history (date, specialist, session, amount, method, status, receipt download) reusing the transactions-row pattern; totals card row ("Total paid", "Being collected"). Payment execution itself is manual/at-center in v1 (see D-10); the page is a ledger.
β Implemented in apps/web route /(guardian)/payments.
G02 π The login field is labeled "Name" with a person icon while signup and forgot-password use email β a user typing their display name will always fail.
β Fix: label it "Email address" with a mail icon, type=email, and email-format validation; error copy mentions email specifically.
G03 π΄ Center signup collects only personal fields. No center name, license, tax ID, address or branches β a center account cannot actually be provisioned from the designed form.
β Fix: keep step 1 as designed (owner's personal account), add step 2 "Center details": center name (ar/en), license number + document upload, phone, governorate/city, first branch; feeds the same activation-review pipeline specialists use.
G04 π Booking modal ambiguity. Slot grid uses checkboxes (implies multi-select), shows no session type, duration, price or specialist confirmation, and the flow has no success screen.
β Fix: single-select slot chips; add session-type selector (Speech therapy / Skills development / Visual communication / Consultation) with duration+price pulled from the specialist's schedule config; add a summary + success step ("Your booking is pending confirmation").
G05 π No OTP failure/expiry states. Only the happy path + countdown exist.
β Fix: wrong-code inline error, expired-code state with resend, attempt throttling (5 tries β cooldown), and resend-channel choice (SMS/WhatsApp) aligned with notification channels.
G06 π‘ No empty states anywhere (bookings, programs, reviews, jobs, staff lists all designed full).
β Fix: empty-state kit (illustration + one-line hint + primary CTA) per list; e.g. bookings empty β "Book your first session" CTA to search.
G07 π‘ No loading/skeleton/error page states.
β Fix: skeleton components for tables/cards/charts; global error boundary + bilingual 404/500 pages.
G08 π Specialists can see jobs they applied to but have nowhere to discover jobs. Centers publish ("Post a job opening") but no browse/apply surface exists specialist-side.
β Fix: jobs marketplace tab inside "Jobs": open positions (filter by governorate/specialty/branch), job detail, apply with CV snapshot from profile; application then appears in the applied list with "Accepted"/"Pending"/"Rejected".
G09 π Multi-child guardians have no child switcher. Frames exist for "Child info 2" but navigation between children is undesigned.
β Fix: child selector chip-row on top of "Profile" + "Add child" action; bookings/plans get a child filter.
G10 π Online sessions have no meeting-link surface. Bookings can be online but nothing carries the call link.
β Fix: meetingUrl on confirmed online bookings; "Join session" button appears 15 min before start (guardian + specialist sides). Actual video provider is out of v1 scope β the field accepts any URL (Meet/Zoom).
G11 π Notification bell exists in every topbar but there is no notifications panel/screen.
β Fix: dropdown (last 10) + full page with filters; wired to the events listed in the user guide; respects channel settings.
G12 π Global search bar exists but no results page; guardians have no specialist-discovery screen at all (profiles are reachable only via direct link in the design).
β Fix: search/directory page: specialists (+centers) with filters β governorate, specialty (speech therapy/autism/skills development), session type, price range, rating; card grid β profile.
G13 π‘ The "Languages" settings screen conflates UI language with spoken languages (language + level + add).
β Fix: split into (a) "App language": Arabic/English toggle (RTL/LTR switch, instant), and (b) "Spoken languages" (kept as designed, feeds child/specialist profile matching).
G14 π No terms/privacy consent at signup and no legal pages.
β Fix: consent checkbox linking to bilingual Terms + Privacy pages (docs app hosts the content; web app renders them).
G15 π‘ No account lockout / too-many-attempts state on login (only wrong-password).
β Fix: backend throttling (5 fails β 15 min lock) + designed lockout message with reset-password CTA.
G16 π Center public identity missing. Guardians can view specialist profiles; centers (with branches, staff specialists) have no public profile despite being bookable businesses.
β Fix (recommended, v1.1): public center page: branches, specialists roster, reviews rollup. v1 keeps specialist-centric booking; documented as roadmap.
G17 π‘ Review moderation absent. Reviews post directly; specialist can only like/comment.
β Fix: report action + admin-side flag queue (API-level in v1, UI later).
G18 π‘ Delete confirmations exist ("Delete") but no undo.
β Fix: soft-delete + 10s undo toast for notes, plans (drafts), work-info entries; hard delete stays behind the designed red confirm modal.
G19 π Specialist payments exist as wallet but there is no withdrawal-request flow (only a log of past withdrawals).
β Fix: "Request withdrawal" action with amount + payout method (bank/wallet number), request states ("Under review"/"Transferred"/"Rejected"); admin approves manually in v1.
G20 π‘ Attendance clock-in has no context/constraints (who presses it, where).
β Fix: clock in/out from staff dashboard with timestamp + optional branch selector; audit trail visible to owner/manager. Geofencing explicitly out of scope (documented).
B. Consistency & bilingual/RTL#
G21 π‘ Status vocabulary drift β booking uses Ω
ΨΉΩΩ/Ψ§ΩΨͺΨΈΨ§Ψ±/ΨͺΨ£Ψ¬ΩΩ/ΨͺΩ
; jobs use Ω
ΩΨΉΩΩ/ΨͺΩ
Ψ§ΩΩΨ¨ΩΩ/ΨͺΩ
Ψ§ΩΨ±ΩΨΆ; plans use ΩΩ
ΩΨͺΩ
/ΨͺΩ
.
β Fix: single status enum table in docs + shared <StatusChip> mapping enumβcolor/icon/label(ar,en); color-blind-safe (icon + text, never color alone).
G22 π English/LTR is entirely undesigned. All frames are Arabic RTL.
β Fix: full i18n from day one: next-intl with ar (default, RTL) + en (LTR); logical CSS properties (ps/pe, start/end) everywhere; direction-aware icons (arrows, chevrons flipped); numerals: Latin digits in both locales for data (dates/prices), Arabic-Indic optional later.
G23 π‘ Dates shown as 25\12\2025 with backslashes and mixed direction risk.
β Fix: locale-aware formatter (Intl.DateTimeFormat ar-EG/en-GB) wrapped in <bdi>; one formatDate/formatMoney util pair used everywhere (EGP currency).
G24 π‘ Egyptian-dialect microcopy mixed with MSA (Ψ§ΩΩΩ ΩΨ³Ψ© Ω
Ψ¬Ψ§ΩΨ¨Ψ΄ ΨΉΩΩΨ§ vs formal labels).
β Fix: keep the warm Egyptian tone deliberately (brand voice) but normalize per surface: dialect for guidance/toasts, MSA for labels/tables; documented in copy guide; English mirrors tone-neutral.
C. UX enhancements beyond the design (requested)#
Implemented as part of the build:
E01Questionnaire autosave β plans are up to 3,650px of questions; answers autosave (debounced, per-question) with a "Saved automatically" indicator; resume where you left off. (Biggest UX win; long forms + mobile networks.)E02Progress bar in plan answering β sticky header with % answered + required-remaining count; page dots for multi-page diagnosis form.E03Toast system β success/error/undo toasts (RTL-aware, bottom-start).E04Optimistic UI β booking status chips, review like/comment, notification read-state update instantly with rollback on failure.E05Skeletons + shimmer for tables, cards, charts; no layout shift.E06Command palette (βK) in dashboards β jump to patient/booking/screen; Arabic + English fuzzy search.E07Slot picker upgrades β disabled past slots, "today/tomorrow" quick chips, timezone-safe rendering.E08File upload UX β drag&drop, image preview, progress bar, type/size validation, avatar crop.E09Animated stat counters + chart tooltips on dashboards (respectsprefers-reduced-motion).E10Session reminder banner β next upcoming booking surfaces on guardian/specialist home with join/directions action.E11Table power-ups β column sort, sticky header, CSV/Excel/PDF export (as designed) done client-side.E12Form validation β inline, on-blur, bilingual messages; national-ID checksum (Egyptian 14-digit) validation.E13Notification badge realtime β SSE stream updates bell badge without refresh.E14Keyboard & a11y β focus rings, skip links,ariaon chips/tabs/modals, contrast-checked palette.E15Draft persistence for center job postings ("Save as draft" as designed) + restore banner.
D. Decision log pointer#
Every choice made while implementing (framework versions, folder shapes, naming, scope cuts) is recorded conversation-style in 05-decisions.md per the product owner's instruction to auto-accept recommended options and document them.