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
}

Extending

Adding New Filter Types

1. Create a new filter component in src/components/filters/
2. Update the ReportFilters component to include your new filter type
3. The filter must emit an 'update:modelValue' event with the updated value

Custom Cell Renderers

You can extend the ReportTable component to support custom cell renderers for different data types.

Adding New Export Formats

The export system supports any format provided by your backend. To add a new export format:

1. Add the format to your API's export endpoint
2. Include the format in the report configuration's exports object
3. The ReportExportOptions component will automatically display the new format

License

MIT