<script setup>
import { ref, onMounted } from "vue";
import DataTable from "primevue/datatable";
import Column from "primevue/column";
import { fetchHistory } from "../composables/useHoursApi.js";
import strings from "../strings.js";

const rows = ref([]);
const meta = ref({});

onMounted(async () => {
  const data = await fetchHistory(1);
  rows.value = data.data ?? [];
  meta.value = data.meta ?? {};
});
</script>
<template>
  <div class="p-4">
    <h1 class="text-2xl font-semibold mb-4">{{ strings.historyTitle }}</h1>
    <DataTable :value="rows" striped-rows>
      <Column field="week_start" header="Week start" />
      <Column field="workflow_status" header="Status" />
    </DataTable>
  </div>
</template>
