# دليل الهوية البصرية - منصة B العقارية
## Visual Identity Guide - Farsakh Real Estate Platform

> **ملاحظة مهمة**: هذا الدليل مبني على تحليل شامل لـ `\00\users\marketer` ويجب استخدامه كمعيار موحد لجميع أجزاء المشروع.

---

## 📋 جدول المحتويات

1. [نظرة عامة](#نظرة-عامة)
2. [الألوان](#الألوان)
3. [الخطوط](#الخطوط)
4. [المكتبات والاعتمادات](#المكتبات-والاعتمادات)
5. [الأنماط والتصميم](#الأنماط-والتصميم)
6. [السلوكيات والتفاعلات](#السلوكيات-والتفاعلات)
7. [البنية العامة](#البنية-العامة)
8. [أمثلة الاستخدام](#أمثلة-الاستخدام)
9. [إرشادات إضافة مكتبات جديدة](#إرشادات-إضافة-مكتبات-جديدة)

---

## 🎨 نظرة عامة

الهوية البصرية لمنصة B العقارية تتميز بـ:
- **تصميم عصري ونظيف** يعتمد على Material Design principles
- **ألوان هادئة ومهنية** تعكس الثقة والاحترافية
- **تجربة مستخدم سلسة** مع تفاعلات سريعة وواضحة
- **دعم كامل للغة العربية** مع RTL (Right-to-Left)
- **استجابة كاملة** لجميع أحجام الشاشات

---

## 🎨 الألوان

### الألوان الأساسية (Primary Colors)

#### الأخضر الأساسي (Primary Green)
```css
#598227
```
- **الاستخدام**: الأزرار الأساسية، الروابط النشطة، العناصر المميزة
- **الرمز**: `primary-green`
- **مثال**: أزرار الإجراءات الرئيسية، عناصر القائمة النشطة

#### الأخضر الداكن (Dark Green)
```css
#206843
```
- **الاستخدام**: الحدود، التأكيدات، العناصر الثانوية
- **الرمز**: `dark-green`
- **مثال**: حدود الصور، خطوط الفواصل

#### البرتقالي (Orange)
```css
#ec750b
#ffa518
```
- **الاستخدام**: الأزرار عند Hover، التأكيدات، التنبيهات
- **الرمز**: `orange-primary` / `orange-secondary`
- **مثال**: تأثير Hover على الأزرار، علامات التبويب النشطة

### الألوان الثانوية (Secondary Colors)

#### الأزرق (Blue)
```css
#1890ff
```
- **الاستخدام**: الروابط، المعلومات، العناصر التفاعلية
- **الرمز**: `blue-primary`
- **مثال**: الروابط، أيقونات المعلومات

#### الأخضر النجاح (Success Green)
```css
#52c41a
```
- **الاستخدام**: حالات النجاح، التأكيدات الإيجابية
- **الرمز**: `success-green`
- **مثال**: حالات الموافقة، الإحصائيات الإيجابية

#### الأصفر التحذير (Warning Yellow)
```css
#faad14
```
- **الاستخدام**: التحذيرات، الحالات المعلقة
- **الرمز**: `warning-yellow`
- **مثال**: حالات الانتظار، التنبيهات

#### الأحمر الخطأ (Error Red)
```css
#ff4d4f
```
- **الاستخدام**: الأخطاء، الرفض، الحالات السلبية
- **الرمز**: `error-red`
- **مثال**: حالات الرفض، رسائل الخطأ

### لوحة الألوان الكاملة

```css
/* الألوان الأساسية */
--primary-green: #598227;
--dark-green: #206843;
--orange-primary: #ec750b;
--orange-secondary: #ffa518;

/* الألوان الثانوية */
--blue-primary: #1890ff;
--success-green: #52c41a;
--warning-yellow: #faad14;
--error-red: #ff4d4f;

/* الألوان المحايدة */
--text-primary: #333333;
--text-secondary: #666666;
--text-disabled: #999999;
--border-color: #e6e6e6;
--background-light: #fafafa;
--background-white: #ffffff;
```

### استخدام الألوان حسب السياق

#### حالات العناصر (Status Colors)
- **نشط/مفعل**: `#52c41a` (أخضر)
- **قيد المراجعة**: `#faad14` (أصفر)
- **مرفوض/موقوف**: `#ff4d4f` (أحمر)
- **معلومة**: `#1890ff` (أزرق)
- **افتراضي**: `#d9d9d9` (رمادي)

#### خلفيات الحالات
- **نجاح**: `#f6ffed` مع حد `#b7eb8f`
- **تحذير**: `#fffbe6` مع حد `#ffe58f`
- **خطأ**: `#fff2f0` مع حد `#ffccc7`
- **معلومة**: `#e6f7ff` مع حد `#91d5ff`

---

## 🔤 الخطوط

### الخط الأساسي
```css
font-family: 'Cairo', sans-serif;
```

**المصدر**: Google Fonts
```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" />
```

### أحجام الخطوط

```css
/* العناوين */
--font-size-h1: 32px;    /* العناوين الرئيسية */
--font-size-h2: 24px;    /* العناوين الثانوية */
--font-size-h3: 20px;    /* العناوين الفرعية */
--font-size-h4: 18px;   /* العناوين الصغيرة */

/* النصوص */
--font-size-large: 16px;   /* النصوص الكبيرة */
--font-size-base: 14px;    /* النصوص العادية */
--font-size-small: 12px;   /* النصوص الصغيرة */
--font-size-xs: 10px;      /* النصوص الصغيرة جداً */

/* الأوزان */
--font-weight-normal: 400;
--font-weight-bold: 700;
```

### اتجاه النص
```css
direction: rtl;              /* من اليمين لليسار */
text-align: right;           /* محاذاة النص */
writing-mode: horizontal-tb; /* الوضع الأفقي */
```

---

## 📚 المكتبات والاعتمادات

### المكتبات الأساسية

#### 1. React
```html
<!-- Development -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

<!-- Production -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
```
**الاستخدام**: بناء واجهات المستخدم التفاعلية

#### 2. Ant Design
```html
<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.24.13/antd.min.css" />

<!-- JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.24.13/antd.min.js"></script>
```
**الاستخدام**: مكونات UI جاهزة (أزرار، جداول، نماذج، إلخ)

#### 3. Font Awesome
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
<!-- أو -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
```
**الاستخدام**: الأيقونات

#### 4. Moment.js
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/locale/ar.js"></script>
```
**الاستخدام**: معالجة التواريخ والأوقات بالعربية

#### 5. Babel Standalone
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<!-- أو -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
```
**الاستخدام**: تحويل JSX إلى JavaScript في المتصفح

### المكتبات الإضافية (حسب الحاجة)

#### jQuery (اختياري)
```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
```

#### Bootstrap (اختياري - للـ Footer)
```html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
```

#### Axios (لطلبات HTTP)
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
```

---

## 🎭 الأنماط والتصميم

### البنية العامة (Layout Structure)

```html
<div class="layout" style="display:flex; font-family:'Cairo',sans-serif;">
    <!-- Sidebar -->
    <div class="sidebar-container">
        <?php include '../includes/sidebar.php'; ?>
    </div>
    
    <!-- Main Content -->
    <div class="main-content" style="flex: 1; padding: 20px;">
        <div id="root"></div>
    </div>
</div>
```

### Sidebar (القائمة الجانبية)

```css
.app-sidebar {
    width: 260px;
    height: 100vh;
    background: #fdfefe;
    border-left: 1px solid #e6e6e6;
    padding: 24px 20px;
    direction: rtl;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
}

.sidebar-title {
    font-size: 20px;
    font-weight: 700;
    color: #006400;
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 2px solid #e6e6e6;
}

.sidebar-menu li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    transition: all 0.2s;
}

.sidebar-menu li a.active {
    background: #598227;
    color: white;
}

.sidebar-menu li a i {
    font-size: 18px;
    color: #598227;
    width: 20px;
}

.sidebar-menu li a.active i {
    color: white;
}
```

### Header (الرأس)

```css
.header-container {
    font-family: 'Cairo', sans-serif;
    margin: 0;
    direction: rtl;
}

.ant-avatar {
    border-radius: 50%;
    border: 2px solid #206843;
    width: 50px;
    height: 50px;
}

.custom-button {
    background-color: #206843;
    border-color: #206843;
}

.custom-button:hover {
    background-color: #ec750b;
    color: black;
    border-color: #ec750b;
}
```

### الخلفية (Background)

```css
body {
    background: 
        radial-gradient(circle at 20px 20px, rgba(32, 104, 67, 0.1) 2px, transparent 2px),
        radial-gradient(circle at 60px 60px, rgba(32, 104, 67, 0.05) 1px, transparent 1px),
        linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    background-size: 40px 40px, 80px 80px, 100% 100%;
    min-height: 100vh;
}
```

### البطاقات (Cards)

```css
.stat-card {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.property-card {
    border-radius: 8px;
}

.office-card {
    border-radius: 8px;
    margin-bottom: 16px;
}
```

### الأزرار (Buttons)

```css
.ant-btn-primary {
    background: #598227;
    border-color: #598227;
    color: #fff;
}

.ant-btn-primary:hover {
    background: #ec750b;
    border-color: #ec750b;
    color: black;
}
```

### علامات التبويب (Tabs)

```css
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
    color: #ffa518;
    text-shadow: 0 0 .25px currentcolor;
}
```

### الحالات (Status Badges)

```css
.status-badge {
    border-radius: 4px;
    padding: 2px 8px !important;
    font-weight: 600;
}

.status-active {
    background-color: #52c41a !important;
    color: white !important;
}

.status-pending {
    background-color: #faad14 !important;
    color: white !important;
}

.status-suspended {
    background-color: #ff4d4f !important;
    color: white !important;
}
```

### حالات الإحالات (Lead Status)

```css
.lead-status-approved {
    color: #52c41a !important;
    background: #f6ffed !important;
    border-color: #b7eb8f !important;
}

.lead-status-rejected {
    color: #ff4d4f !important;
    background: #fff2f0 !important;
    border-color: #ffccc7 !important;
}

.lead-status-pending {
    color: #faad14 !important;
    background: #fffbe6 !important;
    border-color: #ffe58f !important;
}

.lead-status-under-review {
    color: #1890ff !important;
    background: #e6f7ff !important;
    border-color: #91d5ff !important;
}
```

---

## ⚡ السلوكيات والتفاعلات

### الانتقالات (Transitions)

```css
/* انتقالات سلسة */
transition: all 0.2s;
transition: all 0.3s ease;

/* انتقالات محددة */
transition: background-color 0.2s, color 0.2s;
transition: transform 0.3s ease;
```

### التأثيرات التفاعلية

#### Hover Effects
```css
.sidebar-menu li a:hover {
    background: rgba(89, 130, 39, 0.1);
    transform: translateX(-2px);
}

.custom-button:hover {
    background-color: #ec750b;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
```

#### Active States
```css
.sidebar-menu li a.active {
    background: #598227;
    color: white;
    font-weight: 600;
}
```

#### Loading States
```css
.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}
```

### الرسائل والتنبيهات

#### Success Message
```javascript
message.success('تمت العملية بنجاح');
```

#### Error Message
```javascript
message.error('حدث خطأ في العملية');
```

#### Warning Message
```javascript
message.warning('يرجى التحقق من البيانات');
```

#### Info Message
```javascript
message.info('معلومة إضافية');
```

### Modals (النوافذ المنبثقة)

```javascript
Modal.confirm({
    title: 'تأكيد العملية',
    content: 'هل أنت متأكد من تنفيذ هذه العملية؟',
    okText: 'نعم',
    cancelText: 'إلغاء',
    onOk: () => {
        // تنفيذ العملية
    }
});
```

---

## 🏗️ البنية العامة

### هيكل الملفات

```
users/
├── marketer/
│   ├── includes/
│   │   ├── header.php      # الرأس
│   │   ├── footer.php      # التذييل
│   │   ├── sidebar.php     # القائمة الجانبية
│   │   ├── libraries.php   # المكتبات
│   │   └── ...
│   ├── dashboard/
│   ├── leads/
│   ├── opportunities/
│   └── ...
```

### بنية الصفحة

```php
<?php
// 1. بدء الجلسة
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

// 2. Mock Data أو جلب البيانات من قاعدة البيانات
$data = [...];

// 3. تضمين المكتبات
include '../includes/libraries.php';
?>

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>عنوان الصفحة</title>
    
    <!-- CSS -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cairo&display=swap" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.24.13/antd.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
    
    <!-- JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.24.13/antd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/locale/ar.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    
    <style>
        body {
            background-color: #ffffff;
            direction: rtl;
            font-family: 'Cairo', sans-serif;
        }
        
        .ant-btn-primary {
            background: #598227;
            border-color: #598227;
        }
    </style>
</head>
<body>
    <?php include '../includes/header.php'; ?>
    
    <div class="layout" style="display:flex; font-family:'Cairo',sans-serif;">
        <div class="sidebar-container">
            <?php include '../includes/sidebar.php'; ?>
        </div>
        <div class="main-content" style="flex: 1; padding: 20px;">
            <div id="root"></div>
        </div>
    </div>
    
    <script type="text/babel">
        // React Component Code
    </script>
    
    <?php include '../includes/footer.php'; ?>
</body>
</html>
```

---

## 💡 أمثلة الاستخدام

### مثال 1: زر أساسي

```jsx
<Button 
    type="primary" 
    icon={<i className="fas fa-save"></i>}
    onClick={handleSave}
>
    حفظ
</Button>
```

### مثال 2: بطاقة إحصائية

```jsx
<Card className="stat-card">
    <Statistic
        title="إجمالي الإحالات"
        value={totalLeads}
        prefix={<i className="fas fa-users" style={{ color: '#1890ff' }}></i>}
        valueStyle={{ color: '#1890ff' }}
    />
</Card>
```

### مثال 3: جدول مع حالات

```jsx
<Table 
    dataSource={data} 
    columns={[
        {
            title: 'الحالة',
            dataIndex: 'status',
            render: (status) => {
                const statusMap = {
                    'active': { text: 'نشط', color: 'success' },
                    'pending': { text: 'قيد المراجعة', color: 'warning' },
                    'suspended': { text: 'موقوف', color: 'error' }
                };
                const statusInfo = statusMap[status] || { text: status, color: 'default' };
                return <Tag color={statusInfo.color}>{statusInfo.text}</Tag>;
            }
        }
    ]} 
/>
```

### مثال 4: Timeline (خط زمني)

```jsx
<Timeline>
    {events.map((event, index) => (
        <Timeline.Item
            key={index}
            color={getEventColor(event.type)}
            dot={<i className={`fas fa-${getEventIcon(event.type)}`}></i>}
        >
            <Text strong>{event.title}</Text>
            <div>{event.description}</div>
            <Text type="secondary">{formatDate(event.timestamp)}</Text>
        </Timeline.Item>
    ))}
</Timeline>
```

### مثال 5: Form (نموذج)

```jsx
<Form layout="vertical" onFinish={handleSubmit}>
    <Form.Item
        name="title"
        label="العنوان"
        rules={[{ required: true, message: 'يرجى إدخال العنوان' }]}
    >
        <Input placeholder="أدخل العنوان" size="large" />
    </Form.Item>
    
    <Form.Item>
        <Button type="primary" htmlType="submit" size="large">
            حفظ
        </Button>
    </Form.Item>
</Form>
```

---

## 📦 إرشادات إضافة مكتبات جديدة

### المعايير المطلوبة

عند إضافة مكتبة جديدة، يجب التأكد من:

1. **التوافق مع RTL**
   - يجب أن تدعم المكتبة الاتجاه من اليمين لليسار
   - يجب أن تكون قابلة للتخصيص للغة العربية

2. **التوافق مع React**
   - يجب أن تكون متوافقة مع React 17/18
   - يجب أن تدعم JSX

3. **الحجم والأداء**
   - يجب أن تكون خفيفة الوزن
   - يجب ألا تؤثر سلباً على أداء الصفحة

4. **التوثيق**
   - يجب أن تكون موثقة جيداً
   - يجب أن يكون لها أمثلة واضحة

### خطوات الإضافة

#### 1. إضافة المكتبة في `libraries.php`

```php
<!-- المكتبة الجديدة -->
<link rel="stylesheet" href="https://cdn.example.com/library.css" />
<script src="https://cdn.example.com/library.js"></script>
```

#### 2. توثيق الاستخدام

```markdown
### المكتبة الجديدة

**الاسم**: Library Name
**النسخة**: 1.0.0
**الاستخدام**: وصف الاستخدام
**المثال**:
```javascript
// مثال الكود
```
```

#### 3. تحديث هذا الدليل

- إضافة المكتبة في قسم [المكتبات والاعتمادات](#المكتبات-والاعتمادات)
- إضافة أمثلة الاستخدام في [أمثلة الاستخدام](#أمثلة-الاستخدام)

### مكتبات مقترحة (يمكن إضافتها)

#### 1. Chart.js (للرسوم البيانية)
```html
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
```

#### 2. React Router (للتنقل)
```html
<script src="https://unpkg.com/react-router-dom@6.0.0/umd/react-router-dom.production.min.js"></script>
```

#### 3. Lodash (للمساعدات)
```html
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
```

#### 4. Date-fns (بديل Moment.js)
```html
<script src="https://cdn.jsdelivr.net/npm/date-fns@2.29.3/index.min.js"></script>
```

---

## 📝 ملاحظات مهمة

### 1. الاتساق
- يجب استخدام نفس الألوان في جميع الصفحات
- يجب استخدام نفس الخطوط
- يجب اتباع نفس الأنماط

### 2. الأداء
- استخدام Production builds للمكتبات في الإنتاج
- تحميل المكتبات من CDN موثوق
- تقليل عدد المكتبات المطلوبة

### 3. إمكانية الوصول
- استخدام ARIA labels
- ضمان التباين الكافي للألوان
- دعم لوحة المفاتيح

### 4. الاستجابة
- استخدام Grid System من Ant Design
- اختبار على أحجام شاشات مختلفة
- استخدام Responsive Design

---

## 🔄 التحديثات

### الإصدار 1.0.0 (2024-12-24)
- إنشاء الدليل الأولي
- توثيق الألوان والخطوط
- توثيق المكتبات الأساسية
- إضافة أمثلة الاستخدام

---

## 📞 الدعم

لأي استفسارات أو اقتراحات حول الهوية البصرية:
- راجع هذا الدليل أولاً
- راجع ملفات `marketer` كمثال
- تواصل مع فريق التطوير

---

**آخر تحديث**: 2024-12-24
**الإصدار**: 1.0.0

