🗂️ JuvDraftReport

A visual, drag-and-drop report designer for building multi-page print-ready documents — optimized for Juvenile Draft Reports and CAD extended print layouts. Powered by Gemini AI and React.

⚡ Usage

Option A — Run as a Standalone App (npx)

Zero installation. Just run:

npx juvdraftreport

The app opens at http://localhost:3000 in your browser automatically.

Option B — Embed as a React Component

Install into your existing React project:

npm install juvdraftreport

Then use it like any React component:

import { JuvDraftReport } from 'juvdraftreport';

// Basic usage
<JuvDraftReport />

// With pre-configured data source APIs
<JuvDraftReport
  ds_api={[
    { name: "Juvenile Records", url: "https://api.example.com/juveniles" },
    { name: "Case Data",        url: "https://api.example.com/cases" },
    {
      name: "Secure Endpoint",
      url: "https://api.example.com/data",
      method: "POST",
      headers: { "Authorization": "Bearer YOUR_TOKEN" },
      body: { filter: "active" }
    }
  ]}
/>

Note: Give the parent container a defined height — the component fills 100% of its container:

<div style={{ height: '100vh' }}>
  <JuvDraftReport ds_api={[...]} />
</div>

ds_api Prop Reference

Each entry in ds_api represents a pre-configured API endpoint shown as a selectable button in the SQL Query Console, so users don't need to manually enter URLs.

| Property | Type | Required | Description | |---|---|---|---| | name | string | ✅ | Label shown in the API picker | | url | string | ✅ | Endpoint URL (must return JSON) | | method | 'GET' \| 'POST' | — | HTTP method (default: GET) | | headers | Record<string, string> | — | Request headers (e.g. auth tokens) | | body | Record<string, unknown> | — | Request body for POST requests |

TypeScript Types

import type { JuvDraftReportProps, DataSourceAPI } from 'juvdraftreport';

✨ Features

| Feature | Description | |---|---| | 📄 Multi-page canvas | Add, remove, and reorder pages with drag support | | 🧩 Widget library | Text, Tables, Charts, Stats, Shapes, Lines, Images | | 📊 Data binding | Load JSON or query via the built-in SQL console | | 🖨️ Print / PDF | Full browser print with print-only CSS layout | | 🔍 Print preview | Full-screen preview before printing | | 📐 Paper sizes | Letter, Long Bond, Legal, A4, A3 — portrait & landscape | | 💾 Save & Load | Documents saved to browser localStorage | | 📤 Export / Import | Save layouts as .json files and reload them | | 🤖 Gemini AI | AI-assisted content generation via SQL Query Modal | | ⌨️ Keyboard shortcuts | Power-user shortcuts for fast editing |

🧩 Widgets

• Text — Labels, headings, paragraphs with full font control
• Table — Data-bound tables with sorting, striping, pagination, calculated columns, and custom cell styles
• Chart — Bar, Line, Area, Pie, and Combo charts via Recharts
• Stat — Aggregate stat cards (sum, avg, min, max, count)
• Shape — Rectangles, ellipses, and arrows with fill/stroke options
• Line — Horizontal/vertical dividers
• Image — Embed images by URL with fit modes

⌨️ Keyboard Shortcuts

| Shortcut | Action | |---|---| | Ctrl + A | Select all widgets on current page | | Ctrl + D | Duplicate selected widget(s) | | Delete / Backspace | Delete selected widget(s) | | Escape | Deselect all |

Click the ? button in the toolbar for the full shortcuts panel.

📊 Loading Data

Option 1 — SQL Query Console

Click the database icon (🗄️) in the top-right toolbar to open the SQL Query Console.
Write SQL-like queries or use the Gemini AI integration to generate and load tabular data.

Option 2 — JSON via Sidebar

Open the Data tab in the left sidebar and paste or upload a JSON array.

[
  { "name": "Juan Dela Cruz", "age": 16, "offense": "Theft" },
  { "name": "Maria Santos",   "age": 14, "offense": "Vandalism" }
]

Widgets like Tables, Charts, and Stats will automatically bind to the loaded data fields.

📐 Paper Sizes

| Size | Dimensions (px) | |---|---| | Letter | 816 × 1056 | | Long Bond | 816 × 1248 | | Legal | 816 × 1344 | | A4 | 794 × 1123 | | A3 | 1123 × 1587 |

All sizes support Portrait and Landscape orientation.

💾 Save, Export & Import

• Save — Click Save in the sidebar to store the current layout in your browser's localStorage.
• Export — Click Export in the toolbar to download the layout as a .json file.
• Import — Click Import in the toolbar to reload a previously exported .json file.

🛠️ Run from Source

# Clone the repo
git clone https://github.com/your-username/juvdraftreport.git
cd juvdraftreport

# Install dependencies
npm install

# Create your env file
cp .env.example .env.local
# → Set GEMINI_API_KEY in .env.local

# Start the dev server
npm run dev

The app runs at http://localhost:3000.

📦 Build for Production

npm run build

Output is placed in dist/. Serve with any static file host.

🤝 Contributing

Pull requests are welcome! Please open an issue first to discuss any major changes.

📄 License

MIT © JuvDraftReport Contributors