{"id":22979231,"url":"https://github.com/rysth/react-merkautoec","last_synced_at":"2026-05-05T12:32:52.532Z","repository":{"id":207815607,"uuid":"717268364","full_name":"Rysth/REACT-MerkautoEC","owner":"Rysth","description":"Revolutionize 🚗 services with MerkautoEC's cutting-edge React (CRA) project on GitHub! Enhancing efficiency and user experience seamlessly. ","archived":false,"fork":false,"pushed_at":"2024-09-18T14:36:23.000Z","size":2205,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"old-version","last_synced_at":"2025-02-07T23:46:49.938Z","etag":null,"topics":["javascript","react","tailwindcss"],"latest_commit_sha":null,"homepage":"https://react-merkautoec.onrender.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Rysth.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-11-11T00:41:04.000Z","updated_at":"2024-09-18T14:36:27.000Z","dependencies_parsed_at":"2024-12-15T01:26:15.530Z","dependency_job_id":"7e1a7f6c-ada5-41e0-99a3-40b8fb6a5367","html_url":"https://github.com/Rysth/REACT-MerkautoEC","commit_stats":null,"previous_names":["rysth/react-merkautoec"],"tags_count":0,"template":false,"template_full_name":"Rysth/REACT-Template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rysth%2FREACT-MerkautoEC","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rysth%2FREACT-MerkautoEC/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rysth%2FREACT-MerkautoEC/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rysth%2FREACT-MerkautoEC/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rysth","download_url":"https://codeload.github.com/Rysth/REACT-MerkautoEC/tar.gz/refs/heads/old-version","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246785428,"owners_count":20833471,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","react","tailwindcss"],"created_at":"2024-12-15T01:24:42.870Z","updated_at":"2026-05-05T12:32:52.520Z","avatar_url":"https://github.com/Rysth.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MerkautoEC — Sistema de Órdenes de Trabajo\n\n![banner](banner.png)\n\nAplicación web (SPA) para la gestión de órdenes de recepción de vehículos del taller **MerkautoEC**. Permite registrar clientes, datos del vehículo, equipamiento, marcar daños sobre una silueta del auto, generar órdenes imprimibles y consultar el historial.\n\n\u003e Aplicación interna de un solo operador (admin). Las órdenes se persisten en `localStorage` y se replican al backend SOAP de Cofic vía Axios.\n\n---\n\n## Tecnologías\n\n| Capa | Stack |\n|---|---|\n| Runtime / Package manager | **Bun 1.3+** |\n| Build tool | **Vite 5** |\n| UI | **React 18**, **Tailwind CSS 4**, **DaisyUI 5** |\n| Estado global | **Zustand 5** |\n| Formularios | **react-hook-form** |\n| Routing | **react-router-dom 6** |\n| HTTP | **axios** (SOAP/XML) |\n| Notificaciones | **react-toastify** |\n| Impresión | **react-to-print** |\n\n---\n\n## Requisitos previos\n\n- [Bun](https://bun.sh) ≥ 1.3\n- Acceso al endpoint SOAP de Cofic (variables de entorno).\n\n---\n\n## Variables de entorno\n\nCrear un archivo `.env` en la raíz del proyecto:\n\n```env\nVITE_API_ENDPOINT=https://\u003ctu-host-cofic\u003e/ServicioWeb.asmx\nVITE_TOKEN=\u003ctu-token-de-acceso\u003e\n```\n\n\u003e **Seguridad:** las credenciales de login (`admin@merkautoec.com` / `@MerkautoEC`) están hardcodeadas en `src/stores/useAuthStore.js`. Para uso en producción se recomienda mover la validación al backend.\n\n---\n\n## Comandos\n\n```bash\nbun install        # instalar dependencias\nbun run dev        # servidor de desarrollo (http://localhost:5173/merkautoec)\nbun run build      # build de producción → carpeta build/\nbun run serve      # preview del build\n```\n\n---\n\n## Estructura del proyecto\n\n```\nsrc/\n├── App.jsx                 # Router + rutas protegidas\n├── index.jsx               # Bootstrap React\n├── index.css               # Tailwind v4 + DaisyUI v5 (CSS-first config)\n│\n├── assets/images/          # Imágenes de marca y silueta del auto\n│\n├── components/\n│   ├── Accordion/          # Item desplegable para listado de órdenes\n│   ├── Auto/               # Canvas para marcar daños sobre el auto (drag \u0026 drop)\n│   ├── Forms/\n│   │   ├── Checkbox/       # Checkbox de equipamiento\n│   │   ├── Input/          # Input genérico con react-hook-form\n│   │   └── TextArea/       # Textarea genérico\n│   ├── Header/             # Cabecera + navegación condicional\n│   ├── Heading/            # Título de página + fecha\n│   ├── NavBar/             # Menú principal\n│   └── ProtectedRoute/     # HOC de autenticación\n│\n├── pages/\n│   ├── Login/              # Pantalla de inicio de sesión\n│   ├── Order/\n│   │   ├── Order.jsx       # Formulario de nueva orden\n│   │   └── OrderList.jsx   # Listado de órdenes guardadas\n│   └── Vehicle/            # Búsqueda por placa + historial (sin ruta activa)\n│\n└── stores/                 # Stores Zustand\n    ├── soapClient.js       # Helper Axios + envoltorio SOAP/XML\n    ├── useAuthStore.js     # Autenticación (login, logout, sesión activa)\n    ├── useOrderStore.js    # CRUD órdenes + checkCedula (servicio TRXCONCLI)\n    ├── useVehicleStore.js  # CRUD vehículos locales\n    └── equipmentFields.js  # Catálogo estático de equipamiento (24 ítems)\n```\n\n---\n\n## Rutas\n\n| Ruta | Componente | Acceso |\n|---|---|---|\n| `/` | Login | Solo si NO hay sesión activa |\n| `/orden` | Nueva orden | Requiere sesión |\n| `/listado` | Listado de órdenes | Requiere sesión (link comentado en NavBar) |\n| `*` | Redirige a `/orden` | Requiere sesión |\n\n\u003e El componente `Vehicle.jsx` existe pero no está registrado como ruta.\n\n---\n\n## Estado global (Zustand)\n\nCada store es un hook `useXxxStore`. Ejemplo de consumo:\n\n```jsx\nimport { useAuthStore } from './stores/useAuthStore';\n\nfunction Header() {\n  const active = useAuthStore((s) =\u003e s.userCredentials.active);\n  const logout = useAuthStore((s) =\u003e s.logout);\n  // ...\n}\n```\n\n| Store | Estado clave | Persistencia |\n|---|---|---|\n| `useAuthStore` | `userCredentials.active`, `loading` | `localStorage.active` |\n| `useOrderStore` | `orderArray`, `selectedOrder`, `cedulaExists` | `localStorage.ordenes` |\n| `useVehicleStore` | `vehicleArray`, `selectedVehicle` | `localStorage.vehiculos` |\n\n---\n\n## API (SOAP/XML)\n\nTodas las llamadas pasan por `src/stores/soapClient.js`, que envuelve el JSON en un sobre SOAP 1.2 dirigido a `coficeptrx.asvesot.com`. El campo `servicio` discrimina la operación:\n\n| Servicio | Descripción |\n|---|---|\n| `LOGIN` | Autenticación |\n| `TRXINGORD` | Guardar nueva orden |\n| `TRXCONCLI` | Consultar cliente por cédula |\n\n---\n\n## Notas sobre el deploy\n\n- En `vite.config.ts` el `base` apunta a `https://www.asvesot.com/merkautoec`. Ajustar si se publica en otro dominio.\n- Salida del build: carpeta `build/` (no `dist/`).\n\n---\n\n## Linters\n\n```bash\nbunx stylelint \"**/*.{css,scss}\" --fix\nbunx eslint \"**/*.{js,jsx}\" --fix\n```\n\n---\n\n## Autor\n\n**John Palacios** — [LinkedIn](https://www.linkedin.com/in/john-rysthcraft/) · [GitHub](https://github.com/Rysth)\n\n## Licencia\n\n[MIT](./LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frysth%2Freact-merkautoec","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frysth%2Freact-merkautoec","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frysth%2Freact-merkautoec/lists"}