sfp_front_vue_diarista_backoffice/src/pages/dashboard/components/PendingProvidersTable.vue

<template>
  <div class="q-mb-lg">
    <div class="text-h6 text-weight-bold q-mb-sm">
      {{ $t('provider.approval.pending_table_title') }}
    </div>

    <DefaultTableServerSide
      ref="tableRef"
      class="bg-surface-light"
      :columns="columns"
      :api-call="getPendingProviders"
      :add-item="false"
      :show-search-field="false"
      :open-item="true"
      @on-row-click="onRowClick"
    >
      <template #body-cell-name="slotProps">
        <q-td :props="slotProps">
          {{ slotProps.row.user?.name || '—' }}
        </q-td>
      </template>

      <template #body-cell-approval_status="slotProps">
        <q-td :props="slotProps">
          <q-badge color="warning" :label="$t(`provider.approval_status.${slotProps.row.approval_status}`)" />
        </q-td>
      </template>

      <template #body-cell-created_at="slotProps">
        <q-td :props="slotProps">
          {{ formatDate(slotProps.row.created_at) }}
        </q-td>
      </template>

      <template #body-cell-actions="slotProps">
        <q-td :props="slotProps" class="text-right">
          <q-btn
            flat
            dense
            round
            icon="mdi-eye-outline"
            color="primary"
            @click.stop="onRowClick({ row: slotProps.row })"
          >
            <q-tooltip>{{ $t('common.actions.view') }}</q-tooltip>
          </q-btn>
        </q-td>
      </template>
    </DefaultTableServerSide>
  </div>
</template>

<script setup>
import { defineAsyncComponent, ref } from 'vue';
import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import { getPendingProviders } from 'src/api/provider';
import DefaultTableServerSide from 'src/components/defaults/DefaultTableServerSide.vue';
import { format, parseISO } from 'date-fns';

const ProviderApprovalDialog = defineAsyncComponent(
  () => import('src/pages/dashboard/components/ProviderApprovalDialog.vue'),
);

const $q = useQuasar();
const { t } = useI18n();
const tableRef = ref(null);

const columns = [
  { name: 'name',            label: t('common.terms.name'),              field: (row) => row.user?.name || '—', align: 'left',  sortable: false, style: 'width: 25%' },
  { name: 'document',        label: t('provider.fields.document'),        field: 'document',                     align: 'left',  sortable: false, style: 'width: 25%' },
  { name: 'created_at',      label: t('common.terms.created_at'),         field: 'created_at',                   align: 'left',  sortable: false, style: 'width: 25%' },
  { name: 'approval_status', label: t('provider.fields.approval_status'), field: 'approval_status',              align: 'left',  sortable: false, style: 'width: 25%' },
  { name: 'actions',         label: '',                                    field: 'actions',                      align: 'right', sortable: false, style: 'width: 25%' },
];

const formatDate = (value) => {
  if (!value) return '—';
  try { return format(parseISO(value), 'dd/MM/yyyy HH:mm'); } catch { return value; }
};

const onRowClick = ({ row }) => {
  $q.dialog({
    component: ProviderApprovalDialog,
    componentProps: { provider: row },
  }).onOk(() => tableRef.value?.refresh());
};
</script>