Download Data Module

The BSTD Download Data Module gives you full control over your business records. Export any document type — from quotations and invoices to vehicle condition reports and NOC forms — directly into CSV or Excel format for offline analysis, compliance audits, and third-party reporting.

Important Note for Admins

All downloads are authenticated and respect your company's selected format preference. The module uses client-side Blob generation for instant downloads without server-side file storage, ensuring your data never lingers on disk.

Export Formats

Choose the format that best fits your downstream workflow. The selection is saved to your company profile and persists across sessions.

CSV

Lightweight, text-based format compatible with every spreadsheet application, BI tool, and database import pipeline. Ideal for automated processing and ETL workflows.

Excel (.xlsx)

Rich binary format with formatted columns, headers, and styling. Best for direct sharing with stakeholders who need a polished, print-ready spreadsheet.

Switching formats triggers a confirmation dialog and updates your preference via the Company settings API:

javascript
// Format selection is saved to your company profile
await saveCompanyPreference({
  download_data_format: "csv" // or "excel"
});

Document Types

Thirteen record categories are available for export. Each card displays a live count from your dashboard and initiates a secure download on click.

DocumentSystem KeyCount Source
CustomerscustomerquoteTotalCount
QuotationsquotationquoteTotalCount
Packing Listpacking-listgrTotalCount
LR (Lorry Receipt)lrlrTotalCount
Vehicle Conditionvehicle-condition-listvcTotalCount
Bill / InvoiceinvoiceinvoiceTotalCount
Money Receiptmoney-receiptmrTotalCount
Payment Voucherpayment-voucherpvTotalCount
FOV FormsfovfovTotalCount
TWS FormstwstwsTotalCount
NOC FormsnocnocTotalCount
LetterheadletterheadletterheadTotalCount

How It Works

  1. Load Preferences: On mount, the dashboard hook fetches your company profile and current document counts.
  2. Select Format: Toggle between CSV and Excel. A confirmation modal prevents accidental switches.
  3. Initiate Download: Click any document card. A second confirmation modal warns about large datasets and confirms the export type.
  4. Stream & Save: The frontend requests the export stream, receives a Blob, and triggers a browser download via a temporary Object URL.
  5. Feedback: Loading spinners overlay the active card while the request is in flight. Errors surface via alert notifications.

The confirmation dialog component is reusable across format changes and downloads:

tsx
function ConfirmDialog({ open, title, message, onConfirm, onCancel }) {
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
      <div className="relative w-full max-w-md rounded-2xl border border-slate-700 bg-slate-900 p-6 shadow-2xl">
        <h3>{title}</h3>
        <p>{message}</p>
        <div className="flex justify-end gap-3">
          <button onClick={onCancel}>Cancel</button>
          <button onClick={onConfirm}>Confirm</button>
        </div>
      </div>
    </div>
  );
}

The download request abstraction handles authentication and Blob streaming:

javascript
// Triggered when user clicks a document card
const blob = await requestExport({
  format: currentFormat,   // "csv" | "excel"
  documentType: item.type, // e.g. "quotation", "invoice"
});

// Browser download via anchor tag + Blob URL
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = `${item.type}_data.${extension}`;
a.click();
window.URL.revokeObjectURL(url);

UI Implementation

The download grid is a responsive 4-column layout using Tailwind CSS. Each card is clickable, shows a live total badge, and adapts to dark mode via the theme color hook.

tsx
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
  {items.map((item) => (
    <div
      key={item.key}
      onClick={() => handleDownloadRequest(item)}
      className="group ... cursor-pointer"
    >
      <div className="icon-container ...">
        {item.icon}
      </div>
      <h3>{item.title}</h3>
      <p>Click to download</p>
      <div className="badge">Total: {counts[item.countKey]}</div>
      <div className="format-label">
        Export {currentFormat.toUpperCase()}
      </div>
    </div>
  ))}
</div>

Design Notes: Cards use group-hover:scale-110 for icon lift, hover:-translate-y-0.5 for subtle elevation, and a backdrop-blur overlay with a spinning loader during active downloads.