revenue-fe/src/pages/members/kyc/Columns.tsx

import { DataGridColumnHeader, KeenIcon } from '@/components';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger
} from '@/components/ui/dropdown-menu';
import { ColumnDef } from '@tanstack/react-table';
import { ArrowUpDown, MoreHorizontal } from 'lucide-react';

export type Members = {
  // id: number;
  username: number;
  fullname: string;
  group: string;
  email: string;
  created_at: Date;
};

export const getColumns = (handleUpdate: (data: any) => void): ColumnDef<Members>[] => [
  {
    accessorKey: 'no',
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          No
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      );
    },
    cell: ({ row, table }) => {
      const pageIndex = table.getState().pagination.pageIndex;
      const pageSize = table.getState().pagination.pageSize;
      const rowIndex = row.index;

      const number = pageIndex * pageSize + rowIndex + 1;
      return number;
    }
  },
  {
    accessorKey: 'username',
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          Username
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      );
    }
  },
  {
    accessorKey: 'name',
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          Fullname
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      );
    }
  },
  {
    accessorKey: 'msisdn',
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          Phone Number
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      );
    }
  },
  {
    accessorKey: 'group_name',
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          Group
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      );
    }
  },
  {
    accessorKey: 'destinationGroup',
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          Destination Group
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      );
    }
  },
  {
    accessorKey: 'email',
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          Email
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      );
    }
  },
  {
    accessorKey: 'created_at',
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          Created Date
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      );
    },
    cell: ({ row }) => new Date(row.original.created_at).toLocaleDateString()
  },
  {
    accessorKey: 'statusApproval',
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        >
          Status Approval
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      );
    }
  },
  {
    id: 'actions',
    cell: ({ row }) => {
      const dataMembers = row.original;

      return (
        <button
          className="btn btn-sm btn-icon btn-clear btn-light"
          onClick={() => handleUpdate(dataMembers)}
        >
          <KeenIcon icon="notepad-edit" />
        </button>
      );
    }
  }
];

export type MembersProps = {
  id: string;
  fullname: string;
  email: string;
  username: string;
  msisdn: string;
  password: string;
  pin: string;
  try_pin: string;
  mother_fullname: string;
  agent_name: string;
  bank_name: string;
  bank_account: string;
  ibank_number: string;
  address: string;
  longitude: string;
  latitude: string;
  nationality: string;
  photouser: string;
  photomerchant: string;
  file_selfie: string;
  file_document_id: string;
  file_document_id_selfie: string;
  file_commercial_license: string;
  identity_type: string;
  identity_number: string;
  license_number: string;
  date_birth: string;
  gender: string;
  status: string;
  isneedapproval: string;
  isapproved: string;
  approveddate: string;
  approvedby: string;
  created_by: string;
  created_at: string;
  updated_by: string;
  updated_at: string;
  deleted_by: string;
  deleted_at: string;
  group: string;
  point_tier: string;
  language: string;
  municipio: string;
  posto_adms: string;
  suco: string;
  aldeia: string;
  profession: string;
  description: string;
};

export const initialMember: MembersProps = {
  id: '',
  fullname: '',
  email: '',
  username: '',
  msisdn: '',
  password: '',
  pin: '',
  try_pin: '',
  mother_fullname: '',
  agent_name: '',
  bank_name: '',
  bank_account: '',
  ibank_number: '',
  address: '',
  longitude: '',
  latitude: '',
  nationality: '',
  photouser: '',
  photomerchant: '',
  file_selfie: '',
  file_document_id: '',
  file_document_id_selfie: '',
  file_commercial_license: '',
  identity_type: '',
  identity_number: '',
  license_number: '',
  date_birth: '',
  gender: '',
  status: 'N',
  isneedapproval: '',
  isapproved: '',
  approveddate: '',
  approvedby: '',
  created_by: '',
  created_at: '',
  updated_by: '',
  updated_at: '',
  deleted_by: '',
  deleted_at: '',
  group: '',
  point_tier: '',
  language: '',
  municipio: '',
  posto_adms: '',
  suco: '',
  aldeia: '',
  profession: '',
  description: ''
};