# Pattabhi Agro Foods - Blood Donation Camp Portal

A modern, responsive web registration and token management system for the **Pattabhi Agro Foods Blood Donation Camp (12-10-2026)** that saves donor information directly to **Google Sheets** in real time.

---

## 📋 Collected Fields (Matching Your Template)

| Field Name | Type | Notes |
| :--- | :--- | :--- |
| **EMP CODE** | Text | Auto-converted to uppercase (e.g., `EMP1042`) |
| **NAME** | Text | Full legal / employee name |
| **DEPARTMENT** | Dropdown + Custom | Production, QA, IT, HR, Accounts, Maintenance, etc. |
| **MOBILE NO** | Telephone | 10-digit number validation |
| **BLOOD GROUP** | Selection Badges | `A+`, `A-`, `B+`, `B-`, `AB+`, `AB-`, `O+`, `O-`, Not Sure |
| **TOKEN NO** | Auto-generated | Formatted sequential token (e.g., `BD-001`, `BD-002`) |
| **CAMP DATE** | Auto | Default: `12-10-2026` |
| **REGISTERED AT** | Timestamp | Auto-recorded timestamp |

---

## 🚀 Quick Setup Guide (Takes 3 Minutes)

### Step 1: Open Google Sheets
1. Open [Google Sheets](https://sheets.new) in your web browser.
2. Name your spreadsheet: **Pattabhi Agro Foods Blood Camp 2026**.
3. Rename the bottom sheet tab to: **`Donors`**.

---

### Step 2: Add Google Apps Script
1. In the top menu of your Google Sheet, click **Extensions** → **Apps Script**.
2. Erase any code inside `Code.gs`.
3. Open [`google-apps-script.js`](./google-apps-script.js) from this folder, copy all code, and paste it into the Apps Script editor.
4. Click the **Save** icon (diskette icon) or press `Ctrl + S`.

---

### Step 3: Deploy as Web App
1. Click the blue **Deploy** button (top right) → select **New deployment**.
2. Next to *Select type*, click the **gear icon** (⚙️) → choose **Web app**.
3. Fill in the deployment details:
   - **Description**: `Pattabhi Agro Blood Camp Sync`
   - **Execute as**: `Me (<your-email@gmail.com>)`
   - **Who has access**: **`Anyone`**  *(⚠️ Very Important: Must be set to "Anyone" so submissions can be received without login prompts)*.
4. Click **Deploy**.
5. If Google asks to *Authorize Access*:
   - Click **Authorize access** &rarr; choose your Google account.
   - Click **Advanced** (bottom left) &rarr; click **Go to Pattabhi Agro Blood Camp (unsafe)** &rarr; click **Allow**.
6. Copy the generated **Web app URL** (it ends with `/exec`).

---

### Step 4: Connect the Web App (Admin Protected)
1. Open [`index.html`](./index.html) in your browser.
2. Click **Sheet Sync** in the top navigation bar.
3. Enter the Administrator PIN when prompted:
   - **Admin PIN**: `456321`
4. Paste your copied Google Web App URL into the input field and click **Save & Connect**.
5. *(Optional)* Inside the settings modal, you can change your Admin PIN to any custom PIN!

---

## 🌟 Key Features Included

- **Live Two-Way Sync (Auto-detects Row Removals)**:
  - If a coordinator or admin deletes a row directly inside Google Sheets (e.g., cancelled donor or disqualified during screening), the web portal automatically detects the deletion within 10 seconds.
  - The donor table removes the row and decrements the "Registered Today" counter automatically.
  - You can also click **"Sync Now"** anytime for an instant forced refresh.
- **In-App Donor Removal**: A **Remove** button in the table allows desk volunteers to delete a donor directly from the web portal, which automatically removes that row from Google Sheets.
- **Instant Donor Token / Slip**: Generates a printable **Donor Pass** (e.g., `BD-001`) with all donor details to hand to the blood bank staff.
- **Reception Desk Mode (Kiosk)**: Toggle at the top for desk volunteers to rapidly enter walk-in donors without manual refreshes.
- **Camp QR Code Generator**: Click **Camp QR** to instantly show a QR code that employees can scan with their smartphone camera to register themselves.
- **Duplicate Prevention**: Detects if an Employee Code has already registered and alerts before saving.
- **Offline / Local Backup**: Keeps a running log of registered donors in the browser and includes an **Export CSV** button in case of network outages.
- **Automatic Sheet Styling**: The Google Apps Script automatically creates headers in crimson blood-red, bolds blood groups, and adjusts column widths.

---

## 📂 Project Structure

```text
Bloodcamp/
├── index.html              # Main responsive web application
├── styles.css              # Custom styling (mobile & print optimized)
├── app.js                  # Frontend logic & Google Apps Script fetch handler
├── config.js               # Application configuration settings
├── google-apps-script.js   # Ready-to-paste Google Apps Script code
└── README.md               # Step-by-step setup documentation
```