In production · CIM Dr MERAD · since October 2026 En production · CIM Dr MERAD · depuis octobre 2026قيد الاستعمال · CIM Dr MERAD · منذ أكتوبر 2026

Attendance & payroll appAppli de présence et de paieتطبيق الحضور والرواتب

A small internal tool used for real: it replaced the paper attendance book and the hand-made payroll of a medical imaging center. Staff attendance is entered each day, and everyone's pay for the month is always up to date. Un petit outil interne utilisé pour de vrai : il a remplacé le cahier de présence et le calcul de la paie à la main dans un centre d'imagerie médicale. Les présences sont saisies chaque jour, et la paie du mois de chacun est toujours à jour.أداة داخلية صغيرة تُستعمل فعلاً: عوّضت دفتر الحضور وحساب الرواتب يدوياً في مركز للتصوير الطبي. يُسجَّل الحضور كل يوم، وراتب الشهر لكل موظف محدَّث دائماً.

RoleRôleالدور
Solo project: needs, design, code, deployment and supportProjet solo : besoins, design, code, déploiement et suiviمشروع فردي: تحديد الاحتياجات، والتصميم، والبرمجة، والنشر، والمتابعة
UserUtilisateurالمستخدم
The center's administration, on a phone or a computerL'administration du centre, sur téléphone ou ordinateurإدارة المركز، عبر الهاتف أو الحاسوب
StackStackالتقنيات
Next.js 16 · React 19 · TypeScript · Tailwind CSS · Radix UI · Zod · Upstash Redis · Vercel
CodeCodeالشيفرة
gestion-de-presence ↗ · the live app is internal and password-protectedl'appli en ligne est interne et protégéeالتطبيق المنشور داخلي ومحمي

01The problemLe problèmeالمشكلة

Attendance was written in a notebook, and pay was calculated by hand at the end of each month. The rules are not simple: some staff are paid per day, the radiographer per exam, receptionists and technicians who also run scans get a bonus per exam, and replacement doctors are paid an amount set for the day. Mistakes were easy and the total was only known at the end of the month. Les présences étaient notées dans un cahier, et la paie calculée à la main en fin de mois. Les règles ne sont pas simples : certains sont payés à la journée, le manipulateur à l'acte, les réceptionnistes et techniciens qui font aussi des examens touchent un bonus par examen, et les médecins remplaçants sont payés un montant fixé pour la journée. Les erreurs étaient faciles et le total n'était connu qu'en fin de mois.كان الحضور يُسجَّل في دفتر، والرواتب تُحسب يدوياً في نهاية الشهر. والقواعد ليست بسيطة: بعضهم يُدفع له باليوم، والمُشغِّل (manipulateur) بالفحص، وموظفو الاستقبال والتقنيون الذين يُجرون فحوصاً أيضاً يتقاضون مكافأة عن كل فحص، والأطباء المستخلفون يُدفع لهم مبلغ يُحدَّد لليوم. كانت الأخطاء سهلة الوقوع، ولم يكن المجموع يُعرف إلا في نهاية الشهر.

02What it doesCe qu'elle faitماذا يفعل التطبيق

Monthly calendarCalendrier mensuelرزنامة شهرية

Attendance is entered day by day. The weekly rest day is locked, and each day shows who was there and what the day costs.Les présences se saisissent jour par jour. Le jour de repos est verrouillé, et chaque case montre qui était là et ce que coûte la journée.يُسجَّل الحضور يوماً بيوم. يوم الراحة مُقفَل، وكل خانة تُظهر من كان حاضراً وكم كلّف ذلك اليوم.

Several pay rulesPlusieurs modes de paieعدة طرق للدفع

Per day by role, per exam, a bonus per exam, a fixed monthly salary, or a free amount for replacements. Rates are set from the interface.À la journée selon le rôle, à l'acte, avec un bonus par examen, au salaire mensuel fixe, ou au montant libre pour les remplacements. Les tarifs se règlent depuis l'interface.باليوم حسب الدور، أو بالفحص، أو مع مكافأة عن كل فحص، أو براتب شهري ثابت، أو بمبلغ حر للاستخلاف. وتُضبط التسعيرات من الواجهة.

Live payslipFiche de paie en directكشف رواتب مباشر

Total per employee and grand total for the month, recalculated on every entry. A deactivated employee leaves the calendar but keeps their pay history.Total par employé et total général du mois, recalculés à chaque saisie. Un employé désactivé disparaît du calendrier mais garde son historique de paie.مجموع كل موظف والمجموع العام للشهر، يُعاد حسابهما عند كل إدخال. والموظف المعطَّل يختفي من الرزنامة لكنه يحتفظ بسجل رواتبه.

03Technical choicesChoix techniquesالخيارات التقنية

Phone firstD'abord le téléphoneالهاتف أولاً

Tab navigation, bottom sheets for entry and large touch targets. It can be installed on the home screen like an app.Navigation par onglets, saisie dans des panneaux en bas d'écran et grandes zones tactiles. Elle s'installe sur l'écran d'accueil comme une appli.تنقّل بالتبويبات، وإدخال في لوحات أسفل الشاشة، ومساحات لمس كبيرة. ويُثبَّت على الشاشة الرئيسية مثل أي تطبيق.

No lost entriesAucune saisie perdueلا يضيع أي إدخال

In Redis, each employee, each day and each rate is its own hash field. Every write only touches its own data, so two devices saving at the same time (a phone and a computer, for example) never overwrite each other.Dans Redis, chaque employé, chaque jour et chaque tarif est un champ séparé. Chaque écriture ne touche que sa propre donnée : deux appareils qui enregistrent en même temps (un téléphone et un ordinateur, par exemple) ne s'écrasent jamais.في Redis، كل موظف وكل يوم وكل تسعيرة حقل مستقل. وكل عملية كتابة لا تمسّ إلا بياناتها: جهازان يحفظان في الوقت نفسه (هاتف وحاسوب مثلاً) لا يمحو أحدهما ما سجّله الآخر أبداً.

Simple, solid accessUn accès simple et solideدخول بسيط ومتين

Every page and API route goes through one access check. The HttpOnly, Secure session cookie is derived from the password, so changing the password signs out every device at once. All API inputs are validated with Zod.Toutes les pages et routes API passent par un seul contrôle d'accès. Le cookie de session (HttpOnly, Secure) est dérivé du mot de passe : changer le mot de passe déconnecte tous les appareils d'un coup. Toutes les entrées de l'API sont validées avec Zod.تمرّ كل الصفحات ومسارات الـ API عبر نقطة تحقق واحدة. وملف الجلسة (cookie من نوع HttpOnly و Secure) مشتق من كلمة المرور: تغييرها يُخرج كل الأجهزة دفعة واحدة. وكل مدخلات الـ API يُتحقَّق منها باستعمال Zod.

Free to runGratuite à faire tournerتشغيل مجاني

Vercel and Upstash Redis free tiers, with automatic deployment on every push. In development the app switches to local JSON files, so production data is never touched by mistake.Offres gratuites de Vercel et d'Upstash Redis, avec déploiement automatique à chaque envoi. En développement, l'appli passe sur des fichiers JSON locaux pour ne jamais toucher aux données réelles par erreur.العروض المجانية لـ Vercel و Upstash Redis، مع نشر تلقائي عند كل تحديث. وأثناء التطوير، يعمل التطبيق على ملفات JSON محلية حتى لا يمسّ البيانات الحقيقية عن طريق الخطأ.

04Team managementGestion de l'équipeتسيير الفريق

05What I learnedCe que j'ai apprisما تعلّمته

  • Turning real, messy business rules into a clear data model and simple screens.Transformer de vraies règles métier, compliquées, en un modèle de données clair et des écrans simples.تحويل قواعد عمل حقيقية ومعقّدة إلى نموذج بيانات واضح وشاشات بسيطة.
  • Thinking about concurrent writes even in a small app, because data loss is not acceptable when it is someone's salary.Penser aux écritures simultanées même dans une petite appli, parce qu'une perte de données n'est pas acceptable quand il s'agit d'un salaire.التفكير في عمليات الكتابة المتزامنة حتى في تطبيق صغير، لأن ضياع البيانات غير مقبول عندما يتعلّق الأمر بالرواتب.
  • Supporting an app after launch: new roles and pay rules were added as the center's needs changed.Faire vivre une appli après sa mise en ligne : de nouveaux rôles et modes de paie ont été ajoutés au fil des besoins du centre.مواصلة تطوير التطبيق بعد نشره: أُضيفت أدوار وطرق دفع جديدة حسب احتياجات المركز.