MultiTemplates & Dynamic Form Generation

.github/bug-fix/extra-bottom-spacing-fix.md

@@ -0,0 +1,123 @@
+# Bug Fix: Extra Bottom Spacing in Spreadsheet
+
+## Issue Description
+
+### Problem
+
+The spreadsheet component (SocialCalc) was displaying an unwanted ~100px margin/padding at the bottom of the page after initialization. This extra space was visible below the spreadsheet grid, creating a poor user experience on mobile devices.
+
+### Symptoms
+
+- Extra white space (~100px) below the spreadsheet
+- Spreadsheet not utilizing full available viewport height
+- Poor mobile layout experience
+
+### Root Cause
+
+The issue was caused by SocialCalc's automatic height calculation in the `DoOnResize()` function, which was:
+
+1. Using viewport-based calculations that included space for elements not present in our mobile layout
+2. Not properly accounting for the actual available content area height
+3. Applying default spacing values that weren't appropriate for our container setup
+
+## Solution
+
+### Files Modified
+
+#### 1. `/src/pages/Home.css`
+
+**Added CSS fixes to remove extra spacing:**
+
+```css
+/* SocialCalc specific fixes */
+#te_griddiv {
+  margin-bottom: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+/* Force SocialCalc container to not have extra bottom space */
+.SocialCalc-spreadsheet {
+  margin-bottom: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+/* Ensure the spreadsheet control fills available space properly */
+#tableeditor > div {
+  margin-bottom: 0 !important;
+  padding-bottom: 0 !important;
+}
+```
+
+#### 2. `/src/components/socialcalc/modules/init.js`
+
+**Enhanced the initialization function with proper height calculation:**
+
+```javascript
+// Calculate proper height for the spreadsheet
+let ele = document.getElementById("te_griddiv");
+if (ele) {
+  // Get the available height from the container
+  const container = document.getElementById("container");
+  const ionContent = document.querySelector("ion-content");
+  const ionHeader = document.querySelector("ion-header");
+
+  if (container && ionContent && ionHeader) {
+    const headerHeight = ionHeader.offsetHeight || 0;
+    const viewportHeight = window.innerHeight;
+    const availableHeight = viewportHeight - headerHeight;
+
+    // Set a more precise height for mobile
+    ele.style.height = availableHeight + "px";
+    ele.style.marginBottom = "0px";
+    ele.style.paddingBottom = "0px";
+  }
+}
+```
+
+### Technical Details
+
+1. **CSS Approach**: Used `!important` declarations to override SocialCalc's default styling that was adding unwanted spacing.
+
+2. **JavaScript Approach**:
+
+   - Calculate actual available height by subtracting header height from viewport height
+   - Explicitly set the grid container height to use all available space
+   - Remove any bottom margins/padding programmatically
+
+3. **Targeting**: Focused on the `#te_griddiv` element, which is the main SocialCalc grid container where the spacing issue originated.
+
+## Testing
+
+### Before Fix
+
+- Spreadsheet had ~100px extra space at bottom
+- Poor mobile user experience
+- Wasted screen real estate
+
+### After Fix
+
+- Spreadsheet extends to full available height
+- No extra spacing at bottom
+- Improved mobile layout
+- Better utilization of screen space
+
+## Impact
+
+- **User Experience**: Significantly improved mobile layout
+- **Performance**: No performance impact
+- **Compatibility**: Maintains compatibility with existing functionality
+- **Responsive Design**: Better mobile responsiveness
+
+## Related Issues
+
+This fix addresses layout issues specifically related to:
+
+- Mobile viewport calculations
+- SocialCalc integration with Ionic framework
+- Container height management in single-page applications
+
+---
+
+**Date**: August 30, 2025
+**Fixed By**: Assistant
+**Tested On**: Mobile browsers, various viewport sizes

DYNAMIC_FORM_UPDATE_SUMMARY.md

@@ -0,0 +1,142 @@
+# Dynamic Form Component Update Summary
+
+## Overview
+
+Successfully updated the dynamic form component to support automatic form type changes based on the current sheet ID, eliminating the need for manual footer selection.
+
+## Key Changes Made
+
+### 1. **InvoiceContext.tsx** - Enhanced Context with Sheet Tracking
+
+```typescript
+// Added new state and functionality
+const [currentSheetId, setCurrentSheetId] = useState<string | null>(null);
+
+// Auto-update sheet ID when template changes
+const updateActiveTemplateData = (templateData: TemplateData | null) => {
+  setActiveTemplateData(templateData);
+  if (templateData && templateData.msc.currentid) {
+    setCurrentSheetId(templateData.msc.currentid);
+  }
+};
+```
+
+### 2. **DynamicFormManager.ts** - Sheet-Based Form Generation
+
+```typescript
+// New method for sheet-based form sections
+static getFormSectionsForSheet(
+  template: TemplateData,
+  sheetId: string
+): DynamicFormSection[] {
+  const cellMappings = template.cellMappings[sheetId];
+  if (!cellMappings) return [];
+  return this.generateFormSections(cellMappings);
+}
+```
+
+### 3. **DynamicInvoiceForm.tsx** - Automatic Form Switching
+
+```typescript
+// Removed footer selection, now uses current sheet automatically
+const { activeTemplateData, currentSheetId } = useInvoice();
+
+const effectiveSheetId = useMemo(() => {
+  return currentSheetId || currentTemplate?.msc?.currentid || "sheet1";
+}, [currentSheetId, currentTemplate]);
+
+const formSections = useMemo(() => {
+  if (!currentTemplate) return [];
+  return DynamicFormManager.getFormSectionsForSheet(currentTemplate, effectiveSheetId);
+}, [currentTemplate, effectiveSheetId]);
+```
+
+### 4. **SheetChangeMonitor.ts** - New Utility for Real-time Sheet Detection
+
+```typescript
+export class SheetChangeMonitor {
+  static initialize(updateSheetId: (sheetId: string) => void) {
+    // Polls SocialCalc every 500ms to detect sheet changes
+    this.intervalId = setInterval(() => {
+      this.checkCurrentSheet();
+    }, 500);
+  }
+
+  private static checkCurrentSheet() {
+    const control = SocialCalc.GetCurrentWorkBookControl();
+    const currentSheetId = control.currentSheetButton.id;
+
+    if (currentSheetId !== this.lastKnownSheetId) {
+      this.updateSheetIdCallback(currentSheetId);
+    }
+  }
+}
+```
+
+### 5. **Home.tsx** - Integration with Sheet Monitor
+
+```typescript
+// Initialize sheet change monitor after app loads
+useEffect(() => {
+  if (fileName && activeTemplateData) {
+    const timer = setTimeout(() => {
+      SheetChangeMonitor.initialize(updateCurrentSheetId);
+    }, 1000);
+
+    return () => {
+      clearTimeout(timer);
+      SheetChangeMonitor.cleanup();
+    };
+  }
+}, [fileName, activeTemplateData, updateCurrentSheetId]);
+```
+
+## How It Works
+
+1. **Sheet Detection**: The `SheetChangeMonitor` continuously monitors SocialCalc for sheet changes
+2. **Context Update**: When a sheet change is detected, the `currentSheetId` in the React context is updated
+3. **Form Re-generation**: The `DynamicInvoiceForm` automatically re-renders with the appropriate form fields for the new sheet
+4. **Persistence**: The current sheet ID is saved to localStorage for session persistence
+
+## Form Structure Examples
+
+### Sheet 1 (Service Invoice)
+
+- **Heading**: General heading field
+- **Items**: Description, Hours, Rate columns
+
+### Sheet 2 (Product Invoice)
+
+- **Heading**: General heading field
+- **Items**: Description, Qty, Price columns (different from Sheet 1)
+
+### Sheet 3 (Detailed Invoice)
+
+- **Heading**: General heading field
+- **Date**: Invoice date
+- **Invoice Number**: Invoice identifier
+- **From**: Company details (Name, Address, Phone, Email)
+- **Bill To**: Customer details (Name, Address, Phone, Email)
+- **Tax Percentage**: Tax rate
+- **Other Charges**: Additional charges
+- **Notes**: Multiple note fields
+
+## Benefits
+
+✅ **Automatic Form Switching**: No manual footer selection required
+✅ **Real-time Updates**: Form changes immediately when sheets are switched
+✅ **Better UX**: Seamless integration with spreadsheet navigation
+✅ **Type Safety**: Full TypeScript support with proper interfaces
+✅ **Persistence**: Sheet state is maintained across sessions
+✅ **Error Handling**: Graceful fallbacks when sheet data is unavailable
+
+## Testing
+
+The implementation includes:
+
+- Proper error handling for missing sheet data
+- Fallback to default sheet ("sheet1") when current sheet is unavailable
+- Cleanup functions to prevent memory leaks
+- Console logging for debugging during development
+
+This update provides a much more intuitive user experience where the form automatically adapts to the current spreadsheet context without requiring manual intervention.

LOGO_SIGNATURE_REFACTOR.md

@@ -0,0 +1,44 @@
+## Logo and Signature Coordinates Refactoring
+
+### Summary
+
+Updated FileOptions.tsx to use activeTemplateData from the InvoiceContext instead of deprecated getLogoCoordinates() and getSignatureCoordinates() functions.
+
+### Changes Made
+
+1. **FileOptions.tsx Updates:**
+
+   - Added `activeTemplateData` to the destructured context values from `useInvoice()`
+   - Updated `handleSelectLogo()` to use `activeTemplateData.logoCell[billType]` instead of `AppGeneral.getLogoCoordinates()`
+   - Updated `handleRemoveLogo()` to use `activeTemplateData.logoCell[billType]` instead of `AppGeneral.getLogoCoordinates()`
+   - Updated `handleSelectSignature()` to use `activeTemplateData.signatureCell[billType]` instead of `AppGeneral.getSignatureCoordinates()`
+   - Updated `handleRemoveSignature()` to use `activeTemplateData.signatureCell[billType]` instead of `AppGeneral.getSignatureCoordinates()`
+   - Added proper error handling for cases where activeTemplateData is null or coordinates are unavailable
+   - Implemented support for both string and object-based coordinate definitions in template data
+
+2. **device.js Module Cleanup:**
+   - Removed deprecated `getLogoCoordinates()` function
+   - Removed deprecated `getSignatureCoordinates()` function
+   - Kept only `getDeviceType()` function as it's still needed
+
+### Benefits
+
+- **Better Architecture:** Logo and signature coordinates are now sourced directly from template metadata instead of hardcoded device-specific mappings
+- **Dynamic Positioning:** Coordinates can vary per template and bill type, providing more flexibility
+- **Cleaner Code:** Removed deprecated functions and their hardcoded coordinate mappings
+- **Type Safety:** Better TypeScript support with proper template data interfaces
+- **Error Handling:** Added comprehensive error messages for missing template data or coordinates
+
+### Template Data Structure
+
+The system now expects coordinates in the activeTemplateData object:
+
+```typescript
+{
+  logoCell: string | { [billType: number]: string },
+  signatureCell: string | { [billType: number]: string },
+  // ... other template properties
+}
+```
+
+This allows for either simple string coordinates (same for all bill types) or object-based coordinates (different per bill type).