دليل التصميم
الأساس البصري للمرحلة 0. الألوان والخطوط والمكوّنات.
الاتجاه: rtl — ar
معاينة ثنائية اللغة
Same content side by side in en (LTR) and ar (RTL) for visual QA.
The One for Physiotherapy
Appointment with Dr. Sara on June 1, 2026 at 2:30 PM.
Patient phone: +962 79 012 3456
المركز الأول للعلاج الطبيعي
موعد مع د. سارة بتاريخ 1 حزيران 2026 الساعة 2:30 م.
هاتف المراجع: +962 79 012 3456
تنسيق التاريخ والأرقام
Outputs from lib/format/* in the active locale.
تاريخ مفصّل
1 حزيران 2026
تاريخ مختصر
01/06/2026
الوقت
2:30 م
وقت نسبي
بعد الغد
رقم منسّق
1,234,567
رقم الهاتف
+962 79 012 3456
formatDateTime
1 حزيران 2026 في 2:30 م
Hijri (islamic-umalqura)
15 ذو الحجة 1447 هـ
Auth states
Header shapes for anonymous and authenticated users, plus the two auth-flow banners.
Anonymous header
Authenticated header
Locked-account banner
Must-change-password banner
Permission codes
Generated from lib/rbac/permissions.ts — adding a code updates this table automatically.
| Permission code | PATIENT | SECRETARY | DOCTOR | THERAPIST | ADMIN |
|---|---|---|---|---|---|
| own_profile.read | ✓ | ✓ | ✓ | ✓ | ✓ |
| own_profile.update | ✓ | ✓ | ✓ | ✓ | ✓ |
| users.create | · | · | · | · | ✓ |
| users.read | · | · | · | · | ✓ |
| users.read.patients | · | ✓ | · | · | · |
| users.read.therapists | · | ✓ | · | · | · |
| users.read.assigned | · | · | ✓ | ✓ | · |
| users.update | · | · | · | · | ✓ |
| users.delete | · | · | · | · | ✓ |
| appointments.create | · | ✓ | · | · | ✓ |
| appointments.read | · | ✓ | · | · | ✓ |
| appointments.read.own | ✓ | · | · | · | · |
| appointments.read.assigned | · | · | ✓ | ✓ | · |
| appointments.update | · | ✓ | · | · | ✓ |
| appointments.delete | · | ✓ | · | · | ✓ |
| appointments.cancel | · | ✓ | · | · | ✓ |
| appointments.checkin | · | ✓ | · | · | ✓ |
| appointments.complete | · | ✓ | · | ✓ | ✓ |
| appointments.noshow | · | ✓ | · | · | ✓ |
| appointments.override_conflict | · | ✓ | · | · | ✓ |
| treatment_plans.create | · | · | ✓ | · | ✓ |
| treatment_plans.read | · | ✓ | · | · | ✓ |
| treatment_plans.read.own | ✓ | · | · | · | · |
| treatment_plans.read.assigned | · | · | ✓ | ✓ | · |
| treatment_plans.update.own | · | · | ✓ | · | ✓ |
| treatment_plans.update.assigned | · | · | · | ✓ | · |
| treatment_plans.propose | · | · | · | ✓ | ✓ |
| treatment_plans.approve | · | · | ✓ | · | ✓ |
| treatment_plans.reject | · | · | ✓ | · | ✓ |
| treatment_plans.pause | · | · | ✓ | · | ✓ |
| treatment_plans.complete | · | · | ✓ | · | ✓ |
| treatment_plans.discontinue | · | · | ✓ | · | ✓ |
| session_notes.create.own | · | · | · | ✓ | ✓ |
| session_notes.read | · | ✓ | · | · | ✓ |
| session_notes.read.assigned | · | · | ✓ | ✓ | · |
| session_notes.update.own | · | · | · | ✓ | ✓ |
| session_notes.addendum | · | · | ✓ | ✓ | ✓ |
| patient_timeline.read | · | ✓ | · | · | ✓ |
| patient_timeline.read.assigned | · | · | ✓ | ✓ | · |
| patient_timeline.read.limited | ✓ | · | · | · | · |
| home_program.read | · | ✓ | ✓ | ✓ | ✓ |
| home_program.read.own | ✓ | · | · | · | · |
| home_program.create.assigned | · | · | · | ✓ | · |
| home_program.update.assigned | · | · | · | ✓ | · |
| exercises.create | · | · | ✓ | ✓ | ✓ |
| exercises.read | ✓ | ✓ | ✓ | ✓ | ✓ |
| exercises.update | · | · | ✓ | ✓ | ✓ |
| exercises.archive | · | · | · | · | ✓ |
| home_program.create | · | · | ✓ | ✓ | ✓ |
| home_program.update | · | · | ✓ | ✓ | ✓ |
| home_program.delete | · | · | ✓ | ✓ | ✓ |
| home_program.complete.own | ✓ | · | · | · | · |
| exercise_media.create | · | · | · | · | ✓ |
| exercise_media.read | · | · | · | · | ✓ |
| exercise_media.read.own | ✓ | · | · | · | · |
| exercise_media.update | · | · | · | · | ✓ |
| exercise_media.delete | · | · | · | · | ✓ |
| exercise_media.create.own | · | · | · | ✓ | · |
| exercise_media.update.own | · | · | · | ✓ | · |
| exercise_media.delete.own | · | · | · | ✓ | · |
| leaves.create.own | · | ✓ | ✓ | ✓ | ✓ |
| leaves.read.own | · | ✓ | ✓ | ✓ | ✓ |
| leaves.read | · | ✓ | · | · | ✓ |
| leaves.update | · | · | · | · | ✓ |
| leaves.delete | · | · | · | · | ✓ |
| reports.read | · | ✓ | ✓ | · | ✓ |
| reports.read.own | · | · | · | ✓ | · |
| reports.submit | · | · | · | ✓ | ✓ |
| reports.review | · | · | ✓ | · | ✓ |
| doctor_reviews.create | · | · | ✓ | · | ✓ |
| doctor_reviews.read.assigned | · | · | ✓ | · | ✓ |
| timeline.read.assigned | · | · | ✓ | ✓ | ✓ |
| notifications.read.own | ✓ | ✓ | ✓ | ✓ | ✓ |
| notifications.mark_read.own | ✓ | ✓ | ✓ | ✓ | ✓ |
| rooms.read | · | ✓ | ✓ | ✓ | ✓ |
| rooms.create | · | · | · | · | ✓ |
| rooms.update | · | · | · | · | ✓ |
| rooms.archive | · | · | · | · | ✓ |
| rooms.delete | · | · | · | · | ✓ |
| patients.create | · | ✓ | · | · | ✓ |
| patients.read | · | ✓ | · | · | ✓ |
| patients.read.assigned | · | · | ✓ | ✓ | · |
| patients.read.own | ✓ | · | · | · | · |
| patients.update | · | ✓ | · | · | ✓ |
| patients.update.own | ✓ | · | · | · | · |
| patients.archive | · | · | · | · | ✓ |
| patients.reset_password | · | ✓ | · | · | ✓ |
| intake.create | · | ✓ | · | · | ✓ |
| intake.read | · | ✓ | · | · | ✓ |
| intake.read.assigned | · | · | ✓ | ✓ | · |
| intake.read.own | ✓ | · | · | · | · |
| intake.update | · | ✓ | · | · | ✓ |
| whatsapp_templates.create | · | · | · | · | ✓ |
| whatsapp_templates.read | · | · | · | · | ✓ |
| whatsapp_templates.update | · | · | · | · | ✓ |
| whatsapp_templates.delete | · | · | · | · | ✓ |
| whatsapp_messages.read | · | · | · | · | ✓ |
| whatsapp_messages.resend | · | · | · | · | ✓ |
| inbox.read | · | ✓ | · | · | ✓ |
| inbox.resolve | · | ✓ | · | · | ✓ |
| system_settings.create | · | · | · | · | ✓ |
| system_settings.read | · | · | · | · | ✓ |
| system_settings.update | · | · | · | · | ✓ |
| system_settings.delete | · | · | · | · | ✓ |
| audit_log.read | · | · | · | · | ✓ |
Error states
Every code in AUTH_ERRORS rendered with its localized English and Arabic message.
INVALID_CREDENTIALSEmail or password is incorrect.
البريد الإلكتروني أو كلمة المرور غير صحيحة.
OTP_INVALIDThe verification code is incorrect.
رمز التحقق غير صحيح.
OTP_EXPIREDThe verification code has expired. Request a new one.
انتهت صلاحية رمز التحقق. اطلب رمزاً جديداً.
OTP_LOCKEDToo many incorrect codes. Request a new one.
عدد كبير من الرموز الخاطئة. اطلب رمزاً جديداً.
OTP_COOLDOWNPlease wait before requesting another code.
يرجى الانتظار قبل طلب رمز جديد.
ACCOUNT_LOCKEDThis account is temporarily locked. Try again in 15 minutes.
هذا الحساب مقفل مؤقتاً. حاول مجدداً بعد 15 دقيقة.
RATE_LIMITEDToo many attempts. Please slow down.
محاولات كثيرة جداً. يرجى التمهّل.
WEAK_PASSWORDPassword must be at least 8 characters with upper, lower, number, and symbol.
يجب أن تحوي كلمة المرور 8 أحرف على الأقل، وحرفاً كبيراً وصغيراً ورقماً ورمزاً.
TOKEN_INVALIDThis reset link is invalid or has expired.
رابط إعادة التعيين غير صالح أو منتهي الصلاحية.
UNAUTHENTICATEDSign-in required.
يلزم تسجيل الدخول.
FORBIDDENYou do not have permission for this action.
ليست لديك صلاحية لهذا الإجراء.
الألوان
Eleven locked tokens. Both Tailwind classes and CSS variables resolve to these values.
#0B1E47--brand-navyPrimary actions, headers, hero backgrounds
#091638--brand-navy-deepHover state on navy buttons
#1B4982--brand-blueSecondary surfaces, gradient start
#1E5F58--brand-tealSuccess states, highlight cards
#3DC0D9--brand-cyanIcons, gradient end, links, accents
#7DDBE9--brand-cyan-lightHover state on cyan
#F2F4F8--brand-bgPage background
#FFFFFF--brand-surfaceCards, modals, elevated surfaces
#0B1E47--brand-textBody text on light surfaces
#5A6580--brand-text-mutedSecondary text, captions
#D8DEE8--brand-borderCard borders, dividers
تدرّج الإجراء الرئيسي
Primary call-to-action surface — locked gradient direction.
الخطوط
Inter for Latin, IBM Plex Sans Arabic for Arabic. Weights 400 and 500 only.
Heading 1 — quick brown fox
Heading 2 — quick brown fox
Heading 3 — quick brown fox
Heading 4 — quick brown fox
Heading 5 — quick brown fox
Heading 6 — quick brown fox
Body large — sentence-case copy used for high-emphasis paragraphs.
Body — default 16px, line-height 1.6, weight 400.
Small — used for secondary details and labels.
Caption — timestamps, helper text, footnotes.
المركز الأول للعلاج الطبيعي
هذا نص اختباري لعرض الخط العربي ضمن نظام التصميم.
الجملة الافتراضية بحجم ١٦ بكسل لاستعراض الوزن العادي.
نص ثانوي للملاحظات والتعليقات.
الأزرار
All shadcn variants plus the brand CTA gradient.
حقول الإدخال
Input + Label, plus disabled and error states.
Enter a valid Jordanian mobile number.
البطاقات
Three reference layouts: basic, header + footer, elevated.
Basic card
Single block of content, no chrome.
The header carries the title; the footer holds primary and secondary actions.
Same anatomy, deeper shadow signals lift above the page surface.
الشارات
Status, category, and counter chips.
مقياس التباعد
Tailwind spacing tokens used in the system (multiples of 4px).
w-14px · spacing-1w-28px · spacing-2w-416px · spacing-4w-832px · spacing-8w-1664px · spacing-16