smartservice_web/smartservice_frontend/src/app/(admin)/~test2/2/Test2View.tsx

"use client"
import PageBreadcrumb from "@/components/common/PageBreadCrumb2";
import ComponentCard from '@/components/common/ComponentCard2';
import CtTable1 from '@/components/tables/CtTable1';
import Button from '@/components/ui/button/Button2';
import { DocsIcon, PlusIcon, ChevronDownIcon } from "@/icons";
import Label from '@/components/form/Label';
import Input from '@/components/form/input/InputField2';
import Select from '@/components/form/Select2';
import DatePicker from '@/components/form/date-picker2';
import Badge from "@/components/ui/badge/Badge";

import React from "react";
import { useEffect, useState } from 'react';
import api, { convertDateTime3 } from '@/lib/_AG';

import { useModal } from "@/hooks/useModal";
import AddTest2ViewModal from './AddTest2ViewModal';


const SEARCH_LABEL_WIDTH = 24;
const COUNT_PER_PAGE = 10;
const PAGE_NUM_COUNT = 5;



const columns = [
  {
    title: "등록일",
    key: "reg_time" ,
  },
  {
    title: "사업자번호",
    key: "corporate" ,
  },
  {
    title: "단말기 ID(TID)",
    key: "device_id",
  },
  {
    title: "그룹",
    key: "group",
  },
  {
    title: "위치",
    key: "location",
  },
  {
    title: "상태",
    key: "status",
    renderItem: (item: any) => (
      <Badge size="sm" color={item.status === "정상" ? "success" : item.status === "장애" ? "error" : "warning"}>
        {item.status}
      </Badge>
    ),
  },
  {
    title: "장애발생시간",
    key: "error_time",
  },
  {
    title: "장애복구시간",
    key: "recovery_time",
  },
  {
    title: "관리자",
    key: "manager",
  },
];

//TempCode, 차후에 API로 불러오는 값
const tableData = [
  {
    reg_time: "2024-06-01 10:23:01",
    corporate: "123-45-67890",
    device_id: "TID001",
    group: "서울지점",
    location: "강남역 5번 출구",
    status: "정상",
    manager: "홍길동",
  },
  {    
    reg_time: "2024-06-01 10:23:01",
    corporate: "234-56-78901",
    device_id: "TID002",
    group: "부산지점",
    location: "해운대해수욕장",
    status: "장애",
    error_time: "2024-06-10 09:15:01",
    recovery_time: "-",
    manager: "김철수",
  },
  {
    reg_time: "2024-06-01 10:23:01",
    corporate: "345-67-89012",
    device_id: "TID003",
    group: "대구지점",
    location: "동성로",
    status: "장애",
    error_time: "2024-06-09 14:30:01",
    recovery_time: "-",
    manager: "이영희",
  },
  {
    reg_time: "2024-06-01 10:23:01",
    corporate: "456-78-90123",
    device_id: "TID004",
    group: "광주지점",
    location: "충장로",
    status: "정상",
    error_time: "2024-06-09 14:30:01",
    recovery_time: "2024-06-09 15:30:01",
    manager: "전우치",
  },
];
//


export default function Test2View() {
  const [ tableOffset, setTableOffset ] = useState<number>(0);
  const [ tableTotalCount, setTableTotalCount ] = useState<number>(0);

  const { isOpen, openModal, closeModal } = useModal();
  
  const options = [
    { value: "disable", label: "미사용" },
    { value: "active", label: "정상" },
    { value: "error", label: "장애" },
  ];

  const handleSelectChange = (value: string) => {
    console.log("Selected value:", value);
  };

  const handlePageChange = (page: number) => {
    console.log('page changed', page);
  };

  const handleClickAdd = () => {
    openModal();
  };
  

  //useEffect(() => {
  //  api.get('/api-test')
  //    .then((resp) => {
  //      console.log(resp)
  //    })
  //    .catch((err) => console.error(err));
  //}, []);

  return (
    <div>
      <PageBreadcrumb pageTitle1="무인기기 관리" pageTitle2="실시간 상태" />

      <div className="space-y-3">
        <ComponentCard title="무인기기 목록">
          <div className="space-y-2">
            <div className="space-y-2 grid grid-cols-1 gap-3 sm:grid-cols-4">
              <div>
                <Label>단말기 상태</Label>
                <div className="relative">
                  <Select
                    options={options}
                    placeholder="선택하세요"
                    onChange={handleSelectChange}
                    className="dark:bg-dark-900"
                  />
                  <span className="absolute text-gray-500 -translate-y-1/2 pointer-events-none right-3 top-1/2 dark:text-gray-400">
                      <ChevronDownIcon/>
                    </span>
                </div>
              </div>
              <div>
                <Label>사업자 번호</Label>
                <Input type="text" />
              </div>
              <div>
                <Label>단말기 TID</Label>
                <Input type="text" />
              </div>
              <div>
                <Label>관리자</Label>
                <Input type="text" />
              </div>
            </div>
            <div className="space-y-2 grid grid-cols-1 gap-3 sm:grid-cols-3">
              <div>
                <Label>그룹</Label>
                <Input type="text" />
              </div>
              <div>
                <Label>위치</Label>
                <Input type="text" />
              </div>
            </div>
            <div className="space-y-2 grid grid-cols-1 gap-3 sm:grid-cols-2">
              <div className="space-y-2 grid grid-cols-1 gap-3 sm:grid-cols-2">
                <DatePicker
                  id="date_start-picker"
                  label="조회 시작일"
                  placeholder=""
                  onChange={(dates, currentDateString) => {
                    // Handle your logic
                    console.log({ dates, currentDateString });
                  }}
                />
                <DatePicker
                  id="date_end-picker"
                  label="조회 종료일"
                  placeholder=""
                  onChange={(dates, currentDateString) => {
                    // Handle your logic
                    console.log({ dates, currentDateString });
                  }}
                />
              </div>
              <div className="flex items-center justify-end gap-5">
                <Button size="sm" variant="outline" startIcon={<DocsIcon />}>엑셀파일 다운로드</Button>
                <Button size="sm" variant="primary">조회</Button>
              </div>
            </div>
          </div>

          <CtTable1 columns={columns} bodyData={tableData} 
            offset={tableOffset} totalCount={tableTotalCount} countPerPage={COUNT_PER_PAGE} pageNumCount={PAGE_NUM_COUNT}
            onClickPageChange={handlePageChange} />

          <div>
            <Button size="sm" variant="primary" startIcon={<PlusIcon />} onClick={handleClickAdd}>신규 등록하기</Button>
          </div>

        </ComponentCard>

        <AddTest2ViewModal isOpen={isOpen} openModal={openModal} closeModal={closeModal} />

      </div>
    </div>
  );
}