Web App

Daily Performance Portal

TypeScript

Web App

Daily Performance Portal

Build daily performance forms out of scored task lines.

0 stars 0 forks 0 issues Created Jul 2026

Preview

Illustrative UI preview
Daily Performance Portal — illustrative ui preview

A representative UI concept for this project — illustrative, not a screenshot of the running app. Explore the code and README below.

What this demonstrates

  • Primary language: TypeScript (98.9%)
  • Multi-language stack (3 languages)
  • Last updated 4 months ago

Tech stack

TypeScript 98.9%CSS 0.9%JavaScript 0.2%
TypeScriptReactNext.jsCSSTailwind CSSJavaScript

Overview

Daily Performance Portal is a web app project. It is built primarily with TypeScript, CSS, JavaScript. Build daily performance forms out of scored task lines..

Project README

RAHEDEEN™ — Daily Performance Portal

Role-based daily performance-form platform for employees. Built with Next.js 16 (App Router), TypeScript, Tailwind CSS v4, and Prisma ORM on PostgreSQL.

Admins compose performance forms out of scored task lines (dynamic form builder), assign them to teams, and employees fill in a daily submission that is auto-scored into a rating band. Managers review their team's submissions; reports show trends over time.

Stack

LayerTech
Frontend + BackendNext.js 16 App Router (RSC, Server Actions, API routes)
StylingTailwind CSS v4
ORM / DBPrisma 7 + PostgreSQL (via @prisma/adapter-pg)
AuthCustom email/phone/whatsapp + password, DB-backed sessions, bcrypt

Features

  • Auth — log in with email, phone, or WhatsApp number + password. Roles: Admin / Manager / Employee. Self-service password change at /account.
  • Admin — Form builder (/admin/forms) — dynamic forms → sections → task lines. Field types: scored count (target vs done), multi-select, select, currency, number, text, boolean, time, date. Per-line marks, fixed/employee targets, day schedules (daily / odd / even / specific weekdays), and rating bands. Deleting anything with history is blocked (archive via the Active toggle instead).
  • Admin — Users & Teams (/admin/users, /admin/teams) — full CRUD, role/team assignment, password reset, deactivate.
  • Employee — Daily form (/employee) — today's assigned form with only the fields applicable today, live auto-scoring, draft/submit (locks on submit).
  • Manager — Review (/manager) — team roster by date, open a submission, mark reviewed + remarks.
  • Reports (/admin/reports, /manager/reports) — team leaderboard + per-employee averages over 7 / 30 / 90 days.

Getting started

1. Provision the local database (one time)

sudo -u postgres psql -f scripts/db-setup.sql

Creates role daily_task + database daily_task_dev (with CREATEDB for Prisma's shadow DB). Using a hosted/shared DB instead? Just set DATABASE_URL in .env.

2. Create tables + seed

npm run db:migrate       # create the schema
npm run db:seed          # teams + demo admin/manager/employee logins
npm run db:seed:forms    # the real Sales & Media forms (from the source sheets)

3. Run

npm run dev              # http://localhost:3000

Demo logins (change after first login)

RoleLoginPassword
Adminadmin@rahedeen.comadmin123
Manager (Sales)manager@rahedeen.commanager123
Employee (Sales)employee@rahedeen.comemployee123
Employee (Media)media@rahedeen.commedia123

Login also works with each account's phone / WhatsApp number.

Scripts

  • npm run dev — development server
  • npm run build / npm run start — production build / serve
  • npm run db:migrate · db:seed · db:seed:forms · db:studio · db:generate

Note: dev and build share the .next folder. If you run npm run build and then npm run dev (or vice-versa) you may hit stale-manifest errors — delete .next and restart. Normal usage is one or the other.

Deployment

Requires a Node.js host and a PostgreSQL database.

  1. Set DATABASE_URL to the production Postgres connection string.
  2. npm ci && npm run db:generate
  3. npx prisma migrate deploy (applies migrations without a shadow DB)
  4. npm run build && npm run start (or deploy to a Node platform).

Cookies are secure in production, so serve over HTTPS.

Integrating with another system

This app is self-contained but designed to hand off later:

  • Database — point DATABASE_URL at the shared/other system's Postgres. The schema lives in prisma/schema.prisma; use prisma db pull to introspect an existing DB or migrate to apply ours.
  • Auth — currently custom (sessions in the Session table). To delegate to an external identity system, replace src/lib/auth.ts (getCurrentUser / session logic) — the rest of the app only depends on that module.
  • API — add route handlers under src/app/api/* (see api/health) to expose or ingest data.

Project layout

prisma/
  schema.prisma        # data model (users, teams, forms, submissions, scoring)
  seed.ts              # demo teams + users
  seedForms.ts         # real Sales + Media forms
scripts/db-setup.sql   # one-time DB provisioning
src/
  lib/                 # prisma, auth, scoring, reports, date, submissionDisplay
  components/          # shared ReportView
  app/(auth)/          # login + auth actions
  app/(app)/           # admin / manager / employee / account (role-guarded)
  app/api/health/      # backend health check

Build status

Auth · Form builder · Employee daily form + auto-scoring · Manager review · Users & Teams admin · Real forms seeded · Reports · Password change — all complete and verified. Production build passes.

Daily_Performance_Portal