planilla/ui/src/components/tareas/cardTarea.vue

<template>
  <div class="tarea-card">
    <h4>Tarea ID: {{ tarea.id }}</h4>
    <p><strong>Título:</strong> {{ tarea.titulo }}</p>
    <p><strong>Empleado ID:</strong> {{ tarea.empleado_id }}</p>
    <p><strong>Fecha:</strong> {{ formatDate(tarea.fecha) }}</p>
    <p><strong>Estado:</strong> <span :class="`estado-${tarea.estado?.toLowerCase().replace(/\s+/g, '-')}`">{{ tarea.estado }}</span></p>
    <p><strong>Tipo:</strong> {{ tarea.tipo || 'N/A' }}</p>
    <p v-if="tarea.precio != null"><strong>Precio:</strong> {{ formatCurrency(tarea.precio) }}</p>
    <p v-if="tarea.observacion"><strong>Observación:</strong> {{ tarea.observacion }}</p>
    
    <div class="actions">
      <button @click="editTarea" class="action-button edit-button">Editar</button>
      <button @click="confirmDeleteTarea" class="action-button delete-button">Eliminar</button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
import { useTareasStore } from '../../stores/useTareas'; 

const props = defineProps({
  tarea: {
    type: Object,
    required: true,
  },
});

const emit = defineEmits(['edit']);

const tareasStore = useTareasStore();

const formatDate = (dateString) => {
  if (!dateString) return 'N/A';
  const date = new Date(dateString);
  return date.toLocaleString('es-HN', { timeZone: 'America/Tegucigalpa', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' });
};

const formatCurrency = (value) => {
  if (value == null) return ''; 
  return Number(value).toLocaleString('es-PY', { // Paraguayan Guarani
    style: 'currency',
    currency: 'PYG', 
  });
};

const editTarea = () => {
  emit('edit', props.tarea.id);
};

const confirmDeleteTarea = () => {
  if (confirm(`¿Está seguro de que desea eliminar la tarea "${props.tarea.titulo}"?`)) {
    deleteTareaInternal();
  }
};

const deleteTareaInternal = async () => {
  try {
    await tareasStore.deleteTarea(props.tarea.id);
    // Optionally, emit a 'deleted' event: emit('deleted', props.tarea.id);
    // Or show a success notification.
  } catch (error) {
    console.error('Error deleting tarea:', error);
    alert('Ocurrió un error al eliminar la tarea. Por favor, intente de nuevo.');
    // Potentially show a more user-friendly notification.
  }
};
</script>

<style scoped>
.tarea-card {
  border: 1px solid #e0e0e0;
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s ease-in-out;
}

.tarea-card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

.tarea-card h4 {
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--accent-color-tareas); /* Accent color for title */
  font-size: 1.15em; /* Slightly smaller than a typical h3 */
}

.tarea-card p {
  margin: 6px 0;
  color: #555;
  font-size: 0.95em;
  line-height: 1.5;
}

.tarea-card p strong {
  color: #444;
}

.actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
}

.action-button {
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.edit-button {
  background-color: var(--accent-color-tareas);
  color: white;
}
.edit-button:hover {
  filter: brightness(0.9); /* Standard hover effect */
}

.delete-button {
  background-color: #dc3545; /* Red */
  color: white;
}
.delete-button:hover {
  background-color: #c82333; /* Darker red */
}

/* Status styling: Added .replace(/\s+/g, '-') for multi-word statuses */
.estado-pendiente {
  color: #ff9800; /* Orange */
  font-weight: bold;
}
.estado-realizada,
.estado-completada, /* Common synonyms for 'done' */
.estado-hecho {
  color: #4caf50; /* Green */
  font-weight: bold;
}
.estado-en-progreso { /* Example for 'in progress' */
    color: #2196f3; /* Blue */
    font-weight: bold;
}
.estado-anulada,
.estado-cancelada {
  color: #f44336; /* Red */
  font-weight: bold;
  /* text-decoration: line-through; */ /* Optional */
}
</style>