# Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).

## Standardized Card Components

This section documents the standardized card components used throughout the UI for modules like Asistencias, Empleados, Planillas, and Tareas. These components have been refactored for a consistent structure, styling approach, and user experience.

### Overview

Card components provide a summarized display of an item (e.g., an employee, a task) and offer quick actions. The standardization ensures that users encounter a familiar layout and interaction pattern across different modules.

### Common HTML Structure

All standardized card components share a common HTML structure:

-   **Root Element:** `<div class="card ...">`
    -   This is the main container for the card.
    -   Styling is primarily applied using Tailwind CSS utility classes. Common classes include `bg-white shadow-md rounded-lg p-4 md:p-6 m-2 border border-gray-200 hover:shadow-lg transition-shadow duration-300 ease-in-out flex flex-col`.
-   **Card Header:** `<div class="card-header ...">`
    -   Typically contains the title or ID of the item and a status badge.
    -   Styled with Tailwind: `flex justify-between items-center mb-3 md:mb-4 pb-2 md:pb-3 border-b border-gray-100`.
    -   The title element (e.g., `<h4>`) uses module-specific accent colors.
-   **Card Body:** `<div class="card-body ...">`
    -   Displays the main content fields of the item.
    -   Styled with Tailwind: `text-sm text-gray-700 space-y-2`.
-   **Card Actions:** `<div class="card-actions ...">`
    -   Contains action buttons like "Editar" and "Eliminar".
    -   Styled with Tailwind: `mt-auto pt-3 md:pt-4 flex justify-end space-x-2 md:space-x-3`.

### Styling with Tailwind CSS

The visual appearance of the cards (layout, spacing, typography, borders, shadows) is managed by [Tailwind CSS](https://tailwindcss.com/).
-   Utility classes are applied directly in the component templates (`<template>` section of `.vue` files).
-   The Tailwind configuration can be found in `ui/tailwind.config.js`.
-   Core Tailwind directives (`@tailwind base; @tailwind components; @tailwind utilities;`) are included in `ui/src/style.css`.

### Theming with CSS Variables

While Tailwind handles most styling, module-specific theming (especially accent colors) and some global style properties are controlled by CSS variables. These variables are defined in the `:root` scope in `ui/src/style.css`.

**Key CSS Variables:**

-   **Module Accent Colors:**
    -   `--accent-color-asistencias`: Accent color for the Asistencias module (e.g., for headers, buttons).
    -   `--accent-color-empleados`: Accent color for the Empleados module.
    -   `--accent-color-planillas`: Accent color for the Planillas module.
    -   `--accent-color-tareas`: Accent color for the Tareas module.
-   **Common Colors & Styles:**
    -   `--warning-color`: Used for delete buttons and other warning indicators (e.g., `#dc3545`).
    -   `--background-color`: Default background for the application.
    -   `--text-color`: Default text color.
    -   `--muted-text-color`: For less prominent text.
    -   `--border-color`: Default border color.
    -   `--card-shadow`: Default shadow for cards.
    -   `--card-hover-shadow`: Shadow for cards on hover.

**Usage Example (in a Vue component):**

```html
<h4 :style="{ color: 'var(--accent-color-empleados)' }">Employee Name</h4>

<button :style="{ backgroundColor: 'var(--accent-color-empleados)' }">Edit Employee</button>
```
Alternatively, Tailwind's arbitrary value support can be used with CSS variables:
```html
<h4 class="text-[var(--accent-color-empleados)]">Employee Name</h4>
<button class="bg-[var(--accent-color-empleados)] hover:bg-[var(--accent-color-empleados)]/90 ...">Edit</button>
```
The latter approach (Tailwind arbitrary values) is generally preferred for consistency with other Tailwind classes, but direct `:style` binding is also used, especially for properties not easily covered by Tailwind utilities or for dynamic hover effects managed in JavaScript.

### Functionality

-   **Actions:**
    -   **Edit:** Navigates to the form view for editing the item (e.g., `/empleados/:id`).
    -   **Delete:** Initiates a delete process for the item.
-   **Delete Confirmation:** A standardized JavaScript `confirm()` dialog is used before deleting an item, with a message format like: `¿Está seguro de que desea eliminar [tipo de item] "[nombre/ID del item]" (ID: [ID])?`.

### Component Usage

Each card component is designed to be used within its respective module's views. They typically expect a prop containing the item data and emit an `edit` event.

**Example (`cardAsistencia.vue`):**
```vue
<template>
  <cardAsistencia :asistencia="asistenciaData" @edit="handleEditAsistencia" />
</template>

<script setup>
// ...
const asistenciaData = { id: 1, /* ... other properties */ };
const handleEditAsistencia = (asistenciaId) => {
  // Navigate to edit page or open modal
};
</script>
```
The specific prop name matches the module (e.g., `asistencia` for `cardAsistencia`, `employee` for `cardEmpleado`, `planilla` for `cardPlanilla`, `tarea` for `cardTarea`).