رفد · لوحة متابعة الفحوصات

داشبورد Next.js بتقرا بياناتها من Google Sheet مباشرةً، وبتتحدث لوحدها كل دقيقة.

التشغيل

npm install
npm run dev

افتح http://localhost:3000.

لو ملف .env.local مش موجود، اللوحة بتشتغل على بيانات تجريبية وهمية ليها نفس شكل الشيت.

الربط بالشيت الحقيقي

1. ادخل على https://console.cloud.google.com واعمل مشروع جديد (أو اختار مشروع موجود).
2. من APIs & Services ← Library فعّل Google Sheets API.
3. من IAM & Admin ← Service Accounts اعمل Service Account جديد. مش محتاج أي صلاحيات (Roles).
4. افتح حساب الخدمة ← Keys ← Add key ← JSON. هيتحمّل ملف JSON، خليه سري ومترفعوش على GitHub.
5. افتح الشيت واعمل Share لإيميل حساب الخدمة ([email protected]) بصلاحية Viewer بس.
6. انسخ .env.example باسم .env.local واملاه:
   • GOOGLE_SHEET_ID: الجزء اللي بين /d/ و/edit في رابط الشيت.
   • GOOGLE_SERVICE_ACCOUNT_EMAIL: قيمة client_email من ملف JSON.
   • GOOGLE_PRIVATE_KEY: قيمة private_key من ملف JSON، بين علامتين تنصيص.
7. اعمل restart لـ npm run dev. الشارة اللي فوق هتتغير لـ «متصل بـ Google Sheets».

لازم الشيت يكون Google Sheet أصلي. لو جنب اسمه علامة .XLSX، اعمله File ← Save as Google Sheets واستخدم الرابط الجديد.

إزاي التحديث التلقائي شغال

• المتصفح بيطلب /api/data كل 60 ثانية، وبيقف لما التاب يبقى في الخلفية.
• السيرفر بيكلم Google مرة واحدة كل 30 ثانية كحد أقصى، مهما كان عدد اللي فاتحين اللوحة. ده أقل بكتير من حدود Sheets API المجانية.
• زرار «تحديث» بيجيب البيانات من الشيت فورًا ومن غير كاش.
• لو Google وقع لأي سبب، اللوحة بتفضل تعرض آخر نسخة ناجحة، ومعاها تنبيه.

الأوقات دي ممكن تتغير من .env.local (شوف .env.example).

البيانات والخصوصية

• رقم الهوية ورقم الجوال مابيطلعوش من السيرفر خالص، والمتصفح مابيستلمهمش.
• أسماء الأعمدة بتتعرف لوحدها حتى لو اختلفت الهمزات أو التاء المربوطة، أو اتغير ترتيب الأعمدة.
• خلايا «الأسرة» المدموجة بتتكمّل تلقائيًا للصفوف اللي تحتها.
• التواريخ المكتوبة كنص، والتواريخ الهجرية، ونتيجة قبل تاريخ الفحص، ورقم طلب غلط أو مكرر: كلها بتظهر في تبويب جودة البيانات برقم الصف في الشيت.

الهيكل

src/lib/sheets.ts      ← الاتصال بـ Google (JWT لحساب الخدمة) والكاش
src/lib/normalize.ts   ← تنظيف الصفوف وتحويلها لسجلات + اكتشاف مشاكل البيانات
src/lib/analytics.ts   ← المؤشرات والتجميعات اللي بتغذّي الرسوم
src/lib/demo-data.ts   ← بيانات وهمية للتجربة
src/components/        ← الداشبورد والرسوم (ECharts)
src/app/api/data/      ← الـ API اللي المتصفح بيطلبه