Field Data Collection System

A cloud-based Monitoring & Evaluation platform built for field data collection with role-based access control, real-time dashboards, and attendance registers.

Features

• User Authentication - Login & registration with role-based access
• User Roles - Programs Manager, M&E Officer, Coordinator
• Data Entry - Field report submission (Sensitization, Registration, Mapping)
• Dashboard - Live stats, activity charts, recent submissions
• Reports - Full data table with search, filters, CSV export, print
• Attendance Registers - M&E-only feature for tracking attendees
• User Management - Manager-only user list view
• Cloud Database - SQLite (D1) with real-time sync across all users

Project Structure

field-data-system/
├── public/
│   └── index.html          # Frontend SPA
├── functions/
│   └── api/
│       ├── auth.js         # Login/Register API
│       ├── reports.js      # Reports CRUD API
│       ├── attendance.js   # Attendance API
│       └── users.js        # User management API
├── schema.sql              # D1 Database schema
├── wrangler.toml           # Cloudflare config
└── package.json            # Dependencies

Quick Deploy to Cloudflare

Step 1: Install Wrangler CLI

npm install -g wrangler

Step 2: Login to Cloudflare

wrangler login

Step 3: Create D1 Database

wrangler d1 create field-data-db

Copy the database_id from the output.

Step 4: Update wrangler.toml

Replace YOUR_DATABASE_ID_HERE in wrangler.toml with your actual database ID.

Step 5: Initialize Database

wrangler d1 execute field-data-db --file=./schema.sql

Step 6: Deploy

npm install
wrangler pages deploy public

Your app will be live at https://field-data-system.pages.dev

Default Login Credentials

Role	Email	Password
Programs Manager	admin@fielddata.org	admin123
M&E Officer	me@fielddata.org	me123
Coordinator	coord@fielddata.org	coord123

Role Permissions

Feature	Coordinator	M&E Officer	Manager
Submit Reports	✅	✅	✅
View Dashboard	Own only	✅ All	✅ All
View Reports	Own only	✅ All	✅ All
Attendance Registers	❌	✅	✅
User Management	❌	❌	✅
Export CSV	❌	✅	✅
Delete Reports	❌	❌	✅

API Endpoints

Endpoint	Method	Auth	Description
/api/auth?action=login	POST	No	Login user
/api/auth?action=register	POST	No	Register new user
/api/reports	GET	Yes	List reports
/api/reports	POST	Yes	Create report
/api/reports?id=X	DELETE	Yes (Manager)	Delete report
/api/attendance	GET	Yes (M&E/Manager)	List attendance
/api/attendance	POST	Yes (M&E/Manager)	Create attendance
/api/users	GET	Yes (Manager)	List users

Tech Stack

• Frontend: Vanilla HTML/CSS/JS (SPA)
• Backend: Cloudflare Pages Functions
• Database: Cloudflare D1 (SQLite)
• Hosting: Cloudflare Pages (Free tier)

Security Notes

• Passwords are stored in plain text in this demo. For production, use bcrypt hashing.
• Session tokens are base64-encoded JSON with expiration.
• CORS is configured for same-origin requests.

License

MIT