29972/frontend/src/components/TableSampleClients.tsx

import { mdiEye, mdiTrashCan } from '@mdi/js';
import React, { useState } from 'react';
import { useSampleClients } from '../hooks/sampleData';
import { Client } from '../interfaces';
import BaseButton from './BaseButton';
import BaseButtons from './BaseButtons';
import CardBoxModal from './CardBoxModal';
import UserAvatar from './UserAvatar';

const TableSampleClients = () => {
  const { clients } = useSampleClients();

  const perPage = 5;

  const [currentPage, setCurrentPage] = useState(0);

  const clientsPaginated = clients.slice(
    perPage * currentPage,
    perPage * (currentPage + 1),
  );

  const numPages = clients.length / perPage;

  const pagesList = [];

  for (let i = 0; i < numPages; i++) {
    pagesList.push(i);
  }

  const [isModalInfoActive, setIsModalInfoActive] = useState(false);
  const [isModalTrashActive, setIsModalTrashActive] = useState(false);

  const handleModalAction = () => {
    setIsModalInfoActive(false);
    setIsModalTrashActive(false);
  };

  return (
    <>
      <CardBoxModal
        title='Sample modal'
        buttonColor='info'
        buttonLabel='Done'
        isActive={isModalInfoActive}
        onConfirm={handleModalAction}
        onCancel={handleModalAction}
      >
        <p>
          Lorem ipsum dolor sit amet <b>adipiscing elit</b>
        </p>
        <p>This is sample modal</p>
      </CardBoxModal>

      <CardBoxModal
        title='Please confirm'
        buttonColor='danger'
        buttonLabel='Confirm'
        isActive={isModalTrashActive}
        onConfirm={handleModalAction}
        onCancel={handleModalAction}
      >
        <p>
          Lorem ipsum dolor sit amet <b>adipiscing elit</b>
        </p>
        <p>This is sample modal</p>
      </CardBoxModal>

      <table>
        <thead>
          <tr>
            <th />
            <th>Name</th>
            <th>Company</th>
            <th>City</th>
            <th>Progress</th>
            <th>Created</th>
            <th />
          </tr>
        </thead>
        <tbody>
          {clientsPaginated.map((client: Client) => (
            <tr key={client.id}>
              <td className='border-b-0 lg:w-6 before:hidden'>
                <UserAvatar
                  username={client.name}
                  className='w-24 h-24 mx-auto lg:w-6 lg:h-6'
                />
              </td>
              <td data-label='Name'>{client.name}</td>
              <td data-label='Company'>{client.company}</td>
              <td data-label='City'>{client.city}</td>
              <td data-label='Progress' className='lg:w-32'>
                <progress
                  className='flex w-2/5 self-center lg:w-full'
                  max='100'
                  value={client.progress}
                >
                  {client.progress}
                </progress>
              </td>
              <td data-label='Created' className='lg:w-1 whitespace-nowrap'>
                <small className='text-gray-500 dark:text-slate-400'>
                  {client.created}
                </small>
              </td>
              <td className='before:hidden lg:w-1 whitespace-nowrap'>
                <BaseButtons type='justify-start lg:justify-end' noWrap>
                  <BaseButton
                    color='info'
                    icon={mdiEye}
                    onClick={() => setIsModalInfoActive(true)}
                    small
                  />
                  <BaseButton
                    color='danger'
                    icon={mdiTrashCan}
                    onClick={() => setIsModalTrashActive(true)}
                    small
                  />
                </BaseButtons>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <div className='p-3 lg:px-6 border-t border-gray-100 dark:border-slate-800'>
        <div className='flex flex-col md:flex-row items-center justify-between py-3 md:py-0'>
          <BaseButtons>
            {pagesList.map((page) => (
              <BaseButton
                key={page}
                active={page === currentPage}
                label={page + 1}
                color={page === currentPage ? 'lightDark' : 'whiteDark'}
                small
                onClick={() => setCurrentPage(page)}
              />
            ))}
          </BaseButtons>
          <small className='mt-6 md:mt-0'>
            Page {currentPage + 1} of {numPages}
          </small>
        </div>
      </div>
    </>
  );
};

export default TableSampleClients;