Custom Procom-Inspired Integrated Business App
Budget / Salary$30–250
TypeFreelance project
LocationRemote
Posted1 hour ago
A custom Gestion Commerciale Intégrée (integrated business management app) — inspired by Procom 10, built specifically for your hardware/plumbing/electrical supply business. It's a single-page React application that runs entirely in the browser on one Windows computer, with all data saved locally on that machine.
How it's built
React (single file, App.jsx) run through Vite as the dev server
lucide-react for icons
html2canvas + jsPDF to generate real downloadable PDF files from the on-screen documents
localStorage as the database — everything persists between sessions on that one computer, but isn't shared across machines (we discussed a shared-network version early on and deliberately dropped it in favor of single-computer use)
Core modules
Dashboard — client/supplier counts, low-stock alerts, this month's revenue, a feed of recent documents.
Clients & Suppliers — contact records (name, phone, email, address, ICE). Clicking a client's name opens their dedicated account page: every invoice they've taken, a running balance (invoiced vs. paid vs. still owed), a form to record partial payments, and buttons to print/download a full account statement PDF to hand them.
Stock (Products) — reference code, name, unit, price, quantity, reorder threshold with low-stock badges.
Catalog — a click-to-shop view of all products (built for scaling to 1000+ items via search). Clicking a product adds it to a cart; "Create Invoice" drops you straight into a new invoice pre-filled with everything you picked, so you just choose the client and save.
Sales documents — Quote (Devis) → Sales Order (Bon de Commande) → Invoice (Facture) → Credit Note (Avoir), with one-click convert between them. Stock decreases automatically when an invoice is issued, and increases back on a credit note.
Purchase documents — Purchase Order → Delivery Note (Bon de Livraison) → Purchase Invoice, same convert flow. Stock increases when a delivery note is recorded.
Every document can be previewed, printed, or downloaded as a real PDF, styled to match your actual paper documents (logo box, company name/tagline, doc-type box, item table, "Net à Payer" total pinned to the bottom of the A4 page, footer with your contact info) — and shows who created it and when.
Users & permissions
Login system: first launch creates the admin account; everyone else logs in with their own username/password
Admin manages employees from a Users page, toggling per-employee permissions: can edit records, can delete records, can create return invoices (Avoir) — off by default for new employees
Customization (admin only, in Settings)
Company info: name, tagline, logo upload, address, phone, fax, email, ICE — all shown on printed documents
Invoice Template Designer: an Excel-style panel to toggle lines between products, pick border/header/accent colors, adjust corner roundness, and choose a font — with a live shrunk preview
Language: English/French toggle (currently covers navigation and core labels — not yet every field in every screen)
A fixed App Information block crediting you (Abdellah Ouhamouch, phone, email) — hardcoded so it can't be edited from the UI
Current limitations worth knowing
Single computer only — no syncing between employee machines (this was a deliberate choice you made)
localStorage-based — if that browser's storage gets cleared, data is gone; no built-in backup/export yet
Passwords aren't encrypted — fine for keeping honest employees honest, not real security against someone technical
French translation is partial — main navigation and labels, not every screen yet
How it's built
React (single file, App.jsx) run through Vite as the dev server
lucide-react for icons
html2canvas + jsPDF to generate real downloadable PDF files from the on-screen documents
localStorage as the database — everything persists between sessions on that one computer, but isn't shared across machines (we discussed a shared-network version early on and deliberately dropped it in favor of single-computer use)
Core modules
Dashboard — client/supplier counts, low-stock alerts, this month's revenue, a feed of recent documents.
Clients & Suppliers — contact records (name, phone, email, address, ICE). Clicking a client's name opens their dedicated account page: every invoice they've taken, a running balance (invoiced vs. paid vs. still owed), a form to record partial payments, and buttons to print/download a full account statement PDF to hand them.
Stock (Products) — reference code, name, unit, price, quantity, reorder threshold with low-stock badges.
Catalog — a click-to-shop view of all products (built for scaling to 1000+ items via search). Clicking a product adds it to a cart; "Create Invoice" drops you straight into a new invoice pre-filled with everything you picked, so you just choose the client and save.
Sales documents — Quote (Devis) → Sales Order (Bon de Commande) → Invoice (Facture) → Credit Note (Avoir), with one-click convert between them. Stock decreases automatically when an invoice is issued, and increases back on a credit note.
Purchase documents — Purchase Order → Delivery Note (Bon de Livraison) → Purchase Invoice, same convert flow. Stock increases when a delivery note is recorded.
Every document can be previewed, printed, or downloaded as a real PDF, styled to match your actual paper documents (logo box, company name/tagline, doc-type box, item table, "Net à Payer" total pinned to the bottom of the A4 page, footer with your contact info) — and shows who created it and when.
Users & permissions
Login system: first launch creates the admin account; everyone else logs in with their own username/password
Admin manages employees from a Users page, toggling per-employee permissions: can edit records, can delete records, can create return invoices (Avoir) — off by default for new employees
Customization (admin only, in Settings)
Company info: name, tagline, logo upload, address, phone, fax, email, ICE — all shown on printed documents
Invoice Template Designer: an Excel-style panel to toggle lines between products, pick border/header/accent colors, adjust corner roundness, and choose a font — with a live shrunk preview
Language: English/French toggle (currently covers navigation and core labels — not yet every field in every screen)
A fixed App Information block crediting you (Abdellah Ouhamouch, phone, email) — hardcoded so it can't be edited from the UI
Current limitations worth knowing
Single computer only — no syncing between employee machines (this was a deliberate choice you made)
localStorage-based — if that browser's storage gets cleared, data is gone; no built-in backup/export yet
Passwords aren't encrypted — fine for keeping honest employees honest, not real security against someone technical
French translation is partial — main navigation and labels, not every screen yet
Apply on Freelancer →
Project sourced from Freelancer.com. Applications happen directly on the original platform — we never collect your data.