ترويسة الصفحة
العنوان والغرض ومسار التنقل من خريطة المسارات تلقائيًا، مع الإجراءات وشريحة «تعمل على».
PageHeaderسجل المخاطر
سجل المخاطر المؤسسي وخريطة الاحتمالية والأثر.
نظام تصميم منجز
هذه الصفحةُ تعرض المكوّناتِ التي تُبنى منها كلُّ شاشةٍ في مشاريعنا: بالعربيةِ والإنجليزية، فاتحةً وداكنة. ما يتغيّر هنا يتغيّر في كلِّ شاشةٍ تستعمله.
كل شاشة تبدأ من هنا: ترويسة بمسار تنقل وعنوان وغرض، أو شريط بطولي داكن للوحات القيادة، ثم أقسام وألواح بطبقات هادئة بدل بطاقات بيضاء متناثرة.
العنوان والغرض ومسار التنقل من خريطة المسارات تلقائيًا، مع الإجراءات وشريحة «تعمل على».
PageHeaderسجل المخاطر المؤسسي وخريطة الاحتمالية والأثر.
للوحات القيادة: أخضر مزرق عميق بتوهج وشبكة دقيقة وزخرفة الشريط وخط ذهبي، مع بلاطات أرقام زجاجية. الرقم الأهم وحده بالذهبي.
PageHeader variant="hero"المرحلة الثانية: ربط 42 خدمة حكومية بهوية رقمية موحدة ودفع إلكتروني.
السنة المالية 2026
55%
المخطط 66%
القسم عنوان وغرض وإجراءات؛ واللوح سطح لمخطط أو قائمة أو جدول. «band» يمد خلفية ملونة بعرض الصفحة.
Section · Panelالمخطط مقابل الفعلي للسنة المالية 2026
حسب درجة التعرض
اعتماد أمر التغيير رقم 4 لتمديد نطاق التكامل مع منصة الدفع — يؤثر على المعلم التعاقدي في ديسمبر.
كل تبويب عنوان مستقل، والمفتوح يتبع العنوان — لأقسام مساحة المشروع.
PageTabsشعار منجز بالشريط الأخضر المزرق والسهم الذهبي الصاعد، وزخرفة الشريط للخلفيات.
Logo · RibbonMotifالذرّات التي تُبنى منها شاشات منجز: الحالة الصحية، وحالات سير العمل، والإنجاز مقابل الخطة، ومؤشرات الأداء، والمال، والتواريخ بالتقويمين، والمهل. كلّ كلمة فيها من حزمة المفردات الموحّدة، فلا تظهر شيفرة لقارئ.
الذرّات معًا كما تظهر في قائمة المشاريع.
HealthBar · ProgressBar · IndexChip · DueChip · WatchStarمنصة الخدمات الرقمية الموحدة
تطوير شبكة الطرق الدائرية في المنطقة الشمالية وربطها بالمخطط العمراني
مركز البيانات الحكومي الأخضر
نظام إدارة الأصول البلدية
خمس حالات بأرضية هادئة وحبر واضح. الحرج معيّن، والمعلّق علامة إيقاف، فلا يُعتمد على اللون وحده.
HealthDot · HealthPillالنقاط
الشارات
شارات صغيرة
بلا أرضية — للجداول الكثيفة
بكلمات مخصّصة
الصحة العامة ثم ثمانية أبعاد في شريط واحد؛ مرّر المؤشر على أي قطعة لترى البعد وحالته. الحرج مخطّط والمعلّق باهت.
HealthBarشريط — صفّ في جدول أو بطاقة
منصة الخدمات الرقمية الموحدة
تطوير شبكة الطرق الدائرية في المنطقة الشمالية وربطها بالمخطط العمراني
مركز البيانات الحكومي الأخضر
نظام إدارة الأصول البلدية
شبكة — رأس صفحة المشروع
صفّ الدليل تحت الرسوم والخرائط، بالأعداد أو بالشرح.
StatusLegendبالأعداد
بالشرح
مجموعة جزئية
مكوّن واحد لكلّ حالات السجلات، ولونها من خريطة واحدة. الحالات المنتهية مخطّطة لتبرز الأعمال الحيّة، والمصعَّد والمتأخر يحملان علامة.
StatusBadgeكلّ الحالات
بنقطة
صغيرة
رقم المرحلة ثم اسمها، ومع خيار المسار تظهر المراحل الإحدى عشرة.
PhaseBadgeكلّ المراحل
صغيرة
مع المسار
الشريط يعرض الإنجاز الفعلي، والخطّ الرأسي هو المخطّط حتى اليوم. اللون من الانحراف: وفق الخطة أخضر، وحتى عشر نقاط كهرماني، وما بعدها أحمر.
ProgressBarعادي
المخطّط حتى اليوم 78%
المخطّط حتى اليوم 70%
المخطّط حتى اليوم 61%
رفيع — في جدول
الرقم في المركز، والانحراف تحتها، بثلاثة أحجام.
ProgressRingالعنوان، والرقم الكبير بوحدته، والتغيّر ملوّنًا بحسب كونه جيدًا، ومنحنى الأشهر، والمستهدف شريطًا بعلامة. الذهبي للبطاقة الأهم فقط.
KpiTileنسبة إنجاز المبادرات الاستراتيجية
71.4%
+4.2%عن الفترة السابقة
المستهدف 80.0%89%
متوسط مدة اعتماد طلبات التغيير
9يومًا
−18%عن الفترة السابقة
المستهدف 7
المصدر: نظام إدارة المحفظة
رضا المستفيدين عن الخدمات الرقمية
86%
+2.4%عن الفترة السابقة
المستهدف 85%101%
البطاقة كلّها رابط
المشاريع المتعثرة في المحفظة
7مشاريع
+40%عن الفترة السابقة
المستهدف 3
النسخة الفاتحة على شريط البطل الداكن: السهم الصاعد بالذهبي حين يكون الخبر جيدًا.
HeroStatقيمة المحفظة المعتمدة 2026
1.84مليار ر.س
+6.2%عن الفترة السابقة
مشاريع على المسار
41
−3عن الفترة السابقة
من 64 مشروعًا نشطًا
متوسط مؤشر أداء الجدول
0.94
0%عن الفترة السابقة
إجراءات متأخرة
17
−22%عن الفترة السابقة
الصورة الرمزية والاسم والمسمّى، وبطاقة تفاصيل عند المرور أو التركيز.
PersonChipمضغوط
الوجوه متراكبة، و«+3» يفتح قائمة الفريق كاملًا.
AvatarStackفريق منصة الخدمات الرقمية
9 أعضاء
فريق منصة الخدمات الرقمية
9 أعضاء
فريق منصة الخدمات الرقمية
7 أعضاء
أشخاص قليلون
الريال برمزه الرسمي، والأرقام لاتينية. المختصر «12.4 مليون»، والانحراف ملوّن بحسب أثره.
MoneyFigureكامل
مختصر
انحراف إيجابي · تجاوز · زيادة تكلفة (الصعود سيئ)
رقم رئيسي
المعتمد، والملتزم به، والمصروف، والتكلفة المتوقعة عند الإنجاز في شريط واحد؛ التجاوز مخطّط بالأحمر.
BudgetMeterتطوير شبكة الطرق الدائرية في المنطقة الشمالية وربطها بالمخطط العمراني — تجاوز متوقع
مركز البيانات الحكومي الأخضر — وفر متوقع
يتبع اختيار القارئ في الرأس: ميلادي أو هجري أو كلاهما. خارج التطبيق يعرض الاثنين.
DayTextكلاهما
ميلادي فقط · هجري فقط
سطران
بالشهر مكتوبًا
الوقت المتبقي على مهلة الخدمة، بالساعات تحت يومين وبالأيام بعدها. المتجاوز أحمر بعلامة.
SlaChip · Countdownصغيرة
داخل نص
قريب أم بعيد عن اليوم (28 أكتوبر 2026). التاريخ نفسه في التلميح.
DueChipعمل منجز
درجة من 100 بقوس صغير ولون نطاقها: ممتاز وجيد ومتوسط وضعيف. درجة المخاطر معكوسة.
ScoreChipالنطاقات
مع اسم النطاق
صغيرة
السهم بحسب الاتجاه واللون بحسب الأثر: انخفاض مدة الاعتماد خبر جيد.
TrendArrowالصعود جيد
الهبوط جيد
بلا أرضية
مؤشر أداء الجدول والتكلفة: واحد فأكثر جيد، ومن 0.9 إلى 1 للمتابعة، وما دون 0.9 متعثر.
IndexChipرمز المشروع أو العقد بخط ثابت العرض ومعزول الاتجاه، وزرّ النسخ يظهر عند المرور.
CodeTagداخل جملة عربية
أُسند العقد CTR-2025-007 إلى المقاول الرئيسي.
أزواج العنوان والقيمة، من عمودين إلى أربعة، والقيم قد تكون مكوّنات.
KeyValueGridبلا إطار
نجمة تضيف المشروع إلى قائمة متابعتك وتؤكّد بإشعار. ذهبية حين تكون مفعّلة.
WatchStarمستقلّة
متحكَّم بها
ما يرسم شكلَ العمل: سجلّ النشاط، ومسار المراحل وبواباتها، ولوحة كانبان تُسحب بطاقاتها بالمؤشر أو بلوحة المفاتيح، ومصفوفتا المخاطر والأولويات، والشجرة والهيكل التنظيمي، وخريطة الاعتماديات. كلّها تبدأ من اليمين في العربية. وخطوات المعالج موجودة في «ستيبر» العُدّة (عمودي، مرقّم، بوصف)، فلم يُكرَّر هنا.
من فعل ماذا وبأيّ سجل، مجمّعًا باليوم (اليوم، أمس، ثم التاريخ)، بأيقونة لكل نوع ووجه صاحب الفعل، والوقت نسبيّاً مع الوقت الدقيق في التلميح. كثافتان: كاملة للصفحة، ومضغوطة للوحة جانبية.
ActivityFeedكاملة — نشاط مشروع «منصة الخدمات الرقمية الموحدة»
اعتماد: نورة القحطاني اعتمدت CR-014طلب تغيير نطاق التكامل
2026-10-28 11:12تعليق: ماجد الحربي علّق على 1.3.2.2التكامل مع منصة نفاذ وسداد
2026-10-28 09:47خطر جديد: خالد الشهري سجّل خطرًا جديدًا: RSK-031تأخر توريد الخوادم من المورّد
2026-10-28 08:30تغيير حالة: فهد العتيبي غيّر حالة 1.3.1بوابة المستفيدينقيد التنفيذقيد المراجعة
2026-10-27 16:05رفع مستند: ريم الزهراني رفعت DOC-0233تقرير الحالة الشهري — أكتوبر
2026-10-27 13:20معلم: لمى السبيعي أنجزت المعلم إطلاق النسخة التجريبية للجوال
2026-10-27 10:00قرار بوابة: عبدالله الغامدي سجّل قرار البوابة مراجعة منتصف التنفيذ
2026-10-21 14:30دفعة: تركي العنزي صادق على PC-0087المستخلص رقم 4
2026-10-20 11:15مضغوطة — لوحة جانبية
اعتماد: نورة القحطاني اعتمدت CR-014طلب تغيير نطاق التكامل
2026-10-28 11:12تعليق: ماجد الحربي علّق على 1.3.2.2التكامل مع منصة نفاذ وسداد
2026-10-28 09:47خطر جديد: خالد الشهري سجّل خطرًا جديدًا: RSK-031تأخر توريد الخوادم من المورّد
2026-10-28 08:30تغيير حالة: فهد العتيبي غيّر حالة 1.3.1بوابة المستفيدينقيد التنفيذقيد المراجعة
2026-10-27 16:05رفع مستند: ريم الزهراني رفعت DOC-0233تقرير الحالة الشهري — أكتوبر
2026-10-27 13:20بلا نشاط
لا نشاط بعد
ستظهر هنا التعليقات والاعتمادات وتغييرات الحالة فور حدوثها.
دورة حياة المشروع الإحدى عشرة وبين كل مرحلتين بوابة قرار: المنجز مملوء، والمرحلة الحالية بحلقة ذهبية تنبض بهدوء، والقادم مفرّغ. المعيّن يحمل قرار البوابة — موافقة، أو موافقة مشروطة بشارة صغيرة، أو تعليق، أو إعادة عمل — وتلميحه يذكر التاريخ والقرار والشروط المفتوحة.
StageGateTrackكاملة — المشروع في التنفيذ، وبوابة الطرح والترسية مشروطة
على الشريط الداكن
مشروع استراتيجي · قطاع التحول الرقمي
التنفيذالمرحلة 7 من 11
البوابة التالية:المتابعة والرقابة17 يناير 2027
مضغوطة — في ترويسة
التنفيذالمرحلة 7 من 11
البوابة التالية:المتابعة والرقابة17 يناير 2027
مضغوطة — مشروع معلّق عند بوابة الطرح والترسية
الاعتمادالمرحلة 5 من 11
البوابة التالية:الطرح والترسية12 أكتوبر 2026
مشروع أُعيد إلى التخطيط من بوابة الاعتماد
مراحل الطلبات أعمدة. اسحب بطاقة: ترتفع بظلّها وتميل قليلًا، ويُفتح لها مكان منقّط، ويُضاء العمود الذي ستنزل فيه. أو بلوحة المفاتيح: المسافة للالتقاط، والأسهم للنقل، والمسافة للإفلات. العمود الذي يتجاوز حدّ العمل الجاري يصفرّ.
KanbanBoardجرّب: اسحب «أتمتة إجراءات التراخيص البلدية» إلى «مراجعة أولية»، أو انتقل إلى بطاقة بـTab واضغط المسافة.
المسافة لالتقاط البطاقة، والأسهم لنقلها، والمسافة لإفلاتها، وEscape للإلغاء.
المسافة لالتقاط البطاقة، والأسهم لنقلها، والمسافة لإفلاتها، وEscape للإلغاء.
المسافة لالتقاط البطاقة، والأسهم لنقلها، والمسافة لإفلاتها، وEscape للإلغاء.
المسافة لالتقاط البطاقة، والأسهم لنقلها، والمسافة لإفلاتها، وEscape للإلغاء.
المسافة لالتقاط البطاقة، والأسهم لنقلها، والمسافة لإفلاتها، وEscape للإلغاء.
لا بطاقات هنا
اسحب بطاقة إلى هذا العمود
المسافة لالتقاط البطاقة، والأسهم لنقلها، والمسافة لإفلاتها، وEscape للإلغاء.
المسافة لالتقاط البطاقة، والأسهم لنقلها، والمسافة لإفلاتها، وEscape للإلغاء.
الرمز، وإشارة الأولوية (أشرطة كإشارة الهاتف، ومربّع أحمر للحرج)، والعنوان في سطرين على الأكثر، ثم الاستحقاق والتكلفة وصاحب البطاقة.
KanbanCard · PrioritySignalالأولويات الأربع، وعنوان طويل، وبطاقة بلا تفاصيل
الاحتمالية صفوفًا (الأعلى شبه مؤكد) والأثر أعمدةً تبدأ من اليمين. لون الخلية من منطقتها (الدرجة = الاحتمالية × الأثر)، والرقم عدد المخاطر فيها. انقر خلية لترى مخاطرها.
RiskMatrixالأثر
مخاطر الخلية المحددة
الاحتمالية: محتمل · الأثر: جسيمحرج
بلاطة لوحة المعلومات
الأثر
نقاط في أربعة أرباع بحسب قيمتين من 0 إلى 100 — المحور الأفقي يبدأ من اليمين في العربية. مصفوفة الأولوية (القيمة × الجهد) بالرقائق، وشبكة أصحاب المصلحة (النفوذ × الاهتمام) بالنقاط.
QuadrantMatrixأولوية الطلبات
مكاسب سريعة3
قيمة عالية / جهد منخفض
مشاريع استراتيجية3
قيمة عالية / جهد عالٍ
تحسينات بسيطة2
قيمة منخفضة / جهد منخفض
أعد التقييم2
قيمة منخفضة / جهد عالٍ
الجهد
المحدد: أتمتة التراخيص البلدية
أصحاب المصلحة
إبقاؤهم راضين2
إدارة عن قرب3
متابعة1
إبقاؤهم مطّلعين2
الاهتمام
هرم بخطوط وصل تتدلّى من اليمين في العربية: توسيع وطيّ، وتوسيع الكل وطيّ الكل، وبحث يُبرز الكلمة ويفتح فروعها، وتحديد بمربّعات (الأب «جزئي» حين يُحدَّد بعض أبنائه). لوحة المفاتيح: الأسهم وHome وEnd وEnter والمسافة.
Tree · Highlightالهيكل التنظيمي — مع البحث
المحدد: مكتب إدارة المشاريع المؤسسي (EPMO)
التسلسل الاستراتيجي — مع التحديد
2 محدّد
هيكل تجزئة العمل — «منصة الخدمات الرقمية الموحدة»
الشجرة نفسها من أعلى إلى أسفل بصناديق وخطوط. الإدارات تحت الوكالة تُرصّ في عمود ليبقى المخطط مقروءًا، والفرع المطويّ يُفتح بشارة «+عدد» تحت صندوقه. يتمرّر أفقيًا داخل إطاره.
OrgChartالجهة
هيئة تطوير منطقة الواحة
1,284 موظفًا
القطاع
قطاع التخطيط والاستراتيجية
277 موظفًا
القطاع
قطاع المشاريع والبنية التحتية
333 موظفًا
القطاع
قطاع التحول الرقمي والتقنية
306 موظفًا
الوكالة
وكالة الخدمات الرقمية
87 موظفًا
الإدارة
إدارة الخدمات الإلكترونية
الإدارة
إدارة البيانات والذكاء الاصطناعي
الوكالة
وكالة البنية التقنية
96 موظفًا
الإدارة
إدارة البنية التحتية التقنية
الإدارة
إدارة الأمن السيبراني
الإدارة
إدارة التطبيقات المؤسسية
القطاع
قطاع الخدمات المساندة
242 موظفًا
ما ينتظر ماذا، من اليمين إلى اليسار في العربية: منحنى من نهاية المصدر إلى بداية الهدف بسهم، والمسار الحرج بالأحمر وأسمك. مرّر المؤشر على مشروع لتُضاء روابطه.
DependencyLinksالمسار الحرج
مكتبةُ مخططاتِ منجز: مرسومةٌ بـ SVG دون مكتبةٍ خارجية، بخاناتِ ألوانٍ ثابتةِ الترتيب ومُتحقَّقٍ منها لعمى الألوان، وخطوطٍ رفيعة، وشبكةٍ هادئة، وتلميحٍ عائمٍ لا تقصّه البطاقة، وزرّ «عرض كجدول» يعرض الأرقامَ نفسها في جدولٍ حقيقي. الزمنُ يجري من اليمين في العربية، والأرقامُ لاتينيةٌ دائمًا.
العنوان والوصف ومفتاح الألوان والأزرار، وزرّ «عرض كجدول». ولكلّ مخطط حالةُ تحميلٍ وحالةٌ فارغةٌ هادئة بارتفاعه نفسه حتى لا تقفز البطاقة.
ChartFrame · ChartLegend · ChartTooltip · TipCardالتدفّق النقدي: المخطّط مقابل الفعلي
جاهز — جرّب «عرض كجدول»
التدفّق النقدي: المخطّط مقابل الفعلي
يُحمَّل
نسبةُ إنجاز برنامج التحوّل الرقمي
لا بيانات
لا توجد بيانات لعرضها بعد
ستظهر هنا حين تُسجَّل أول قيمة.
الفعلي خطٌّ متّصل، وخطّ الأساس متقطّعٌ رمادي، والمتوقّع يكمل بعد علامة «اليوم» بالخطّ نفسه متقطّعًا مع نطاق التوقّع، والمستهدف ذهبيّ بتسميته. مرّر المؤشّر أو استعمل الأسهم.
AreaLineChartنسبةُ إنجاز برنامج التحوّل الرقمي
تراكمي حتى نهاية 2026
الإنفاق الشهري للمحافظ
مليون ريال
المنافع المتحقّقة
قيمٌ قليلة
مجمّعةٌ أو مكدّسة، قائمةٌ أو أفقيّة للأسماء العربية الطويلة، وقيمٌ سالبة تنحرف عن الصفر، وعلامةُ مستهدفٍ لكلّ فئة.
ColumnChartالتدفّق النقدي: المخطّط مقابل الفعلي
مليون ريال شهريًا — الفعلي حتى أكتوبر
وضعُ الإنفاق في المحافظ
مليون ريال · أسماءٌ عربيةٌ طويلة
انحرافُ الميزانية حسب المحفظة
مليون ريال — الموجب: أقلّ من الميزانية
الإنفاق الربعي مقابل المستهدف
مليون ريال · بعلامات المستهدف وأرقامٍ على الأعمدة
وضعُ الإنفاق في المحافظ
قيمٌ سالبة
جزءٌ من كلّ في لمحة (ستّة أجزاءٍ على الأكثر)، والمجموع في الوسط، والمفتاح بالقيمة والنسبة. «RingStat» قيمةٌ واحدة من كلّ.
DonutChart · RingStatالميزانية حسب المحفظة
مليون ريال
2.7 مليار ر.س
إجمالي الميزانية
المشاريع حسب الحالة
40
مشروعًا
الميزانية المصروفة
38.4 مليون ر.س
من 48.5 مليون ر.س
منصة الخدمات الرقمية الموحدة
نسبة الإنجاز
المخطّط 74%
المنافع المتحقّقة
31.5 مليون ر.س
من 85 مليون ر.س
مؤشّرا أداء الجدول والتكلفة على قوسٍ من 0.6 إلى 1.4 بمناطقه الخضراء والكهرمانية والحمراء، والقيمة باسم منطقتها لا بلونها وحده. والحلقات المتّحدة المركز لعدّة نسب.
Gauge · RadialProgress0.87
خارج المسار
مؤشّر أداء الجدول (SPI)
EV 36.9 / PV 42.4 مليون
0.96
ضمن المسار
مؤشّر أداء التكلفة (CPI)
EV 36.9 / AC 38.4 مليون
1.04
ضمن المسار
SPI — برنامج المدن الذكية
تقدّمُ المشروع بأبعاده
منصة الخدمات الرقمية الموحدة
اتجاهٌ بحجم كلمة لخلية جدولٍ أو بطاقة رقم. لونه بحسب كون الاتجاه خبرًا جيدًا: نقصُ المخاطر المفتوحة أخضر، وتراجعُ SPI أحمر.
TrendSpark| المؤشّر | الآن | آخر 8 فترات |
|---|---|---|
| مؤشّر أداء الجدول (SPI) | 0.87 | |
| مؤشّر أداء التكلفة (CPI) | 0.96 | |
| المخاطر المفتوحة | 29 | |
| المنافع المتحقّقة (مليون) | 31.5 | |
| المهامّ المتأخّرة | 14 |
بنطاق المستهدف
المخاطرة أفقيًا والقيمة الاستراتيجية رأسيًا، ومساحةُ الفقاعة بحجم الميزانية، واللون بالمحفظة أو بالحالة. اضغط فقاعةً لفتح مشروعها.
BubbleChartالمشاريع حسب القيمة والمخاطرة
حجم الفقاعة = الميزانية
ملفٌّ على 3 إلى 10 محاور: نضجُ مكتب إدارة المشاريع الحالي مقابل المستهدف، أو بطاقةُ أداء مورّد.
RadarChartنضجُ مكتب إدارة المشاريع
من 5
بطاقةُ أداء المورّد — شركة الأفق للمقاولات
من 5
تقدّمُ المشروع بأبعاده
قيمٌ قليلة
القيمة المخطّطة والمكتسبة والتكلفة الفعلية تراكميًا حتى تاريخ البيانات، ثمّ التكلفة المتوقّعة متقطّعةً حتى الإنجاز، وخطّ الميزانية، وفجوتا SV وCV.
SCurveمنصة الخدمات الرقمية الموحدة
مليون ريال — بيانات أكتوبر 2026
شبكةٌ مظلّلة على تدرّجٍ واحد بحسب القيمة، وخريطةُ المخاطر 5×5 بمناطقها القُطرية وأعداد المخاطر. اضغط خليةً لتصفية سجلّ المخاطر.
HeatMap · RiskHeatMapاستغلال الموارد حسب الإدارة
نسبة الطاقة المحجوزة — مارس إلى أكتوبر
خريطةُ المخاطر
المخاطر المفتوحة في المحفظة
الأثر
المعروض: 2 من المخاطر — احتمال مرجّح × أثر جسيم
خريطةُ المخاطر
منصة الخدمات الرقمية الموحدة · قيمٌ قليلة
الأثر
من الميزانية الأصلية عبر كلّ تغييرٍ إلى الحالية؛ والزيادة في التكلفة حمراء لأنها خبرٌ سيّئ. وأفقيّاً لجسر التكلفة المتوقّعة.
Waterfallجسرُ الميزانية
منصة الخدمات الرقمية الموحدة
جسرُ التكلفة المتوقّعة عند الإنجاز
منصة الخدمات الرقمية الموحدة
سجلّ واحد يُبنى من شريط المرشحات والجدول: بحث يفهم الإملاء العربي، ومرشحات متعددة، وعروض محفوظة، وتحديد جماعي بشريط عائم، ونافذة تفاصيل جانبية تتنقّل بين الصفوف بالسهمين. كل ذلك في المتصفح فوق بيانات تجريبية.
جرّب: رتّب بالنقر على العنوان (Shift لترتيب ثانٍ)، حدّد صفوفًا لتظهر الإجراءات الجماعية، انقر صفًّا لفتح التفاصيل ثم تنقّل بـ ↑ و↓، واسحب حافة العمود لتغيير عرضه. الإعدادات تُحفظ في هذا المتصفح.
FilterBar + DataTable + useTableStateخيارات العرض
| إجراءات | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| مبنى المقر الرئيسي للهيئة | PRJ-2026-008 | المشاريع الرأسمالية | د. عبدالله الحربي | 10الإغلاق | حرج | 186.5 مليون | 92% | 0.74مؤشر أداء الجدول · 0.74 | 2027-09-22متأخر 75 يوم | ||
| مركز البيانات الاحتياطي | PRJ-2026-020 | التقنية والبنية الرقمية | م. فهد الدوسري | 10الإغلاق | حرج | 10 مليون | 96% | 0.60مؤشر أداء الجدول · 0.60 | 2027-01-01متأخر 75 يوم | ||
| برنامج تأهيل الكفاءات الوطنية | PRJ-2026-032 | التميز المؤسسي | د. عبدالله الحربي | 10الإغلاق | حرج | 14 مليون | 92% | 0.68مؤشر أداء الجدول · 0.68 | 2027-12-13متأخر 75 يوم | ||
| طريق الواحة الدائري — المرحلة الثانية | PRJ-2026-005 | البنية التحتية | ريم الزهراني | 9التسليم | متعثر | 142 مليون | 97% | 0.76مؤشر أداء الجدول · 0.76 | 2028-11-07متأخر 75 يوم | ||
| أكاديمية القيادات الحكومية | PRJ-2026-017 | التميز المؤسسي | م. سارة القحطاني | 9التسليم | متعثر | 11.7 مليون | 93% | 0.80مؤشر أداء الجدول · 0.80 | 2027-03-13متأخر 75 يوم | ||
| تحسين تجربة المستفيد | PRJ-2026-029 | التحول الرقمي | ريم الزهراني | 9التسليم | متعثر | 15.7 مليون | 97% | 0.88مؤشر أداء الجدول · 0.88 | 2028-02-25متأخر 75 يوم | ||
| مستودع البيانات المؤسسي | PRJ-2026-003 | التقنية والبنية الرقمية | م. لمى السبيعي | 7التنفيذ | معرّض للخطر | 40.6 مليون | 82% | 0.96مؤشر أداء الجدول · 0.96 | 2027-06-22متأخر 30 يوم | ||
| جسر وادي الرمة | PRJ-2026-006 | البنية التحتية | تركي المطيري | 7التنفيذ | معرّض للخطر | 38.9 مليون | 84% | 0.88مؤشر أداء الجدول · 0.88 | 2027-04-10متأخر 30 يوم | ||
| تطوير الواجهة البحرية | PRJ-2026-010 | المشاريع الرأسمالية | م. خالد الشهري | 4التخطيط | معرّض للخطر | 23.5 مليون | 14% | 0.82مؤشر أداء الجدول · 0.82 | 2027-07-01متأخر 30 يوم | ||
| تطبيق «واحتي» للمواطنين | PRJ-2026-015 | التحول الرقمي | نورة العتيبي | 7التنفيذ | معرّض للخطر | 39.3 مليون | 90% | 0.82مؤشر أداء الجدول · 0.82 | 2027-10-01متأخر 30 يوم | ||
| الإجمالي · 36 | 1.3 مليار | متوسط 51% | متوسط 0.92 |
صفوف أقصر لقراءة سجلّ طويل، مجمّعة حسب المرحلة؛ لكل مجموعة عدد ومجموع ميزانية، ويُطوى رأسها بنقرة.
DataTable defaultDensity='compact' groupingsخيارات العرض
| 82.2 مليون | متوسط 18% | متوسط 1.01 | |||
| شبكة تصريف مياه الأمطار شمال المدينة | البنية التحتية | على المسار | 25.2 مليون | 20% | 1.00مؤشر أداء الجدول · 1.00 |
| التميز المؤسسي وجائزة الأداء | التميز المؤسسي | على المسار | 29.2 مليون | 19% | 1.08مؤشر أداء الجدول · 1.08 |
| تطوير منظومة المشتريات | التميز المؤسسي | على المسار | 27.9 مليون | 15% | 0.94مؤشر أداء الجدول · 0.94 |
| 158.3 مليون | متوسط 12% | متوسط 0.94 | |||
| منصة الخدمات الرقمية الموحدة | التحول الرقمي | على المسار | 23.1 مليون | 12% | 0.98مؤشر أداء الجدول · 0.98 |
| تطوير الواجهة البحرية | المشاريع الرأسمالية | معرّض للخطر | 23.5 مليون | 14% | 0.82مؤشر أداء الجدول · 0.82 |
| إعادة تدوير مخلفات البناء | الاستدامة والبيئة | على المسار | 27.1 مليون | 11% | 1.06مؤشر أداء الجدول · 1.06 |
| محطة معالجة المياه الغربية | البنية التحتية | معرّض للخطر | 27.5 مليون | 13% | 0.90مؤشر أداء الجدول · 0.90 |
| منصة الذكاء الاصطناعي للتنبؤ بالحركة | التقنية والبنية الرقمية | على المسار | 25.8 مليون | 7% | 0.92مؤشر أداء الجدول · 0.92 |
| مواقف السيارات الذكية | البنية التحتية | معرّض للخطر | 31.4 مليون | 12% | 0.98مؤشر أداء الجدول · 0.98 |
| 129.1 مليون | متوسط 15% | متوسط 1.03 | |||
| مجمع الخدمات الحكومية الشامل | المشاريع الرأسمالية | على المسار | 42.7 مليون | 17% | 1.08مؤشر أداء الجدول · 1.08 |
| الإنارة الذكية للطرق الرئيسية | البنية التحتية | على المسار | 41.1 مليون | 16% | 0.98مؤشر أداء الجدول · 0.98 |
| مسارات المشاة والدراجات | البنية التحتية | على المسار | 45.3 مليون | 12% | 1.02مؤشر أداء الجدول · 1.02 |
| 446.2 مليون | متوسط 62% | متوسط 0.92 | |||
| بوابة المستثمر الإلكترونية | التحول الرقمي | على المسار | 9.5 مليون | 22% | 1.00مؤشر أداء الجدول · 1.00 |
| مستودع البيانات المؤسسي | التقنية والبنية الرقمية | معرّض للخطر | 40.6 مليون | 82% | 0.96مؤشر أداء الجدول · 0.96 |
| جسر وادي الرمة | البنية التحتية | معرّض للخطر | 38.9 مليون | 84% | 0.88مؤشر أداء الجدول · 0.88 |
| محطة الطاقة الشمسية للمرافق | الاستدامة والبيئة | معلّق | 9.6 مليون | 18% | 0.83مؤشر أداء الجدول · 0.83 |
| برنامج التشجير الحضري | الاستدامة والبيئة | على المسار | 41 مليون | 88% | 1.00مؤشر أداء الجدول · 1.00 |
| نظام تخطيط موارد المؤسسة | التقنية والبنية الرقمية | على المسار | 13.4 مليون | 20% | 1.08مؤشر أداء الجدول · 1.08 |
| تطبيق «واحتي» للمواطنين | التحول الرقمي | معرّض للخطر | 39.3 مليون | 90% | 0.82مؤشر أداء الجدول · 0.82 |
| إطار إدارة المخاطر المؤسسية | التميز المؤسسي | معرّض للخطر | 43.1 مليون | 92% | 0.92مؤشر أداء الجدول · 0.92 |
| حديقة الملك سلمان المركزية | المشاريع الرأسمالية | معلّق | 13.8 مليون | 26% | 0.87مؤشر أداء الجدول · 0.87 |
| المستشفى التخصصي — التجهيزات | المشاريع الرأسمالية | على المسار | 44.9 مليون | 86% | 1.08مؤشر أداء الجدول · 1.08 |
| الهوية الرقمية الموحدة للموظفين | التقنية والبنية الرقمية | على المسار | 11.9 مليون | 24% | 0.98مؤشر أداء الجدول · 0.98 |
| برنامج الاستدامة المائية | الاستدامة والبيئة | معرّض للخطر | 43.2 مليون | 88% | 0.90مؤشر أداء الجدول · 0.90 |
| مركز الاتصال الموحد 940 | التحول الرقمي | معرّض للخطر | 41.5 مليون | 90% | 0.82مؤشر أداء الجدول · 0.82 |
| مركز الزوار والمعارض | المشاريع الرأسمالية | معلّق | 12.3 مليون | 30% | 0.77مؤشر أداء الجدول · 0.77 |
| المختبر المركزي للمواد | المشاريع الرأسمالية | على المسار | 43.6 مليون | 94% | 0.94مؤشر أداء الجدول · 0.94 |
| 81.8 مليون | متوسط 55% | متوسط 1.03 | |||
| مركز العمليات الأمنية السيبرانية | التقنية والبنية الرقمية | على المسار | 26.9 مليون | 50% | 1.08مؤشر أداء الجدول · 1.08 |
| أتمتة رخص البناء | التحول الرقمي | على المسار | 25.4 مليون | 54% | 0.98مؤشر أداء الجدول · 0.98 |
| رصد جودة الهواء | الاستدامة والبيئة | على المسار | 29.6 مليون | 62% | 1.02مؤشر أداء الجدول · 1.02 |
| 169.4 مليون | متوسط 96% | متوسط 0.81 | |||
| طريق الواحة الدائري — المرحلة الثانية | البنية التحتية | متعثر | 142 مليون | 97% | 0.76مؤشر أداء الجدول · 0.76 |
| أكاديمية القيادات الحكومية | التميز المؤسسي | متعثر | 11.7 مليون | 93% | 0.80مؤشر أداء الجدول · 0.80 |
| تحسين تجربة المستفيد | التحول الرقمي | متعثر | 15.7 مليون | 97% | 0.88مؤشر أداء الجدول · 0.88 |
| 210.5 مليون | متوسط 93% | متوسط 0.67 | |||
| مبنى المقر الرئيسي للهيئة | المشاريع الرأسمالية | حرج | 186.5 مليون | 92% | 0.74مؤشر أداء الجدول · 0.74 |
| مركز البيانات الاحتياطي | التقنية والبنية الرقمية | حرج | 10 مليون | 96% | 0.60مؤشر أداء الجدول · 0.60 |
| برنامج تأهيل الكفاءات الوطنية | التميز المؤسسي | حرج | 14 مليون | 92% | 0.68مؤشر أداء الجدول · 0.68 |
| الإجمالي · 36 | 1.3 مليار | متوسط 51% | متوسط 0.92 |
السجلّ نفسه بطاقاتٍ للشاشات الضيقة أو للتصفح البصري؛ التحديد والتفاصيل والترقيم كما في الجدول.
DataTable renderCard defaultView='cards'خيارات العرض
منصة الخدمات الرقمية الموحدة
بوابة المستثمر الإلكترونية
مستودع البيانات المؤسسي
مركز العمليات الأمنية السيبرانية
طريق الواحة الدائري — المرحلة الثانية
جسر وادي الرمة
قبل أن يُضاف أي عنصر: رسالة هادئة تشرح ما سيظهر هنا.
DataTable rows={[]} empty={…}خيارات العرض
لا مشاريع في هذه المحفظة بعد
ستظهر هنا المشاريع فور اعتماد أول طلب في المحفظة.
المرشحات تستبعد كل الصفوف: يقول ذلك صراحة ويعرض «مسح المرشحات».
DataTable filtered onClearFiltersخيارات العرض
لا نتائج تطابق المرشحات
جرّب كلمة أخرى أو خفّف المرشحات لترى نتائج أكثر.
صفوف هيكلية أثناء الجلب، وحالة خطأ بزر «إعادة المحاولة» الذي يعيد التحميل فعلًا.
DataTable loading error={{ onRetry }}خيارات العرض
| المشروع | الرمز | المرحلة | الصحة | الميزانية | الإنجاز |
|---|
صوت المساعد الذكي في الشاشات: ماذا لاحظ، ولماذا، وما الأدلة، وما درجة الثقة — وزر لمتابعة السؤال في لوحة المساعد.
حافة متلألئة ذهبية إلى خضراء، وطيّ «لماذا؟»، وروابط أدلة إلى الشاشات، وشريط ثقة.
AiInsightCardرؤية ذكية
المشروع ضمن المسار اليوم، لكن اتجاه مؤشر أداء الجدول ومعدل إغلاق المهام والمخاطر المفتوحة ترجّح تأخر معلم «إطلاق الدفعة الثانية من الخدمات».
رؤية ذكية
لدى مشروع «بوابة المستثمر» سعة غير مستغلة بنسبة 35% في فريق التكامل خلال نوفمبر.
رؤية ذكية
ينتهي ضمان العقد CTR-2025-007 قبل 18 يومًا من موعد التسليم المتوقع.
طبقات عامة تفتحها أي شاشة: المساعد بسؤال جاهز، ولوحة الأوامر (Ctrl/⌘ K)، ومركز الإشعارات، وتسجيل خطر سريع.
useShell()الألوان والخطوط والزوايا، ثمّ أصغرُ القطع التي تُبنى منها كلُّ شاشة: الأزرار والشارات والصور الرمزية والتلميحات.
كلُّ لونٍ في الواجهة اسمٌ من هذه الأسماء، لا رمزٌ مكتوبٌ باليد. اضغط على أيّ لونٍ لتنسخ اسمه.
tokens · ColorSwatchلونان فقط يصنعان هويّة المشروع: لونُ الهويّة ولونُ الإبراز، ومعهما لونُ الحبر. تُكتب الثلاثةُ في كتلةٍ واحدةٍ أعلى ملفّ الأنماط، وكلُّ ما تراه هنا يُشتقّ منها — الفاتح والداكن معًا. غيّر الكتلةَ تتغيّر كلُّ شاشة.
لونُ الهويّة
لونُ الإبراز
درجاتُ الحبر
الأسطح
الخطوط الفاصلة
ألوانُ الحالة الأربعة
| اللون | خفيف | ممتلئ | متى يُستعمل |
|---|---|---|---|
الهويّةbrand | نموذج | نموذج | الإجراءُ الرئيسي والروابط والتحديد |
محايدneutral | نموذج | نموذج | المسودّات والإجراءات الثانوية |
الإبرازaccent | نموذج | نموذج | ما يستحقّ الانتباه بلطف |
نجاحsuccess | نموذج | نموذج | معتمد، مكتمل، في موعده |
تنبيهwarning | نموذج | نموذج | قريبٌ من موعده، يحتاج تعديلًا |
خطرdanger | نموذج | نموذج | متأخّر، حذف، رفض |
معلومةinfo | نموذج | نموذج | قيد المراجعة، ملاحظة |
ألوانُ الحالة ثابتة: لا تتبع تغييرَ الهويّة، فالأحمرُ أحمرُ في كلّ مشروع.
التدرّج والظلّ العميق
التدرّج المميّز
للإجراء الرئيسي الوحيد في الشاشة
bg-signatureالوهج
لرأس الصفحة أو حالةٍ فارغة
bg-glowالظلّ العميق
القائمة الجانبية والتلميحات
bg-deepثمانية أحجامٍ تكفي كلَّ شاشة. الأرقام دائمًا بالأرقام اللاتينية، وتصطفّ في الأعمدة.
text-*text-4xl36pxتقريرُ الأسبوع جاهزٌ للمراجعة
رقمٌ كبير في رأس الصفحة
text-3xl30pxتقريرُ الأسبوع جاهزٌ للمراجعة
عنوانُ الشاشة
text-2xl24pxتقريرُ الأسبوع جاهزٌ للمراجعة
عنوانُ قسم
text-lg18pxتقريرُ الأسبوع جاهزٌ للمراجعة
عنوانُ بطاقة
text-[15px]15pxتقريرُ الأسبوع جاهزٌ للمراجعة
فقرةٌ تمهيدية
text-sm14pxتقريرُ الأسبوع جاهزٌ للمراجعة
النصُّ العادي
text-xs12pxتقريرُ الأسبوع جاهزٌ للمراجعة
شرحٌ تحت حقل
text-2xs11pxتقريرُ الأسبوع جاهزٌ للمراجعة
تسميةٌ صغيرة فوق مجموعة
زاويةٌ واحدة أساسية (10 بكسل) تُشتقّ منها البقية، وخمسةُ ظلالٍ للارتفاع. في الوضع الداكن تصير الظلالُ أعمق.
rounded-* · shadow-*الزوايا
sm · 6md · 8lg · 10xl · 142xl · 18full · ∞الظلال
xssmmdlgxlbrandستّة أشكال، كلٌّ منها يأخذ أيَّ لونٍ من ألوان الحالة. الشكلُ المميّز للإجراء الرئيسي الوحيد في الشاشة.
Buttonأزرارٌ متلاصقة بإطارٍ واحد، أو صفٌّ متباعد. حجمُ المجموعة ولونُها يسريان على كلّ زرّ فيها.
ButtonGroupمتلاصقة
متباعدة
زرٌّ مربّعٌ بأيقونةٍ فقط. اسمُه إجباري، ويظهر تلميحًا عند المرور أو التركيز.
IconButtonالأشكال
الأحجام
إجراءٌ رئيسي، وبجانبه سهمٌ يفتح البدائل. القائمة تطفو فوق كلّ شيء ولا تُقصّ، وزرّ الهروب يغلقها.
SplitButtonالأشكال
الحالات
ينسخ النصّ ويقول «نُسخ» في مكانه نفسه لثانيتين. هذا زرُّ البيت نفسه، بألوان المكتبة.
CopyButtonhttps://house.example/invite/7Q2Kكلمةٌ قصيرة تصف حالة: خفيفة أو ممتلئة أو بإطار، مع نقطةٍ أو أيقونة.
Badgeخفيف
ممتلئ · بإطار
الأحجام
وسمٌ يُضغط ليتحدّد (للتصفية)، أو يُزال بزرّه، أو يحمل اسمَ شخص.
Tag · Chipللتصفية
قابلةٌ للإزالة
أشخاص
رقمٌ صغير في فقاعة يصير «99+» بعد حدّه، ونقطةٌ تنبض لما هو حيّ الآن.
Count · StatusDotالأشكال
الحالات
الحرفان الأوّلان من الاسم بلونٍ ثابتٍ للاسم نفسه في كلّ مكان، أو الصورة إن وُجدت، مع حالة الاتصال.
Avatar · AvatarGroupالأحجام
الحالات
مجموعة
كلمةٌ قصيرة عند المرور أو التركيز بلوحة المفاتيح. يشرح حتى زرّاً معطّلًا لماذا هو معطّل.
Tooltipمع اختصار
على زرٍّ معطّل
رموزُ المفاتيح (⌘ على أجهزة آبل، Ctrl في غيرها) وخطٌّ فاصل بكلمة أو بدونها.
Kbd · SeparatorKbd
Separator
كلُّ حقلٍ هنا مبنيٌّ على حقلِ البيت: العنوانُ فوق الخانة، والرسالةُ تحتها، والخانةُ بارتفاعٍ واحدٍ وإطارٍ واحد. القوائمُ والتقويمُ تنفتح فوق الصفحة ولا يقصّها شيء.
العنوان والخانة ورسالتها الخاصة تحتها. كلُّ حقولِ المكتبة تمرّ به.
Fieldالحالات
نرسل إليه رابطَ الدخول فقط.
اكتب بريدًا صحيحًا، مثل name@example.org.
سطرٌ واحد، مع أيقونةٍ أو بادئةٍ أو لاحقة، وعدّادٍ للأحرف عند الحاجة.
TextField · Inputالحالات
فارغة
مملوءة
الاسم مستعملٌ في مشروعٍ آخر.
معطّلة
للقراءة فقط
قيد التحقّق
إضافات
مقبولة
يظهر في رأس التقرير.0 / 40
الأحجام
تكبر مع الكتابة حتى حدٍّ ثم تمرّر، وتعدّ الأحرف إذا كان للنصّ حدّ.
TextAreaField · Textareaالحالات
تصل إلى المراجِع مع الطلب.81 / 200
اكتب السبب ليعرف صاحبُ الطلب ما يصلحه.
أزرار − و+ (اضغط مطوّلًا لتستمرّ)، والأسهم في لوحة المفاتيح، وحدٌّ أدنى وأعلى، والأرقام تُقرأ لاتينيةً ولو كُتبت بلوحةٍ عربية.
NumberFieldالحالات
من 0 إلى 80، بخطوة نصف ساعة.
أقلُّ عددٍ مسموح هو 1.
معطّلة
زرُّ مسحٍ يظهر مع الكتابة، وEsc يمسح، واختصارُ لوحة المفاتيح يضع المؤشّر فيها.
SearchFieldالحالات
زرُّ العين يُظهر ما كُتب. الخانة من اليسار إلى اليمين في اللغتين.
PasswordInputالحالات
اثنا عشر حرفًا على الأقل.
كلمة المرور قصيرة.
معطّلة
كلُّ اختيارٍ من قائمة يمرّ بها. القائمةُ القصيرة تنفتح كما هي؛ الطويلةُ (سبعة خيارات فأكثر) فيها خانةُ بحثٍ تفهم الإملاءَ العربيّ.
SearchSelectالحالات
قائمة قصيرة
قائمة طويلة فيها بحث
اختر مدينة الفرع.
معطّلة
تُكتب أو تُختار من التقويم. تقبل 25/2/2027 وأرقامًا عربية وتحوّلها إلى سنة-شهر-يوم.
DateInputالحالات
خلال هذا الشهر والذي يليه فقط.
اكتب التاريخ كاملًا.
خانةُ التاريخ نفسُها، ويظهر تحتها (أو بجانبها) اليومُ نفسُه بتقويم أمّ القرى، ويتبدّل مع كلِّ اختيار.
DateFieldالأشكال
بالهجري: 3 جمادى الأولى 1448 هـ
الهجري تحت الخانة
يظهر التاريخُ الهجريّ هنا بعد اختيار اليوم
الهجري بجانبها
لعرض تاريخٍ في جدولٍ أو بطاقة: الميلاديّ والهجريّ، في سطرٍ أو سطرين، مع إبراز التقويم الحاكم.
DualDateالعرض
في سطر
2026-10-143 جمادى الأولى 1448 هـفي سطرين
2026-10-143 جمادى الأولى 1448 هـالهجري هو الحاكم
2026-10-143 جمادى الأولى 1448 هـرمزُ الريال الرسميّ (ساما) مرسومًا، ويسبق الرقمَ في اللغتين. الأرقام لاتينية دائمًا.
Money · RiyalSignالعرض
كامل
4,850,000مختصر
4.9 مليونبالرمز النصّي
1,250 ر.سبالهللات
312.50تفصل الآلاف وأنت تكتب، وتقبل الأرقام العربية وتحوّلها لاتينية.
MoneyInputالحالات
القيمة المخزّنة: لا شيء بعد
المبلغ أكبر من الميزانية المعتمدة.
معطّلة
رمزٌ بعددٍ ثابتٍ من الأرقام يصل برسالةٍ أو بريد. الكتابة تنتقل للخانة التالية، واللصق يملأ الكلّ، والأرقام العربية تُقرأ لاتينية. يختلف عن خانة التحقّق بخطوتين أدناه.
OtpInputالحالات
فارغ
مكتمل
الرمز غير صحيح أو انتهت صلاحيته.
مقسوم 3 + 3
خانةٌ واحدة تقبل رمزَ تطبيق المصادقة (ستّة أرقام) أو رمزًا احتياطيًا بالشكل XXXXX-XXXXX.
CodeInputالحالات
اسحب أو اختر؛ تظهر الملفّاتُ تحتها بحجمها وزرِّ إزالة. لا ترسم تقدّمًا إلا لرفعٍ حقيقيّ يمرّره صاحبُ الشاشة.
FileDropالحالات
أرفق نسخةً موقّعة من العقد.
تشغيل أو إيقاف، و«بعضها» حين تكون مجموعةٌ مختارةً جزئيًا.
Checkboxالحالات
مربّع البيت الأصليّ (لنموذجٍ يُرسَل كما هو)
عدّة خيارات تحت عنوانٍ واحد، مع «تحديد الكلّ».
CheckboxGroupالحالات
اختر قناةً واحدة على الأقل.
قائمةٌ عمودية أو أفقية، ولكلّ خيارٍ سطرُ شرح.
RadioGroupالأشكال
اختر كم مرّةً يصلك التقرير.
لقرارٍ يحتاج كلُّ خيارٍ فيه جملةَ شرح.
RadioCardsلإعدادٍ يسري فورًا، بلا زرِّ حفظ.
Switchالحالات
الأحجام
اختيارٌ واحدٌ دائمًا بين خياراتٍ قليلة، مثل طريقة العرض.
SegmentedControlالحالات
الأشكال
عدّة اختياراتٍ تُشغَّل وتُطفأ، مع عددٍ اختياريّ.
ToggleChipsالحالات
الأحجام
قيمةٌ واحدة أو مدى، بعلاماتٍ تحته وفقاعةٍ بالقيمة أثناء السحب.
Sliderالحالات
كلُّ ما يظهر فوق الصفحة: النوافذ، واللوحة الجانبية، وسؤالُ التأكيد، والإشعارات، والقوائم، واللوحاتُ المعلّقة بزرّ — ومعها حالاتُ الصفحة الهادئة: فارغة، وتُحمَّل، وتتقدّم. كلُّ قائمةٍ وتقويمٍ هنا يُفتح كاملًا فوق النافذة التي تحمله، ومفتاحُ Esc يُغلق الطبقةَ العليا وحدها.
نافذةٌ فوق الصفحة لمهمّةٍ قصيرة: نموذج، أو تفاصيل، أو قرار. تُغلق بمفتاح Esc أو بالضغط خارجها أو بزرّ الإغلاق، ويعود التركيز إلى الزرّ الذي فتحها. على الجوال ترتفع من أسفل الشاشة.
Dialog · DialogCloseالأحجام
نموذجٌ داخل نافذة
لوحةٌ تنزلق من طرف الشاشة (من اليسار في العربية) لما يطول: مرشّحات، أو تفاصيلُ سجلّ، أو إعدادات. فيها الحقولُ نفسُها، وقوائمُها تُفتح فوقها كاملة.
Sheetيسأل قبل ما لا رجعةَ فيه. لا يُغلق بالضغط خارجه — الجواب نعم أو لا. يمكن أن يُطلب كتابةُ كلمةٍ قبل التأكيد، وأن يعمل العملُ داخله حتى ينتهي. يُفتح من أيّ مكان، حتى من داخل نافذةٍ مفتوحة.
AlertDialog · useConfirmالألوان
كلمةٌ قصيرة في زاوية الشاشة عن شيءٍ حدث في مكانٍ آخر أو في الخلفية. يختفي وحده، ويتوقّف عدّادُه ما دام المؤشّر فوقه، ويظهر فوق أيّ نافذةٍ مفتوحة.
toast · Toasterالألوان
الحالات
أفعالٌ تحت زرّ. تُفتح تحته أو فوقه حسب المساحة، ولا يقصّها جدولٌ ولا بطاقةٌ ولا نافذة. الأسهم تتنقّل، والحرفُ الأول يقفز إلى ما يبدأ به، ومفتاحُ Esc يُغلقها ويعيد التركيز للزرّ.
DropdownMenuكلُّ أنواع البنود
«⋯» في آخر الصفّ — تنمو القائمةُ نحو البداية
لوحةٌ صغيرة تحت زرّ: مرشّحٌ سريع، أو نموذجٌ من حقلين، أو معلومة. يدخلها التركيز، وتُغلق بالضغط خارجها أو بمفتاح Esc.
Popoverتصفيةٌ سريعة
تُطبَّق على القائمة تحتها.
تظهر عند مرور المؤشّر على اسمٍ أو رابط، أو عند الوصول إليه بلوحة المفاتيح، بعد لحظةٍ قصيرة. للمعاينة فقط — لا أزرارَ فيها.
HoverCardملاحظةٌ عن الشاشة كلّها: رفض، أو غياب، أو حالةٌ قائمة. ليست مكانَ خطأ الحقل — ذاك يُكتب تحت الحقل نفسه.
Calloutما دامت النتيجةُ في الطريق، يقول ذلك المكانُ الذي ستظهر فيه: الزرُّ يدور حتى تظهر البيانات الجديدة فعلًا، والقائمةُ تُعتم في مكانها ولا تُستبدل.
components/Pendingزرٌّ وقائمةٌ يشتركان في حالة انتظارٍ واحدة
القائمةُ لا تختفي ولا يضيع موضعُ التمرير: تُعتم فقط حتى يصل الصفُّ الجديد.
لوحةٌ ليس فيها شيءٌ بعد
المؤشّر الدوّار وحده
رسمٌ صغير، وعنوان، وسطرُ مساعدة، والخطوةُ التالية. أربعة أنواع: لا شيء بعد، ولا نتائج، وأنجزتَ كلَّ شيء، وتعذّر التحميل.
EmptyStateلا أحدَ هنا بعد
أضف أوّلَ شخصٍ إلى الفرع، وستظهر القائمةُ هنا.
لا نتائج لـ«محاسب أوّل»
جرّب كلمةً أقصر، أو امسح المرشّحات.
لا شيءَ ينتظرك
راجعتَ كلَّ الطلبات. سنخبرك حين يصل جديد.
تعذّر تحميلُ القائمة
انقطع الاتصال بالخادم. لم يضِع شيء.
الحجم الصغير — داخل بطاقة أو جدول
لا نتائج لـ«محاسب أوّل»
جرّب كلمةً أقصر، أو امسح المرشّحات.
شكلُ ما سيأتي، بضوءٍ هادئ يعبر باتجاه القراءة. للتحميل الأول فقط: ما هو معروضٌ ويتحدّث يبقى في مكانه ويُعتم.
Skeleton · SkeletonText · SkeletonAvatar · SkeletonCard · SkeletonTable · SkeletonTableRowكتلٌ وأسطر
بطاقة
جدول
كم بقي من شيءٍ يُقاس: ملفٌّ يُرفع، أو خطواتُ معالج، أو نسبةٌ من هدف. الأرقامُ لاتينية دائمًا.
Progress · SegmentedProgress · ProgressRingالشريط
اقتربت من الحدّ — احذف المرفقات القديمة.
الخطوات
الخطوة 2 من 4 · المرفقات
الحلقة
الأرقامُ المهمّة في بطاقة، والرسومُ البيانية التي تشرحها. ألوانُها من خانات الرسوم في كتلة العلامة، وأرقامُها لاتينية، والزمنُ فيها يجري من اليمين في العربية.
عنوان، ورقم، والتغيّر عن الفترة السابقة، ومنحنى صغير. التغيّر يُلوَّن بحسب كونه خبرًا جيدًا لا بحسب إشارته: نقصُ محاولات الدخول الفاشلة أخضر.
StatCardالأشخاصُ النشطون
1,284
+12%مقارنةً بالشهر الماضي
محاولاتُ دخولٍ فاشلة
37
−18%الأقلُّ أفضل
عملياتُ الدخول اليوم
412
+6%مقارنةً بالأمس
الحضورُ في الموعد
92%
الهدف 95%
طلباتٌ تنتظر
8
0%كالأسبوع الماضي — والبطاقةُ كلُّها رابط
مقارنةٌ بين فئات: أعمدةٌ قائمة للأشهر، مكدّسةٌ حين تتكوّن من أجزاء، أو صفوفٌ أفقية للأسماء العربية الطويلة. مرّر المؤشّر لترى التفاصيل.
BarChartأعمدةٌ مكدّسة
صفوفٌ أفقية
اتجاهٌ عبر الزمن، بخطٍّ أو أكثر، مع مساحةٍ ملوّنة تحت الأول وخطِّ هدفٍ متقطّع.
LineChartأجزاءُ كلٍّ واحد. تدور من الأعلى باتجاه القراءة؛ مرّر على جزءٍ ليظهر رقمُه ونسبتُه في الوسط.
Donut80
طلبًا
اتجاهٌ بلا محاور، بجانب رقمٍ أو داخل بطاقة. ينتهي بنقطةٍ عند آخر قيمة.
Sparklineيشرح ألوانَ الرسم. الخاناتُ الثماني تتبع العلامةَ والوضعَ الداكن، ولا لونَ مكتوبٌ بيده.
ChartLegendخاناتُ الرسوم الثماني
مع القيم