١ مرحبًا بك في رواق

رواق قالب لوحة تحكم عربي احترافي مبني بـ Tailwind CSS و Alpine.js و ApexCharts. الفلسفة بسيطة: ملفات HTML ثابتة جاهزة للنسخ في أي خادم — مفيش webpack، مفيش Node، مفيش build pipeline تعطّلك. تفتح أي صفحة في المتصفح أو ترفع المجلد على الاستضافة وتمشي.

لمن صُمِّم؟

شركات SaaS عربية، أنظمة ERP، POS، CRM، لوحات إدارية داخلية، وأي مشروع يخدم السوق السعودي/الخليجي.

المتطلبات؟

متصفح حديث فقط. لا Node ولا npm ولا أي runtime مطلوب لتشغيل القالب. تختياريًا Node لإعادة بناء Tailwind.

المخرج النهائي؟

٤٩ ملف HTML ثابت + assets (CSS مصيّر، JS، صور، خطوط). كل صفحة قائمة بذاتها، يمكنك نسخها لأي مشروع.

٢ البداية السريعة (٣ خطوات · ٥ دقائق)

1

فُكّ ملف الـ ZIP في مجلد على جهازك

المجلد الناتج يحتوي على ٥٠ ملف .html + مجلد assets/ + مجلد src/ للمصادر القابلة للتعديل.

2

شغّل خادم محلي بسيط

أي خادم HTTP يعمل. اختَر اللي يناسبك:

# Python (مثبت افتراضيًا على لينكس/ماك):
python3 -m http.server 8000

# Node:
npx serve .

# PHP:
php -S localhost:8000

# VS Code:
ثبّت إضافة "Live Server" واضغط Go Live

3

افتح المتصفح

روح على http://localhost:8000 — ستلقى لاندنج بيدج رواق. اضغط "المعاينة الحية" وستدخل على لوحة التحكم مباشرة.

ملحوظة: فتح ملف HTML مباشرة من الـ Finder/Explorer (file://) قد يمنع بعض المزايا مثل الـ Service Worker و الـ fetch المحلي. ينصح دائمًا بخادم HTTP محلي.

٣ هيكل المشروع

rewaq-arabic-dashboard/
├── *.html                  ← ٥٠ صفحة مبنية جاهزة (افتحها مباشرة)
├── build.py                ← يعيد توليد كل صفحة من src/partials + src/pages
├── src/
│   ├── partials/            ← _head, _sidebar, _topbar, _customizer, _scripts
│   └── pages/               ← محتوى كل صفحة (50 ملف، بدون wrapper)
├── assets/
│   ├── css/
│   │   ├── tailwind.css        ← المصيَّر (commit في الـ repo)
│   │   └── tailwind.built.css  ← (gitignored) بناء محلي اختياري
│   ├── js/                  ← ٢٠ ملف JS: customizer, i18n, charts, ai-assistant, cmdk, ...
│   ├── img/                 ← صور الواجهة و الـ favicons
│   └── fonts/               ← Tajawal (محلي)
├── docs/
│   ├── marketing/              ← screenshots + hero + preview video
│   └── *.md                    ← أدلة GETTING_STARTED, DEPLOYMENT, ...
├── tailwind.config.js          ← تخصيص الألوان والخطوط
├── package.json                ← (اختياري) لإعادة بناء Tailwind
├── manifest.webmanifest        ← PWA
├── sw.js                       ← Service Worker
├── LICENSE-AR.md / LICENSE-EN.md
└── README.md

💡 الخلاصة: ملفات .html في الجذر هي اللي ترفعها للاستضافة. مجلد src/ للتعديل والصيانة، لو غيّرت فيه شغّل python3 build.py لإعادة توليد الـ HTML.

٤ دليل الصفحات الـ ٥٠

كل صفحة قائمة بذاتها — ممكن تستخدمها كما هي أو تنسخ المحتوى لمشروع آخر.

📊 لوحات وتحليلات

index.html — لوحة التحكم الرئيسية
analytics.html — تحليلات متقدمة برسوم بيانية
reports.html — تقارير قابلة للتصدير PDF
activity.html — سجل النشاط
workspace.html — مساحات عمل متعددة

🛒 المبيعات والتجارة

pos.html — نقطة بيع تفاعلية
products.html — كتالوج المنتجات
orders.html — إدارة الطلبات
customers.html — قاعدة بيانات العملاء
invoice-print.html — فاتورة ZATCA معتمدة

📋 إدارة المشاريع

kanban.html — لوحة كانبان قابلة للسحب
calendar.html — تقويم بإصدارات شهرية/أسبوعية
projects.html — قائمة المشاريع
team.html — أعضاء الفريق
tasks.html — قائمة المهام

🔐 المصادقة والأمان

login.html — تسجيل دخول
register.html — إنشاء حساب
forgot-password.html — استعادة كلمة المرور
reset-password.html — إعادة تعيين
2fa.html — مصادقة ثنائية
api-keys.html — إدارة مفاتيح API

👤 حساب المستخدم

profile.html — الملف الشخصي
settings.html — الإعدادات
notifications.html — مركز الإشعارات
billing.html — الفوترة والاشتراكات
pricing.html — صفحة الباقات

✨ تسويق ومتنوعة

landing.html — صفحة هبوط متكاملة
components.html — مكتبة ٦٢+ مكوّن
faq.html — أسئلة شائعة قابلة للبحث
privacy.html / terms.html — قانوني
starter-kits.html — قوالب فرعية جاهزة
404.html, 500.html, 503.html — صفحات أخطاء

📁 القائمة الكاملة في docs/PAGES.md داخل المجلد.

٥ تخصيص الهوية

أربع تعديلات بتحوّل القالب من "رواق" إلى علامتك التجارية في أقل من ١٥ دقيقة.

١. اسم العلامة والـ Tagline

ابحث عن النصوص دي واستبدلها في كل الملفات:

# استبدال شامل
grep -rl "رواق" . | xargs sed -i 's/رواق/اسمك/g'
grep -rl "Rewaq" . | xargs sed -i 's/Rewaq/YourName/g'

٢. اللوجو

اللوجو الافتراضي SVG مدمج في src/partials/_sidebar.html و _topbar.html. استبدل الـ <svg> بـ <img src="./assets/img/logo.svg">.

الأحجام الموصى بها: 64×64 (sidebar) — 192×192 و 512×512 (PWA — manifest.webmanifest) — 32×32 (favicon).

٣. اللون الأساسي (Brand Color)

القالب يدعم ٨ ألوان جاهزة من الـ Customizer. لو عايز لون مخصص تمامًا، عدّل tailwind.config.js:

// tailwind.config.js
brand: {
  50:  '#FFF1F2',
  100: '#FFE4E6',
  500: '#F43F5E',  // الأساسي
  600: '#E11D48',
  700: '#BE123C',
  // ... باقي الـ shades
}

ثم أعد البناء: npm install && npm run build:css

٤. بريد الدعم والروابط

في src/pages/landing.html ابحث عن REWAQ_LINKS:

window.REWAQ_LINKS = {
  buyPersonal:   'https://your-store.com/personal',
  buyCommercial: 'https://your-store.com/commercial',
  license:       './LICENSE-AR.md',
  privacy:       './privacy.html',
  support:       'mailto:support@yoursite.com'
};

٦ الـ ٨ ألوان الجاهزة

المستخدم يقدر يبدّل بين الـ ٨ من Customizer Panel مباشرة — مفيش إعادة بناء مطلوبة.

indigo

إنديجو (الافتراضي)

teal

تركوازي

emerald

زمردي

amber

عسلي

rose

وردي

violet

بنفسجي

sky

سماوي

yellow

أصفر

💡 للمطورين: الألوان مُعرَّفة في assets/js/customizer.js كـ palette objects، والـ shades الكاملة (٥٠-٩٠٠) في tailwind.config.js تحت colors.brandPalettes.

٧ لوحة التخصيص (Customizer Panel)

زر في أسفل-اليسار (أيقونة الترس) يفتح لوحة كاملة بتسمح للمستخدم يعدّل الـ UI من غير ما يدخل في الكود.

تبديل الـ Theme (light / dark / system)
اختيار اللون الأساسي (٨ خيارات)
عرض الـ sidebar (موسّع / مطوي / مخفي)
التحويل بين RTL / LTR
اختيار الخط (Tajawal / Cairo / IBM Plex Arabic)
أحجام النصوص (مدمج / مريح)
Layout: vertical sidebar vs horizontal top nav

📍 لإخفاء الـ Customizer للمستخدم النهائي (عشان هو ميغيّرش الإعدادات): احذف السطر {CUSTOMIZER} من build.py أو احذف src/partials/_customizer.html.

٨ الوضع الداكن

مبني على الـ dark: variant من Tailwind. الـ class بيتضاف على <html> ويتخزّن في localStorage.

// كنترول من JS:
document.documentElement.classList.toggle('dark');
localStorage.setItem('rewaq-theme', 'dark'); // أو 'light' أو 'system'

// كل عنصر بيستخدم:
<div class="bg-white dark:bg-ink-900 text-ink-900 dark:text-white">

💡 للتخصيص: الـ shades الداكنة كلها من palette اسمها ink (مش slate الافتراضية). دي مضبوطة للراحة البصرية للنصوص العربية في الوضع الداكن.

٩ تعدد اللغات (AR + EN)

القالب يدعم العربية (افتراضي · RTL) والإنجليزية (LTR) عبر طبقة i18n خفيفة بدون أي مكتبة خارجية.

كيف يشتغل؟

العربية هي الـ "source of truth" — موجودة في الـ HTML مباشرة.
الإنجليزية في assets/js/i18n-en.js كقاموس مفاتيح.
أي عنصر له data-i18n="key" يتم استبدال نصه عند التبديل.
الـ <html dir> و lang يتغيّروا تلقائيًا.

إضافة لغة ثالثة (مثلاً فرنسي):

// 1. أنشئ assets/js/i18n-fr.js
window.__REWAQ_FR = {
  'nav.dashboard': 'Tableau de bord',
  'nav.analytics': 'Analytique',
  // ... باقي المفاتيح
};

// 2. ضيف <script src="./assets/js/i18n-fr.js"></script> في _scripts.html

// 3. عدّل i18n.js لإضافة 'fr' للـ supported languages

١٠ مكتبة المكونات (٦٢+ مكوّن)

صفحة كاملة فيها كل المكونات مع زر "نسخ الكود" جنب كل واحد.

افتح مكتبة المكونات

• أزرار (٧ أنماط)

• حقول نماذج

• Modals

• Tabs

• Accordions

• Toasts

• Badges

• Avatars

• Cards

• Tables

• Pagination

• Timelines

• Steppers

• Tooltips

• Stats

• Empty states

١١ الرسوم البيانية (ApexCharts)

القالب يستخدم ApexCharts (مفتوح المصدر، MIT). كل الرسوم تتفاعل مع الـ dark mode والـ brand color تلقائيًا.

الأنواع المتاحة:

Line · Area · Bar · Column · Donut · Pie · Radar · Heatmap · Funnel · Treemap

// مثال على رسم بياني جديد:
new ApexCharts(document.querySelector("#my-chart"), {
  series: [{ name: 'مبيعات', data: [30, 40, 35, 50, 49, 60] }],
  chart: { type: 'line', height: 300 },
  colors: [getComputedStyle(document.documentElement)
    .getPropertyValue('--brand-500').trim()],
  xaxis: { categories: ['يناير','فبراير','مارس','أبريل','مايو','يونيو'] }
}).render();

📂 كل الرسوم الحالية في assets/js/charts.js.

١٢ المساعد الذكي و لوحة الأوامر

🤖 AI Assistant

زر عائم بيفتح shaft للمحادثة. الافتراضي UI فقط (بدون backend AI حقيقي) — مهيأ للربط مع OpenAI / Anthropic / OpenRouter.

📂 assets/js/ai-assistant.js — استبدل دالة _mockReply() بنداء API الحقيقي.

⌨️ Ctrl+K Command Palette

اضغط Ctrl+K (أو ⌘+K) للبحث في الصفحات والإجراءات السريعة.

📂 assets/js/cmdk.js — أضف commands جديدة في array COMMANDS.

١٣ PWA (تطبيق ويب تقدّمي)

القالب جاهز ليُثبَّت على الموبايل/الديسكتوب كأي تطبيق. يعمل offline للأصول الأساسية.

ما المطلوب تخصيصه:

manifest.webmanifest — name, short_name, theme_color, icons (192×192 + 512×512)
sw.js — قائمة الـ assets للـ pre-cache + استراتيجية الـ cache
assets/img/icon-192.png و icon-512.png

⚠️ مهم: الـ PWA يحتاج HTTPS للعمل بشكل كامل (ما عدا localhost). تأكد من نشره على نطاق آمن.

١٤ فاتورة ZATCA (السعودية)

صفحة invoice-print.html تتبع متطلبات هيئة الزكاة والضريبة والجمارك للفاتورة الإلكترونية (Phase 1 — إصدار وحفظ).

المتطلبات المُلبّاة:

QR Code بصيغة TLV (Base64) — يحتوي على: اسم البائع، الرقم الضريبي، التاريخ، الإجمالي، VAT
تفاصيل ضريبة القيمة المضافة ١٥٪
الرقم الضريبي للبائع و المشتري
تنسيق ثنائي اللغة (عربي + إنجليزي)
طباعة A4 محسّنة (CSS print)

📂 توليد الـ TLV في assets/js/main.js — البحث عن generateZatcaTLV.

١٥ ربط الـ Backend

القالب front-end فقط — بياناته في assets/js/data.js كـ mock. ربطه بأي backend يتم في ٣ خطوات.

المبدأ العام:

استبدل window.__REWAQ_DATA في data.js بنداء fetch() لـ API endpoints
أضف helper function للـ auth (Bearer token من localStorage / cookies)
عدّل الـ login form في login.html ليرسل لـ /api/auth/login

مثال على fetch helper:

// assets/js/api.js (جديد)
const API_BASE = 'https://api.yoursite.com';

async function api(path, options = {}) {
  const token = localStorage.getItem('rewaq-token');
  const res = await fetch(`${API_BASE}${path}`, {
    ...options,
    headers: {
      'Content-Type': 'application/json',
      ...(token ? { Authorization: `Bearer ${token}` } : {}),
      ...options.headers,
    }
  });
  if (!res.ok) throw new Error(`API ${res.status}`);
  return res.json();
}

// الاستخدام:
const orders = await api('/orders');
const customer = await api('/customers/123');
await api('/products', { method: 'POST', body: JSON.stringify({...}) });

أنماط جاهزة لكل framework:

Laravel

استخدم Sanctum للـ token-auth. الصفحات تظل static — استدعِ كل API من JS.

Node + Express

قدّم الـ HTML من express.static() والـ API على /api/*.

Django / Flask

قدّم الـ HTML كـ static files و الـ API عبر DRF (Django) أو blueprints (Flask).

📖 الأدلة الكاملة لكل framework في docs/BACKEND_INTEGRATION.md

١٦ النشر

القالب static — يقدر يشتغل على أي استضافة. هنا الأكثر شيوعًا:

🖥️ cPanel / Hostinger / استضافة عادية

افتح File Manager في الـ cPanel
ادخل على public_html/
ارفع كل ملفات المشروع (ZIP ثم Extract داخل الـ panel)
افتح https://yoursite.com — تمام!

⚠️ تأكد إن index.html أو landing.html في الجذر.

▲ Vercel

npm i -g vercel
cd rewaq-dashboard
vercel --prod

ربما يسألك عن build command — اتركه فاضي (static site)، وعن output directory اكتب .

🌐 Netlify

روح على app.netlify.com/drop
اسحب مجلد المشروع كامل
هيرفعه ويديك URL مؤقت — تقدر تربط نطاق مخصص

🐙 GitHub Pages

ارفع المشروع على repo جديد
Settings → Pages → Source: main branch → root
هيشتغل على https://USER.github.io/REPO/

🐳 Docker

# Dockerfile (في الجذر)
FROM nginx:alpine
COPY . /usr/share/nginx/html
EXPOSE 80

# البناء والتشغيل:
docker build -t rewaq-dashboard .
docker run -p 8080:80 rewaq-dashboard

📖 تفاصيل أعمق + إعدادات SSL/CDN في docs/DEPLOYMENT.md

١٧ إعادة بناء Tailwind (اختياري)

الـ CSS المصيَّر مُرفق في الـ repo (assets/css/tailwind.css). محتاج إعادة بناء بس لو غيّرت الألوان/الخطوط/الـ utilities في tailwind.config.js.

# خيار 1: npm
npm install
npm run build:css

# خيار 2: Tailwind standalone CLI (بدون Node)
bash scripts/build-tailwind.sh

١٨ SEO و الـ Meta Tags

كل صفحة فيها OG tags + Twitter Card + canonical + structured data (JSON-LD).

قبل النشر، عدّل في `build.py`:

SITE_URL = "https://yourdomain.com"  # نطاقك الفعلي
DEFAULT_DESC = "..."                  # وصف موقعك
PUBLIC_PAGES = {"landing.html", "pricing.html", ...}  # الصفحات اللي تُفهرَس

ثم شغّل python3 build.py لإعادة توليد كل الـ HTML بالميتا الصحيحة.

✅ الصفحات اللي مش PUBLIC_PAGES بتاخد noindex, nofollow تلقائيًا (مثلاً dashboard, settings, login) عشان متظهرش في Google.

١٩ حل أكثر ١٠ مشاكل شيوعًا

الصفحة بتظهر بدون تنسيق (Tailwind مش شغّال)

المسار في _head.html نسبي. لو رفعت المشروع في subfolder، استخدم /folder/assets/... أو خلِّيها relative ./assets/....

الـ Dark Mode مش بيتفعّل

امسح الـ localStorage: localStorage.clear() في الـ console، أو من Customizer Panel اضغط Reset.

الخط Tajawal مش ظاهر

تأكد إن مجلد assets/fonts/ مرفوع. الخط محلي مش من Google Fonts.

الـ Service Worker مش شغّال

SW يحتاج HTTPS (ما عدا localhost). تأكد من تفعيل SSL على نطاقك. شيك في DevTools → Application → Service Workers.

الترجمة للإنجليزي ناقصة في بعض الأماكن

أضف المفاتيح الناقصة في assets/js/i18n-en.js ثم اعمل refresh. الـ key لازم يطابق data-i18n attribute.

الـ Customizer مفتوح وأنا عايز أخفيه

احذف السطر اللي بيستدعي CUSTOMIZER في build.py، أو أضف style="display:none" على الزر في _customizer.html.

الـ Tour دائمًا بيظهر في كل refresh

الـ tour يتخزن في localStorage.rewaq-tour-seen-v1. لإيقاف ظهوره نهائيًا للمستخدم النهائي: احذف assets/js/tour.js من _scripts.html.

الـ ZATCA QR ما بيتولّدش

يستخدم مكتبة QRCode.js المحمَّلة في _scripts.html. تأكد إنها محمَّلة (شيك في DevTools → Network).

الـ Charts بتظهر فاضية

ApexCharts بيتحمَّل من CDN. تأكد إنك online، أو حمِّلها محليًا وعدِّل المسار في _scripts.html.

عايز أحذف صفحة معيّنة

احذف الملف من الجذر (page.html) + من src/pages/ + من _sidebar.html الـ link.

📖 قائمة أوسع في docs/TROUBLESHOOTING.md

٢٠ الأسئلة الشائعة

٢٥+ سؤال موثّق بالكامل في صفحة منفصلة قابلة للبحث.

افتح صفحة الأسئلة الشائعة

٢١ الدعم

البريد الإلكتروني

رد خلال ٢٤ ساعة في أيام العمل.

https://t.me/+BgTwiUIww585MDk8

GitHub Issues

للبلاغات التقنية + الاقتراحات.

github.com/.../issues

قنوات مغلقة (للمشترين)

قناة Telegram خاصة لمشتري الترخيص التجاري.

(تفاصيل بعد الشراء)

💡 قبل ما تطلب دعم:

تأكد إنك قرأت قسم "حل المشاكل" فوق
افتح Developer Tools → Console وانسخ أي error
اذكر إصدار المتصفح + نظام التشغيل
لو ممكن، ارفق screenshot للمشكلة

٢٢ الترخيص

🟢 الترخيص الشخصي (Personal)

مشروع واحد لمستخدم نهائي واحد
غير مؤهل لإعادة البيع
تحديثات مجانية ٣ شهور
مناسب لـ: مشاريع شخصية، مواقع داخلية

🔥 الترخيص التجاري (Commercial)

مشاريع غير محدودة، عملاء غير محدودين
منتج SaaS مؤهل (مع التزام تعديل ٢٠٪+)
تحديثات مجانية ١٢ شهر
مناسب لـ: وكالات، شركات SaaS، freelancers

📄 النص الكامل في LICENSE-AR.md (عربي) و LICENSE-EN.md (إنجليزي).

٢٣ خارطة الطريق

الحالي

v2.1 — Released

٥٠ صفحة + ٦٢ مكوّن
i18n EN + AR كامل
Customizer Panel + ٨ ألوان
AI Assistant + Ctrl+K
PWA + ZATCA

قيد التطوير

v2.2 — Q1 2027

صفحة Inbox/Chat تشبه Intercom
محرر WYSIWYG عربي (TinyMCE wrapper)
Wizard خطوات متعددة
دعم Vite optional + Hot Reload

مخطط

v3.0 — Q3 2027

نسخة Vue 3 مرآة (نفس التصميم)
نسخة React (نفس التصميم)
Starter Kit Laravel كامل (Auth + CRUD)
Starter Kit Next.js

💡 كل التحديثات مجانية داخل فترة الترخيص (٣ شهور للشخصي · ١٢ شهر للتجاري).

توثيق رواق

عَجلان؟ ابدأ من هنا

فهرس المحتوى