🍽️ Qattah App | تقسيم القطه

تطبيق ذكي لتقسيم فاتورة المطعم بين الأصدقاء بعدل ووضوح.

A smart bill-splitting PWA designed for Arabic-speaking users. Add people, add dishes, assign who ate what, and get instant fair totals — no more awkward math at the table.

---

✨ Features

💰 Smart Bill Splitting

• 👥 Multi-Person Support — Add up to 15 people per session
• 🍽️ Item-Level Assignment — Assign each dish to the specific people who shared it
• 🧮 Automatic Cost Division — Shared dishes are split evenly among assigned people
• ⚡ Real-Time Calculations — Totals update instantly as you type

🎨 Modern UI/UX

• 🌙 Dark / Light Mode — Toggle themes, preference saved across sessions
• 🕌 Full Arabic RTL — Native right-to-left interface
• 📱 Responsive Design — Works seamlessly on phone, tablet, and desktop
• 💾 Auto-Save — All data persists in localStorage — refresh without losing anything
• ♻️ Offline Capable — PWA installable on your home screen, works without internet

📊 Export & Stats

• 📄 CSV Export — Download a complete breakdown (built-in, zero dependencies)
• 📈 Live Stats Dashboard — Track people count, dish count, and grand total at a glance

---

🛠️ Tech Stack

Layer	Technology
Framework	React 19
Language	TypeScript
Styling	Tailwind CSS 3.4
Build Tool	Vite 8
PWA	vite-plugin-pwa (Workbox)
Testing	Vitest + Testing Library
Icons	react-icons (Feather)
Fonts	Tajawal (Arabic)

---

🚀 Installation

Prerequisites

• Node.js 18+
• npm or yarn

Setup

git clone https://github.com/Fahad-BA/qittah-app.git
cd qittah-app
npm install

Development

npm run dev          # Start dev server
npm run build        # Production build
npm run preview      # Preview production build
npm run test         # Run tests
npm run coverage     # Test coverage report
npm run lint         # ESLint
npm run typecheck    # TypeScript check

---

📁 Project Structure

QattahApp/
├── src/
│   ├── components/
│   │   ├── PeopleList.tsx       # Add/remove people
│   │   ├── DishList.tsx         # Add/remove dishes with price & quantity
│   │   ├── AssignmentTable.tsx  # Matrix: who ate what
│   │   ├── ResultsTable.tsx     # Final per-person totals + CSV export
│   │   ├── DarkModeToggle.tsx   # Theme switcher
│   │   ├── HostValidator.tsx    # Allowed hosts guard
│   │   └── ErrorBoundary.tsx    # Graceful error handling
│   ├── hooks/
│   │   └── useLocalStorage.ts   # Persisted state hook
│   ├── utils/
│   │   └── calculations.ts      # Bill math, CSV generation, share links
│   ├── types.ts                 # TypeScript domain models
│   ├── App.tsx                  # Main app component
│   └── main.tsx                 # Entry point
├── public/                      # PWA icons, manifest, favicon
├── scripts/                     # Icon generation, brotli compression
├── vite.config.js               # Vite + PWA config
└── package.json

---

🎯 How It Works

1. Add People — Enter names of everyone at the table (up to 15)
2. Add Dishes — Input each dish with its price and quantity
3. Assign — Check which people shared each dish
4. See Results — Instant per-person totals with a fair split
5. Export — Download CSV for your records

Tip: Data saves automatically. Close the tab and come back — everything's still there.

---

📦 Deployment

Vercel (Recommended)

npm i -g vercel
vercel --prod

Netlify

npm run build
netlify deploy --prod --dir=dist

Self-Hosted (Static)

npm run build
# Copy dist/ to your web server

---

📜 License

MIT License — see LICENSE.

---

Built with ❤️ by Fahad Alhuqaili