💻 Frontend (Vue 3 + Vite)

El frontend de FixBoard está desarrollado con Vue 3, Vite y TailwindCSS, ofreciendo un rendimiento óptimo, arquitectura modular y despliegue en Cloudflare Pages.

---

🧱 Estructura del proyecto

src/
├── assets/              # Recursos estáticos (iconos, imágenes, estilos globales)
├── components/          # Componentes reutilizables de la interfaz
├── composables/         # Hooks y lógica reutilizable (useAuth, useTenant, etc.)
├── pages/               # Vistas principales (Dashboard, Clientes, Reparaciones…)
├── router/              # Configuración de rutas (vue-router)
│   └── index.js
├── services/            # Conexión con APIs y Supabase
│   └── supabaseClient.js
├── store/               # Pinia stores (estado global)
│   └── useTenantStore.js
├── App.vue              # Componente raíz
└── main.js              # Punto de entrada de la aplicación

---

⚙️ Cliente Supabase

Archivo: /src/services/supabaseClient.js

import { createClient } from '@supabase/supabase-js'

export const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY
)

⚠️ Solo usa la clave pública (anon-key) en el frontend.

---

🧩 Vite config

Archivo: /vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: { port: 5173 },
  resolve: { alias: { '@': '/src' } }
})

---

🎨 TailwindCSS

Archivo: /tailwind.config.js

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts}'],
  theme: { extend: {} },
  plugins: []
}

Importación en main.js:

import './assets/tailwind.css'

---

🧠 Estado global (Pinia)

Archivo: /src/store/useTenantStore.js

import { defineStore } from 'pinia'

export const useTenantStore = defineStore('tenant', {
  state: () => ({ tenantId: null, role: null }),
  actions: {
    setTenant(id, role) { this.tenantId = id; this.role = role }
  }
})

---

🔐 Autenticación (ejemplo composable)

import { ref, onMounted } from 'vue'
import { supabase } from '@/services/supabaseClient'

export const useAuth = () => {
  const user = ref(null)
  onMounted(async () => {
    const { data } = await supabase.auth.getUser()
    user.value = data?.user ?? null
  })
  return { user }
}

---

🚀 Despliegue en Cloudflare Pages

Opción	Valor
Framework preset	Vue
Build command	npm run build
Output directory	dist
Node version	20