|
1 | | -# React + Vite |
| 1 | +# 🏗️ Studios Delivery Checklist & R.D.O System |
2 | 2 |
|
3 | | -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. |
| 3 | + |
| 4 | + |
4 | 5 |
|
5 | | -Currently, two official plugins are available: |
| 6 | +## 📖 About the Project |
6 | 7 |
|
7 | | -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh |
8 | | -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh |
| 8 | +This project is a **Digital Construction Management System** designed to optimize the workflow of civil engineering teams. It replaces traditional paper-based reports with a responsive web application, allowing real-time tracking of: |
9 | 9 |
|
10 | | -## React Compiler |
| 10 | +1. **Studios Delivery Checklist:** Tracking finishing details (painting, hydraulics, electrical) for multiple units. |
| 11 | +2. **R.D.O (Daily Construction Report):** A digital version of the official engineering daily log, featuring workforce tracking and climate monitoring. |
11 | 12 |
|
12 | | -The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). |
| 13 | +The system was built with a focus on **Mobile First** design to ensure usability directly at the construction site via smartphones. |
13 | 14 |
|
14 | | -## Expanding the ESLint configuration |
| 15 | +--- |
15 | 16 |
|
16 | | -If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. |
| 17 | +## 🚀 Features |
| 18 | + |
| 19 | +* **Real-time Search:** Filter items by name, function, or status instantly. |
| 20 | +* **Responsive Design:** Optimized layout for Mobile, Tablet, and Desktop. |
| 21 | +* **Engineering Standards:** Visual style mimics official engineering documents (A4 format, technical headers). |
| 22 | +* **Print-Ready:** Specialized CSS (`@media print`) to generate clean PDF reports for physical signing. |
| 23 | +* **Visual Status Indicators:** Automatic color coding for "OK", "Pending", and "In Progress". |
| 24 | + |
| 25 | +--- |
| 26 | + |
| 27 | +## 🛠️ Technologies Used |
| 28 | + |
| 29 | + |
| 30 | + |
| 31 | + |
| 32 | + |
| 33 | + |
| 34 | +--- |
| 35 | + |
| 36 | +## 📱 How to Use |
| 37 | + |
| 38 | +1. **Access the Live Version:** [Click here to view the Dashboard](https://marcossoftwareengineering.github.io/Studios/) |
| 39 | +2. **Search:** Use the input bar at the top to filter specific construction items or workers. |
| 40 | +3. **Mobile View:** Open on your smartphone to see the responsive table adaptation (horizontal scroll). |
| 41 | +4. **Print Report:** On the Desktop version, press `Ctrl + P` (or Cmd + P) to generate the formatted A4 PDF. |
| 42 | + |
| 43 | +--- |
| 44 | + |
| 45 | +## 📂 Project Structure |
| 46 | + |
| 47 | +```text |
| 48 | +1. index.html Main application structure (Semantic HTML) |
| 49 | +2. estilo.css Styles, Responsive Rules, and Print Layouts |
| 50 | +3. index.js Data rendering logic and search algorithm |
| 51 | +4. README.md Project documentation |
| 52 | +``` |
| 53 | + |
| 54 | +--- |
| 55 | + |
| 56 | +## 👷 Author |
| 57 | +Marcos Vinicius |
| 58 | +Software Engineering Student & Civil Construction Intern |
| 59 | + |
| 60 | +Focusing on applying technology to solve real-world engineering problems. |
| 61 | + |
| 62 | +[](https://www.linkedin.com/in/marcos-vinicius-souza-silva-29025a294) |
0 commit comments