nucleo000/planilla
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): Standardize card components and update README

Browse Source 
I've standardized the visual appearance, structure, and functionality of card components across different modules (Asistencias, Empleados, Planillas, Tareas) to ensure a consistent user experience for you.

Key changes include:

- **Consistent HTML Structure:** All cards now follow a common layout with `card-header`, `card-body`, and `card-actions` sections.
- **Tailwind CSS Styling:** I've refactored card styling to use Tailwind CSS utility classes, removing scoped CSS where possible. This promotes maintainability and a unified design language. Tailwind CSS has been configured for the `ui` package.
- **CSS Variables for Theming:** I've introduced global CSS variables in `ui/src/style.css` for module-specific accent colors and common UI elements (e.g., warning colors, shadows), allowing for easier theming and consistent color usage.
- **Standardized Functionality:**
    - I've ensured "Edit" and "Delete" buttons have a consistent appearance and behavior.
    - Delete confirmation dialogs now use a standard message format.
    - I've removed the "View Details" button from `cardEmpleado.vue` for consistency, as other modules integrate detail viewing within their "Edit" forms.
- **README Update:** I've added a comprehensive section to `ui/README.md` documenting the standardized card components, including their structure, styling approach with Tailwind, theming via CSS variables, and basic usage guidelines.

These changes improve the visual consistency and maintainability of the UI's card elements.
This commit is contained in:
google-labs-jules[bot]
2025-05-31 07:23:55 +00:00
parent 8fd1ba672e
commit d91f23c39e
8 changed files with 353 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
ui/src/components/planillas/cardPlanilla.vue
View File

@@ -1,15 +1,31 @@
<template>
<div class="planilla-card">
<h4>Planilla ID: {{ planilla.id }}</h4>
<p><strong>Título:</strong> {{ planilla.titulo }}</p>
<p><strong>Empleado ID:</strong> {{ planilla.empleado_id }}</p>
<p><strong>Desde:</strong> {{ formatDate(planilla.fecha_desde) }}</p>
<p><strong>Hasta:</strong> {{ formatDate(planilla.fecha_hasta) }}</p>
<p><strong>Total:</strong> {{ formatCurrency(planilla.total) }}</p>
<p><strong>Estado:</strong> <span :class="`estado-${planilla.estado?.toLowerCase()}`">{{ planilla.estado }}</span></p>
<div class="actions">
<button @click="editPlanilla">Editar</button>
<button @click="confirmDeletePlanilla">Eliminar</button>
<div class="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">
<div class="flex justify-between items-center mb-3 md:mb-4 pb-2 md:pb-3 border-b border-gray-100">
<h4 class="text-lg md:text-xl font-semibold" :style="{ color: 'var(--accent-color-planillas)' }">Planilla ID: {{ planilla.id }}</h4>
<span :class="['px-2 py-1 text-xs font-bold text-white rounded-full', getStatusClass(planilla.estado)]">
{{ planilla.estado || 'N/A' }}
</span>
</div>
<div class="text-sm text-gray-700 space-y-2">
<p><strong class="font-medium text-gray-900">Título:</strong> {{ planilla.titulo }}</p>
<p><strong class="font-medium text-gray-900">Empleado ID:</strong> {{ planilla.empleado_id }}</p>
<p><strong class="font-medium text-gray-900">Desde:</strong> {{ formatDate(planilla.fecha_desde) }}</p>
<p><strong class="font-medium text-gray-900">Hasta:</strong> {{ formatDate(planilla.fecha_hasta) }}</p>
<p><strong class="font-medium text-gray-900">Total:</strong> {{ formatCurrency(planilla.total) }}</p>
</div>
<div class="mt-auto pt-3 md:pt-4 flex justify-end space-x-2 md:space-x-3">
<button
@click="editPlanilla"
class="px-3 py-1 md:px-4 md:py-2 text-xs md:text-sm font-medium rounded-md transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 text-white"
:style="{ backgroundColor: 'var(--accent-color-planillas)', borderColor: 'var(--accent-color-planillas)' }"
@mouseover="buttonHover($event, true)"
@mouseleave="buttonHover($event, false)"
:class="`focus:ring-[var(--accent-color-planillas)]`"
>Editar</button>
<button
@click="confirmDeletePlanilla"
class="px-3 py-1 md:px-4 md:py-2 text-xs md:text-sm font-medium rounded-md transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 bg-red-600 hover:bg-red-700 text-white focus:ring-red-500"
>Eliminar</button>
</div>
</div>
</template>
@@ -36,9 +52,7 @@ const formatDate = (dateString) => {
};
const formatCurrency = (value) => {
if (value == null) return 'N/A'; // Handle null or undefined totals
// Assuming the value is a number or can be converted to one.
// Adjust 'es-PY' and currency 'PYG' (Paraguayan Guarani) as needed.
if (value == null) return 'N/A';
return Number(value).toLocaleString('es-PY', {
style: 'currency',
currency: 'PYG'
@@ -50,8 +64,7 @@ const editPlanilla = () => {
};
const confirmDeletePlanilla = () => {
// In a real app, you'd use a confirmation dialog here
if (confirm(`¿Está seguro de que desea eliminar la planilla "${props.planilla.titulo}"?`)) {
if (confirm(`¿Está seguro de que desea eliminar la planilla "${props.planilla.titulo}" (ID: ${props.planilla.id})?`)) {
deletePlanilla();
}
};
@@ -59,85 +72,35 @@ const confirmDeletePlanilla = () => {
const deletePlanilla = async () => {
try {
await planillasStore.deletePlanilla(props.planilla.id);
// Optionally, emit an event or show a notification upon successful deletion
// For example: emit('deleted', props.planilla.id);
} catch (error) {
console.error('Error deleting planilla:', error);
// Handle error (e.g., show a notification to the user)
alert('Ocurrió un error al eliminar la planilla.');
}
};
const getStatusClass = (status) => {
if (!status) return 'bg-gray-400';
const statusNormalized = status.toLowerCase().replace(/\s+/g, '-');
switch (statusNormalized) {
case 'pagado': return 'bg-green-500';
case 'pendiente': return 'bg-yellow-500 text-gray-800';
case 'anulado': return 'bg-red-500';
case 'borrador': return 'bg-gray-500';
default: return 'bg-gray-400';
}
};
const buttonHover = (event, isHovering) => {
if (isHovering) {
event.target.style.filter = 'brightness(90%)';
} else {
event.target.style.filter = 'brightness(100%)';
}
};
</script>
<style scoped>
.planilla-card {
border: 1px solid #ccc;
padding: 16px;
margin-bottom: 16px;
border-radius: 8px;
background-color: #f9f9f9;
}
.planilla-card h4 { /* Updated selector from h3 to h4 */
margin-top: 0;
color: var(--accent-color-planillas); /* Accent color for title */
font-size: 1.2em; /* Adjust size as needed, h4 is typically smaller than h3 */
}
.planilla-card h3 { /* Keep if h3 is used elsewhere, or remove if h4 is the new standard */
margin-top: 0;
color: var(--accent-color-planillas); /* Accent color for title */
}
.planilla-card p {
margin: 8px 0;
color: #555;
}
.planilla-card .actions {
margin-top: 12px;
display: flex;
gap: 8px;
}
.planilla-card button {
padding: 8px 12px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.planilla-card button:hover {
opacity: 0.8;
}
.actions button:first-child { /* Edit button */
background-color: var(--accent-color-planillas);
color: white;
}
.actions button:first-child:hover { /* Edit button hover */
filter: brightness(0.9);
}
.actions button:last-child { /* Delete button */
background-color: var(--warning-color); /* Using warning color for delete */
color: white;
}
.actions button:last-child:hover { /* Delete button hover */
filter: brightness(0.9);
}
/* Example status styling */
.estado-pagado {
color: green;
font-weight: bold;
}
.estado-pendiente {
color: orange;
font-weight: bold;
}
.estado-anulado {
color: red;
font-weight: bold;
text-decoration: line-through;
}
/* All layout and most styling is now handled by Tailwind utility classes. */
/* Scoped styles can be used for very specific cases not covered by Tailwind, if any. */
</style>