Hisaab Seller

byJunaid Memon

Build a mobile-first web app called “Hisaab Seller” for Pakistani Instagram, WhatsApp and small online sellers. The app must let users enter product cost, selling price, quantity, delivery, packaging, discount, platform fee and other expenses, then instantly show total cost, net profit, profit margin and markup in PKR. Add an invoice/receipt generator with seller details, customer name, items, quantity, date, invoice number, discount and optional tax field. Generate a clean downloadable PDF and a shareable WhatsApp message. Support English, Urdu and Roman Urdu labels. Add a simple order history dashboard with paid, pending and cancelled status. Use a clean green/white mobile-friendly design, PKR by default, responsive layout, clear validation and no complex features. Start with guest mode and local storage; add login and payments later. Do not claim FBR compliance unless legally verified. Improve the app for Pakistani WhatsApp sellers. Add one-click “Copy WhatsApp Invoice” button, product templates, customer history, daily/monthly sales and profit summary, CSV export, dark mode, Urdu RTL layout, and sample demo data. Keep the interface extremely simple: Dashboard, New Sale, Profit Calculator, Invoice, Orders and Settings. Make every calculation accurate and test discount, delivery, packaging, commission, tax, quantity and negative-profit cases.

LandingProfit CalculatorInvoice
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 5

Hisaab Seller System Requirements Document

1. Introduction

The "Hisaab Seller" project aims to develop a mobile-first web application tailored for Pakistani Instagram, WhatsApp, and small online sellers. The application will facilitate sellers in managing their sales and expenses efficiently, providing instant calculations and generating invoices in a user-friendly manner.

2. System Overview

Hisaab Seller is designed to simplify the sales process for small online sellers in Pakistan. The application will allow users to input various sales-related data and instantly calculate financial metrics such as total cost, net profit, profit margin, and markup. It will also generate invoices and support multiple languages, including English, Urdu, and Roman Urdu. The app will feature a clean, responsive design with a focus on usability and simplicity.

Page 2 of 5

3. Functional Requirements as Story Points

  • As a Seller, I should be able to enter product cost, selling price, quantity, delivery, packaging, discount, platform fee, and other expenses to calculate total cost, net profit, profit margin, and markup in PKR.
  • As a Seller, I should be able to generate an invoice/receipt with seller details, customer name, items, quantity, date, invoice number, discount, and optional tax field.
  • As a Seller, I should be able to download a clean PDF of the invoice and share it via WhatsApp.
  • As a Seller, I should be able to view an order history dashboard with paid, pending, and cancelled statuses.
  • As a Seller, I should be able to use the app in English, Urdu, and Roman Urdu.
  • As a Seller, I should be able to operate the app in guest mode with local storage.
  • As a Seller, I should be able to copy the invoice details to WhatsApp with one click.
  • As a Seller, I should be able to create and use product templates for quick entry.
  • As a Seller, I should be able to view customer history for repeat transactions.
  • As a Seller, I should be able to view daily and monthly sales and profit summaries.
  • As a Seller, I should be able to export sales data to CSV format.
  • As a Seller, I should be able to switch to dark mode for better visibility in low-light conditions.
  • As a Seller, I should be able to use the app in Urdu RTL layout.
  • As a Seller, I should be able to access sample demo data to understand app functionality.
  • As a Seller, I should be able to ensure all calculations are accurate, including handling discounts, delivery, packaging, commission, tax, quantity, and negative-profit cases.

4. User Personas

  • Seller: The primary user of the application, typically a small business owner or individual selling products online through platforms like Instagram and WhatsApp.

5. Core User Flows

  • Seller enters product details -> calculates total cost and profit metrics -> generates invoice -> downloads PDF or shares via WhatsApp.
  • Seller views order history -> filters by status (paid, pending, cancelled) -> reviews past transactions.
  • Seller accesses settings -> switches language or layout -> enables dark mode or RTL layout.
Page 3 of 5

6. Visuals Colors and Theme

  • primary: #4CAF50 (Green)
  • primary_light: #81C784 (Light Green)
  • secondary: #FFFFFF (White)
  • accent: #FF5722 (Orange)
  • highlight: #FFC107 (Amber)
  • bg: #F1F8E9 (Light Green Background)
  • surface: #FFFFFF (White Surface)
  • text: #212121 (Dark Grey)
  • text_muted: #757575 (Grey)
  • border: #BDBDBD (Light Grey)

7. Signature Design Concept

The Hisaab Seller app will feature an interactive "Sales Journey" animation on the landing page. Users will see a visual representation of a product's journey from listing to sale. The animation will include:

  • A product icon moving through stages: listing, customer selection, sale, and invoice generation.
  • Each stage will animate with a smooth transition, highlighting key actions like price calculation and invoice creation.
  • Users can interact by clicking on stages to see detailed pop-ups with tips and information.
  • The animation will be built using motion/react for smooth transitions and interactivity.
Page 4 of 5

Landing Hero Motion Brief

The landing page will feature a continuous loop animation illustrating the transformation of a product from listing to sale. The animation will start with a product icon, which transforms as it moves through the sales process, ending with an invoice icon. The loop will last 10 seconds, with interactive elements allowing users to explore each stage. The animation will be responsive, adapting to different screen sizes while maintaining clarity and engagement.

8. Interaction Model & Motion Direction

  • Interaction Model: Animated
  • The landing page will feature moderate scroll-triggered reveals and hover transitions, enhancing user engagement without overwhelming them.
  • Internal pages will maintain a static layout for clarity and ease of use.

9. Non-Functional Requirements

  • The application must be mobile-first, ensuring optimal performance and usability on smartphones.
  • The app must support responsive design, adapting to various screen sizes and orientations.
  • All calculations must be accurate and validated to prevent errors in financial metrics.
  • The app must be lightweight and fast, ensuring quick load times and smooth interactions.
Page 5 of 5

10. Tech Stack

  • Frontend: React for Web
  • Backend: Python, FastAPI
  • Database: MySQL or MariaDB
  • Local Orchestration: Docker, docker-compose

11. Assumptions and Constraints

  • The app will initially support guest mode with local storage; login and payment features will be added later.
  • The app will not claim FBR compliance unless legally verified.
  • The default currency will be PKR, and the app will cater primarily to the Pakistani market.

12. Glossary

  • PKR: Pakistani Rupee
  • RTL: Right-to-Left
  • FBR: Federal Board of Revenue (Pakistan)
  • CSV: Comma-Separated Values
  • PDF: Portable Document Format
Landing design preview
Landing: Start Guest Mode
Dashboard: View Summary
New Sale: Enter Product Details
Profit Calculator: Calculate Metrics
Invoice: Generate Invoice
Invoice: Download PDF
Invoice: Share WhatsApp
Orders: View History
Orders: Filter Status
Settings: Switch Language
Settings: Toggle Dark Mode
Landing design preview
Landing: Start Guest Mode
Dashboard: View Summary
New Sale: Enter Product Details
Profit Calculator: Calculate Metrics
Invoice: Generate Invoice
Invoice: Download PDF
Invoice: Share WhatsApp
Orders: View History
Orders: Filter Status
Settings: Switch Language
Settings: Toggle Dark Mode