@schoolaid/dynamic-reports-ui NPM

Dynamic Reports Framework

A modular Vue 3 framework for building dynamic data reports with filtering, pagination, and export capabilities.

Features

Flexible Report Layout: Simple integration of reports into any Vue application
Dynamic Filtering: Configurable filter types with extensible architecture
Pagination: Built-in pagination for large datasets
Export Options: Easy data export to various formats (Excel, CSV, PDF)
Action System: Table-level and row-level actions
Responsive Design: Mobile-friendly layout that adapts to different screen sizes

Installation

npm install @schoolaid/dynamic-reports-ui

Quick Start

// In your main.js
import { createApp } from 'vue';
import App from './App.vue';
import SaidReportsFrontend from 'said-reports-frontend';

const app = createApp(App);

app.use(SaidReportsFrontend, {
  apiUrl: '/api/reports',
  apiService: yourApiService // Optional, provide your own API service
});

app.mount('#app');

<!-- In your component -->
<template>
  <ReportContainer>
    <ReportView reportId="sales-summary" />
  </ReportContainer>
</template>

<script setup>
import { ReportContainer, ReportView } from 'said-reports-frontend';
</script>

Architecture

The project follows a component-based architecture with clear separation of concerns:

Components: Reusable UI components
- Common: General-purpose UI elements
- Filters: Filter type implementations
- Table: Table-related components
Composables: Reusable logic hooks
Views: Page-level components

Components

Report Container

Provides the layout structure for reports with optional navigation sidebar.

<ReportContainer :showNavbar="true">
  <!-- Report content goes here -->
</ReportContainer>

Report View

Main component that manages report data, filtering, and pagination.

<ReportView 
  reportId="sales-summary"
  @report-loaded="onReportLoaded"
/>

Report Filters

Renders filter controls based on report configuration.

<ReportFilters
  :filters="filterConfig"
  @filters-applied="handleFilters"
/>

Report Table

Displays report data in a tabular format with support for custom cell rendering.

<ReportTable
  :reportData="data"
  :headers="headers"
  :actions="actions"
  @row-action-clicked="handleRowAction"
/>

Report Export Options

Provides export functionality for reports in different formats.

<ReportExportOptions
  :export-options="reportDetails.exports"
  :report-id="reportId"
  :filters="activeFilters"
  @export-complete="onExportComplete"
/>

API Configuration

Reports expect a specific API structure. The base URL is configurable:

app.use(SaidReportsFrontend, {
  apiUrl: '/api/reports'
});

API Endpoints

GET /:reportId - Get report configuration
GET /:reportId/data - Get report data
GET /:reportId/action/:actionId - Execute report action
GET /:reportId/export - Export report data

Report Configuration Format

The API should return a configuration object with the following structure:

{
  "title": "Sales Report",
  "icon": "chart-bar",
  "description": "Monthly sales analysis",
  "filters": {
    "date_range": {
      "type": "date-range",
      "label": "Date Range"
    },
    "status": {
      "type": "select",
      "label": "Status",
      "options": {
        "active": "Active",
        "pending": "Pending"
      }
    }
  },
  "headers": [
    {
      "field": "id",
      "title": "ID",
      "type": "number",
      "alignment": "left"
    },
    {
      "field": "date",
      "title": "Date",
      "type": "date",
      "alignment": "center"
    }
  ],
  "actions": [
    {
      "id": "refresh",
      "type": "table",
      "label": "Refresh"
    }
  ],
  "exports": {
    "excel": {
      "label": "Excel",
      "icon": "file-excel",
      "format": "xlsx"
    },
    "csv": {
      "label": "CSV",
      "icon": "file-csv",
      "format": "csv"
    }
  },
  "pagination_enabled": true
}