fix: bulk insert imported csv and demo data to supabase

[TanCodeX]

Summary

Closes #193

This PR resolves an issue where transactions imported via CSV or generated through the Load Demo Data feature were only stored in React state and localStorage, causing data loss across devices and browser sessions.

Imported transactions are now persisted to Supabase, ensuring a consistent and durable source of truth.

Changes Made

Settings.jsx

• Added Supabase integration by importing the Supabase client.
• Added authentication context integration via useAuth.
• Implemented a reusable upload processing flow within the CSV import handler.

CSV Import

• Added a processUpload workflow to:

  • Normalize parsed CSV data.
  • Map imported records to the transaction database schema.
  • Perform a bulk upsert to Supabase.
  • Retrieve persisted transaction records from the database.

Load Demo Data

• Applied the same normalization and bulk-upsert process used by CSV imports.
• Ensures demo transactions are persisted to Supabase immediately after creation.

State Synchronization

• After successful persistence, returned Supabase records are used to update local React state.

• Database-generated UUIDs are patched back into the client-side transaction objects.

• Maintains consistency between:

  • Supabase
  • React Context
  • Local cache

Problem Solved

Previously:

• CSV imports existed only in local state and localStorage.

• Demo data existed only in local state and localStorage.

• Data was lost when:

  • Clearing browser storage
  • Logging in from another device
  • Using a different browser

Now:

• Imported transactions are persisted to Supabase.
• Demo transactions are persisted to Supabase.
• Data is available across devices and sessions.
• Supabase remains the single source of truth.

Testing

CSV Import

• Imported transactions successfully persist to Supabase.
• Imported transactions remain available after page refresh.
• Imported transactions appear on other authenticated sessions/devices.

Demo Data

• Demo transactions successfully persist to Supabase.
• Demo transactions remain available after refresh.
• Demo transactions appear across devices.

Synchronization

• Returned Supabase UUIDs correctly update local transaction records.
• Imported transactions can be edited and deleted without ID mismatches.
• React state remains synchronized with backend data.

Result

The application now provides reliable cross-device persistence for imported and demo transaction data while maintaining Supabase as the authoritative source of truth.

[netlify]

👷 Deploy request for finnboard0 pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	b59a889

[netlify]

✅ Deploy Preview for finnboard ready!

Name	Link
🔨 Latest commit	b59a889
🔍 Latest deploy log	https://app.netlify.com/projects/finnboard/deploys/6a268329ee3da00008c79f7b
😎 Deploy Preview	https://deploy-preview-194--finnboard.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[TanCodeX]

@khanirfan18 Please review and merge.