106 lines
4.2 KiB
TypeScript
106 lines
4.2 KiB
TypeScript
import type { ColumnDef } from '@tanstack/vue-table';
|
|
import { h } from 'vue';
|
|
import DataTableActions from '@/components/admin/hr/employees/data-table-actions.vue';
|
|
import EmployeeStatusToggle from '@/components/admin/hr/employees/employee-status-toggle.vue';
|
|
import { DataTableColumnHeader } from '@/components/data-table';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import type { EmployeeListItem } from '@/types/employee';
|
|
|
|
export const columns: ColumnDef<EmployeeListItem>[] = [
|
|
{
|
|
accessorKey: 'profile.full_name',
|
|
enableSorting: true,
|
|
header: () => h(DataTableColumnHeader, { title: 'Nama', column: 'full_name' }),
|
|
cell: ({ row }) => row.original.profile?.full_name ?? '-',
|
|
},
|
|
{
|
|
id: 'account',
|
|
accessorKey: 'email',
|
|
enableSorting: true,
|
|
header: () => h(DataTableColumnHeader, { title: 'Akun', column: 'email' }),
|
|
cell: ({ row }) => h('div', { class: 'space-y-0.5' }, [
|
|
h('div', { class: 'font-medium' }, row.original.email ?? '-'),
|
|
h('div', { class: 'text-muted-foreground text-xs' }, row.original.username ?? '-'),
|
|
]),
|
|
},
|
|
{
|
|
accessorKey: 'role_label',
|
|
enableSorting: false,
|
|
header: () => h(DataTableColumnHeader, { title: 'Role', column: 'role' }),
|
|
cell: ({ row }) => row.original.role_label
|
|
? h(Badge, { variant: 'outline' }, () => row.original.role_label)
|
|
: '-',
|
|
},
|
|
{
|
|
accessorKey: 'profile.phone_number',
|
|
enableSorting: false,
|
|
header: () => h(DataTableColumnHeader, { title: 'Telepon', column: 'phone_number' }),
|
|
cell: ({ row }) => row.original.profile?.phone_number ?? '-',
|
|
},
|
|
{
|
|
accessorKey: 'profile.gender_label',
|
|
enableSorting: false,
|
|
header: () => h(DataTableColumnHeader, { title: 'Jenis Kelamin', column: 'gender' }),
|
|
cell: ({ row }) => row.original.profile?.gender_label ?? '-',
|
|
},
|
|
{
|
|
accessorKey: 'profile.birth_date_formatted',
|
|
enableSorting: false,
|
|
header: () => h(DataTableColumnHeader, { title: 'Tanggal Lahir', column: 'birth_date' }),
|
|
cell: ({ row }) => row.original.profile?.birth_date_formatted ?? '-',
|
|
},
|
|
{
|
|
accessorKey: 'profile.address',
|
|
enableSorting: false,
|
|
header: () => h(DataTableColumnHeader, { title: 'Alamat', column: 'address' }),
|
|
cell: ({ row }) => h(
|
|
'span',
|
|
{ class: 'block max-w-[200px] truncate', title: row.original.profile?.address ?? undefined },
|
|
row.original.profile?.address ?? '-',
|
|
),
|
|
},
|
|
{
|
|
id: 'employment_dates',
|
|
accessorKey: 'employee.join_date_formatted',
|
|
enableSorting: true,
|
|
header: () => h(DataTableColumnHeader, { title: 'Masa Kepegawaian', column: 'join_date' }),
|
|
cell: ({ row }) => h('div', { class: 'space-y-0.5 text-sm' }, [
|
|
h('div', {}, [
|
|
h('span', { class: 'text-muted-foreground' }, 'Bergabung: '),
|
|
row.original.employee?.join_date_formatted ?? '-',
|
|
]),
|
|
h('div', {}, [
|
|
h('span', { class: 'text-muted-foreground' }, 'Resign: '),
|
|
row.original.employee?.resign_date_formatted ?? '-',
|
|
]),
|
|
]),
|
|
},
|
|
{
|
|
accessorKey: 'employee.employment_status_label',
|
|
enableSorting: true,
|
|
header: () => h(DataTableColumnHeader, { title: 'Status Kepegawaian', column: 'employment_status' }),
|
|
cell: ({ row }) => row.original.employee?.employment_status_label ?? '-',
|
|
},
|
|
{
|
|
accessorKey: 'employee.base_salary_formatted',
|
|
enableSorting: true,
|
|
header: () => h(DataTableColumnHeader, {
|
|
title: 'Gaji Pokok',
|
|
column: 'base_salary',
|
|
}),
|
|
cell: ({ row }) => row.original.employee?.base_salary_formatted ?? '-',
|
|
},
|
|
{
|
|
id: 'status_toggle',
|
|
enableSorting: false,
|
|
header: () => h(DataTableColumnHeader, { title: 'Status', column: 'is_active' }),
|
|
cell: ({ row }) => h(EmployeeStatusToggle, { employee: row.original }),
|
|
},
|
|
{
|
|
id: 'actions',
|
|
enableSorting: false,
|
|
enableHiding: false,
|
|
cell: ({ row }) => h(DataTableActions, { employee: row.original }),
|
|
},
|
|
];
|