# Transaction Import Download Fix

## Problem
The "Download QR Template" and "Download POS Template" buttons were not working in the Transaction Import page.

## Root Cause
The JavaScript hooks (`FileDownload` and `CSVDownload`) were using `this.handleEvent()` which is for targeted hook events, but Phoenix LiveView's `push_event()` broadcasts events globally to the window with a "phx:" prefix.

## Files Modified

### 1. /assets/js/hooks/index.js
- Fixed `FileDownload` hook to listen to `window` event "phx:download_file"
- Fixed `CSVDownload` hook to listen to `window` event "phx:download_csv"
- Added proper cleanup in `destroyed()` lifecycle method

### 2. /apps/platform_web/assets/js/hooks/index.js
- Added `FileDownload` hook (was missing)
- Fixed `CSVDownload` hook to listen to window events
- Added `FileUploadClick` hook for better UX

## How to Apply the Fix

### Step 1: Fix File Permissions (if needed)
The terminal is waiting for your sudo password to fix file permissions. Enter your password in the terminal where it says:
```
[sudo] password for kaleesh
```

Alternatively, you can skip this and use:
```bash
sudo chmod -R u+w /var/www/internaltesting/kaleesh/prverification/tmsapps/tmsuat_apps
```

### Step 2: Install Dependencies (if not already done)
```bash
cd /var/www/internaltesting/kaleesh/prverification/tmsapps/tmsuat_apps
mix deps.get
```

### Step 3: Rebuild Assets
```bash
cd /var/www/internaltesting/kaleesh/prverification/tmsapps/tmsuat_apps
mix assets.build
```

### Step 4: Restart the Phoenix Server
If the server is already running, stop it (Ctrl+C) and restart:
```bash
mix phx.server
```

### Step 5: Test the Fix
1. Navigate to the Transaction Import page
2. Click "Select Transaction Type" (POS or QR)
3. Click the "Download {TYPE} Template" button
4. The CSV template should download automatically

## Technical Details

### Before (Broken):
```javascript
Hooks.FileDownload = {
  mounted() {
    this.handleEvent("download_file", ({filename, content}) => {
      // This never receives the event!
    });
  }
}
```

### After (Fixed):
```javascript
Hooks.FileDownload = {
  mounted() {
    this.handleDownload = (e) => {
      const {filename, content, type} = e.detail;
      // Create and trigger download...
    };
    window.addEventListener("phx:download_file", this.handleDownload);
  },
  
  destroyed() {
    if (this.handleDownload) {
      window.removeEventListener("phx:download_file", this.handleDownload);
    }
  }
}
```

## Why This Happened
Phoenix LiveView's `push_event/3` broadcasts events to the browser window, not to specific hook instances. Events are received via `window.addEventListener("phx:event_name", handler)`, not via `this.handleEvent()`.

The `this.handleEvent()` method is only used when the server targets a specific hook element using the `:to` option:
```elixir
# This would work with this.handleEvent():
push_event(socket, "download_file", %{...}, to: "#specific-hook-id")

# But the code uses (broadcasts globally):
push_event(socket, "download_file", %{...})
```

## Verification
After applying the fix, both download buttons should work:
- ✅ Download POS Template - generates `pos_import_template.csv`
- ✅ Download QR Template - generates `qr_import_template.csv`