farmcontrol-ui/src/components/Dashboard/Inventory/PartStocks.jsx

// src/partStocks.js

import React, { useState, useContext, useRef } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button, Flex, Space, Modal, message, Dropdown, Typography } from 'antd'

import { AuthContext } from '../context/AuthContext'

import NewPartStock from './PartStocks/NewPartStock'
import IdDisplay from '../common/IdDisplay'
import PartStockIcon from '../../Icons/PartStockIcon'
import InfoCircleIcon from '../../Icons/InfoCircleIcon'
import PlusIcon from '../../Icons/PlusIcon'
import ReloadIcon from '../../Icons/ReloadIcon'
import PartStockState from '../common/PartStockState'
import TimeDisplay from '../common/TimeDisplay'
import ObjectTable from '../common/ObjectTable'

import config from '../../../config'

const { Text } = Typography

const PartStocks = () => {
  const [messageApi, contextHolder] = message.useMessage()
  const navigate = useNavigate()
  const tableRef = useRef()

  const [newPartStockOpen, setNewPartStockOpen] = useState(false)

  const { authenticated } = useContext(AuthContext)

  const getPartStockActionItems = (id) => {
    return {
      items: [
        {
          label: 'Info',
          key: 'info',
          icon: <InfoCircleIcon />
        }
      ],
      onClick: ({ key }) => {
        if (key === 'info') {
          navigate(`/dashboard/inventory/partstocks/info?partStockId=${id}`)
        }
      }
    }
  }

  // Column definitions
  const columns = [
    {
      title: '',
      dataIndex: '',
      key: 'icon',
      width: 40,
      fixed: 'left',
      render: () => <PartStockIcon></PartStockIcon>
    },
    {
      title: 'Part Name',
      dataIndex: 'part',
      key: 'name',
      width: 200,
      fixed: 'left',
      render: (part) => <Text ellipsis>{part.name}</Text>
    },
    {
      title: 'ID',
      dataIndex: '_id',
      key: 'id',
      width: 180,
      render: (text) => (
        <IdDisplay id={text} type={'partstock'} longId={false} />
      )
    },
    {
      title: 'State',
      key: 'state',
      width: 350,
      render: (record) => <PartStockState partStock={record} />
    },
    {
      title: 'Current Quantity',
      dataIndex: 'currentQuantity',
      key: 'currentQuantity',
      width: 160,
      render: (currentQuantity) => <Text ellipsis>{currentQuantity}</Text>
    },
    {
      title: 'Starting Quantity',
      dataIndex: 'startingQuantity',
      key: 'startingQuantity',
      width: 160,
      render: (startingQuantity) => <Text ellipsis>{startingQuantity}</Text>
    },
    {
      title: 'Created At',
      dataIndex: 'createdAt',
      key: 'createdAt',
      width: 180,
      render: (createdAt) => {
        if (createdAt) {
          return <TimeDisplay dateTime={createdAt} />
        } else {
          return 'n/a'
        }
      }
    },
    {
      title: 'Updated At',
      dataIndex: 'updatedAt',
      key: 'updatedAt',
      width: 180,
      render: (updatedAt) => {
        if (updatedAt) {
          return <TimeDisplay dateTime={updatedAt} />
        } else {
          return 'n/a'
        }
      }
    },
    {
      title: 'Actions',
      key: 'actions',
      fixed: 'right',
      width: 150,
      render: (text, record) => {
        return (
          <Space gap='small'>
            <Button
              icon={<InfoCircleIcon />}
              onClick={() =>
                navigate(
                  `/dashboard/inventory/partstocks/info?partStockId=${record._id}`
                )
              }
            />
            <Dropdown menu={getPartStockActionItems(record._id)}>
              <Button>Actions</Button>
            </Dropdown>
          </Space>
        )
      }
    }
  ]

  const actionItems = {
    items: [
      {
        label: 'New Part Stock',
        key: 'newPartStock',
        icon: <PlusIcon />
      },
      { type: 'divider' },
      {
        label: 'Reload List',
        key: 'reloadList',
        icon: <ReloadIcon />
      }
    ],
    onClick: ({ key }) => {
      if (key === 'reloadList') {
        tableRef.current?.reload()
      } else if (key === 'newPartStock') {
        setNewPartStockOpen(true)
      }
    }
  }

  return (
    <>
      <Flex vertical={'true'} gap='large'>
        {contextHolder}
        <Space>
          <Dropdown menu={actionItems}>
            <Button>Actions</Button>
          </Dropdown>
        </Space>
        <ObjectTable
          ref={tableRef}
          columns={columns}
          url={`${config.backendUrl}/partstocks`}
          authenticated={authenticated}
        />
      </Flex>
      <Modal
        open={newPartStockOpen}
        styles={{ content: { paddingBottom: '24px' } }}
        footer={null}
        width={700}
        onCancel={() => {
          setNewPartStockOpen(false)
        }}
        destroyOnHidden={true}
      >
        <NewPartStock
          onOk={() => {
            setNewPartStockOpen(false)
            messageApi.success('New part stock created successfully.')
            tableRef.current?.reload()
          }}
          reset={newPartStockOpen}
        />
      </Modal>
    </>
  )
}

export default PartStocks