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:
// 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.
| Document | System Key | Count Source |
|---|---|---|
| Customers | customer | quoteTotalCount |
| Quotations | quotation | quoteTotalCount |
| Packing List | packing-list | grTotalCount |
| LR (Lorry Receipt) | lr | lrTotalCount |
| Vehicle Condition | vehicle-condition-list | vcTotalCount |
| Bill / Invoice | invoice | invoiceTotalCount |
| Money Receipt | money-receipt | mrTotalCount |
| Payment Voucher | payment-voucher | pvTotalCount |
| FOV Forms | fov | fovTotalCount |
| TWS Forms | tws | twsTotalCount |
| NOC Forms | noc | nocTotalCount |
| Letterhead | letterhead | letterheadTotalCount |
How It Works
- Load Preferences: On mount, the dashboard hook fetches your company profile and current document counts.
- Select Format: Toggle between CSV and Excel. A confirmation modal prevents accidental switches.
- Initiate Download: Click any document card. A second confirmation modal warns about large datasets and confirms the export type.
- Stream & Save: The frontend requests the export stream, receives a Blob, and triggers a browser download via a temporary Object URL.
- 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:
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:
// 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.
<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.