⚡ Autoflex — Workshop Sales & Quotation System

<div align="center">

  <!-- ─── HEADER LOGO ──────────────────────────────────────── -->
  <br />
  <img src="autoflex.webp" alt="Autoflex Logo" width="120" height="120" style="border-radius: 24px;" />

  <h1 align="center">⚡ Autoflex — Workshop Sales & Quotation System</h1>

  <p align="center">
    <strong>Modern, fast, and intelligent repair-shop management</strong><br />
    Quotes · Orders · Inventory · Customer history — all in one place.
  </p>

  <!-- ─── BADGES ───────────────────────────────────────────── -->
  <p>

  ![GitHub repo size](https://img.shields.io/github/repo-size/klimadev/vendas_oficina?style=for-the-badge&label=repo%20size&color=6366f1)
  ![GitHub last commit](https://img.shields.io/github/last-commit/klimadev/vendas_oficina?style=for-the-badge&color=10b981)
  ![GitHub](https://img.shields.io/github/license/klimadev/vendas_oficina?style=for-the-badge&color=3b82f6)
  ![GitHub issues](https://img.shields.io/github/issues/klimadev/vendas_oficina?style=for-the-badge&color=f59e0b)
  ![GitHub pull requests](https://img.shields.io/github/issues-pr/klimadev/vendas_oficina?style=for-the-badge&color=ec4899)

  ![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=fff)
  ![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=fff)
  ![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=111)
  ![GitHub Actions](https://img.shields.io/badge/GitHub_Actions-2088FF?style=for-the-badge&logo=github-actions&logoColor=fff)

  <!-- ─── AUTO UPDATED BADGES ──────────────────────────────── -->
  [![pages-build-deployment](https://github.com/klimadev/vendas_oficina/actions/workflows/pages/pages-build-deployment/badge.svg)](https://github.com/klimadev/vendas_oficina/actions/workflows/pages/pages-build-deployment)
  [![lint](https://github.com/klimadev/vendas_oficina/actions/workflows/lint.yml/badge.svg)](https://github.com/klimadev/vendas_oficina/actions/workflows/lint.yml)

  </p>

  <hr />
</div>

---

<details open>
<summary><strong>📑 Table of Contents</strong></summary>

- [About](#about)
- [Features](#features)
- [Tech Stack](#tech-stack)
- [Getting Started](#getting-started)
- [Usage](#usage)
- [Project Structure](#project-structure)
- [Roadmap](#roadmap)
- [Contributing](#contributing)
- [License](#license)
- [Contact](#contact)

</details>

---

## 🧠 About

**Autoflex — Vendas & Orçamento de Oficina** is a web-based quotation and sales management system built for auto repair shops. It streamlines the entire workflow from customer intake and parts estimation to printed quotes and payment tracking.

Born from the real-world needs of independent mechanics, the project prioritises **speed**, **simplicity**, and **offline-first reliability** — no heavy frameworks, no database servers, just clean HTML+CSS+JS delivered via Tailwind and ready to run anywhere.

### Why Autoflex?

| Pain point | Solution |
|---|---|
| ❌ Paper-based quotes get lost | ✅ Digital templates with instant print |
| ❌ Slow load times on old shop PCs | ✅ Vanilla JS + Tailwind — light as a feather |
| ❌ Complicated ERP overkill | ✅ Purpose-built for the small workshop |
| ❌ No offline fallback | ✅ Works from `file://` or any static host |

---

## ✨ Features

### Core

- **📄 Smart Quotation Engine** — generate itemised quotes with labour, parts, taxes & discounts
- **🖨️ Print‑optimised Layout** — `demo-print.html` produces clean, client‑ready paper quotes
- **🔍 Vehicle & Customer Lookup** — quick search by plate, name, or phone
- **📦 Inventory Quick‑add** — frequently used parts with auto‑price recall
- **🧮 Auto‑calculation** — subtotals, tax (ICMS/ISS), and grand totals in real time

### Quality of Life

- **🌙 Dark‑compatible UI** — Tailwind theming scales to any brand colours
- **⚡ Sub‑second loads** — no frameworks, no bloat
- **📱 Responsive** — works on desktops, tablets, and phones
- **🌐 i18n‑ready** — built with `pt-BR` locale, trivial to localise

---

## 🛠 Tech Stack

| Layer | Technology | Purpose |
|---|---|---|
| **Markup** | ![HTML5](https://img.shields.io/badge/-HTML5-E34F26?logo=html5&logoColor=fff) | Semantic document structure |
| **Styling** | ![Tailwind CSS](https://img.shields.io/badge/-Tailwind_CSS-06B6D4?logo=tailwindcss&logoColor=fff) | Utility‑first responsive design |
| **Typography** | ![Inter](https://img.shields.io/badge/-Inter-000?logo=google-fonts&logoColor=fff) | Clean, highly legible typeface |
| **Tooling** | ![GitHub Actions](https://img.shields.io/badge/-GitHub_Actions-2088FF?logo=github-actions&logoColor=fff) | CI/CD, linting, auto‑badges |

No bundlers, no transpilers, no runtime dependencies. Open `index.html` and go.

---

## 🚀 Getting Started

### Prerequisites

- A modern browser (Chrome 90+, Firefox 88+, Edge 90+, Safari 15+)
- _Optional:_ a local HTTP server for advanced testing

```bash
# Clone the repository
git clone https://github.com/klimadev/vendas_oficina.git

# Navigate into the project
cd vendas_oficina

# Serve locally (choose one)
npx serve .              # Node-based static server
python -m http.server    # Python 3
php -S localhost:8080    # PHP built-in
```

Then open `http://localhost:3000` (or the port shown in your terminal).

> **No `npm install` needed.** The project has zero runtime dependencies.

### Docker (optional)

```dockerfile
FROM nginx:alpine
COPY . /usr/share/nginx/html
EXPOSE 80
```

Build & run:

```bash
docker build -t autoflex .
docker run -p 8080:80 autoflex
```

---

## 🖥 Usage

1. **Open** `demo-print.html` (or the main `index.html` once available)
2. **Fill** customer & vehicle details
3. **Add** line items — labour, parts, services
4. **Review** auto‑calculated totals
5. **Print** or save as PDF — the print stylesheet strips chrome & backgrounds automatically

> 💡 _Tip:_ Bookmark `file:///path/to/demo-print.html` on the shop computer for one‑click access.

---

## 📁 Project Structure

```
vendas_oficina/
├── autoflex.webp           # App logo / branding
├── demo-print.html         # Printable quotation template
├── README.md               # You are here 📍
├── .gitignore
├── .github/
│   ├── workflows/
│   │   ├── lint.yml        # HTML & CSS linting on push/PR
│   │   └── static.yml      # Deploy to GitHub Pages
│   ├── ISSUE_TEMPLATE/
│   │   ├── bug_report.md
│   │   └── feature_request.md
│   ├── CODE_OF_CONDUCT.md
│   └── CONTRIBUTING.md
└── LICENSE
```

---

## 🗺 Roadmap

- [ ] Main dashboard (`index.html`)
- [ ] Customer database (localStorage / IndexedDB)
- [ ] Parts inventory manager
- [ ] Multi‑user / PIN‑based access
- [ ] Export to PDF (jsPDF or native)
- [ ] WhatsApp‑ready quote sharing
- [ ] Dark mode toggle

---

## 🤝 Contributing

Contributions are what make the open‑source community such an amazing place. Any contribution — code, design, docs, bug reports — is **greatly appreciated**.

Please read [`CONTRIBUTING.md`](.github/CONTRIBUTING.md) for the full code‑of‑conduct and process.

1. Fork the Project
2. Create your Feature Branch (`git checkout -b feat/amazing`)
3. Commit your Changes (`git commit -m 'feat: add amazing feature'`)
4. Push to the Branch (`git push origin feat/amazing`)
5. Open a Pull Request

### Commit Convention

We follow [Conventional Commits](https://www.conventionalcommits.org/):

```
feat:     new feature
fix:      bug fix
docs:     documentation
style:    formatting
refactor: code restructuring
perf:     performance
test:     testing
chore:    tooling / CI
```

---

## 📄 License

Distributed under the **MIT License**. See [`LICENSE`](LICENSE) for more information.

---

## 📬 Contact

**Project Maintainer** — [@darcijr](https://github.com/darcijr)

Project Link: [https://github.com/klimadev/vendas_oficina](https://github.com/klimadev/vendas_oficina)

---

<div align="center">
  <sub>Built with ❤️ for small workshops everywhere.</sub>
  <br />
  <sub>🇧🇷 · 🇺🇸 · 🌍</sub>
</div>