Reports Hub
Complete User Documentation
Reports Hub is a browser-based inspection report management system. It helps technicians and inspectors upload images, organize them by job, generate professional PDF reports, and send everything to clients — all from one place, even offline.
Batch Upload
Upload and auto-optimize dozens of images at once with a single drag and drop.
Organize by Job
Assign images to clients and jobs with a color-coded visual selection board.
Generate PDFs
Auto-generate A4 text reports and photo gallery PDFs, instantly previewable.
Image Editor
Crop, rotate, brighten, annotate with draggable text balloons, and undo any step.
Send Reports
Send reports via email with flexible attachment options including Cloud Storage links.
Works Offline
Install as a PWA and keep working even without an internet connection.
Recommended Workflow
Follow these four steps in order for the smoothest experience.
Set up your Workspace
On first launch, Reports Hub asks where to create its root folder on your computer. Choose a location, enter your name/company, and the app builds the entire folder structure automatically.
Upload your images
Drag images onto the Upload screen or click to browse. Optionally enable optimization (resizes to max 1920px and compresses to your chosen quality). Click Upload & Process.
Assign images to a job
Go to the Selection screen. Choose a job from the dropdown (or create a new client/job inline). Select the images you want and click Assign Selected. When all images are assigned, the app automatically moves to the Reports screen.
Open a job and fill the report
On the Reports screen, click the edit icon next to any job. Fill in the text fields (Report Number, Client, Scope, Complaint, etc.).
Edit images and generate PDFs
In the Edit screen, click any image in the gallery to open the image editor. Use the toolbar to crop, rotate, enhance, or annotate. Then click Generate PDF Text Report and/or Generate PDF Photo Gallery.
Send the report
Choose an attachment option (ZIP, no compression, gallery PDF only, or Cloud Storage link), then click Send Report. Enter the client's email and send. The report is logged automatically.
Workspace Setup
The workspace is the root folder where all Reports Hub data is stored on your device.
Enter your name & company
Your name and optional company name are used to organise the folder hierarchy (e.g. Reports Hub / AcmeCo / John /).
Choose a folder location
Click Choose Folder Location. Your browser will show a native folder picker — select any folder on your computer (e.g. Documents). Reports Hub will create a Reports Hub/ sub-folder there.
Enable options
Organise by Year adds a year folder between the user and Clients level. Auto-backup creates automatic copies of report data.
Click "Create Reports Hub"
The app creates all necessary folders and saves your preferences. You only need to do this once.
Install as App (PWA)
Reports Hub can be installed on your desktop or mobile device for a native app experience — including offline access.
Faster Launch
Opens instantly from your taskbar or home screen, no browser tabs needed.
Offline Access
All app assets are cached. Work continues even without internet.
Auto Updates
The app checks for updates in the background and notifies you when one is ready.
| Platform | How to Install |
|---|---|
| Chrome / Edge (Desktop) | Click the install icon () in the address bar, or wait for the install banner at the bottom of the page and click Install. |
| Android (Chrome) | Tap the browser menu → Add to Home screen or wait for the bottom install banner. |
| iOS (Safari) | Tap the Share icon → Add to Home Screen. (iOS does not show an install banner.) |
Upload
Batch-upload and auto-optimize your inspection photos
| Setting | Description |
|---|---|
| Optimize Images | When on, images are resized to a max of 1920px on the longest side and compressed to the selected quality. When off, images are stored as-is. |
| Create ZIP Backup | Bundles the original (pre-optimization) images into a ZIP file stored in the Original Images folder of the selected job (if enabled). |
| Quality Slider | Sets the JPEG compression quality (50 – 100 %). Higher = better quality, larger file. 80 % is a good default for inspection photos. |
Image Selection
Organize and assign images to clients and jobs
| Action | Description |
|---|---|
| Select All | Selects all currently visible images (respects the active job filter). |
| Assign Selected | Assigns all selected images to the job chosen in the dropdown. When all images are assigned, the app auto-navigates to the Reports screen. |
| Unassign | Removes the job assignment from selected images and returns them to the unassigned pool. Shows a confirmation popup with thumbnails. |
| Tag | Adds a colour-coded text tag to selected images (e.g. "Urgent", "Before", "After"). |
| Delete | Permanently removes selected images from the app. |
- No job selected — shows only unassigned images.
- Job selected — shows unassigned images plus images already in that job.
Only active jobs (Draft status) appear in the dropdown. Complete, Sent, and Archived jobs are hidden.
Reports
Manage all clients and their jobs in one table
| Column | Description |
|---|---|
| Report # | Auto-generated identifier (e.g. RPT-001). Editable inside the job. |
| Client | The client company this job belongs to. |
| Item / Job | Short description of what was inspected. |
| Date | Date the job was created. |
| Status | Draft → Complete → Sent → Archived. |
| PDFs | Icons showing which PDFs have been generated (text, gallery, invoice) and the image count. |
| Actions | Edit , Archive , Delete . |
Search
Searches across report number, client name, item, date, and status simultaneously.
Client Filter
Dropdown to show only jobs for a specific client. You can also click any client card in the Client Summary section below the table.
Status Filter
A multi-select checkbox dropdown. By default, Archived jobs are hidden. Tick "Archived" to reveal them. You can select any combination of Draft, Complete, Sent, and Archived.
Edit Report
Fill the report, edit images, generate PDFs, and send
| Field | Type | Notes |
|---|---|---|
| Report Number | Text | Auto-generated, editable |
| Client | Dropdown + Text | Select from existing or type a new client |
| Scope | Textarea | Overall scope of the inspection |
| Customer Details | Text | Customer reference info |
| Item | Text | Equipment or item inspected |
| Serial No | Text | Barcode or serial number |
| Complaint | Textarea | Customer's reported issue |
| Inspection | Textarea | What was found during inspection |
| Solution | Textarea | Actions taken or recommended |
| Conclusion | Textarea | Final verdict |
Image Editor
Click any image in the Edit screen's gallery to open it in the editor.
| Group | Tools | Description |
|---|---|---|
| History | Undo, Redo | Step backward or forward through edit history. |
| Rotate | Rotate Left/Right, Flip H/V | Rotate by 90° or mirror the image. |
| Crop | Crop, Apply, Cancel | Interactive crop with 8 handles and a rule-of-thirds grid. |
| Enhance | Auto Enhance, Brighten, Darken, Grayscale | Pixel-level image adjustments. |
| Annotation | Add Text Balloon | Add draggable callout annotations with an arrow. |
| Save | Reset, Save | Reset to original or flatten all edits into the image. |
Click the Crop button
A crop rectangle with 8 handles appears over the image. A dark dimmer covers the area outside the crop region.
Resize
Drag any of the 8 handles (corners and midpoints) to resize the crop area. A live pixel size label updates as you drag.
Move
Click and drag anywhere inside the crop rectangle (not on a handle) to reposition it.
Apply or Cancel
Click Apply in the toolbar to commit the crop, or Cancel to dismiss without changes. The rule-of-thirds lines help you compose the shot.
Click "Add Text Balloon"
A dialog appears where you can enter the annotation text, choose a background color (6 presets), and set the font size.
Balloon appears on the image
A colored balloon with an arrow is placed at the top-left of the image. You can add as many balloons as needed.
Drag the balloon
Click and drag the colored balloon body to move the annotation anywhere on the image.
Drag the arrow tip
The small white circle at the end of the arrow is independently draggable. Drag it to point at any specific detail on the image — the arrow stretches automatically.
Delete a balloon
Click the small × button on the right side of any balloon body to remove it.
Save to flatten
Click Save in the toolbar. All balloons and arrows are permanently drawn into the image pixels — the balloon layer is then cleared. Use Reset before saving if you want to start over.
PDF Generation
Reports Hub generates A4-sized PDF files in-browser, with no external dependencies.
Generated from the form fields on the left side of the Edit screen. The PDF includes:
- A header from your Settings profile: company, your name, phone, website, address (first line), email, optional company logo, and report number; plus the report title and date line above the fields
- Each filled form field as a labeled block; empty fields are omitted from the PDF
- A footer with document label, page numbers, and generation timestamp
Generated from all images currently assigned to the open job. The PDF includes:
- One or more A4 pages in a 2×2 image grid (with space reserved for header and footer)
- Images numbered in order (Image 1, Image 2, …)
- The same **profile header and footer** as the text report (company, contact details, optional logo, report number, page x of n, generated time)
- Automatic page breaks every four images
To keep your files in sync, Reports Hub automatically deletes outdated PDF files whenever their source data changes. No manual cleanup is needed.
| Action Taken | ZIP Bundle deleted? | Photo Gallery PDF deleted? | Text Report PDF deleted? |
|---|---|---|---|
| Generate Text Report PDF | ✅ Yes | — | — |
| Delete Text Report PDF | ✅ Yes | — | — |
| Generate Photo Gallery PDF | ✅ Yes | — | — |
| Delete Photo Gallery PDF | ✅ Yes | — | — |
| Upload accounting invoice PDF | ✅ Yes | — | — |
| Delete accounting invoice PDF | ✅ Yes | — | — |
| Save Report (manual button) | ✅ Yes | — | ✅ Yes |
| Add images (upload) | ✅ Yes | ✅ Yes | — |
| Edit image (Image Editor Save) | ✅ Yes | ✅ Yes | — |
| Reset image (Image Editor Reset) | ✅ Yes | ✅ Yes | — |
| Unassign image | ✅ Yes | ✅ Yes | — |
| Delete image | ✅ Yes | ✅ Yes | — |
Email & Attachments
Choose how images are delivered alongside the PDF reports.
| Option | What gets attached | Best for |
|---|---|---|
| ZIP Attach — compressed | All edited images bundled into a single .zip file + PDFs | Clients who want all original files |
| No ZIP Attach — uncompressed | All edited images as individual files + PDFs | Clients who need direct image access |
| Gallery Gallery PDF only | Only the generated PDFs (no raw images) | Most common — clean, professional |
| Cloud Storage Cloud Storage link | Only PDFs attached; a Cloud Storage link is added to the email body | Large image sets or shared team access |
Clients & Jobs
Reports Hub organizes work in a Client → Jobs hierarchy. One client can have unlimited jobs.
- Create from the Selection or Reports screen
- Required fields: Name, Email, Phone
- Edit client details by clicking the client name inside an open job
- Renaming a client updates all their jobs automatically
- Each job belongs to exactly one client
- Status lifecycle: Draft → Complete → Sent → Archived
- Each job can optionally have an Original Images folder
- Archive remembers status; unarchiving restores it
Cloud Storage & Sync
Reports Hub uses a hybrid specialized storage system to balance speed, offline capability, and universal access.
Your linked workspace folder holds inspection images, generated PDFs, and ZIP bundles under each client/job. Supabase stores account data and metadata (for example which files belong to a job), not the binary files themselves.
- On-disk layout: Year → Clients → job folder →
Original Images,Edited Images,PDFs, etc. - Privacy: Full-resolution originals stay on hardware you control until you copy or sync the workspace yourself.
- Backups: Use workspace ZIP / backup features in Settings to archive the same tree.
To ensure the app feels "instant" regardless of your internet connection, we use a priority loading system:
If you open a job on a computer that doesn't have the local files, Reports Hub automatically fetches them from the cloud in the background.
Folder Structure
Reports Hub creates a consistent, predictable folder hierarchy so your files are always easy to find.
Frequently Asked Questions
Tips & Shortcuts
Batch-assign images
Select All with the checkbox, then immediately click Assign — all uploaded images go to one job in a single click.
Use the legend to switch jobs
Click a color badge in the selection legend to quickly switch the job filter without touching the dropdown.
Highlight empty PDF fields
Generate the PDF Text Report before finishing — orange highlighted fields act as a checklist of what still needs to be filled in.
Undo before saving
In the image editor, Undo/Redo works on the pixel canvas. Once you click Save, edits are flattened permanently. Use Reset to revert to the original image before saving if needed.
Archive completed jobs
Archiving hides jobs from the default view but keeps all data. Perfect for long-term record keeping without cluttering the active jobs list.
Click the client name to edit
In the Edit screen header, clicking the client name opens the Edit Client popup — faster than going to the Reports screen.
| Action | How |
|---|---|
| Undo | Click the ↺ Undo button (top-left of toolbar) |
| Redo | Click the ↻ Redo button |
| Apply Crop | Click ✓ Apply after adjusting handles |
| Cancel Crop | Click Cancel or click Crop button again |
| Save image | Click 💾 Save — flattens all edits |
| Reset to original | Click ↺ Reset — requires confirmation |
Reports Hub is a hybrid cloud-sync inspection report management system — designed to help technicians, field engineers, and inspectors manage their entire reporting workflow with the speed of local files and the convenience of cloud availability.
Built as a Progressive Web App (PWA), it can be installed on any device, works offline, and integrates with Supabase Storage for seamless multi-device access.
File System Integration
Real OS folder creation using the File System Access API.
Canvas Image Editor
Crop, rotate, enhance, annotate with draggable text balloons.
In-Browser PDF Generation
A4 text reports and masonry photo galleries, no libraries.
Color-coded Job Board
Visual image assignment with multi-job color indicators.
Cloud Sync
Hybrid storage with Supabase for multi-device access.
Client → Jobs Hierarchy
Multi-client workspace with unlimited jobs per client.
Reports Hub — Designed and developed by Kaio Andrade. All rights reserved.