diff --git a/ui/src/components/asistencias/cardAsistencia.vue b/ui/src/components/asistencias/cardAsistencia.vue
index b2b3757..6eaeed8 100644
--- a/ui/src/components/asistencias/cardAsistencia.vue
+++ b/ui/src/components/asistencias/cardAsistencia.vue
@@ -1,2 +1,181 @@
+<template>
+  <div class="asistencia-card">
+    <div class="card-header">
+      <span class="empleado-id">Empleado ID: {{ asistencia.empleado_id }}</span>
+      <span :class="`estado-asistencia estado-${asistencia.estado?.toLowerCase().replace(/\s+/g, '-')}`">
+        {{ asistencia.estado || 'N/A' }}
+      </span>
+    </div>
+    <div class="card-body">
+      <p><strong>Entrada:</strong> {{ formatDateTime(asistencia.entrada) }}</p>
+      <p><strong>Salida:</strong> {{ asistencia.salida ? formatDateTime(asistencia.salida) : 'No registrada' }}</p>
+      <p v-if="asistencia.observacion" class="observacion">
+        <strong>Observación:</strong> {{ asistencia.observacion }}
+      </p>
+      <!-- Historial might be too complex for a card, but can be added if needed -->
+      <!-- <p v-if="asistencia.historial"><strong>Historial:</strong> {{ asistencia.historial }}</p> -->
+    </div>
+    <div class="card-actions">
+      <button @click="editAsistencia" class="action-button edit-button">Editar</button>
+      <button @click="confirmDeleteAsistencia" class="action-button delete-button">Eliminar</button>
+    </div>
+  </div>
+</template>
 
-<template></template>
\ No newline at end of file
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { useAsistenciasStore } from '../../stores/useAsistencias';
+
+const props = defineProps({
+  asistencia: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['edit']);
+
+const asistenciasStore = useAsistenciasStore();
+
+const formatDateTime = (dateTimeString) => {
+  if (!dateTimeString) return 'N/A';
+  const date = new Date(dateTimeString);
+  return date.toLocaleString('es-ES', { // Spanish locale
+    year: 'numeric',
+    month: '2-digit', // Using 2-digit for month for brevity in card
+    day: '2-digit',   // Using 2-digit for day
+    hour: '2-digit',
+    minute: '2-digit',
+    // second: '2-digit', // Optional: include seconds
+  });
+};
+
+const editAsistencia = () => {
+  emit('edit', props.asistencia.id);
+};
+
+const confirmDeleteAsistencia = () => {
+  if (confirm(`¿Está seguro de que desea eliminar esta asistencia (ID: ${props.asistencia.id})?`)) {
+    deleteAsistenciaInternal();
+  }
+};
+
+const deleteAsistenciaInternal = async () => {
+  try {
+    await asistenciasStore.deleteAsistencia(props.asistencia.id);
+    // Optionally, emit 'deleted' or show notification
+  } catch (error) {
+    console.error('Error deleting asistencia:', error);
+    alert('Ocurrió un error al eliminar la asistencia.');
+  }
+};
+</script>
+
+<style scoped>
+.asistencia-card {
+  border: 1px solid #e0e0e0; /* Lighter border for a softer look */
+  padding: 16px;
+  margin-bottom: 16px;
+  border-radius: 8px;
+  background-color: #fff;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Softer shadow */
+  display: flex;
+  flex-direction: column;
+  transition: box-shadow 0.3s ease-in-out;
+}
+.asistencia-card:hover {
+    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Enhanced shadow on hover */
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 10px; /* Increased padding */
+  border-bottom: 1px solid #f0f0f0; /* Even lighter border */
+}
+
+.empleado-id {
+  font-weight: bold;
+  color: #2c3e50; /* Dark blue/grey */
+  font-size: 1.05em;
+}
+
+.estado-asistencia {
+  padding: 5px 10px; /* Slightly more padding */
+  border-radius: 15px; /* Pill shape */
+  font-size: 0.8em;
+  font-weight: bold;
+  color: white;
+  text-transform: uppercase; /* Uppercase status */
+  letter-spacing: 0.5px;
+}
+
+.card-body p {
+  margin: 8px 0;
+  color: #555;
+  font-size: 0.95em;
+  line-height: 1.6; /* Improved line spacing */
+}
+.card-body p strong {
+  color: #333;
+}
+.observacion {
+  font-style: italic;
+  color: #666;
+  background-color: #f8f9fa; /* Very light grey background */
+  padding: 10px; /* More padding */
+  border-left: 3px solid #007bff; /* Blue accent line */
+  border-radius: 4px;
+  margin-top:10px;
+  font-size: 0.9em; /* Slightly smaller for observation */
+}
+
+.card-actions {
+  margin-top: auto; 
+  padding-top: 16px; /* More space before actions */
+  display: flex;
+  justify-content: flex-end; 
+  gap: 10px;
+}
+
+.action-button {
+  padding: 8px 15px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 0.9em;
+  font-weight: 500; /* Slightly bolder text on buttons */
+  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
+}
+.action-button:hover{
+    transform: translateY(-2px); /* More pronounced lift */
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.edit-button {
+  background-color: #007bff; 
+  color: white;
+}
+.edit-button:hover {
+  background-color: #0056b3;
+}
+
+.delete-button {
+  background-color: #dc3545; 
+  color: white;
+}
+.delete-button:hover {
+  background-color: #c82333;
+}
+
+/* Estado specific styling */
+.estado-pendiente { background-color: #ffc107; color: #212529;} /* Amber, dark text */
+.estado-presente,
+.estado-confirmada { background-color: #28a745; color: white;} /* Green */
+.estado-ausente { background-color: #dc3545; color: white;} /* Red */
+.estado-justificada { background-color: #17a2b8; color: white;} /* Info Blue */
+.estado-cancelada,
+.estado-anulada { background-color: #6c757d; color: white;} /* Gray */
+</style>
diff --git a/ui/src/components/asistencias/tablaAsistencias.vue b/ui/src/components/asistencias/tablaAsistencias.vue
index b2b3757..ecdc0e7 100644
--- a/ui/src/components/asistencias/tablaAsistencias.vue
+++ b/ui/src/components/asistencias/tablaAsistencias.vue
@@ -1,2 +1,163 @@
+<template>
+  <div class="tabla-asistencias-container">
+    <table class="tabla-asistencias">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Empleado ID</th>
+          <th>Entrada</th>
+          <th>Salida</th>
+          <th>Estado</th>
+          <th>Observación</th>
+          <th>Acciones</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="!asistencias || asistencias.length === 0">
+          <td :colspan="7" style="text-align: center;">No hay asistencias para mostrar.</td>
+        </tr>
+        <tr v-for="asistencia in asistencias" :key="asistencia.id">
+          <td>{{ asistencia.id }}</td>
+          <td>{{ asistencia.empleado_id }}</td>
+          <td>{{ formatDateTime(asistencia.entrada) }}</td>
+          <td>{{ asistencia.salida ? formatDateTime(asistencia.salida) : 'N/A' }}</td>
+          <td><span :class="`estado-${asistencia.estado?.toLowerCase().replace(/\s+/g, '-')}`">{{ asistencia.estado }}</span></td>
+          <td :title="asistencia.observacion">{{ truncateText(asistencia.observacion, 50) }}</td>
+          <td>
+            <button @click="editAsistencia(asistencia.id)" class="action-button edit-button">Editar</button>
+            <button @click="confirmDeleteAsistencia(asistencia)" class="action-button delete-button">Eliminar</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
 
-<template></template>
\ No newline at end of file
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { useAsistenciasStore } from '../../stores/useAsistencias';
+
+const props = defineProps({
+  asistencias: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['edit']);
+
+const asistenciasStore = useAsistenciasStore();
+
+const formatDateTime = (dateTimeString) => {
+  if (!dateTimeString) return 'N/A';
+  const date = new Date(dateTimeString);
+  // Using UTC methods to ensure consistency if dates are stored in UTC
+  const day = String(date.getUTCDate()).padStart(2, '0');
+  const month = String(date.getUTCMonth() + 1).padStart(2, '0'); // Months are 0-indexed
+  const year = date.getUTCFullYear();
+  const hours = String(date.getUTCHours()).padStart(2, '0');
+  const minutes = String(date.getUTCMinutes()).padStart(2, '0');
+  return `${day}/${month}/${year} ${hours}:${minutes}`;
+};
+
+const truncateText = (text, maxLength) => {
+  if (!text) return 'N/A';
+  if (text.length <= maxLength) return text;
+  return text.substring(0, maxLength) + '...';
+};
+
+const editAsistencia = (id) => {
+  emit('edit', id);
+};
+
+const confirmDeleteAsistencia = (asistencia) => {
+  if (confirm(`¿Está seguro de que desea eliminar la asistencia ID: ${asistencia.id} (Empleado: ${asistencia.empleado_id})?`)) {
+    deleteAsistenciaInternal(asistencia.id);
+  }
+};
+
+const deleteAsistenciaInternal = async (id) => {
+  try {
+    await asistenciasStore.deleteAsistencia(id);
+    // Optional: Show success notification or emit 'deleted' event
+  } catch (error) {
+    console.error(`Error deleting asistencia with id ${id}:`, error);
+    alert('Ocurrió un error al eliminar la asistencia.');
+  }
+};
+</script
+
+<style scoped>
+.tabla-asistencias-container {
+  overflow-x: auto;
+}
+
+.tabla-asistencias {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 1em;
+  font-size: 0.9em;
+}
+
+.tabla-asistencias th,
+.tabla-asistencias td {
+  border: 1px solid #ddd;
+  padding: 10px;
+  text-align: left;
+  vertical-align: middle; /* Good for table cells */
+}
+
+.tabla-asistencias th {
+  background-color: #f4f6f8; /* Light grey for header */
+  font-weight: 600; /* Bolder text for header */
+  color: #333;
+}
+
+.tabla-asistencias tr:nth-child(even) {
+  background-color: #f9fafb; /* Very light alternating row color */
+}
+
+.tabla-asistencias tr:hover {
+  background-color: #f0f0f0; /* Hover effect */
+}
+
+.action-button {
+  padding: 6px 10px;
+  margin-right: 6px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.85em;
+  transition: background-color 0.2s ease, transform 0.1s ease;
+}
+.action-button:hover {
+  transform: translateY(-1px); /* Slight lift effect */
+}
+
+.edit-button {
+  background-color: #007bff; /* Blue */
+  color: white;
+}
+.edit-button:hover {
+  background-color: #0056b3;
+}
+
+.delete-button {
+  background-color: #dc3545; /* Red */
+  color: white;
+}
+.delete-button:hover {
+  background-color: #c82333;
+}
+
+/* Estado specific styling (using text color for tables is often cleaner) */
+.estado-pendiente { color: #ffc107; font-weight: bold; } /* Amber */
+.estado-presente,
+.estado-confirmada { color: #28a745; font-weight: bold; } /* Green */
+.estado-ausente { color: #dc3545; font-weight: bold; } /* Red */
+.estado-justificada { color: #17a2b8; font-weight: bold; } /* Info Blue */
+.estado-cancelada,
+.estado-anulada { color: #6c757d; font-weight: bold; } /* Gray */
+/* If you prefer background colors like in cards, copy those styles here, but they can be visually heavy in tables. */
+</style>
diff --git a/ui/src/components/planillas/cardPlanilla.vue b/ui/src/components/planillas/cardPlanilla.vue
index b2b3757..55a6d59 100644
--- a/ui/src/components/planillas/cardPlanilla.vue
+++ b/ui/src/components/planillas/cardPlanilla.vue
@@ -1,2 +1,134 @@
+<template>
+  <div class="planilla-card">
+    <h3>{{ planilla.titulo }}</h3>
+    <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>
+  </div>
+</template>
 
-<template></template>
\ No newline at end of file
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { usePlanillasStore } from '../../stores/usePlanillas';
+
+const props = defineProps({
+  planilla: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['edit']);
+
+const planillasStore = usePlanillasStore();
+
+const formatDate = (dateString) => {
+  if (!dateString) return 'N/A';
+  const date = new Date(dateString);
+  return date.toLocaleDateString('es-ES', { // Using Spanish locale for date
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+};
+
+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.
+  return Number(value).toLocaleString('es-PY', { 
+    style: 'currency', 
+    currency: 'PYG' 
+  });
+};
+
+const editPlanilla = () => {
+  emit('edit', props.planilla.id);
+};
+
+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}"?`)) {
+    deletePlanilla();
+  }
+};
+
+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)
+  }
+};
+</script>
+
+<style scoped>
+.planilla-card {
+  border: 1px solid #ccc;
+  padding: 16px;
+  margin-bottom: 16px;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+}
+
+.planilla-card h3 {
+  margin-top: 0;
+  color: #333;
+}
+
+.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: #007bff;
+  color: white;
+}
+
+.actions button:last-child { /* Delete button */
+  background-color: #dc3545;
+  color: white;
+}
+
+/* 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;
+}
+</style>
diff --git a/ui/src/components/planillas/tablaPlanillas.vue b/ui/src/components/planillas/tablaPlanillas.vue
index b2b3757..d17d8d6 100644
--- a/ui/src/components/planillas/tablaPlanillas.vue
+++ b/ui/src/components/planillas/tablaPlanillas.vue
@@ -1,2 +1,167 @@
+<template>
+  <div class="tabla-planillas-container">
+    <table class="tabla-planillas">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Título</th>
+          <th>Empleado ID</th>
+          <th>Fecha Desde</th>
+          <th>Fecha Hasta</th>
+          <th>Total</th>
+          <th>Estado</th>
+          <th>Acciones</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="planillas && planillas.length === 0">
+          <td :colspan="8" style="text-align: center;">No hay planillas para mostrar.</td>
+        </tr>
+        <tr v-for="planilla in planillas" :key="planilla.id">
+          <td>{{ planilla.id }}</td>
+          <td>{{ planilla.titulo }}</td>
+          <td>{{ planilla.empleado_id }}</td>
+          <td>{{ formatDate(planilla.fecha_desde) }}</td>
+          <td>{{ formatDate(planilla.fecha_hasta) }}</td>
+          <td>{{ formatCurrency(planilla.total) }}</td>
+          <td><span :class="`estado-${planilla.estado?.toLowerCase()}`">{{ planilla.estado }}</span></td>
+          <td>
+            <button @click="editPlanilla(planilla.id)" class="action-button edit-button">Editar</button>
+            <button @click="confirmDeletePlanilla(planilla)" class="action-button delete-button">Eliminar</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
 
-<template></template>
\ No newline at end of file
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { usePlanillasStore } from '../../stores/usePlanillas';
+
+const props = defineProps({
+  planillas: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['edit']); // Removed 'delete' as it's handled internally
+
+const planillasStore = usePlanillasStore();
+
+const formatDate = (dateString) => {
+  if (!dateString) return 'N/A';
+  const date = new Date(dateString);
+  return date.toLocaleDateString('es-ES', {
+    year: 'numeric',
+    month: '2-digit', // Changed to 2-digit for table compactness
+    day: '2-digit',   // Changed to 2-digit for table compactness
+  });
+};
+
+const formatCurrency = (value) => {
+  if (value == null) return 'N/A';
+  return Number(value).toLocaleString('es-PY', {
+    style: 'currency',
+    currency: 'PYG',
+  });
+};
+
+const editPlanilla = (id) => {
+  emit('edit', id);
+};
+
+const confirmDeletePlanilla = (planilla) => {
+  if (confirm(`¿Está seguro de que desea eliminar la planilla "${planilla.titulo}" (ID: ${planilla.id})?`)) {
+    deletePlanillaInternal(planilla.id);
+  }
+};
+
+const deletePlanillaInternal = async (id) => {
+  try {
+    await planillasStore.deletePlanilla(id);
+    // Optional: Show success notification
+    // No need to emit 'delete' if the store handles list updates and parent components react to store changes
+  } catch (error) {
+    console.error(`Error deleting planilla with id ${id}:`, error);
+    // Optional: Show error notification
+  }
+};
+</script>
+
+<style scoped>
+.tabla-planillas-container {
+  overflow-x: auto; /* Allows table to be scrolled horizontally if needed */
+}
+
+.tabla-planillas {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 1em;
+  font-size: 0.9em;
+}
+
+.tabla-planillas th,
+.tabla-planillas td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
+}
+
+.tabla-planillas th {
+  background-color: #f2f2f2;
+  font-weight: bold;
+}
+
+.tabla-planillas tr:nth-child(even) {
+  background-color: #f9f9f9;
+}
+
+.tabla-planillas tr:hover {
+  background-color: #f1f1f1;
+}
+
+.action-button {
+  padding: 5px 10px;
+  margin-right: 5px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9em;
+}
+
+.edit-button {
+  background-color: #007bff;
+  color: white;
+}
+
+.edit-button:hover {
+  background-color: #0056b3;
+}
+
+.delete-button {
+  background-color: #dc3545;
+  color: white;
+}
+
+.delete-button:hover {
+  background-color: #c82333;
+}
+
+/* Status styling (similar to cardPlanilla) */
+.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; */ /* Optional for table view */
+}
+</style>
diff --git a/ui/src/components/tareas/cardTarea.vue b/ui/src/components/tareas/cardTarea.vue
index b2b3757..ed855ec 100644
--- a/ui/src/components/tareas/cardTarea.vue
+++ b/ui/src/components/tareas/cardTarea.vue
@@ -1,2 +1,159 @@
+<template>
+  <div class="tarea-card">
+    <h4>{{ tarea.titulo }}</h4>
+    <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>
 
-<template></template>
\ No newline at end of file
+<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.toLocaleDateString('es-ES', { // Spanish locale
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+};
+
+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: #333;
+  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: #007bff; /* Primary blue */
+  color: white;
+}
+.edit-button:hover {
+  background-color: #0056b3; /* Darker blue */
+}
+
+.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>
diff --git a/ui/src/components/tareas/tablaTareas.vue b/ui/src/components/tareas/tablaTareas.vue
index b2b3757..c25b903 100644
--- a/ui/src/components/tareas/tablaTareas.vue
+++ b/ui/src/components/tareas/tablaTareas.vue
@@ -1,2 +1,167 @@
+<template>
+  <div class="tabla-tareas-container">
+    <table class="tabla-tareas">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Título</th>
+          <th>Empleado ID</th>
+          <th>Fecha</th>
+          <th>Estado</th>
+          <th>Tipo</th>
+          <th>Precio</th>
+          <th>Planilla ID</th>
+          <th>Acciones</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="!tareas || tareas.length === 0">
+          <td :colspan="9" style="text-align: center;">No hay tareas para mostrar.</td>
+        </tr>
+        <tr v-for="tarea in tareas" :key="tarea.id">
+          <td>{{ tarea.id }}</td>
+          <td>{{ tarea.titulo }}</td>
+          <td>{{ tarea.empleado_id }}</td>
+          <td>{{ formatDate(tarea.fecha) }}</td>
+          <td><span :class="`estado-${tarea.estado?.toLowerCase().replace(/\s+/g, '-')}`">{{ tarea.estado }}</span></td>
+          <td>{{ tarea.tipo || 'N/A' }}</td>
+          <td>{{ tarea.precio != null ? formatCurrency(tarea.precio) : 'N/A' }}</td>
+          <td>{{ tarea.planilla_id || 'N/A' }}</td>
+          <td>
+            <button @click="editTarea(tarea.id)" class="action-button edit-button">Editar</button>
+            <button @click="confirmDeleteTarea(tarea)" class="action-button delete-button">Eliminar</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
 
-<template></template>
\ No newline at end of file
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import { useTareasStore } from '../../stores/useTareas';
+
+const props = defineProps({
+  tareas: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['edit']);
+
+const tareasStore = useTareasStore();
+
+const formatDate = (dateString) => {
+  if (!dateString) return 'N/A';
+  // Assuming dateString might be a full ISO string, ensure it's handled correctly by Date constructor
+  const date = new Date(dateString);
+  const day = String(date.getUTCDate()).padStart(2, '0'); // Use getUTCDate for consistency if dates are stored in UTC
+  const month = String(date.getUTCMonth() + 1).padStart(2, '0'); // Months are 0-indexed
+  const year = date.getUTCFullYear();
+  return `${day}/${month}/${year}`;
+};
+
+const formatCurrency = (value) => {
+  if (value == null) return 'N/A'; 
+  return Number(value).toLocaleString('es-PY', { // Paraguayan Guarani
+    style: 'currency',
+    currency: 'PYG', 
+  });
+};
+
+const editTarea = (id) => {
+  emit('edit', id);
+};
+
+const confirmDeleteTarea = (tarea) => {
+  if (confirm(`¿Está seguro de que desea eliminar la tarea "${tarea.titulo}" (ID: ${tarea.id})?`)) {
+    deleteTareaInternal(tarea.id);
+  }
+};
+
+const deleteTareaInternal = async (id) => {
+  try {
+    await tareasStore.deleteTarea(id);
+    // Optional: Show success notification or emit 'deleted' event
+  } catch (error) {
+    console.error(`Error deleting tarea with id ${id}:`, error);
+    alert('Ocurrió un error al eliminar la tarea.');
+    // Optional: Show error notification
+  }
+};
+</script>
+
+<style scoped>
+.tabla-tareas-container {
+  overflow-x: auto; 
+}
+
+.tabla-tareas {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 1em;
+  font-size: 0.9em;
+}
+
+.tabla-tareas th,
+.tabla-tareas td {
+  border: 1px solid #ddd;
+  padding: 10px; 
+  text-align: left;
+  vertical-align: middle; 
+}
+
+.tabla-tareas th {
+  background-color: #f4f6f8; 
+  font-weight: 600; 
+  color: #333;
+}
+
+.tabla-tareas tr:nth-child(even) {
+  background-color: #f9fafb; 
+}
+
+.tabla-tareas tr:hover {
+  background-color: #f0f0f0; 
+}
+
+.action-button {
+  padding: 6px 10px; 
+  margin-right: 6px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.85em; 
+  transition: background-color 0.2s ease, transform 0.1s ease;
+}
+.action-button:hover {
+    transform: translateY(-1px); 
+}
+
+.edit-button {
+  background-color: #007bff; /* Blue */
+  color: white;
+}
+.edit-button:hover {
+  background-color: #0056b3;
+}
+
+.delete-button {
+  background-color: #dc3545; /* Red */
+  color: white;
+}
+.delete-button:hover {
+  background-color: #c82333;
+}
+
+/* Status styling (consistent with cardTarea) */
+.estado-pendiente { color: #ff9800; font-weight: bold; } /* Orange */
+.estado-realizada,
+.estado-completada, /* Synonyms */
+.estado-hecho { color: #4caf50; font-weight: bold; } /* Green */
+.estado-en-progreso { color: #2196f3; font-weight: bold; } /* Blue */
+.estado-anulada,
+.estado-cancelada { color: #f44336; font-weight: bold; } /* Red */
+</style>
diff --git a/ui/src/stores/useAsistencias.js b/ui/src/stores/useAsistencias.js
index 45a6c1b..d89883f 100644
--- a/ui/src/stores/useAsistencias.js
+++ b/ui/src/stores/useAsistencias.js
@@ -1,5 +1,88 @@
-import { defineStore } from 'pinia'
+import { defineStore } from 'pinia';
+import apiClient from '../apiClient'; // Assuming apiClient is configured
 
-export const useAsistencias = defineStore('asistencias', {
-  state: () => ({ asistencias: [] }),
-})
+// Helper function to get default values for currentAsistencia
+const getDefaultCurrentAsistencia = () => ({
+  id: null,
+  empleado_id: null,
+  entrada: null, // Will likely be a datetime string
+  salida: null,  // Will likely be a datetime string
+  historial: null, // JSON field, can be an object or string
+  observacion: '',
+  estado: 'pendiente', // Default from schema (if applicable, or common practice)
+  // fecha_anulado is not typically part of creation/edit form directly
+});
+
+export const useAsistenciasStore = defineStore('asistencias', {
+  state: () => ({
+    asistencias: [],
+    currentAsistencia: getDefaultCurrentAsistencia(),
+  }),
+  actions: {
+    async fetchAsistencias() {
+      try {
+        const response = await apiClient.get('/api/asistencias');
+        this.asistencias = response.data;
+      } catch (error) {
+        console.error('Error fetching asistencias:', error);
+        // Handle error (e.g., show a notification to the user)
+      }
+    },
+
+    async fetchAsistenciaById(id) {
+      try {
+        const response = await apiClient.get(`/api/asistencias/${id}`);
+        // Assuming API returns dates as ISO strings.
+        // No special date conversion needed here, Pinia will store as is.
+        // Components will handle formatting for display or input fields.
+        this.currentAsistencia = response.data;
+      } catch (error) {
+        console.error(`Error fetching asistencia with id ${id}:`, error);
+        this.currentAsistencia = getDefaultCurrentAsistencia(); // Reset on error
+      }
+    },
+
+    async createAsistencia(asistenciaData) {
+      try {
+        // Ensure date fields are in a format the API expects (e.g., ISO string)
+        // If asistenciaData.entrada/salida are Date objects, convert them:
+        // if (asistenciaData.entrada instanceof Date) asistenciaData.entrada = asistenciaData.entrada.toISOString();
+        // if (asistenciaData.salida instanceof Date) asistenciaData.salida = asistenciaData.salida.toISOString();
+        await apiClient.post('/api/asistencias', asistenciaData);
+        await this.fetchAsistencias(); // Refresh the list
+      } catch (error) {
+        console.error('Error creating asistencia:', error);
+        throw error; // Re-throw to allow form to handle it
+      }
+    },
+
+    async updateAsistencia(id, asistenciaData) {
+      try {
+        // Similar date conversion logic as in createAsistencia if needed
+        // if (asistenciaData.entrada instanceof Date) asistenciaData.entrada = asistenciaData.entrada.toISOString();
+        // if (asistenciaData.salida instanceof Date) asistenciaData.salida = asistenciaData.salida.toISOString();
+        await apiClient.put(`/api/asistencias/${id}`, asistenciaData);
+        await this.fetchAsistencias(); // Refresh the list
+        this.currentAsistencia = getDefaultCurrentAsistencia(); // Reset currentAsistencia
+      } catch (error) {
+        console.error(`Error updating asistencia with id ${id}:`, error);
+        throw error; // Re-throw to allow form to handle it
+      }
+    },
+
+    async deleteAsistencia(id) {
+      try {
+        await apiClient.delete(`/api/asistencias/${id}`);
+        await this.fetchAsistencias(); // Refresh the list
+      } catch (error) {
+        console.error(`Error deleting asistencia with id ${id}:`, error);
+        throw error; // Re-throw to allow handling in component
+      }
+    },
+
+    // Action to clear currentAsistencia, useful when navigating away from a form
+    clearCurrentAsistencia() {
+      this.currentAsistencia = getDefaultCurrentAsistencia();
+    }
+  },
+});
diff --git a/ui/src/stores/usePlanillas.js b/ui/src/stores/usePlanillas.js
index 5a264f7..3025e0e 100644
--- a/ui/src/stores/usePlanillas.js
+++ b/ui/src/stores/usePlanillas.js
@@ -1,5 +1,81 @@
-import { defineStore } from 'pinia'
+import { defineStore } from 'pinia';
+import apiClient from '../apiClient'; // Assuming apiClient is configured for API calls
 
-export const usePlanillas = defineStore('planillas', {
-  state: () => ({ planillas: [] }),
-})
+export const usePlanillasStore = defineStore('planillas', {
+  state: () => ({
+    planillas: [],
+    currentPlanilla: {
+      id: null,
+      fecha_desde: null,
+      fecha_hasta: null,
+      titulo: '',
+      total: null,
+      estado: 'pagado', // Default value from schema
+      fecha_anulado: null,
+      empleado_id: null,
+      // Empleado relation is not included here, will be handled by ID.
+    },
+  }),
+  actions: {
+    async fetchPlanillas() {
+      try {
+        const response = await apiClient.get('/api/planillas');
+        this.planillas = response.data;
+      } catch (error) {
+        console.error('Error fetching planillas:', error);
+        // Handle error (e.g., show a notification to the user)
+      }
+    },
+
+    async fetchPlanillaById(id) {
+      try {
+        const response = await apiClient.get(`/api/planillas/${id}`);
+        this.currentPlanilla = response.data;
+      } catch (error) {
+        console.error(`Error fetching planilla with id ${id}:`, error);
+        // Handle error
+      }
+    },
+
+    async createPlanilla(planillaData) {
+      try {
+        await apiClient.post('/api/planillas', planillaData);
+        await this.fetchPlanillas(); // Refresh the list
+      } catch (error) {
+        console.error('Error creating planilla:', error);
+        // Handle error
+      }
+    },
+
+    async updatePlanilla(id, planillaData) {
+      try {
+        await apiClient.put(`/api/planillas/${id}`, planillaData);
+        await this.fetchPlanillas(); // Refresh the list
+        this.currentPlanilla = { // Reset currentPlanilla
+          id: null,
+          fecha_desde: null,
+          fecha_hasta: null,
+          titulo: '',
+          total: null,
+          estado: 'pagado',
+          fecha_anulado: null,
+          empleado_id: null,
+        };
+      } catch (error) {
+        console.error(`Error updating planilla with id ${id}:`, error);
+        // Handle error
+      }
+    },
+
+    async deletePlanilla(id) {
+      try {
+        await apiClient.delete(`/api/planillas/${id}`);
+        await this.fetchPlanillas(); // Refresh the list
+      } catch (error)
+        {
+        console.error(`Error deleting planilla with id ${id}:`, error);
+        // Handle error
+      }
+    },
+  },
+});
diff --git a/ui/src/stores/useTareas.js b/ui/src/stores/useTareas.js
index b8caafb..145088e 100644
--- a/ui/src/stores/useTareas.js
+++ b/ui/src/stores/useTareas.js
@@ -1,5 +1,80 @@
-import { defineStore } from 'pinia'
+import { defineStore } from 'pinia';
+import apiClient from '../apiClient'; // Assuming apiClient is configured
 
-export const useTareas = defineStore('tareas', {
-  state: () => ({ tareas: [] }),
-})
+// Helper function to get default values for currentTarea
+const getDefaultCurrentTarea = () => ({
+  id: null,
+  empleado_id: null,
+  planilla_id: null, // Optional
+  titulo: '',
+  precio: null,       // Optional
+  estado: 'pendiente', // Default from schema
+  observacion: '',    // Optional
+  fecha: null,        // Should be a date
+  tipo: '',           // Default from schema
+  // fecha_anulado is not typically part of creation/edit form directly
+});
+
+export const useTareasStore = defineStore('tareas', {
+  state: () => ({
+    tareas: [],
+    currentTarea: getDefaultCurrentTarea(),
+  }),
+  actions: {
+    async fetchTareas() {
+      try {
+        const response = await apiClient.get('/api/tareas');
+        this.tareas = response.data;
+      } catch (error) {
+        console.error('Error fetching tareas:', error);
+        // Consider more sophisticated error handling (e.g., user notifications)
+      }
+    },
+
+    async fetchTareaById(id) {
+      try {
+        const response = await apiClient.get(`/api/tareas/${id}`);
+        this.currentTarea = response.data;
+      } catch (error) {
+        console.error(`Error fetching tarea with id ${id}:`, error);
+        this.currentTarea = getDefaultCurrentTarea(); // Reset on error
+      }
+    },
+
+    async createTarea(tareaData) {
+      try {
+        await apiClient.post('/api/tareas', tareaData);
+        await this.fetchTareas(); // Refresh the list
+      } catch (error) {
+        console.error('Error creating tarea:', error);
+        throw error; // Re-throw to allow form to handle it
+      }
+    },
+
+    async updateTarea(id, tareaData) {
+      try {
+        await apiClient.put(`/api/tareas/${id}`, tareaData);
+        await this.fetchTareas(); // Refresh the list
+        this.currentTarea = getDefaultCurrentTarea(); // Reset currentTarea
+      } catch (error) {
+        console.error(`Error updating tarea with id ${id}:`, error);
+        throw error; // Re-throw to allow form to handle it
+      }
+    },
+
+    async deleteTarea(id) {
+      try {
+        await apiClient.delete(`/api/tareas/${id}`);
+        await this.fetchTareas(); // Refresh the list
+      } catch (error) {
+        console.error(`Error deleting tarea with id ${id}:`, error);
+        throw error; // Re-throw to allow handling in component
+      }
+    },
+
+    // Action to clear currentTarea, useful when navigating away from a form
+    clearCurrentTarea() {
+      this.currentTarea = getDefaultCurrentTarea();
+    }
+  },
+});
diff --git a/ui/src/views/asistencias/AsistenciaForm.vue b/ui/src/views/asistencias/AsistenciaForm.vue
index b2b3757..e0ee703 100644
--- a/ui/src/views/asistencias/AsistenciaForm.vue
+++ b/ui/src/views/asistencias/AsistenciaForm.vue
@@ -1,2 +1,297 @@
+<template>
+  <div class="asistencia-form-container">
+    <h2>{{ formTitle }}</h2>
+    <form @submit.prevent="handleSubmit">
+      <div class="form-group">
+        <label for="empleado_id">Empleado ID:</label>
+        <input type="number" id="empleado_id" v-model.number="formData.empleado_id" />
+        <span v-if="formErrors.empleado_id" class="error-message">{{ formErrors.empleado_id }}</span>
+      </div>
+      
+      <div class="form-group">
+        <label for="entrada">Entrada:</label>
+        <input type="datetime-local" id="entrada" v-model="formData.entrada" />
+        <span v-if="formErrors.entrada" class="error-message">{{ formErrors.entrada }}</span>
+      </div>
 
-<template></template>
\ No newline at end of file
+      <div class="form-group">
+        <label for="salida">Salida (Opcional):</label>
+        <input type="datetime-local" id="salida" v-model="formData.salida" />
+        <span v-if="formErrors.salida" class="error-message">{{ formErrors.salida }}</span>
+      </div>
+
+      <div class="form-group">
+        <label for="estado">Estado:</label>
+        <select id="estado" v-model="formData.estado">
+          <option value="pendiente">Pendiente</option>
+          <option value="presente">Presente</option>
+          <option value="ausente">Ausente</option>
+          <option value="justificada">Justificada</option>
+          <option value="cancelada">Cancelada</option> 
+        </select>
+        <span v-if="formErrors.estado" class="error-message">{{ formErrors.estado }}</span>
+      </div>
+
+      <div class="form-group">
+        <label for="observacion">Observación (Opcional):</label>
+        <textarea id="observacion" v-model="formData.observacion" rows="3"></textarea>
+      </div>
+
+      <div class="form-actions">
+        <button type="submit" :disabled="isSubmitting">{{ isSubmitting ? 'Guardando...' : 'Guardar' }}</button>
+        <button type="button" @click="handleCancel" :disabled="isSubmitting">Cancelar</button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue';
+import { useAsistenciasStore } from '../../stores/useAsistencias';
+import { useRouter, useRoute } from 'vue-router';
+
+const props = defineProps({
+  id: String, 
+});
+
+const router = useRouter();
+const route = useRoute(); 
+const asistenciasStore = useAsistenciasStore();
+
+const formatDateTimeForInput = (dateString) => {
+  const date = dateString ? new Date(dateString) : new Date();
+  const timezoneOffset = date.getTimezoneOffset() * 60000;
+  const localDate = new Date(date.getTime() - timezoneOffset);
+  return localDate.toISOString().slice(0, 16);
+};
+
+const getDefaultFormData = () => ({
+  empleado_id: null,
+  entrada: formatDateTimeForInput(null), 
+  salida: '', 
+  observacion: '',
+  estado: 'pendiente',
+});
+
+const formData = reactive(getDefaultFormData());
+const formErrors = reactive({
+  empleado_id: '',
+  entrada: '',
+  salida: '',
+  estado: '',
+});
+
+const isSubmitting = ref(false);
+const editingId = ref(route.params.id || props.id || null); 
+
+const formTitle = computed(() => (editingId.value ? 'Editar Asistencia' : 'Registrar Nueva Asistencia'));
+
+const loadAsistenciaForEditing = async (id) => {
+  try {
+    await asistenciasStore.fetchAsistenciaById(id);
+    if (asistenciasStore.currentAsistencia && String(asistenciasStore.currentAsistencia.id) === String(id)) {
+      const current = asistenciasStore.currentAsistencia;
+      formData.empleado_id = current.empleado_id ? Number(current.empleado_id) : null;
+      formData.entrada = current.entrada ? formatDateTimeForInput(current.entrada) : '';
+      formData.salida = current.salida ? formatDateTimeForInput(current.salida) : '';
+      formData.observacion = current.observacion || '';
+      formData.estado = current.estado || 'pendiente';
+    } else {
+      console.error(`Failed to load asistencia data for ID: ${id} or ID mismatch.`);
+      router.push({ name: 'AsistenciasIndex' }); 
+    }
+  } catch (error) {
+    console.error(`Error fetching asistencia ${id} for editing:`, error);
+    router.push({ name: 'AsistenciasIndex' }); 
+  }
+};
+
+onMounted(() => {
+  if (editingId.value) {
+    loadAsistenciaForEditing(editingId.value);
+  }
+});
+
+watch(() => route.params.id, (newId) => {
+  editingId.value = newId || null;
+  if (newId) {
+    loadAsistenciaForEditing(newId);
+  } else {
+    Object.assign(formData, getDefaultFormData());
+  }
+});
+
+onUnmounted(() => {
+  asistenciasStore.clearCurrentAsistencia(); 
+});
+
+const validateForm = () => {
+  let isValid = true;
+  Object.keys(formErrors).forEach(key => formErrors[key] = ''); 
+
+  if (formData.empleado_id == null || isNaN(Number(formData.empleado_id)) || Number(formData.empleado_id) <= 0) {
+    formErrors.empleado_id = 'El ID de empleado es obligatorio y debe ser un número positivo.';
+    isValid = false;
+  }
+  if (!formData.entrada) {
+    formErrors.entrada = 'La fecha y hora de entrada son obligatorias.';
+    isValid = false;
+  }
+  if (!formData.estado) {
+    formErrors.estado = 'El estado es obligatorio.';
+    isValid = false;
+  }
+  if (formData.entrada && formData.salida) {
+    // Convert to Date objects for comparison
+    // The value from datetime-local is already in a format that Date constructor can parse
+    const entradaDate = new Date(formData.entrada);
+    const salidaDate = new Date(formData.salida);
+    if (salidaDate < entradaDate) {
+      formErrors.salida = 'La fecha y hora de salida no pueden ser anteriores a la entrada.';
+      isValid = false;
+    }
+  }
+  return isValid;
+};
+
+const handleSubmit = async () => {
+  if (!validateForm()) return;
+
+  isSubmitting.value = true;
+  
+  // Ensure datetime strings are converted to full ISO strings if API requires (includes seconds and Z for UTC)
+  // Otherwise, YYYY-MM-DDTHH:mm (from datetime-local) might be acceptable by some backends.
+  const toISOStringOrNull = (datetimeLocalString) => {
+    if (!datetimeLocalString) return null;
+    // Create Date object. datetime-local is interpreted as local time.
+    // To send as UTC, new Date(datetimeLocalString).toISOString() works if the API expects UTC.
+    // If the API expects local time but in full ISO format, more complex handling might be needed
+    // or send as is and let backend handle it. For now, we send as is from input.
+    return datetimeLocalString; 
+  };
+
+  const payload = {
+    ...formData,
+    empleado_id: Number(formData.empleado_id),
+    entrada: toISOStringOrNull(formData.entrada), 
+    salida: toISOStringOrNull(formData.salida), 
+  };
+  
+  // If your API strictly needs ISO8601 with Z (UTC) and datetime-local gives local time:
+  // payload.entrada = formData.entrada ? new Date(formData.entrada).toISOString() : null;
+  // payload.salida = formData.salida ? new Date(formData.salida).toISOString() : null;
+
+
+  try {
+    if (editingId.value) {
+      await asistenciasStore.updateAsistencia(editingId.value, payload);
+    } else {
+      await asistenciasStore.createAsistencia(payload);
+    }
+    router.push({ name: 'AsistenciasIndex' }); 
+  } catch (error) {
+    console.error('Error saving asistencia:', error);
+    const errorMsg = error.response?.data?.message || error.message || 'Ocurrió un error.';
+    alert(`Error al guardar la asistencia: ${errorMsg}`);
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
+const handleCancel = () => {
+  router.go(-1); 
+};
+</script>
+
+<style scoped>
+.asistencia-form-container {
+  max-width: 600px;
+  margin: 20px auto;
+  padding: 25px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+h2 {
+  text-align: center;
+  color: #333;
+  margin-bottom: 25px;
+}
+
+.form-group {
+  margin-bottom: 18px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 6px;
+  font-weight: bold;
+  color: #555;
+}
+
+.form-group input[type="number"],
+.form-group input[type="datetime-local"],
+.form-group select,
+.form-group textarea {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+  font-size: 1em;
+}
+
+.form-group textarea {
+  resize: vertical; 
+}
+
+.error-message {
+  display: block;
+  color: #e74c3c; 
+  font-size: 0.9em;
+  margin-top: 5px;
+}
+
+.form-actions {
+  margin-top: 25px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.form-actions button {
+  padding: 10px 18px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 1em;
+  font-weight: 500;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.form-actions button[type="submit"] {
+  background-color: #3498db; /* Blue */
+  color: white;
+}
+.form-actions button[type="submit"]:hover {
+  background-color: #2980b9; 
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+.form-actions button[type="submit"]:disabled {
+  background-color: #bdc3c7; 
+  cursor: not-allowed;
+}
+
+.form-actions button[type="button"] {
+  background-color: #e74c3c; /* Red for cancel */
+  color: white;
+}
+.form-actions button[type="button"]:hover {
+  background-color: #c0392b; 
+}
+.form-actions button[type="button"]:disabled {
+  background-color: #bdc3c7;
+  cursor: not-allowed;
+}
+</style>
diff --git a/ui/src/views/asistencias/AsistenciasIndex.vue b/ui/src/views/asistencias/AsistenciasIndex.vue
index b2b3757..730449c 100644
--- a/ui/src/views/asistencias/AsistenciasIndex.vue
+++ b/ui/src/views/asistencias/AsistenciasIndex.vue
@@ -1,2 +1,143 @@
+<template>
+  <div class="asistencias-index-container">
+    <header class="page-header">
+      <h1>Gestión de Asistencias</h1>
+      <button @click="navigateToCreateForm" class="btn-create">
+        Registrar Nueva Asistencia
+      </button>
+    </header>
 
-<template></template>
\ No newline at end of file
+    <div v-if="isLoading" class="loading-message">
+      Cargando asistencias...
+    </div>
+
+    <div v-else-if="errorLoading" class="error-message-full">
+      <p>Ocurrió un error al cargar las asistencias. Por favor, intente de nuevo más tarde.</p>
+      <p v-if="errorMessage">Detalle: {{ errorMessage }}</p>
+    </div>
+    
+    <div v-else>
+      <tabla-asistencias 
+        :asistencias="asistenciasList"
+        @edit="handleEditAsistencia"
+      />
+      <div v-if="!asistenciasList || asistenciasList.length === 0 && !isLoading" class="no-data-message">
+        No hay asistencias registradas. Puede registrar una nueva haciendo clic en el botón de arriba.
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useAsistenciasStore } from '../../stores/useAsistencias';
+import { useRouter } from 'vue-router';
+import TablaAsistencias from '../../components/asistencias/tablaAsistencias.vue';
+
+const asistenciasStore = useAsistenciasStore();
+const router = useRouter();
+
+const isLoading = ref(true);
+const errorLoading = ref(false);
+const errorMessage = ref('');
+
+const asistenciasList = computed(() => asistenciasStore.asistencias);
+
+onMounted(async () => {
+  try {
+    isLoading.value = true;
+    errorLoading.value = false;
+    errorMessage.value = '';
+    await asistenciasStore.fetchAsistencias();
+  } catch (error) {
+    console.error("Error fetching asistencias on mount:", error);
+    errorLoading.value = true;
+    errorMessage.value = error.message || 'Error desconocido al cargar asistencias.';
+  } finally {
+    isLoading.value = false;
+  }
+});
+
+const navigateToCreateForm = () => {
+  // Assuming route for creating a new asistencia is named 'AsistenciaFormNew'
+  router.push({ name: 'AsistenciaFormNew' }); 
+};
+
+const handleEditAsistencia = (asistenciaId) => {
+  // Assuming route for editing is named 'AsistenciaFormEdit'
+  router.push({ name: 'AsistenciaFormEdit', params: { id: asistenciaId } });
+};
+
+</script>
+
+<style scoped>
+.asistencias-index-container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+  font-family: 'Arial', sans-serif; 
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 25px;
+  padding-bottom: 15px; 
+  border-bottom: 1px solid #dee2e6; 
+}
+
+.page-header h1 {
+  color: #212529; 
+  font-size: 1.8em; 
+  font-weight: 600;
+}
+
+.btn-create {
+  background-color: #17a2b8; /* Info Blue */
+  color: white;
+  padding: 10px 18px; 
+  border: none;
+  border-radius: 5px;
+  font-size: 1em;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.btn-create:hover {
+  background-color: #138496; 
+  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+}
+
+.loading-message,
+.error-message-full,
+.no-data-message {
+  text-align: center;
+  padding: 25px;
+  margin-top: 25px;
+  border-radius: 8px;
+  font-size: 1.1em;
+}
+
+.loading-message {
+  color: #495057; 
+}
+
+.error-message-full {
+  background-color: #f8d7da; 
+  color: #721c24; 
+  border: 1px solid #f5c6cb; 
+}
+.error-message-full p {
+  margin: 5px 0;
+}
+
+.no-data-message {
+  background-color: #f8f9fa; 
+  color: #343a40; 
+  border: 1px solid #e9ecef; 
+}
+</style>
diff --git a/ui/src/views/planillas/PlanillaForm.vue b/ui/src/views/planillas/PlanillaForm.vue
index b2b3757..98aa082 100644
--- a/ui/src/views/planillas/PlanillaForm.vue
+++ b/ui/src/views/planillas/PlanillaForm.vue
@@ -1,2 +1,305 @@
+<template>
+  <div class="planilla-form-container">
+    <h2>{{ formTitle }}</h2>
+    <form @submit.prevent="handleSubmit">
+      <div class="form-group">
+        <label for="titulo">Título:</label>
+        <input type="text" id="titulo" v-model="formData.titulo" />
+        <span v-if="formErrors.titulo" class="error-message">{{ formErrors.titulo }}</span>
+      </div>
 
-<template></template>
\ No newline at end of file
+      <div class="form-group">
+        <label for="empleado_id">Empleado ID:</label>
+        <input type="number" id="empleado_id" v-model.number="formData.empleado_id" />
+        <span v-if="formErrors.empleado_id" class="error-message">{{ formErrors.empleado_id }}</span>
+      </div>
+
+      <div class="form-group">
+        <label for="fecha_desde">Fecha Desde:</label>
+        <input type="date" id="fecha_desde" v-model="formData.fecha_desde" />
+        <span v-if="formErrors.fecha_desde" class="error-message">{{ formErrors.fecha_desde }}</span>
+      </div>
+
+      <div class="form-group">
+        <label for="fecha_hasta">Fecha Hasta:</label>
+        <input type="date" id="fecha_hasta" v-model="formData.fecha_hasta" />
+        <span v-if="formErrors.fecha_hasta" class="error-message">{{ formErrors.fecha_hasta }}</span>
+      </div>
+
+      <div class="form-group">
+        <label for="total">Total:</label>
+        <input type="number" step="any" id="total" v-model.number="formData.total" />
+        <span v-if="formErrors.total" class="error-message">{{ formErrors.total }}</span>
+      </div>
+
+      <div class="form-group">
+        <label for="estado">Estado:</label>
+        <select id="estado" v-model="formData.estado">
+          <option value="pendiente">Pendiente</option>
+          <option value="pagado">Pagado</option>
+          <option value="anulado">Anulado</option>
+        </select>
+        <span v-if="formErrors.estado" class="error-message">{{ formErrors.estado }}</span>
+      </div>
+
+      <div class="form-actions">
+        <button type="submit" :disabled="isSubmitting">{{ isSubmitting ? 'Guardando...' : 'Guardar' }}</button>
+        <button type="button" @click="handleCancel" :disabled="isSubmitting">Cancelar</button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed, watch } from 'vue';
+import { usePlanillasStore } from '../../stores/usePlanillas';
+import { useRouter, useRoute } from 'vue-router';
+
+const props = defineProps({
+  id: String, // From route params, will be a string
+});
+
+const router = useRouter();
+const route = useRoute(); // Can also get id from route.params.id
+
+const planillasStore = usePlanillasStore();
+
+const formData = reactive({
+  titulo: '',
+  empleado_id: null,
+  fecha_desde: '',
+  fecha_hasta: '',
+  total: null,
+  estado: 'pendiente', // Default state
+});
+
+const formErrors = reactive({
+  titulo: '',
+  empleado_id: '',
+  fecha_desde: '',
+  fecha_hasta: '',
+  estado: '',
+  total: '', // Though not explicitly required, can add validation if needed
+});
+
+const isSubmitting = ref(false);
+const editingId = ref(null); // To store the actual ID for editing
+
+const formTitle = computed(() => (editingId.value ? 'Editar Planilla' : 'Crear Nueva Planilla'));
+
+// Helper to format date for <input type="date">
+const formatDateForInput = (dateString) => {
+  if (!dateString) return '';
+  const date = new Date(dateString);
+  // Adjust for timezone issues if date is off by one day
+  const offset = date.getTimezoneOffset();
+  const correctedDate = new Date(date.getTime() - (offset * 60 * 1000));
+  return correctedDate.toISOString().split('T')[0];
+};
+
+onMounted(() => {
+  const routeId = route.params.id || props.id;
+  if (routeId) {
+    editingId.value = routeId; 
+    planillasStore.fetchPlanillaById(routeId).then(() => {
+      if (planillasStore.currentPlanilla && String(planillasStore.currentPlanilla.id) === String(editingId.value)) {
+        populateFormFromStore();
+      } else {
+        console.error(`Failed to load planilla data for ID: ${routeId} or mismatch. Current store ID: ${planillasStore.currentPlanilla?.id}`);
+        // router.push({ name: 'PlanillasIndex' }); 
+      }
+    }).catch(error => {
+        console.error(`Error fetching planilla ${routeId}:`, error);
+        // router.push({ name: 'PlanillasIndex' });
+    });
+  }
+});
+
+// Watch for changes in currentPlanilla if the component might be reused
+// or if fetchPlanillaById updates currentPlanilla asynchronously after mount
+watch(() => planillasStore.currentPlanilla, (newPlanilla) => {
+  if (editingId.value && newPlanilla && String(newPlanilla.id) === String(editingId.value)) {
+    populateFormFromStore();
+  }
+}, { deep: true });
+
+function populateFormFromStore() {
+    Object.assign(formData, {
+      ...planillasStore.currentPlanilla,
+      fecha_desde: formatDateForInput(planillasStore.currentPlanilla.fecha_desde),
+      fecha_hasta: formatDateForInput(planillasStore.currentPlanilla.fecha_hasta),
+      empleado_id: planillasStore.currentPlanilla.empleado_id ? Number(planillasStore.currentPlanilla.empleado_id) : null,
+      total: planillasStore.currentPlanilla.total ? parseFloat(planillasStore.currentPlanilla.total) : null,
+    });
+}
+
+
+const validateForm = () => {
+  let isValid = true;
+  for (const key in formErrors) {
+    formErrors[key] = '';
+  }
+
+  if (!formData.titulo?.trim()) {
+    formErrors.titulo = 'El título es obligatorio.';
+    isValid = false;
+  }
+  if (formData.empleado_id == null || isNaN(parseInt(formData.empleado_id)) || Number(formData.empleado_id) <= 0) {
+    formErrors.empleado_id = 'El ID de empleado es obligatorio y debe ser un número positivo.';
+    isValid = false;
+  }
+  if (!formData.fecha_desde) {
+    formErrors.fecha_desde = 'La fecha desde es obligatoria.';
+    isValid = false;
+  }
+  if (!formData.fecha_hasta) {
+    formErrors.fecha_hasta = 'La fecha hasta es obligatoria.';
+    isValid = false;
+  }
+  if (formData.fecha_desde && formData.fecha_hasta && new Date(formData.fecha_desde) > new Date(formData.fecha_hasta)) {
+    formErrors.fecha_hasta = 'La fecha hasta no puede ser anterior a la fecha desde.';
+    isValid = false;
+  }
+  if (!formData.estado) {
+    formErrors.estado = 'El estado es obligatorio.';
+    isValid = false;
+  }
+  if (formData.total != null && (isNaN(parseFloat(formData.total)) || parseFloat(formData.total) < 0)) {
+      formErrors.total = 'El total debe ser un número positivo.';
+      isValid = false;
+  }
+  return isValid;
+};
+
+const handleSubmit = async () => {
+  if (!validateForm()) {
+    return;
+  }
+
+  isSubmitting.value = true;
+  try {
+    const payload = {
+      ...formData,
+      empleado_id: parseInt(formData.empleado_id, 10),
+      total: formData.total != null ? parseFloat(formData.total) : null,
+      // Ensure dates are actual Date objects or correctly formatted ISO strings if API requires
+      // The <input type="date"> provides YYYY-MM-DD. If API needs full DateTime:
+      // fecha_desde: formData.fecha_desde ? new Date(formData.fecha_desde).toISOString() : null,
+      // fecha_hasta: formData.fecha_hasta ? new Date(formData.fecha_hasta).toISOString() : null,
+    };
+
+    if (editingId.value) {
+      await planillasStore.updatePlanilla(editingId.value, payload);
+    } else {
+      await planillasStore.createPlanilla(payload);
+    }
+    router.push({ name: 'PlanillasIndex' }); 
+  } catch (error) {
+    console.error('Error saving planilla:', error);
+    const errorMessage = error.response?.data?.message || error.message || 'Ocurrió un error al guardar la planilla.';
+    alert(`Error: ${errorMessage}`);
+    // Potentially set a form-level error message:
+    // formErrors.general = `Error: ${errorMessage}`;
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
+const handleCancel = () => {
+  router.go(-1); 
+};
+
+</script>
+
+<style scoped>
+.planilla-form-container {
+  max-width: 600px;
+  margin: 20px auto;
+  padding: 20px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+h2 {
+  text-align: center;
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+  color: #555;
+}
+
+.form-group input[type="text"],
+.form-group input[type="number"],
+.form-group input[type="date"],
+.form-group select {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+.form-group select {
+  appearance: none; 
+  background-color: white; 
+}
+
+.error-message {
+  display: block;
+  color: red;
+  font-size: 0.9em;
+  margin-top: 5px;
+}
+
+.form-actions {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.form-actions button {
+  padding: 10px 15px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1em;
+}
+
+.form-actions button[type="submit"] {
+  background-color: #28a745; /* Green */
+  color: white;
+}
+
+.form-actions button[type="submit"]:hover {
+  background-color: #218838;
+}
+
+.form-actions button[type="submit"]:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+.form-actions button[type="button"] {
+  background-color: #6c757d; /* Gray */
+  color: white;
+}
+
+.form-actions button[type="button"]:hover {
+  background-color: #5a6268;
+}
+.form-actions button[type="button"]:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+</style>
diff --git a/ui/src/views/planillas/PlanillasIndex.vue b/ui/src/views/planillas/PlanillasIndex.vue
index b2b3757..55eefc5 100644
--- a/ui/src/views/planillas/PlanillasIndex.vue
+++ b/ui/src/views/planillas/PlanillasIndex.vue
@@ -1,2 +1,152 @@
+<template>
+  <div class="planillas-index-container">
+    <header class="page-header">
+      <h1>Gestión de Planillas</h1>
+      <button @click="navigateToCreateForm" class="btn-create">
+        Crear Nueva Planilla
+      </button>
+    </header>
 
-<template></template>
\ No newline at end of file
+    <div v-if="isLoading" class="loading-message">
+      Cargando planillas...
+    </div>
+
+    <div v-else-if="errorLoading" class="error-message-full">
+      <p>Ocurrió un error al cargar las planillas. Por favor, intente de nuevo más tarde.</p>
+      <p v-if="errorMessage">Detalle: {{ errorMessage }}</p>
+    </div>
+    
+    <div v-else>
+      <tabla-planillas 
+        :planillas="planillasList"
+        @edit="handleEditPlanilla"
+      />
+      <div v-if="!planillasList || planillasList.length === 0 && !isLoading" class="no-data-message">
+        No hay planillas registradas. Puede crear una nueva haciendo clic en el botón de arriba.
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { usePlanillasStore } from '../../stores/usePlanillas';
+import { useRouter } from 'vue-router';
+import TablaPlanillas from '../../components/planillas/tablaPlanillas.vue'; // Corrected path
+
+const planillasStore = usePlanillasStore();
+const router = useRouter();
+
+const isLoading = ref(true); // Set to true initially
+const errorLoading = ref(false);
+const errorMessage = ref('');
+
+// Computed property to get planillas from the store
+const planillasList = computed(() => planillasStore.planillas);
+
+// Fetch planillas when the component is mounted
+onMounted(async () => {
+  try {
+    isLoading.value = true;
+    errorLoading.value = false;
+    errorMessage.value = '';
+    await planillasStore.fetchPlanillas();
+  } catch (error) {
+    console.error("Error fetching planillas on mount:", error);
+    errorLoading.value = true;
+    errorMessage.value = error.message || 'Error desconocido.';
+  } finally {
+    isLoading.value = false;
+  }
+});
+
+// Navigate to the form for creating a new planilla
+const navigateToCreateForm = () => {
+  // Assuming your route for creating a new planilla is named 'PlanillaFormNew'
+  // This name should match what's defined in your router configuration
+  router.push({ name: 'PlanillaFormNew' }); 
+};
+
+// Navigate to the form for editing an existing planilla
+const handleEditPlanilla = (planillaId) => {
+  // Assuming your route for editing is named 'PlanillaFormEdit'
+  // This name should match what's defined in your router configuration
+  router.push({ name: 'PlanillaFormEdit', params: { id: planillaId } });
+};
+
+</script>
+
+<style scoped>
+.planillas-index-container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+  font-family: Arial, sans-serif;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 25px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.page-header h1 {
+  color: #2c3e50; /* Darker, more neutral blue */
+  font-size: 2.2em;
+  font-weight: 600;
+}
+
+.btn-create {
+  background-color: #3498db; /* Vibrant blue */
+  color: white;
+  padding: 12px 18px;
+  border: none;
+  border-radius: 5px;
+  font-size: 1em;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.btn-create:hover {
+  background-color: #2980b9; /* Darker shade of vibrant blue */
+  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+}
+
+.loading-message,
+.error-message-full,
+.no-data-message {
+  text-align: center;
+  padding: 25px;
+  margin-top: 25px;
+  border-radius: 8px;
+  font-size: 1.1em;
+}
+
+.loading-message {
+  color: #7f8c8d; /* Gray */
+}
+
+.error-message-full {
+  background-color: #fdedec; /* Lighter red */
+  color: #e74c3c; /* Strong red */
+  border: 1px solid #f5b7b1; /* Light red border */
+}
+.error-message-full p {
+  margin: 5px 0;
+}
+
+.no-data-message {
+  background-color: #eafaf1; /* Lighter green/blue */
+  color: #2ecc71; /* Green */
+  border: 1px solid #a3e4d7; /* Light green/blue border */
+}
+
+/* Styling for the imported tablaPlanillas can be managed within its own component,
+   but you can add overrides or container styles here if needed. */
+</style>
diff --git a/ui/src/views/tareas/TareaForm.vue b/ui/src/views/tareas/TareaForm.vue
index b2b3757..094d6a3 100644
--- a/ui/src/views/tareas/TareaForm.vue
+++ b/ui/src/views/tareas/TareaForm.vue
@@ -1,2 +1,318 @@
+<template>
+  <div class="tarea-form-container">
+    <h2>{{ formTitle }}</h2>
+    <form @submit.prevent="handleSubmit">
+      <div class="form-group">
+        <label for="titulo">Título:</label>
+        <input type="text" id="titulo" v-model="formData.titulo" />
+        <span v-if="formErrors.titulo" class="error-message">{{ formErrors.titulo }}</span>
+      </div>
 
-<template></template>
\ No newline at end of file
+      <div class="form-group">
+        <label for="empleado_id">Empleado ID:</label>
+        <input type="number" id="empleado_id" v-model.number="formData.empleado_id" />
+        <span v-if="formErrors.empleado_id" class="error-message">{{ formErrors.empleado_id }}</span>
+      </div>
+      
+      <div class="form-group">
+        <label for="fecha">Fecha:</label>
+        <input type="date" id="fecha" v-model="formData.fecha" />
+        <span v-if="formErrors.fecha" class="error-message">{{ formErrors.fecha }}</span>
+      </div>
+
+      <div class="form-group">
+        <label for="estado">Estado:</label>
+        <select id="estado" v-model="formData.estado">
+          <option value="pendiente">Pendiente</option>
+          <option value="en progreso">En Progreso</option>
+          <option value="completada">Completada</option>
+          <option value="cancelada">Cancelada</option>
+        </select>
+        <span v-if="formErrors.estado" class="error-message">{{ formErrors.estado }}</span>
+      </div>
+
+      <div class="form-group">
+        <label for="tipo">Tipo:</label>
+        <input type="text" id="tipo" v-model="formData.tipo" />
+        <span v-if="formErrors.tipo" class="error-message">{{ formErrors.tipo }}</span>
+      </div>
+
+      <div class="form-group">
+        <label for="precio">Precio (Opcional):</label>
+        <input type="number" step="any" id="precio" v-model.number="formData.precio" />
+        <span v-if="formErrors.precio" class="error-message">{{ formErrors.precio }}</span>
+      </div>
+
+      <div class="form-group">
+        <label for="planilla_id">Planilla ID (Opcional):</label>
+        <input type="number" id="planilla_id" v-model.number="formData.planilla_id" />
+        <span v-if="formErrors.planilla_id" class="error-message">{{ formErrors.planilla_id }}</span>
+      </div>
+
+      <div class="form-group">
+        <label for="observacion">Observación (Opcional):</label>
+        <textarea id="observacion" v-model="formData.observacion" rows="3"></textarea>
+      </div>
+
+      <div class="form-actions">
+        <button type="submit" :disabled="isSubmitting">{{ isSubmitting ? 'Guardando...' : 'Guardar' }}</button>
+        <button type="button" @click="handleCancel" :disabled="isSubmitting">Cancelar</button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue';
+import { useTareasStore } from '../../stores/useTareas';
+import { useRouter, useRoute } from 'vue-router';
+
+const props = defineProps({
+  id: String, 
+});
+
+const router = useRouter();
+const route = useRoute(); 
+const tareasStore = useTareasStore();
+
+const formatDateForInput = (dateString) => {
+  const date = dateString ? new Date(dateString) : new Date();
+  // Apply timezone offset correction to ensure the date displayed is the intended "local" date
+  const userTimezoneOffset = date.getTimezoneOffset() * 60000;
+  const correctedDate = new Date(date.getTime() - userTimezoneOffset);
+  return correctedDate.toISOString().split('T')[0];
+};
+
+const getDefaultFormData = () => ({
+  titulo: '',
+  empleado_id: null,
+  planilla_id: null,
+  precio: null,
+  estado: 'pendiente',
+  observacion: '',
+  fecha: formatDateForInput(null), 
+  tipo: '',
+});
+
+const formData = reactive(getDefaultFormData());
+const formErrors = reactive({
+  titulo: '',
+  empleado_id: '',
+  fecha: '',
+  estado: '',
+  tipo: '',
+  precio: '',
+  planilla_id: '',
+});
+
+const isSubmitting = ref(false);
+const editingId = ref(route.params.id || props.id || null); 
+
+const formTitle = computed(() => (editingId.value ? 'Editar Tarea' : 'Crear Nueva Tarea'));
+
+const loadTareaForEditing = async (id) => {
+  try {
+    await tareasStore.fetchTareaById(id);
+    if (tareasStore.currentTarea && String(tareasStore.currentTarea.id) === String(id)) {
+      Object.assign(formData, {
+        ...tareasStore.currentTarea,
+        fecha: formatDateForInput(tareasStore.currentTarea.fecha),
+        empleado_id: tareasStore.currentTarea.empleado_id ? Number(tareasStore.currentTarea.empleado_id) : null,
+        planilla_id: tareasStore.currentTarea.planilla_id ? Number(tareasStore.currentTarea.planilla_id) : null,
+        precio: tareasStore.currentTarea.precio ? parseFloat(tareasStore.currentTarea.precio) : null,
+      });
+    } else {
+      console.error(`Failed to load tarea data for ID: ${id} or ID mismatch.`);
+      router.push({ name: 'TareasIndex' }); 
+    }
+  } catch (error) {
+    console.error(`Error fetching tarea ${id} for editing:`, error);
+    router.push({ name: 'TareasIndex' }); 
+  }
+};
+
+onMounted(() => {
+  if (editingId.value) {
+    loadTareaForEditing(editingId.value);
+  }
+  // else, new form uses default data, already set
+});
+
+watch(() => route.params.id, (newId) => {
+  editingId.value = newId || null; // Update editingId when route changes
+  if (newId) {
+    loadTareaForEditing(newId);
+  } else {
+    // Navigated to create form from an edit form or similar scenario
+    Object.assign(formData, getDefaultFormData());
+  }
+});
+
+onUnmounted(() => {
+  tareasStore.clearCurrentTarea(); 
+});
+
+const validateForm = () => {
+  let isValid = true;
+  Object.keys(formErrors).forEach(key => formErrors[key] = ''); 
+
+  if (!formData.titulo?.trim()) {
+    formErrors.titulo = 'El título es obligatorio.';
+    isValid = false;
+  }
+  if (formData.empleado_id == null || isNaN(Number(formData.empleado_id)) || Number(formData.empleado_id) <= 0) {
+    formErrors.empleado_id = 'El ID de empleado es obligatorio y debe ser un número positivo.';
+    isValid = false;
+  }
+  if (!formData.fecha) {
+    formErrors.fecha = 'La fecha es obligatoria.';
+    isValid = false;
+  }
+  if (!formData.estado) {
+    formErrors.estado = 'El estado es obligatorio.';
+    isValid = false;
+  }
+   if (!formData.tipo?.trim()) { 
+    formErrors.tipo = 'El tipo es obligatorio.';
+    isValid = false;
+  }
+  if (formData.precio != null && (isNaN(parseFloat(formData.precio)) || parseFloat(formData.precio) < 0)) {
+    formErrors.precio = 'El precio, si se ingresa, debe ser un número positivo.';
+    isValid = false;
+  }
+  if (formData.planilla_id != null && (formData.planilla_id !== '' && (isNaN(Number(formData.planilla_id)) || Number(formData.planilla_id) <= 0))) {
+    // Allow empty string for planilla_id, but if a value is present, it must be a positive number
+    formErrors.planilla_id = 'El ID de planilla, si se ingresa, debe ser un número positivo.';
+    isValid = false;
+  }
+  return isValid;
+};
+
+const handleSubmit = async () => {
+  if (!validateForm()) return;
+
+  isSubmitting.value = true;
+  const payload = {
+    ...formData,
+    empleado_id: Number(formData.empleado_id),
+    // Send null if planilla_id is empty or not a number, otherwise send the number
+    planilla_id: (formData.planilla_id && !isNaN(Number(formData.planilla_id))) ? Number(formData.planilla_id) : null,
+    precio: (formData.precio != null && formData.precio !== '') ? parseFloat(formData.precio) : null,
+    // API expects date as YYYY-MM-DD string or full ISO. Input type="date" provides YYYY-MM-DD.
+    // If API needs full DateTime, convert: new Date(formData.fecha + 'T00:00:00Z').toISOString()
+  };
+
+  try {
+    if (editingId.value) {
+      await tareasStore.updateTarea(editingId.value, payload);
+    } else {
+      await tareasStore.createTarea(payload);
+    }
+    router.push({ name: 'TareasIndex' }); 
+  } catch (error) {
+    console.error('Error saving tarea:', error);
+    const errorMsg = error.response?.data?.message || error.message || 'Ocurrió un error.';
+    alert(`Error al guardar la tarea: ${errorMsg}`);
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
+const handleCancel = () => {
+  router.go(-1); 
+};
+</script>
+
+<style scoped>
+.tarea-form-container {
+  max-width: 650px;
+  margin: 20px auto;
+  padding: 25px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+h2 {
+  text-align: center;
+  color: #333;
+  margin-bottom: 25px;
+}
+
+.form-group {
+  margin-bottom: 18px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 6px;
+  font-weight: bold;
+  color: #555;
+}
+
+.form-group input[type="text"],
+.form-group input[type="number"],
+.form-group input[type="date"],
+.form-group select,
+.form-group textarea {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+  font-size: 1em;
+}
+
+.form-group textarea {
+  resize: vertical; 
+}
+
+.error-message {
+  display: block;
+  color: #e74c3c; 
+  font-size: 0.9em;
+  margin-top: 5px;
+}
+
+.form-actions {
+  margin-top: 25px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.form-actions button {
+  padding: 10px 18px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 1em;
+  font-weight: 500;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.form-actions button[type="submit"] {
+  background-color: #2ecc71; 
+  color: white;
+}
+.form-actions button[type="submit"]:hover {
+  background-color: #27ae60; 
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+.form-actions button[type="submit"]:disabled {
+  background-color: #bdc3c7; 
+  cursor: not-allowed;
+}
+
+.form-actions button[type="button"] {
+  background-color: #95a5a6; 
+  color: white;
+}
+.form-actions button[type="button"]:hover {
+  background-color: #7f8c8d; 
+}
+.form-actions button[type="button"]:disabled {
+  background-color: #bdc3c7;
+  cursor: not-allowed;
+}
+</style>
diff --git a/ui/src/views/tareas/TareasIndex.vue b/ui/src/views/tareas/TareasIndex.vue
index b2b3757..6cfe75d 100644
--- a/ui/src/views/tareas/TareasIndex.vue
+++ b/ui/src/views/tareas/TareasIndex.vue
@@ -1,2 +1,143 @@
+<template>
+  <div class="tareas-index-container">
+    <header class="page-header">
+      <h1>Gestión de Tareas</h1>
+      <button @click="navigateToCreateForm" class="btn-create">
+        Crear Nueva Tarea
+      </button>
+    </header>
 
-<template></template>
\ No newline at end of file
+    <div v-if="isLoading" class="loading-message">
+      Cargando tareas...
+    </div>
+
+    <div v-else-if="errorLoading" class="error-message-full">
+      <p>Ocurrió un error al cargar las tareas. Por favor, intente de nuevo más tarde.</p>
+      <p v-if="errorMessage">Detalle: {{ errorMessage }}</p>
+    </div>
+    
+    <div v-else>
+      <tabla-tareas 
+        :tareas="tareasList"
+        @edit="handleEditTarea"
+      />
+      <div v-if="!tareasList || tareasList.length === 0 && !isLoading" class="no-data-message">
+        No hay tareas registradas. Puede crear una nueva haciendo clic en el botón de arriba.
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useTareasStore } from '../../stores/useTareas';
+import { useRouter } from 'vue-router';
+import TablaTareas from '../../components/tareas/tablaTareas.vue';
+
+const tareasStore = useTareasStore();
+const router = useRouter();
+
+const isLoading = ref(true);
+const errorLoading = ref(false);
+const errorMessage = ref('');
+
+const tareasList = computed(() => tareasStore.tareas);
+
+onMounted(async () => {
+  try {
+    isLoading.value = true;
+    errorLoading.value = false;
+    errorMessage.value = '';
+    await tareasStore.fetchTareas();
+  } catch (error) {
+    console.error("Error fetching tareas on mount:", error);
+    errorLoading.value = true;
+    errorMessage.value = error.message || 'Error desconocido al cargar tareas.';
+  } finally {
+    isLoading.value = false;
+  }
+});
+
+const navigateToCreateForm = () => {
+  // Assuming route for creating a new tarea is named 'TareaFormNew'
+  router.push({ name: 'TareaFormNew' }); 
+};
+
+const handleEditTarea = (tareaId) => {
+  // Assuming route for editing is named 'TareaFormEdit'
+  router.push({ name: 'TareaFormEdit', params: { id: tareaId } });
+};
+
+</script>
+
+<style scoped>
+.tareas-index-container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 25px;
+  padding-bottom: 15px; 
+  border-bottom: 1px solid #e0e0e0; 
+}
+
+.page-header h1 {
+  color: #333; 
+  font-size: 2em; 
+  font-weight: 600;
+}
+
+.btn-create {
+  background-color: #5cb85c; 
+  color: white;
+  padding: 12px 20px; 
+  border: none;
+  border-radius: 5px;
+  font-size: 1em;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.btn-create:hover {
+  background-color: #4cae4c; 
+  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+}
+
+.loading-message,
+.error-message-full,
+.no-data-message {
+  text-align: center;
+  padding: 25px;
+  margin-top: 25px;
+  border-radius: 8px;
+  font-size: 1.1em;
+}
+
+.loading-message {
+  color: #555; 
+}
+
+.error-message-full {
+  background-color: #f8d7da; 
+  color: #721c24; 
+  border: 1px solid #f5c6cb; 
+}
+.error-message-full p {
+  margin: 5px 0;
+}
+
+.no-data-message {
+  background-color: #e9ecef; 
+  color: #495057; 
+  border: 1px solid #ced4da; 
+}
+</style>