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.

Due Date: August 31, 2025

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 & 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.