import React, { useEffect, useState } from 'react';
import type { ColumnsType } from 'antd/es/table';
import { Card,Table, Input, Form, Col, Row, Button} from 'antd';

import './pages-asset-management-asset-management-components-mrn-view.css';
import Link from 'antd/lib/typography/Link';


/* eslint-disable-next-line */
export interface AssetMaitainceReportProps {}

export function AssetMaitainceReport(
  props: AssetMaitainceReportProps
) {

const [page,setPage] = useState<number>(1);

const columns: ColumnsType<any> = [
  {
      title: "S.No",
      key: "sno",
      responsive: ["sm"],
      render: (text,object,index) => (page - 1) * 10 + (index + 1)
    },

   {
     title: 'asset_maitainance_id',
    dataIndex: '',
   },
  
  {
    title: 'asset_id',
    dataIndex: '',
   
  },
  
  {
    title: 'asset_location_id',
    dataIndex: '',

  }, {
    title: 'asset_condition',
    dataIndex: '',

  },
  {
    title: 'maitainance_frequency_in_days',
    dataIndex: '',

  },
  {
    title: 'assigned',
    dataIndex: '',

  },
  {
    title: 'maintainance_type',
    dataIndex: '',

  },
  {
    title: 'expired_date',
    dataIndex: '',

  },
  {
    title: 'cost_of_date',
    dataIndex: '',

  },
  {
    title: 'remarks',
    dataIndex: '',

  }, {
    title: 'status',
    dataIndex: '',

  }
  
];


return(
  <Card title={<span style={{color:'white'}}>AssetMaitainanceReport</span>}
  style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }} >  <br></br>
  
  <Form>
        <Row gutter={20}>
          <Col span={8}>
            <Form.Item
              name=""
              label="Asset Id"
              rules={[
                {
                  required: true,
                  message:'Asset Id required'
                }
              ]}
            >
              <Input />
            </Form.Item>
          </Col>
        

        
          <Col span={3} style={{ textAlign: "right" }}>
            <Button>Submit</Button>
            {[] && <Button>Reset</Button>}
          </Col>
        </Row>
      </Form>
 <Table columns={columns} dataSource={[]} />
  </Card>);
}

export default AssetMaitainceReport;