ManagementSystem/FRONTEND/src/pages/StaffEvaluation/StaffEvaluation.tsx

import { getProfilesData } from '@/api/Admin'
import DataTableAll from '@/components/DataTable/DataTable'
import ProjectInvolvement from '@/components/ProjectInvolvement/ProjectInvolvement'
import { get } from '@/rtk/helpers/apiService'
import { Box, Button, Select, Text, Title } from '@mantine/core'
import { DateInput } from '@mantine/dates'
import { notifications } from '@mantine/notifications'
import moment from 'moment'
import { useEffect, useState } from 'react'
import classes from './StaffEvaluation.module.css'

interface User {
  id: number
  name: string
  email: string
  email_verified_at: string | null
  permission: string
  remember_token: string | null
  created_at: string | null
  updated_at: string | null
}

interface Filter {
  userID: string
  fromDate: Date | null
  toDate: Date | null
  // other properties of the filter object
}

const StaffEvaluation = () => {
  const [dataProfile, setDataProfile] = useState<any>([])
  const [listUsers, setListUsers] = useState<User[]>([])
  const [filter, setFilter] = useState<Filter>({
    userID: '',
    fromDate: null,
    toDate: null,
  })

  console.log(filter, 'filter')

  // const getAllTracking = async () => {
  //   try {
  //     const searchParams = new URLSearchParams(window.location.search)
  //     const params = {}

  //     for (const [key, value] of searchParams.entries()) {
  //       if (key === 'page' && value === '') {
  //         Object.assign(params, { [`${key}`]: 1 })
  //       } else {
  //         Object.assign(params, { [`${key}`]: value })
  //       }
  //     }

  //     const res = await get(getListTracking, params)
  //     if (res.status) {
  //       setListTracking(res)
  //     }
  //   } catch (error:any) {
  //     notifications.show({
  //       title: 'Error',
  //       message: error.message??error,
  //       color: 'red',
  //     })
  //   }
  // }

  const getListProfilesData = async () => {
    try {
      const params = {}
      const res = await get(getProfilesData, params)
      if (res.status) {
        return res.data
      }
    } catch (error: any) {
      notifications.show({
        title: 'Error',
        message: error.message ?? error,
        color: 'red',
      })
    }
    return []
  }

  useEffect(() => {
    const fetchData = async () => {
      const result = await getListProfilesData()
      setDataProfile(result ?? [])
      setListUsers(result ?? [])
    }
    fetchData()
  }, [])

  const columns = [
    {
      name: 'level',
      size: '20%',
      header: 'Level',
    },
    {
      name: 'name',
      size: '',
      header: 'Name',
    },
    {
      name: 'point',
      size: '10%',
      header: 'Point',
      render: (row: any) => {
        return (
          <div
            style={{
              display: 'flex',
              justifyContent: 'center',
            }}
          >
            {row?.point}
          </div>
        )
      },
    },
    {
      name: 'updated_at',
      size: '25%',
      header: 'Last update',
      render: (row: any) => {
        return (
          <div
            style={{
              display: 'flex',
              justifyContent: 'center',
            }}
          >
            {moment(row?.updated_at).format('HH:mm:ss DD/MM/YYYY')}
          </div>
        )
      },
    },
  ]

  const users = [
    {
      id: 1,
      level: 'Level 1',
      name: 'React JS',
      point: 3,
      created_at: null,
      updated_at: '2024-09-19T09:08:48.000000Z',
    },
  ]

  const infoTotal = () => {
    return (
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <Text mr={20} fs={'italic'}>
          Avg:{users.length}
        </Text>
        <Text fs={'italic'}>Total: {users.length}</Text>
      </div>
    )
  }
  return (
    <div>
      <div className={classes.title}>
        <h3>
          <Text>Admin/</Text>
          Staff Evaluation
        </h3>
      </div>
      <Box w="100%" display={'flex'} mt={15} ml={10}>
        <Box w="50%" display={'flex'}>
          <Text
            mr={'xs'}
            style={{ alignContent: 'center' }}
            fw={600}
            size={'md'}
          >
            User:
          </Text>
          <Select
            label={''}
            placeholder="Select user"
            maxLength={255}
            required
            data={listUsers.map((i: User) => i.name)}
            onChange={(e) => setFilter({ ...filter, userID: e! })}
          />
        </Box>
        <Box
          w="50%"
          display={'flex'}
          style={{ justifyContent: 'flex-end' }}
          mr={10}
        >
          <Button
            // m={5}
            onClick={() => {
              // setAction('add')
              // form.reset()
            }}
          >
            Export
          </Button>
        </Box>
      </Box>
      <Box className={classes.userInfoSection} display="flex">
        <Box className={classes.projectInvolvement}>
          <Box
            w="100%"
            display={'flex'}
            mt={15}
            style={{ justifyContent: 'space-evenly' }}
          >
            <Box display={'flex'} mr={10}>
              <Text
                mr={'xs'}
                style={{ alignContent: 'center' }}
                fw={600}
                size={'md'}
              >
                From Date:
              </Text>

              <DateInput
                placeholder="Select date"
                clearable
                required
                label={''}
                value={filter.fromDate ? new Date(filter.fromDate) : null}
                valueFormat="DD/MM/YYYY"
                onChange={(e) => setFilter({ ...filter, fromDate: e! })}
              ></DateInput>
            </Box>

            <Box display={'flex'} mr={10}>
              <Text
                mr={'xs'}
                style={{ alignContent: 'center' }}
                fw={600}
                size={'md'}
              >
                To Date:
              </Text>
              <DateInput
                placeholder="Select date"
                clearable
                required
                label={''}
                value={filter.toDate ? new Date(filter.toDate) : null}
                valueFormat="DD/MM/YYYY"
                onChange={(e) => setFilter({ ...filter, toDate: e! })}
              ></DateInput>
            </Box>
          </Box>
          <ProjectInvolvement dataProfile={dataProfile} page="admin" />
        </Box>

        <Box className={classes.sidebar}>
          <Title order={3} className={classes.titleSidebar}>
            Technicals
          </Title>
          <DataTableAll
            data={users}
            columns={columns}
            size=""
            searchInput
            infoTotal={infoTotal()}
          />
        </Box>
      </Box>
    </div>
  )
}

export default StaffEvaluation