planilla/ui

Project UI (Vue 3 + Vite)

This project frontend is built with Vue 3 and Vite. It provides a user interface for managing various aspects of the application.

Development

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 to learn more.

Learn more about IDE Support for Vue in the Vue Docs Scaling up Guide.

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.

• 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):

<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:

<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):

<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).