شاشات البناء

• يُظهر مرور الوقت
• يتيح "تمرير البناء"

مثال:

2025 ───────── 2026 ───────── 2027

        ▲ (اللحظة الحالية)

سلوك الواجهة

النقر على كائن

تُظهر:

• بطاقة
• المشاركون
• وضع
• المخاطر

النقر على شركة. يُظهر:

• المشاريع
• الدور
• التحميل

النقر على صلة. يُظهر:

• العقد
• المبلغ
• المواعيد
• وضع

النقر على خطر. يُظهر:

• الوصف
• درجة الخطورة
• المسؤول

نظام الألوان (إلزامي)

هذا يجعل الواجهة "ذكية" دون نص:

• 🟢 كل شيء على ما يرام
• 🟡 خطر
• 🔴 مشكلة
• 🔵 بيانات / محايد
• 🟣 المالية

الحد الأدنى لسيناريو المستخدم. تخيل مسؤولاً أو مستثمراً:

• يفتح النظام
• يرى الكيان
• يرى:
• المتعاقد
• البنك
• المخاطر
• يلاحظ 🔴
• ينقر
• يرى المشكلة
• يتخذ القرار

👉 كل ذلك خلال 10–20 ثانية

نسخة MVP من الشاشة (قابلة للتحقيق فعلياً)

يجب أن يكون:

✔ رسم بياني (عقد + روابط)

✔ بطاقة الكيان

✔ قائمة المشاركين

✔ الحالة الأساسية

✔ 1–2 الخطر

لا حاجة فوراً إلى:

❌ BIM

❌ تحليلات معقدة

❌ مرشحات معقدة

❌ لوحات مثقلة

كيفية تنفيذ ذلك (مباشرة وفق المكدس التقني)

Frontend:

• React + Next.js
• Cytoscape.js (رسم بياني)
• React Query
• Tailwind

المكونات:

GraphCanvas

• رسم العقد
• التكبير
• drag

NodeCard

• بطاقة منبثقة

SidePanel

• بيانات الكيان

Timeline

• الخط الزمني

JSON للرسم البياني (تحت واجهة المستخدم)

هذا هو التنسيق الذي يجب أن يصل من الـ backend:

{

  "nodes": [

    { "id": "p1", "type": "project", "label": "ЖК Север", "status": "risk" },

    { "id": "c1", "type": "company", "label": "العميل", "status": "active" },

    { "id": "c2", "type": "company", "label": "المقاول العام", "status": "active" },

    { "id": "r1", "type": "risk", "label": "تأخر المواعيد", "status": "high" }

  ],

  "edges": [

    { "source": "c1", "target": "p1", "type": "customer" },

    { "source": "c2", "target": "p1", "type": "contractor" },

    { "source": "p1", "target": "r1", "type": "risk" }

  ]

المعنى الرئيسي للشاشة. إذا صيغنا ذلك بصرامة:

👉 هذه ليست واجهة

👉 هذا تصوير للواقع الإنشائي

ما الذي تحصل عليه. بهذه الشاشة يمكنك:

• أن تعرض المنتج على المستثمر
• أن تعرض المنظومة على الدولة
• أن تعطي المطورين مهمة
• أن تطلق MVP

الخطوة التالية. الآن لديك 3 اتجاهات قوية:

1. 🔧 إعداد مواصفات واجهة المستخدم (بالبكسل)→ للمصمم

2. 💻 البدء بالكود (React + Cytoscape)→ نموذج أولي حقيقي

3. 📊 تجميع عرض تقديمي للمنتج→ لجذب الموارد

🎯 مواصفات واجهة المستخدم: بلورة البناء (الشاشة الأساسية)

البنية العامة للتخطيط

📐 شبكة الشاشة

┌───────────────────────────────────────────────┐

│ TOP BAR                                      │

├──────────────┬───────────────────────┬────────┤

│ LEFT MENU    │   GRAPH CANVAS        │ RIGHT  │

│              │                       │ PANEL  │

│              │                       │        │

├──────────────┴───────────────────────┴────────┤

│ TIMELINE                                      │

└───────────────────────────────────────────────┘

TOP BAR (الشريط العلوي)

التكوين:

🔍 البحث

• placeholder: “البحث عن كائنات، شركات…”
• debounce: 300ms
• النتائج:
• المشاريع
• شركات

🎛 المرشحات

• المنطقة (dropdown)
• الحالة (multi-select)
• المرحلة (multi-select)

🔄 الأوضاع

• toggle:
• الموضوع
• المنطقة
• القطاع

👤 المستخدم

• الصورة الرمزية
• القائمة:
  
• الملف الشخصي
• المخرج

LEFT MENU (التنقل)

العرض:

• 72px (collapsed)
• 240px (expanded)

العناصر:

السلوك:

• hover → tooltip
• active → إبراز
• click → تغيير السياق

لوحة رسم بياني (المركز)

المكوّن الأساسي: GraphCanvas

الوظائف: رسم البيان

• مكتبة: Cytoscape.js
• layout: force-directed

العقد

أنواع العقد:

• الاسم
• الحالة (اللون)
• المرحلة
• الميزانية
• المواعيد

👥 المشاركون

• قائمة الشركات
• الدور
• وضع

⚠️ المخاطر

• قائمة المخاطر
• severity
• وضع

📄 العقود

• رقم
• المبلغ
• وضع

🎯 الإجراءات

• «تعيين مهمة»
• «تحديث الحالة»
• «إضافة خطر»

تم اختيار الشركة

• الاسم
• النوع
• التقييم
• المشاريع
• جارٍ التحميل

تم اختيار الخطر

• الوصف
• المستوى
• التاريخ
• المسؤول
• زر «إغلاق»

TIMELINE (اللوحة السفلية)

المكوّن: Timeline

العرض البصري:

• drag → التنقل عبر الزمن
• click → الانتقال إلى تاريخ
• الوضع:
• الحالة الفعلية
• توقع

حالات النظام

Loading

• skeleton UI
• spinner في الوسط

Empty

• «لا توجد بيانات»
• زر «إنشاء كائن»

Error

• رسالة
• retry

Partial Data

• جزء من العُقد
• الإنذار

قواعد تجربة المستخدم (مهم جدًا)

لا نماذج مثقلة

→ الإجراءات فقط عبر السياق

كل شيء بالنقر

→ لا تنقل معقد

اللون = المعنى

→ يقرأ المستخدم الشاشة دون نص

80% — بصريًا

→ 20% — نصًا

DESIGN TOKENS

الألوان:

• Primary: #2563EB
• Success: #16A34A
• Warning: #F59E0B
• Danger: #DC2626
• Neutral: #64748B

الخلفية:

• Dark mode:
• bg: #0F172A
• panel: #1E293B

الطباعة:

• العنوان: 16–20px
• النص: 14px
• التسميات: 12px

COMPONENT TREE

App

 ├── TopBar

 ├── Sidebar

 ├── GraphCanvas

 │    ├── Node

 │    ├── Edge

 │    └── Tooltip

 ├── EntityPanel

 └── Timeline

المكوّنات الحرجة

إذا كنت ستبني MVP — ركّز على:

• GraphCanvas
• EntityPanel
• API graph

ما الذي يمنحه هذا. هذا بالفعل:

• وثيقة التصميم
• مهمة المصمم
• مهمة الواجهة الأمامية
• نموذج أولي للمنتج

استنتاج صادق. أنت الآن لا ترسم الواجهة فحسب.

👉 نحن نصنع طريقة جديدة لرؤية البناء

الخطوة التالية. الآن هناك اتجاهان قويان:

1. 👉 إنشاء هيكل Figma (الشاشات + الحالات)

2. 👉 البدء بالبرمجة (React + Cytoscape)

نصنع هيكل Figma بمستوى منتج، وليس مجرد "شاشات جميلة". سيكون نظاماً من الملفات والصفحات والمكونات والحالات يمكن تسليمه فوراً للمصمم والبدء بالعمل.

🎯 FIGMA STRUCTURE

كريستال البناء (MVP)

📁 هيكل ملف Figma

اسم الملف: Crystal Construction — MVP UI Kit & App

📂 الصفحات (Pages)

1. Cover

2. Design System

3. Components

4. Layouts

5. Screens (Core)

6. Screens (States)

7. Flows

8. Dev Handoff

Page 1: Cover

المحتوى:

• اسم المنتج
• الشعار (إن وُجد)
• الإصدار (v0.1 MVP)
• التاريخ

👉 هذا مهم للعروض التقديمية

🎨 الصفحة 2: نظام التصميم. أساس كل شيء. بدونه سيسود الفوضى لاحقاً.

اللون

🎯 الأساسية

• Primary — #2563EB
• Success — #16A34A
• Warning — #F59E0B
• Danger — #DC2626

🌑 الخلفية (واجهة داكنة)

• Background — #0F172A
• Panel — #1E293B
• Border — #334155

المحايدة

• Text Primary — #E2E8F0
• Text Secondary — #94A3B8

الطباعة

الشبكة

• 12-column grid
• Margin: 24px
• Gutter: 16px

Spacing

• 4 / 8 / 12 / 16 / 24 / 32

الصفحة 3: المكونات. هذا هو الأهم. اجعله كمكتبة.

Buttons

الخيارات:

• Primary
• Secondary
• Danger

الحالات:

• Default
• Hover
• Active
• Disabled

Input

• Default
• Focus
• Error
• Filled

Status Badge

Node (عقدة الرسم البياني). هذا مكوّن أساسي.

الخيارات:

Project Node

• كبير
• أزرق

Company Node

• متوسط
• رمادي

Risk Node

• صغير
• أحمر

Edge (الرابط)

• solid
• dashed
• red (risk)
• double (finance)

Panel Card

يُستخدم في اللوحة اليمنى:

• title
• content
• actions

الصفحة 4: التخطيطات. نجمع هيكل الشاشة.

Layout 1: Main App

TopBar

Sidebar | Graph | RightPanel

Timeline

Layout 2: Full Graph

بدون اللوحة اليمنى

Layout 3: List View

للمشاريع / الشركات

المحتوى:

• Graph
• Right Panel (object)
• Top Bar
• Timeline

👉 هذه الشاشة الرئيسية للمنتج

Screen 2: Project Lis

• جدول
• مرشحات
• وضع

Screen 3: Company List

• قائمة الشركات
• التقييم
• الأدوار

Screen 4: Analytics

• KPI
• رسوم بيانية
• خريطة المخاطر

🔄 صفحة 6: الشاشات (الحالات). مهم جدًا. هنا 80% تجربة المستخدم.

لـ Graph:

State 1 — Default

• تم اختيار الكائن

State 2 — Node Hover

• إبراز الروابط

State 3 — Node Selected

• اللوحة النشطة

للنظام:

Loading

• skeleton
• spinner

Empty

• «لا توجد بيانات»
• زر الحث على اتخاذ إجراء

Error

• رسالة
• retry

لللوحة اليمنى:

Object selected

Company selected

Risk selected

🔁 صفحة 7: التدفقات. نعرض السيناريوهات.

التدفق 1: عرض الكائن

• الفتح
• اختيار الكائن
• تحليل الروابط
• عرض المخاطر

التدفق 2: التعامل مع المخاطر

• النقر على المخاطر
• فتح اللوحة
• إغلاق المخاطر

التدفق 3: إضافة مشارك

👉 هذا مطلوب للمطورين

🛠 صفحة 8: تسليم التطوير. للتسليم إلى التطوير.

المحتوى:

• أبعاد المكونات
• spacing
• الألوان
• الحالة

إلزامي:

• Auto Layout
• Variants
• Naming system

Naming Convention

مهم جدًا.

المكونات:

Button/Primary

Button/Secondary

Node/Project

Node/Company

Node/Risk

Panel/Object

Panel/Company

Panel/Risk

الحالات:

Button/Primary/Hover

Node/Project/Active

Panel/Object/Expanded

ما يجب تنفيذه أولاً

اليوم 1–2:

• Design System
• Colors
• Typography

اليوم 3–4:

• Components
• Node
• Panel

اليوم 5–6:

• Main Screen

👉 بعد أسبوع سيكون لديك منتج بالفعل

استنتاج صادق. هذا لم يعد «تصميمًا».

👉 هذه هي النموذج التشغيلي لواجهة القطاع

الخطوة التالية 

1. 👉 بدء تطوير واجهة المستخدم (React)

2. 👉 إعداد عرض تقديمي للمنتج (استنادًا إلى Figma)