# Church Offering Deposit Form

## Overview

This project builds upon the digital signature form project to create a mobile-friendly offering deposit entry form. The form will streamline the process of recording multiple donations collected during church offerings, with digital signatures from two counting staff members.

**<span class="token">Due Date: August 31, 2025</span>**

## Objectives

- Build a mobile-optimized offering deposit form as a Google Apps Script web app
- Support rapid entry of multiple deposits with minimal friction
- Implement dynamic data loading from Google Sheets for staff names and fund types
- Capture digital signatures from two counting staff members
- Generate timestamped PDF records with signatures
- Store all data in Google Sheets for tracking and reporting
- Embed the application in BookStack for easy access

## Prerequisites

Before starting, ensure you have completed the digital signature project and are familiar with:

- Google Apps Script web app development
- HTML5, CSS3, ES6+, and Web Components
- Digital signature capture using canvas/Signature Pad
- PDF generation and Google Drive integration
- Google Sheets API operations
- Mobile-responsive design principles

## Database Structure Setup

### 1. Create Required Google Sheets

Create three Google Sheets in your project folder:

**Sheet 1: "Offering Deposits" (Main Data Sheet)**

Columns: Date, Name, Payment Form, Amount, Offering, Note, Counter 1, Counter 2, Timestamp, PDF File ID, Drive Link, Status

**Sheet 2: "Offering Counting Staff"**

Columns: Name, Active Status Pre-populate with:

- Xiaoying Shen
- Weihong Xue
- Sinnie Lee
- Lisa Hsieh

**Sheet 3: "Funds"**

Columns: Fund Name, Active Status, Display Order Pre-populate with:

- General
- Church Building
- Benevolent
- Missions
- Short-Term Mission
- Capital Projects
- Next Generation Leadership

## Development Tasks

1. Create Efficient Deposit Entry Interface  
    **Design for Speed:**
    - Use a repeatable row component for deposits
    - Implement "Add Another" functionality
    - Auto-calculate running totals
    - Validate data as user enters data
2. Implement Dual Digital Signature
3. Backend Data Processing
4. PDF Generation with Signatures
5. Data Validation &amp; Error Handling
6. Optimize 
    - When entering the person who makes the donation, provide the ability to select people who make donations previously to allow rapid selection.

## Technical Specifications

**Mobile Breakpoints:**

- Ensure usability on both portrait and landscape
- Test on iOS Safari and Android Chrome

## User Experience Flow

1. **Setup Phase:** Select date and two counting staff members
2. **Data Entry:** Add deposits one by one with quick workflow
3. **Review:** Show summary with totals by fund type
4. **Signatures:** Capture both staff signatures
5. **Submission:** Generate PDF and save to sheets
6. **Confirmation:** Show success message with PDF link

## Final Deliverable

**Required Outputs:**

- Fully functional mobile-optimized web app
- Integration with three Google Sheets
- PDF generation with digital signatures
- BookStack embedded implementation
- Demo video (3-5 minutes) showing: 
    - Mobile form usage workflow
    - Multiple deposit entries
    - Signature capture process
    - Generated PDF output
    - Google Sheets data updates

**Testing Checklist:**

- [ ] Mobile responsiveness across devices
- [ ] Data validation and error handling
- [ ] Signature capture functionality
- [ ] PDF generation with proper formatting
- [ ] Google Sheets integration
- [ ] Performance under typical usage loads

## Questions or Issues?

If you encounter challenges during development, especially with mobile optimization or performance issues, reach out to Thian-Peng directly via Signal.

**Recommended Tools:**

- Use Cursor or GitHub Copilot for accelerated development
- Test on actual mobile devices, not just browser dev tools
- Consider using Chrome DevTools' mobile simulation for initial testing

---

*This project emphasizes practical mobile UX for rapid data entry while maintaining the robust backend architecture from the digital signature project.*