Ranaha Dashboard

A centralized system to manage your HR, clients, tasks, and services โ€” all in one place.

๐Ÿš€ View Live Demo

Project Overview

Ranaha Dashboard was built to solve a simple but crucial problem: scattered management tools that donโ€™t talk to each other. I designed this system to centralize HR operations, task assignments, client deliverables, and service records into a single, streamlined admin portal.

Itโ€™s especially aimed at startups and small businesses who need flexibility, speed, and real-time updates without enterprise complexity. The dashboard is modular and scalable โ€” meaning new features like announcements and attendance policies can be integrated smoothly as operations grow.

Attendance System

Attendance Management & Validation

One of the key problems I tackled was **late login tolerance** and validation. Employees can check in daily, but the system allows a configurable tolerance period (e.g., 15 minutes). Beyond this grace window, attendance needs to be explicitly approved by HR or the super admin โ€” which prevents abuse and keeps records clean.

Additionally, late login entries require users to submit a valid reason, which can later be audited by the HR team. Attendance counts, monthly reports, and late reason logs are automatically tallied and available to admins in real time.

Super Admin Access & User Onboarding

Security and role management were top priorities. New users cannot access the dashboard until the super admin explicitly grants them access. This ensures only verified employees enter the system.

Each user has a role (Admin, HR, Employee) that controls their dashboard view and what actions they can perform. This role-based access system is powered by Firebase Authentication combined with Firestore rules.

User Onboarding
Client Onboarding

Client Onboarding & Deliverables Tracking

When onboarding a new client, the dashboard records the **agreed deliverables, timelines, and project scope**. This is crucial for future clarity and dispute resolution. Each client has their own record of services, deadlines, and completed milestones.

This structure makes it easy for the admin to monitor timelines, and for the client to get periodic updates. Services are stored in separate collections to allow detailed tracking without bloating client documents.

Tech Stack & Tools Used

React.js (Frontend) Firebase Auth (HRM Login) Firestore (Attendance, Announcements) MongoDB (Task & Client Records) Firebase Storage (Files & Media) Node.js + Express (Backend APIs) Chakra UI + Tailwind CSS FullCalendar (Timeline Views) GSAP (Scroll Animations)