import React, { useEffect, useState } from "react";
import DataTable, { TableColumn } from "react-data-table-component";
import { MuiFileInput } from "mui-file-input";
import CloseIcon from "@mui/icons-material/Close";
import AttachFileIcon from "@mui/icons-material/AttachFile";
import EditIcon from "@mui/icons-material/Edit";
import SortIcon from "@mui/icons-material/Sort";
import AddCardIcon from "@mui/icons-material/AddCard";
import {
  Stack,
  Typography,
  TextField,
  InputLabel,
  Button,
  Paper,
  AlertColor,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
} from "@mui/material";
import { LoadingButton } from "@mui/lab";
import {
  IntiyacGirisSorgulaProps,
  paginationComponentOptions,
  customStyles,
} from "../../props/PropsTypes";
import {
  DonemTanim,
  GorevFonksiyon,
  GorevFonksiyonGrup,
  HipKayitSureciDetay,
  Kisi,
  YetenekAdi,
  YetenekAlani,
  YetenekGrubu,
} from "../../types/EntityTypes";
import DeleteButtonWithConfim from "../../components/common/DeleteButtonWithConfirm";
import ProceedButtonWithConfim from "../../components/common/ProceedButtonWithConfirm";
import RejectButtonWithConfim from "../../components/common/RejectButtonWithConfirm";
import MessageBox from "../../components/common/MessageBox";
import moment from "moment";
import "moment/locale/tr";
import {
  hipDetayListesi,
  hipDetayAdd,
  hipDetayUpdate,
  hipDetayUpdateForInceleme4,
  hipDetayUpdateForInceleme6,
  hipDetayDelete,
  donemListesi,
  getMevcutKisi,
  yetenekAlanAdiListesi,
  yetenekGruplariByAlanId,
  yetenekAdlariByGrupId,
  hipOnayaGonder,
  hipOnayla,
  hipGeriGonder,
} from "../../assets/apilinks/HipLinks";
import { ComboSingleSelect } from "../../components/common/ComboSingleSelect";
import { ComboItem, Visibility, evetHayirList } from "../../types/CommonTypes";
import HttpService from "../../security/HttpService";
import {
  gorevFonksiyonuListesi,
  gorevFonksiyonGrubuByFonksiyonId,
} from "../../assets/apilinks/GorevLinks";

HttpService.Configure();

export default function IhtiyacGiris() {
  const [btnIhtiyacGorunur, setBtnIhtiyacGorunur] =
    useState<Visibility>("hidden");
  const [mevcutKisi, setMevcutKisi] = useState<Kisi | null>(null);
  const [aramaKriteri, setAramaKriteri] = useState<string>("");
  const [btnIsLoading, setBtnIsLoading] = useState(true);
  const [ihtiyacEkleDialogOpen, setIhtiyacEkleDialogOpen] =
    useState<boolean>(false);

  const [ihtiyacGuncelleDialogOpen, setIhtiyacGuncelleDialogOpen] =
    useState<boolean>(false);

  const [hipKayitSureciDetayList, setHipKayitSureciDetayList] = useState<
    HipKayitSureciDetay[]
  >([]);

  const [snackbarOpen, setSnackbarOpen] = useState<boolean>(false);
  const [snackbarMessage, setSnackbarMessage] = useState<string>("");
  const [snackbarSeverity, setSnackbarSeverity] =
    useState&lt;AlertColor&gt;("success");

  const [donemList, setDonemList] = useState<DonemTanim[]>([]);
  const [gorevFonksiyonList, setGorevFonksiyonList] = useState<
    GorevFonksiyon[]
  >([]);
  const [gorevFonksiyonGrupList, setGorevFonksiyonGrupList] = useState<
    GorevFonksiyonGrup[]
  >([]);

  const [yetenekAlaniList, setYetenekAlaniList] = useState<YetenekAlani[]>([]);
  const [yetenekGrubuList, setYetenekGrubuList] = useState<YetenekGrubu[]>([]);
  const [yetenekAdiList, setYetenekAdiList] = useState<YetenekAdi[]>([]);

  const [hipGuncelleHipDetayId, setHipGuncelleHipDetayId] = useState(0);
  const [hipEkleDonemId, setHipEkleDonemId] = useState(0);
  const [hipGuncelleDonemId, setHipGuncelleDonemId] = useState(0);
  const [hipEkleGorevFonksiyonId, setHipEkleGorevFonksiyonId] = useState(0);
  const [hipGuncelleGorevFonksiyonId, setHipGuncelleGorevFonksiyonId] =
    useState(0);
  const [hipEkleGorevFonksiyonGrupId, setHipEkleGorevFonksiyonGrupId] =
    useState(0);
  const [hipEkleProjeNumarasi, setHipEkleProjeNumarasi] = useState("");
  const [fileResim, setFileResim] = useState<File | null>(null);
  const [filePtd, setFilePtd] = useState<File | null>(null);
  const [fileHiad, setFileHiad] = useState<File | null>(null);
  const [fileIssf, setFileIssf] = useState<File | null>(null);
  const [hipEkleTeknikOzellikler, setHipEkleTeknikOzellikler] = useState("");
  const [hipEkleIhtiyacMakamiOncelik, setHipEkleIhtiyacMakamiOncelik] =
    useState(0);
  const [hipEkleMuhtelif, setHipEkleMuhtelif] = useState("0");
  const [hipEkleTopHarekatIhtiyaci, setHipEkleTopHarekatIhtiyaci] = useState<
    number | string
  >(0);
  const [hipEkleMevcutMiktar, setHipEkleMevcutMiktar] = useState<
    number | string
  >(0);
  const [hipEklePlanDonemiIhtiyacMiktar, setHipEklePlanDonemiIhtiyacMiktar] =
    useState<number | string>(0);

  //İnceleme 4
  const [hipEkleYetenekAlaniId, setHipEkleYetenekAlaniId] = useState(0);
  const [hipEkleYetenekGrubuId, setHipEkleYetenekGrubuId] = useState(0);
  const [hipEkleYetenekAdiId, setHipEkleYetenekAdiId] = useState(0);
  const [hipEkleGnkurBskOncelik, setHipEkleGnkurBskOncelik] = useState(0);
  const [
    ihtiyacGuncelleForInceleme4DialogOpen,
    setIhtiyacGuncelleForInceleme4DialogOpen,
  ] = useState(false);

  //İnceleme 6
  const [hipEklePortfoyGrubu, setHipEklePortfoyGrubu] = useState(0);
  const [
    ihtiyacGuncelleForInceleme6DialogOpen,
    setIhtiyacGuncelleForInceleme6DialogOpen,
  ] = useState(false);

  const columnsHipKayitSureciDetay: TableColumn<HipKayitSureciDetay>[] = [
    {
      name: "İşlem Numarası",
      sortable: true,
      selector: (row) => row.id,
      width: "auto",
      wrap: false,
    },
    {
      name: "Onaya Gönder",
      button: true,
      wrap: false,
      cell: (row) =>
        row.projeDurumu === "rolInceleme1" ? (
          <ProceedButtonWithConfim
            idToProceed={String(row.id)}
             
            message="Seçili kaydı onaya göndermek istediğinize emin misiniz ?"
          />
        ) : (
          <></>
        ),
    },
    {
      name: "Onayla",
      button: true,
      wrap: false,
      cell: (row) =>
        row.projeDurumu !== "rolInceleme1" ? (
          <ProceedButtonWithConfim
            idToProceed={String(row.id)}
             
            message="Seçili kaydı onaylamak istediğinize emin misiniz ?"
          />
        ) : (
          <></>
        ),
    },
    {
      name: "Geri Gönder",
      button: true,
      wrap: false,
      cell: (row) =>
        row.projeDurumu !== "rolInceleme1" ? (
          <RejectButtonWithConfim
            idToReject={String(row.id)}
              rejectMessage) =>
              handleGeriGonder(id, rejectMessage)
            }
            message="Seçili kaydı geri göndermek istediğinize emin misiniz ?"
          />
        ) : (
          <></>
        ),
    },
    {
      name: "Düzenle",
      button: true,
      wrap: false,
      cell: (row) => (
        <Button
          variant="contained"
          size="small"
            => handleGuncelle(String(row.id))}
        >
          <EditIcon />
        </Button>
      ),
    },
    {
      name: "İhtiyac Makamı",
      sortable: true,
      selector: (row) => row.ihtiyacMakam.orgAdi,
      width: "auto",
      wrap: false,
    },
    {
      name: "Dönem",
      sortable: true,
      selector: (row) => row.donem.donemAdi,
      width: "auto",
      wrap: false,
    },
    {
      name: "Görev Fonksiyonu",
      sortable: true,
      selector: (row) => row.gorevFonksiyon.gorevFonksiyonAdi,
      width: "auto",
      wrap: false,
    },
    {
      name: "Görev Fonksiyon Grubu",
      sortable: true,
      selector: (row) => row.gorevFonksiyonGrup.gorevFonksiyonGrupAdi,
      width: "auto",
      wrap: false,
    },
    {
      name: "Portföy Grubu",
      sortable: true,
      selector: (row) => row.portfoyGrubu,
      width: "auto",
      wrap: false,
    },
    {
      name: "Teknik Özellikler",
      sortable: true,
      selector: (row) => row.teknikOzellikler,
      width: "auto",
      wrap: false,
    },
    {
      name: "Proje Durumu",
      sortable: true,
      selector: (row) =>
        row.projeDurumu === "rolInceleme1"
          ? "Taslak"
          : row.projeDurumu.substring(3, row.projeDurumu.length) +
            " kullanıcısından onay bekliyor.",
      width: "auto",
      wrap: false,
    },
    {
      name: "Yetenek Alanı",
      sortable: true,
      selector: (row) => row.yetenekAlani?.yetenekAlanAdi,
      width: "auto",
      wrap: false,
    },
    {
      name: "Yetenek Grubu",
      sortable: true,
      selector: (row) => row.yetenekGrubu?.yetenekGrubAdi,
      width: "auto",
      wrap: false,
    },
    {
      name: "Yetenek Adı",
      sortable: true,
      selector: (row) => row.yetenekAdi?.yetenekTanim,
      width: "auto",
      wrap: false,
    },
    {
      name: "İhtiyaç Makamı Öncelik",
      sortable: true,
      selector: (row) => row.ihtiyacMakamiOncelik,
      width: "auto",
      wrap: false,
    },
    {
      name: "Genel Kurmay Başkanlığı Öncelik",
      sortable: true,
      selector: (row) => row.gnkurBskOncelik,
      width: "auto",
      wrap: false,
    },
    {
      name: "Muhtelif",
      sortable: true,
      selector: (row) => (row.muhtelif === 1 ? "Evet" : "Hayır"),
      width: "auto",
      wrap: false,
    },
    {
      name: "Toplam Harekat İhtiyacı Miktarı",
      sortable: true,
      selector: (row) =>
        row.topHarekatIhtiyaci === 0 ? "Muhtelif" : row.topHarekatIhtiyaci,
      width: "auto",
      wrap: false,
    },
    {
      name: "Mevcut Miktar",
      sortable: true,
      selector: (row) =>
        row.mevcutMiktar === 0 ? "Muhtelif" : row.mevcutMiktar,
      width: "auto",
      wrap: false,
    },
    {
      name: "Plan Dönemi İhtiyaç Miktarı",
      sortable: true,
      selector: (row) =>
        row.planDonemiIhtiyacMiktar === 0
          ? "Muhtelif"
          : row.planDonemiIhtiyacMiktar,
      width: "auto",
      wrap: false,
    },
    {
      name: "Ekleyen Kişi",
      sortable: true,
      selector: (row) =>
        row.ekleyenKisiNavigation.ad + " " + row.ekleyenKisiNavigation.soyad,
      width: "auto",
      wrap: false,
    },
    {
      name: "Ekleme Tarihi",
      sortable: true,
      selector: (row) => moment(row.eklemeTarihi).locale("tr").format("lll"),
      width: "auto",
      wrap: false,
    },
    {
      name: "Sil",
      button: true,
      wrap: false,
      cell: (row) =>
        Number(row.ekleyenKisi) === mevcutKisi?.id ? (
          <DeleteButtonWithConfim
            idToDelete={String(row.id)}
             
          />
        ) : (
          <></>
        ),
    },
  ];

  const fetchData = async (url: string, data: any, setData: Function) => {
    debugger;
    try {
      const response = await HttpService.GetAxiosClient().post(url, data);
      console.log("Data fetched successfully:", response.data);
      setData(response.data);
    } catch (error: any) {
      console.error("Error fetching data:", error.response.data);
      // Handle error according to your application's requirements
    } finally {
      // setLoading(false);
    }
  };

  const fetchDataGet = async (url: string, setData: Function) => {
    try {
      const response = await HttpService.GetAxiosClient().get(url);
      console.log("Data fetched successfully:", response.data);
      setData(response.data);
    } catch (error: any) {
      console.error("Error fetching data:", error.response.data);
      // Handle error according to your application's requirements
    } finally {
      // setLoading(false);
    }
  };

  const kisiSorgula = async () => {
    await fetchDataGet(getMevcutKisi, setMevcutKisiMain);
  };

  const setMevcutKisiMain = async (data: any) => {
    setMevcutKisi(data);
    if (data.mevcutRol === "rolInceleme1") {
      setBtnIhtiyacGorunur("visible");
    } else {
      setBtnIhtiyacGorunur("hidden");
    }
  };

  const donemSorgula = async () => {
    await fetchData(donemListesi, { DonemTipTanimId: null }, setDonemList);
  };

  const gorevFonksiyonSorgula = async () => {
    await fetchData(
      gorevFonksiyonuListesi,
      { aramaKriteri: "" },
      setGorevFonksiyonList
    );
  };

  const yetenekAlaniSorgula = async () => {
    await fetchData(
      yetenekAlanAdiListesi,
      { aramaKriteri: "" },
      setYetenekAlaniList
    );
  };

  useEffect(() => {
    const fetchDataSequentially = async () => {
      await kisiSorgula();
      await donemSorgula();
      await gorevFonksiyonSorgula();
      await yetenekAlaniSorgula();
      setBtnIsLoading(false);
    };

    fetchDataSequentially();
  }, []);

  const yetenekGrubuSorgula = async (id: number) => {
    await HttpService.GetAxiosClient()
      .post(yetenekGruplariByAlanId + "?YetenekAlaniId=" + id)
      .then((response) =&gt; {
        setYetenekGrubuList(response.data);
      })
      .catch((error) =&gt; {
        console.log(error.response.data);
      });
  };

  useEffect(() =&gt; {
    yetenekGrubuSorgula(hipEkleYetenekAlaniId);
  }, [hipEkleYetenekAlaniId]);

  const yetenekAdiSorgula = async (id: number) =&gt; {
    await HttpService.GetAxiosClient()
      .post(yetenekAdlariByGrupId + "?YetenekGrubuId=" + id)
      .then((response) =&gt; {
        setYetenekAdiList(response.data);
      })
      .catch((error) =&gt; {
        console.log(error.response.data);
      });
  };

  useEffect(() =&gt; {
    yetenekAdiSorgula(hipEkleYetenekGrubuId);
  }, [hipEkleYetenekGrubuId]);

  useEffect(() =&gt; {
    if (hipEkleMuhtelif === "1") {
      setHipEkleTopHarekatIhtiyaci("Muhtelif");
      setHipEklePlanDonemiIhtiyacMiktar("Muhtelif");
      setHipEkleMevcutMiktar("Muhtelif");
    } else {
      setHipEkleTopHarekatIhtiyaci("0");
      setHipEklePlanDonemiIhtiyacMiktar("0");
      setHipEkleMevcutMiktar("0");
    }
  }, [hipEkleMuhtelif]);

  const gorevFonksiyonGrupSorgula = async (id: number) => {
    await HttpService.GetAxiosClient()
      .post(gorevFonksiyonGrubuByFonksiyonId + "?GorevFonksiyonId=" + id)
      .then((response) =&gt; {
        setGorevFonksiyonGrupList(response.data);
      })
      .catch((error) =&gt; {
        console.log(error.response.data);
      });
  };

  useEffect(() =&gt; {
    gorevFonksiyonGrupSorgula(hipEkleGorevFonksiyonId);
  }, [hipEkleGorevFonksiyonId]);

  const sorgula = async () =&gt; {
    const data = {
      aramaKriteri: aramaKriteri,
    };
    await HttpService.GetAxiosClient()
      .post(hipDetayListesi, data)
      .then((response) =&gt; {
        setHipKayitSureciDetayList(response.data);
        setBtnIsLoading(false);
      })
      .catch((error) =&gt; {
        console.log(error.response.data);
      });
  };

  const handleSorgula = () =&gt; {
    setBtnIsLoading(true);
    sorgula();
  };

  const handleChangeResim = (newFile: File | null) =&gt; {
    setFileResim(newFile);
  };

  const handleChangePtd = (newFile: File | null) =&gt; {
    setFilePtd(newFile);
  };

  const handleChangeHiad = (newFile: File | null) =&gt; {
    setFileHiad(newFile);
  };

  const handleChangeIssf = (newFile: File | null) =&gt; {
    setFileIssf(newFile);
  };

  const handleAddSubmit = () =&gt; {
    setBtnIsLoading(true);
    const data = {
      HipKayitId: 0,
      IhtiyacMakamId: mevcutKisi?.orgId,
      DonemId: hipEkleDonemId,
      GorevFonksiyonId: hipEkleGorevFonksiyonId,
      GorevFonksiyonGrupId: hipEkleGorevFonksiyonGrupId,
      PortfoyGrubu: null,
      ProjeNumarasi: hipEkleProjeNumarasi,
      Resim: fileResim,
      TeknikOzellikler: hipEkleTeknikOzellikler,
      ProjeDurumu: "",
      YetenekAlaniId: null, //hipEkleYetenekAdiId,
      YetenekGrubuId: null, //hipEkleYetenekGrubuId,
      YetenekAdiId: null, //hipEkleYetenekAdiId,
      IhtiyacMakamiOncelik: hipEkleIhtiyacMakamiOncelik,
      GnkurBskOncelik: null,
      Muhtelif: hipEkleMuhtelif,
      TopHarekatIhtiyaci:
        hipEkleTopHarekatIhtiyaci === "Muhtelif"
          ? "0"
          : hipEkleTopHarekatIhtiyaci,
      MevcutMiktar:
        hipEkleMevcutMiktar === "Muhtelif" ? "0" : hipEkleMevcutMiktar,
      PlanDonemiIhtiyacMiktar:
        hipEklePlanDonemiIhtiyacMiktar === "Muhtelif"
          ? "0"
          : hipEklePlanDonemiIhtiyacMiktar,
      ProjeTanimlamaDokumani: filePtd,
      HareketIhtiyacAnalizDokumani: fileHiad,
      IkinciSorgulamaSonucFormu: fileIssf,
    };
    const addHip = async () => {
      await HttpService.GetAxiosClient()
        .post(hipDetayAdd, data, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then(() => {
          setSnackbarOpen(true);
          setSnackbarSeverity("success");
          setSnackbarMessage("Yeni HİP eklendi.");
        })
        .catch((e) => {
          console.log(e);
          setSnackbarOpen(true);
          setSnackbarSeverity("error");
          setSnackbarMessage("Hata ile karşılaşıldı.");
        })
        .finally(() => {
          sorgula();
        });
    };
    addHip();
    clearIhtiyacEkleModal();
  };

  const handleUpdateSubmit = () => {
    const data = {
      // donemId: hipEkleDonemId,
      // gorevFonksiyonId: hipEkleGorevFonksiyonId,
      // gorevFonksiyonGrupId: hipEkleGorevFonksiyonGrupId,
      // projeNumarasi: hipEkleProjeNumarasi,
      // //resim: File;
      // teknikOzellikler: hipEkleTeknikOzellikler,
      // //projeDurumu: string;
      // ihtiyacMakamiOncelik: hipEkleIhtiyacMakamiOncelik,
      // muhtelif: hipEkleMuhtelif,
      // topHarekatIhtiyaci: hipEkleTopHarekatIhtiyaci,
      // mevcutMiktar: hipEkleMevcutMiktar,
      // planDonemiIhtiyacMiktar: hipEklePlanDonemiIhtiyacMiktar,
      // //projeTanimlamaDokumani: File;
      // //hareketIhtiyacAnalizDokumani: File;
      // //ikinciSorgulamaSonucFormu: File;
    };
    const updateHip = async () => {
      await HttpService.GetAxiosClient()
        .post(hipDetayUpdate, data)
        .then(() => {
          setSnackbarOpen(true);
          setSnackbarSeverity("success");
          setSnackbarMessage("Kayıt güncellendi.");
        })
        .catch((e) => {
          console.log(e);
          setSnackbarOpen(true);
          setSnackbarSeverity("error");
          setSnackbarMessage("Hata ile karşılaşıldı.");
        })
        .finally(() => {
          sorgula();
        });
    };
    updateHip();
    clearIhtiyacGuncelleModal();
  };

  const handleGuncelle = (idToUpdate: string) => {
    setHipGuncelleHipDetayId(Number(idToUpdate));
    let hipDetay = hipKayitSureciDetayList.filter(
      (t) => t.id === Number(idToUpdate)
    )[0];
    if (mevcutKisi?.mevcutRol === "rolInceleme1") {
      if (hipDetay.projeDurumu === "rolInceleme1") {
        setIhtiyacGuncelleDialogOpen(true);
      } else {
        setSnackbarOpen(true);
        setSnackbarSeverity("error");
        setSnackbarMessage(
          "Düzenleme yetkiniz yoktur. Lütfen onayınızı kaldırın."
        );
      }
    } else if (mevcutKisi?.mevcutRol === "rolInceleme4") {
      setIhtiyacGuncelleForInceleme4DialogOpen(true);
    } else if (mevcutKisi?.mevcutRol === "rolInceleme6") {
      setIhtiyacGuncelleForInceleme6DialogOpen(true);
    } else {
      setSnackbarOpen(true);
      setSnackbarSeverity("error");
      setSnackbarMessage(
        "Düzenleme yetkiniz yoktur. Lütfen onay işleminizi gerçekleştirin."
      );
    }
  };

  const handleOnayaGonder = (idToUpdate: string) => {
    setBtnIsLoading(true);
    const data = {
      Id: idToUpdate,
    };
    const updateForOnayaGonder = async () => {
      await HttpService.GetAxiosClient()
        .post(hipOnayaGonder, data)
        .then(() => {
          setSnackbarOpen(true);
          setSnackbarSeverity("success");
          setSnackbarMessage("Mevcut kayıt güncellendi.");
        })
        .catch((e) => {
          console.log(e);
          setSnackbarOpen(true);
          setSnackbarSeverity("error");
          setSnackbarMessage("Hata ile karşılaşıldı.");
        })
        .finally(() => {
          sorgula();
        });
    };
    updateForOnayaGonder();
  };

  const handleOnayla = (idToConfirm: string) => {
    debugger;
    let devam = true;
    let hipDetay = hipKayitSureciDetayList.filter(
      (t) => t.id === Number(idToConfirm)
    )[0];
    if (
      mevcutKisi?.mevcutRol === "rolInceleme4" ||
      mevcutKisi?.mevcutRol === "rolInceleme6"
    ) {
      if (
        mevcutKisi?.mevcutRol === "rolInceleme4" &&
        !(
          hipDetay.gnkurBskOncelik != null ||
          hipDetay.yetenekAlaniId != null ||
          hipDetay.yetenekGrubuId != null ||
          hipDetay.yetenekAdiId != null
        )
      ) {
        devam = false;
      }
      if (
        mevcutKisi?.mevcutRol === "rolInceleme6" &&
        hipDetay.portfoyGrubu == null
      ) {
        devam = false;
      }
    }
    if (devam) {
      setBtnIsLoading(true);
      const data = {
        Id: idToConfirm,
      };
      const updateForOnay = async () => {
        await HttpService.GetAxiosClient()
          .post(hipOnayla, data)
          .then(() => {
            setSnackbarOpen(true);
            setSnackbarSeverity("success");
            setSnackbarMessage("Mevcut kayıt güncellendi.");
          })
          .catch((e) => {
            console.log(e);
            setSnackbarOpen(true);
            setSnackbarSeverity("error");
            setSnackbarMessage("Hata ile karşılaşıldı.");
          })
          .finally(() => {
            sorgula();
          });
      };
      updateForOnay();
    } else {
      setSnackbarOpen(true);
      setSnackbarSeverity("error");
      setSnackbarMessage(
        "Lütfen onaylamadan önce düzenleme işleminizi gerçekleştirin."
      );
    }
  };

  const handleGeriGonder = (idToConfirm: string, rejectMessage: string) => {
    setBtnIsLoading(true);
    const data = {
      Id: idToConfirm,
      RedMesaji: rejectMessage,
    };
    const updateForOnayGeriGonder = async () => {
      await HttpService.GetAxiosClient()
        .post(hipGeriGonder, data)
        .then(() => {
          setSnackbarOpen(true);
          setSnackbarSeverity("success");
          setSnackbarMessage("Mevcut kayıt güncellendi.");
        })
        .catch((e) => {
          console.log(e);
          setSnackbarOpen(true);
          setSnackbarSeverity("error");
          setSnackbarMessage("Hata ile karşılaşıldı.");
        })
        .finally(() => {
          sorgula();
        });
    };
    updateForOnayGeriGonder();
  };

  const handleUpdateSubmitForInceleme4 = () => {
    const data = {
      Id: hipGuncelleHipDetayId,
      YetenekAlaniId: hipEkleYetenekAlaniId,
      YetenekGrubuId: hipEkleYetenekGrubuId,
      YetenekAdiId: hipEkleYetenekAdiId,
      GnkurBskOncelik: hipEkleGnkurBskOncelik,
    };
    const updateHipForInceleme4 = async () => {
      await HttpService.GetAxiosClient()
        .post(hipDetayUpdateForInceleme4, data)
        .then(() => {
          setSnackbarOpen(true);
          setSnackbarSeverity("success");
          setSnackbarMessage("Kayıt güncellendi.");
        })
        .catch((e) => {
          console.log(e);
          setSnackbarOpen(true);
          setSnackbarSeverity("error");
          setSnackbarMessage("Hata ile karşılaşıldı.");
        })
        .finally(() => {
          sorgula();
        });
    };
    updateHipForInceleme4();
    clearIhtiyacGuncelleModal();
  };

  const handleUpdateSubmitForInceleme6 = () => {
    const data = {
      id: hipGuncelleHipDetayId,
      portfoyGrubu: hipEklePortfoyGrubu,
    };
    const updateHipForInceleme6 = async () => {
      await HttpService.GetAxiosClient()
        .post(hipDetayUpdateForInceleme6, data)
        .then(() => {
          setSnackbarOpen(true);
          setSnackbarSeverity("success");
          setSnackbarMessage("Kayıt güncellendi.");
        })
        .catch((e) => {
          console.log(e);
          setSnackbarOpen(true);
          setSnackbarSeverity("error");
          setSnackbarMessage("Hata ile karşılaşıldı.");
        })
        .finally(() => {
          sorgula();
        });
    };
    updateHipForInceleme6();
    clearIhtiyacGuncelleModal();
  };

  const handleDelete = (idToDelete: string) => {
    const deleteHip = async () => {
      await HttpService.GetAxiosClient()
        .get(hipDetayDelete + "?HipKayitSureciDetayId=" + idToDelete)
        .then(() =&gt; {
          deleteSuccessFnc();
        })
        .catch((e) =&gt; {
          console.log(e);
          setSnackbarOpen(true);
          setSnackbarSeverity("error");
          setSnackbarMessage("Hata ile karşılaşıldı.");
        });
    };
    deleteHip();
  };

  const btnTemizleClick = () => {
    setAramaKriteri("");
  };

  const clearIhtiyacEkleModal = () => {
    setIhtiyacEkleDialogOpen(false);
    setHipEkleDonemId(0);
    setHipEkleGorevFonksiyonId(0);
    setHipEkleGorevFonksiyonGrupId(0);
    setHipEklePortfoyGrubu(0);
    setHipEkleProjeNumarasi("");
    setFileResim(null);
    setHipEkleTeknikOzellikler("");
    setHipEkleIhtiyacMakamiOncelik(0);
    setHipEkleGnkurBskOncelik(0);
    setHipEkleMuhtelif("0");
    setHipEkleTopHarekatIhtiyaci(0);
    setHipEkleMevcutMiktar(0);
    setHipEklePlanDonemiIhtiyacMiktar(0);
    setFilePtd(null);
    setFileHiad(null);
    setFileIssf(null);
  };

  const clearIhtiyacGuncelleModal = () => {
    if (mevcutKisi?.mevcutRol === "rolInceleme1") {
      setIhtiyacGuncelleDialogOpen(false);
    } else if (mevcutKisi?.mevcutRol === "rolInceleme4") {
      setIhtiyacGuncelleForInceleme4DialogOpen(false);
    } else if (mevcutKisi?.mevcutRol === "rolInceleme6") {
      setIhtiyacGuncelleForInceleme6DialogOpen(false);
    }
  };

  const deleteSuccessFnc = () => {
    sorgula();
    setSnackbarOpen(true);
    setSnackbarSeverity("success");
    setSnackbarMessage("HİP bilgisi silindi.");
  };

  const mesajKutusu = () => {
    return (
      <MessageBox
        isOpen={snackbarOpen}
        message={snackbarMessage}
        severity={snackbarSeverity}
          => setSnackbarOpen(false)}
      />
    );
  };

  const ihtiyacEkleModal = () => {
    return (
      <>
        <Dialog
          open={ihtiyacEkleDialogOpen}
            => setIhtiyacEkleDialogOpen(false)}
          fullWidth
          maxWidth="md"
        >
          <DialogTitle>Yeni Harekat İhtiyaç Planı Ekle</DialogTitle>
          <DialogContent>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel
                sx={{
                  width: "325px",
                  position: "relative",
                }}
              &gt;
                <p>Dönem :</p>
              &lt;/InputLabel&gt;
              <ComboSingleSelect
                itemList={donemList.map<ComboItem>((item) => ({
                  value: String(item.id),
                  name: item.donemAdi,
                }))}
                handleOnChange={(newValue) =>
                  setHipEkleDonemId(Number(newValue))
                }
                itemLabel="Dönem"
                width="350px"
              />
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel
                sx={{
                  width: "325px",
                  position: "relative",
                }}
              &gt;
                <p>Görev Fonksiyonu :</p>
              &lt;/InputLabel&gt;
              <ComboSingleSelect
                itemList={gorevFonksiyonList.map<ComboItem>((item) => ({
                  value: String(item.id),
                  name: item.gorevFonksiyonAdi,
                }))}
                handleOnChange={(newValue) =>
                  setHipEkleGorevFonksiyonId(Number(newValue))
                }
                itemLabel="Görev Fonksiyonu"
                width="350px"
              />
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel
                sx={{
                  width: "325px",
                  position: "relative",
                }}
              &gt;
                <p>Görev Fonksiyon Grubu :</p>
              &lt;/InputLabel&gt;
              <ComboSingleSelect
                itemList={gorevFonksiyonGrupList.map<ComboItem>((item) => ({
                  value: String(item.id),
                  name: item.gorevFonksiyonGrupAdi,
                }))}
                handleOnChange={(newValue) =>
                  setHipEkleGorevFonksiyonGrupId(Number(newValue))
                }
                itemLabel="Görev Fonksiyon Grubu"
                width="350px"
              />
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel sx={{ width: "325px", position: "relative" }}&gt;
                <p>Proje Numarası :</p>
              &lt;/InputLabel&gt;
              <TextField
                placeholder="Proje numarası"
                required
                type="text"
                size="small"
                value={hipEkleProjeNumarasi}
                  => setHipEkleProjeNumarasi(e.target.value)}
                sx={{ width: "350px" }}
              ></TextField>
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel sx={{ width: "325px", position: "relative" }}&gt;
                <p>Resim :</p>
              &lt;/InputLabel&gt;
              <MuiFileInput
                value={fileResim}
                 
                placeholder="Dosya seçmek için tıklayınız"
                sx={{ width: "350px" }}
                 clearIc
                  title: "Sil",
                  children: <CloseIcon f />,
                }}
                InputProps={{
                  inputProps: {
                    accept: ".png, .jpeg",
                  },
                  startAdornment: <AttachFileIcon />,
                  size: "small",
                }}
              />
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel sx={{ width: "325px", position: "relative" }}&gt;
                <p>Teknik Özellikler :</p>
              &lt;/InputLabel&gt;
              <TextField
                placeholder="Teknik Özellikler"
                required
                type="text"
                size="small"
                multiline
                rows={4}
                value={hipEkleTeknikOzellikler}
                  => setHipEkleTeknikOzellikler(e.target.value)}
                sx={{ width: "350px" }}
              ></TextField>
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel sx={{ width: "325px", position: "relative" }}&gt;
                <p>İhtiyaç Makamı Öncelik :</p>
              &lt;/InputLabel&gt;
              <TextField
                placeholder="İhtiyaç Makamı Öncelik"
                required
                type="number"
                size="small"
                value={hipEkleIhtiyacMakamiOncelik}
                  =>
                  setHipEkleIhtiyacMakamiOncelik(Number(e.target.value))
                }
              ></TextField>
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel
                sx={{
                  width: "325px",
                  position: "relative",
                }}
              &gt;
                <p>Muhtelif :</p>
              &lt;/InputLabel&gt;
              <ComboSingleSelect
                itemList={evetHayirList.list.map<ComboItem>((item) => ({
                  value: item.value,
                  name: item.name,
                }))}
                handleOnChange={(newValue) => setHipEkleMuhtelif(newValue)}
                itemLabel="Muhtelif"
                width="350px"
                selectedValue={hipEkleMuhtelif}
              />
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel sx={{ width: "325px", position: "relative" }}&gt;
                <p>Toplam Harekat İhtiyacı :</p>
              &lt;/InputLabel&gt;
              <TextField
                placeholder="Toplam Harekat İhtiyacı"
                required
                type="text"
                size="small"
                value={hipEkleTopHarekatIhtiyaci}
                  =>
                  setHipEkleTopHarekatIhtiyaci(Number(e.target.value))
                }
              ></TextField>
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel sx={{ width: "325px", position: "relative" }}&gt;
                <p>Mevcut Miktar :</p>
              &lt;/InputLabel&gt;
              <TextField
                placeholder="Mevcut Miktar"
                required
                type="text"
                size="small"
                value={hipEkleMevcutMiktar}
                  => setHipEkleMevcutMiktar(Number(e.target.value))}
              ></TextField>
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel sx={{ width: "325px", position: "relative" }}&gt;
                <p>Plan Dönemi İhtiyaç Miktarı :</p>
              &lt;/InputLabel&gt;
              <TextField
                placeholder="Plan Dönemi İhtiyaç Miktarı"
                required
                type="text"
                size="small"
                value={hipEklePlanDonemiIhtiyacMiktar}
                  =>
                  setHipEklePlanDonemiIhtiyacMiktar(Number(e.target.value))
                }
              ></TextField>
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel sx={{ width: "325px", position: "relative" }}&gt;
                <p>Proje Tanımlama Dokümanı (PTD) :</p>
              &lt;/InputLabel&gt;
              <MuiFileInput
                value={filePtd}
                 
                placeholder="Dosya seçmek için tıklayınız"
                sx={{ width: "350px" }}
                 clearIc
                  title: "Sil",
                  children: <CloseIcon f />,
                }}
                InputProps={{
                  inputProps: {
                    accept: ".pdf",
                  },
                  startAdornment: <AttachFileIcon />,
                  size: "small",
                }}
              />
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel sx={{ width: "325px", position: "relative" }}&gt;
                <p>Harekat İhtiyaç Analiz Dokümanı (HİAD) :</p>
              &lt;/InputLabel&gt;
              <MuiFileInput
                value={fileHiad}
                 
                placeholder="Dosya seçmek için tıklayınız"
                sx={{ width: "350px" }}
                 clearIc
                  title: "Sil",
                  children: <CloseIcon f />,
                }}
                InputProps={{
                  inputProps: {
                    accept: ".pdf",
                  },
                  startAdornment: <AttachFileIcon />,
                  size: "small",
                }}
              />
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel sx={{ width: "325px", position: "relative" }}&gt;
                <p>2'nci Sorgulama Sonuç Formu :</p>
              &lt;/InputLabel&gt;
              <MuiFileInput
                value={fileIssf}
                 
                placeholder="Dosya seçmek için tıklayınız"
                sx={{ width: "350px" }}
                 clearIc
                  title: "Sil",
                  children: <CloseIcon f />,
                }}
                InputProps={{
                  inputProps: {
                    accept: ".pdf",
                  },
                  startAdornment: <AttachFileIcon />,
                  size: "small",
                }}
              />
            </Stack>
          </DialogContent>
          <DialogActions>
            <Button
              color="success"
              variant="contained"
               
            >
              Ekle
            </Button>
            <Button
              variant="outlined"
                => {
                setIhtiyacEkleDialogOpen(false);
                clearIhtiyacEkleModal();
              }}
            >
              İptal
            </Button>
          </DialogActions>
        </Dialog>
      </>
    );
  };

  const ihtiyacGuncelleModal = () => {
    return (
      <>
        <Dialog
          open={ihtiyacGuncelleDialogOpen}
            => setIhtiyacGuncelleDialogOpen(false)}
          fullWidth
          maxWidth="md"
        >
          <DialogTitle>Harekat İhtiyaç Planı Güncelle</DialogTitle>
          <DialogContent>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel
                sx={{
                  width: "325px",
                  position: "relative",
                }}
              &gt;
                <p>Dönem :</p>
              &lt;/InputLabel&gt;
              <ComboSingleSelect
                itemList={donemList.map<ComboItem>((item) => ({
                  value: String(item.id),
                  name: item.donemAdi,
                }))}
                handleOnChange={(newValue) =>
                  setHipGuncelleDonemId(Number(newValue))
                }
                itemLabel="Dönem"
                selectedValue={hipGuncelleDonemId.toString()}
                width="350px"
              />
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel
                sx={{
                  width: "325px",
                  position: "relative",
                }}
              &gt;
                <p>Görev Fonksiyonu :</p>
              &lt;/InputLabel&gt;
              <ComboSingleSelect
                itemList={gorevFonksiyonList.map<ComboItem>((item) => ({
                  value: String(item.id),
                  name: item.gorevFonksiyonAdi,
                }))}
                handleOnChange={(newValue) =>
                  setHipGuncelleGorevFonksiyonId(Number(newValue))
                }
                itemLabel="Görev Fonksiyonu"
                selectedValue={hipGuncelleGorevFonksiyonId.toString()}
                width="350px"
              />
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel
                sx={{
                  width: "325px",
                  position: "relative",
                }}
              &gt;
                <p>Görev Fonksiyon Grubu :</p>
              &lt;/InputLabel&gt;
              <ComboSingleSelect
                itemList={gorevFonksiyonGrupList.map<ComboItem>((item) => ({
                  value: String(item.id),
                  name: item.gorevFonksiyonGrupAdi,
                }))}
                handleOnChange={(newValue) =>
                  setHipEkleGorevFonksiyonGrupId(Number(newValue))
                }
                itemLabel="Görev Fonksiyon Grubu"
                width="350px"
              />
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel sx={{ width: "325px", position: "relative" }}&gt;
                <p>Proje Numarası :</p>
              &lt;/InputLabel&gt;
              <TextField
                placeholder="Proje numarası"
                required
                type="text"
                size="small"
                value={hipEkleProjeNumarasi}
                  => setHipEkleProjeNumarasi(e.target.value)}
                sx={{ width: "350px" }}
              ></TextField>
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel sx={{ width: "325px", position: "relative" }}&gt;
                <p>Resim :</p>
              &lt;/InputLabel&gt;
              <MuiFileInput
                value={fileResim}
                 
                placeholder="Dosya seçmek için tıklayınız"
                sx={{ width: "350px" }}
                 clearIc
                  title: "Sil",
                  children: <CloseIcon f />,
                }}
                InputProps={{
                  inputProps: {
                    accept: ".png, .jpeg",
                  },
                  startAdornment: <AttachFileIcon />,
                  size: "small",
                }}
              />
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel sx={{ width: "325px", position: "relative" }}&gt;
                <p>Teknik Özellikler :</p>
              &lt;/InputLabel&gt;
              <TextField
                placeholder="Teknik Özellikler"
                required
                type="text"
                size="small"
                multiline
                rows={4}
                value={hipEkleTeknikOzellikler}
                  => setHipEkleTeknikOzellikler(e.target.value)}
                sx={{ width: "350px" }}
              ></TextField>
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel sx={{ width: "325px", position: "relative" }}&gt;
                <p>İhtiyaç Makamı Öncelik :</p>
              &lt;/InputLabel&gt;
              <TextField
                placeholder="İhtiyaç Makamı Öncelik"
                required
                type="number"
                size="small"
                value={hipEkleIhtiyacMakamiOncelik}
                  =>
                  setHipEkleIhtiyacMakamiOncelik(Number(e.target.value))
                }
              ></TextField>
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel
                sx={{
                  width: "325px",
                  position: "relative",
                }}
              &gt;
                <p>Muhtelif :</p>
              &lt;/InputLabel&gt;
              <ComboSingleSelect
                itemList={evetHayirList.list.map<ComboItem>((item) => ({
                  value: item.value,
                  name: item.name,
                }))}
                handleOnChange={(newValue) => setHipEkleMuhtelif(newValue)}
                itemLabel="Muhtelif"
                width="350px"
                selectedValue={hipEkleMuhtelif}
              />
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel sx={{ width: "325px", position: "relative" }}&gt;
                <p>Toplam Harekat İhtiyacı :</p>
              &lt;/InputLabel&gt;
              <TextField
                placeholder="Toplam Harekat İhtiyacı"
                required
                type="text"
                size="small"
                value={hipEkleTopHarekatIhtiyaci}
                  =>
                  setHipEkleTopHarekatIhtiyaci(Number(e.target.value))
                }
              ></TextField>
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel sx={{ width: "325px", position: "relative" }}&gt;
                <p>Mevcut Miktar :</p>
              &lt;/InputLabel&gt;
              <TextField
                placeholder="Mevcut Miktar"
                required
                type="text"
                size="small"
                value={hipEkleMevcutMiktar}
                  => setHipEkleMevcutMiktar(Number(e.target.value))}
              ></TextField>
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel sx={{ width: "325px", position: "relative" }}&gt;
                <p>Plan Dönemi İhtiyaç Miktarı :</p>
              &lt;/InputLabel&gt;
              <TextField
                placeholder="Plan Dönemi İhtiyaç Miktarı"
                required
                type="text"
                size="small"
                value={hipEklePlanDonemiIhtiyacMiktar}
                  =>
                  setHipEklePlanDonemiIhtiyacMiktar(Number(e.target.value))
                }
              ></TextField>
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel sx={{ width: "325px", position: "relative" }}&gt;
                <p>Proje Tanımlama Dokümanı (PTD) :</p>
              &lt;/InputLabel&gt;
              <MuiFileInput
                value={filePtd}
                 
                placeholder="Dosya seçmek için tıklayınız"
                sx={{ width: "350px" }}
                 clearIc
                  title: "Sil",
                  children: <CloseIcon f />,
                }}
                InputProps={{
                  inputProps: {
                    accept: ".pdf",
                  },
                  startAdornment: <AttachFileIcon />,
                  size: "small",
                }}
              />
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel sx={{ width: "325px", position: "relative" }}&gt;
                <p>Harekat İhtiyaç Analiz Dokümanı (HİAD) :</p>
              &lt;/InputLabel&gt;
              <MuiFileInput
                value={fileHiad}
                 
                placeholder="Dosya seçmek için tıklayınız"
                sx={{ width: "350px" }}
                 clearIc
                  title: "Sil",
                  children: <CloseIcon f />,
                }}
                InputProps={{
                  inputProps: {
                    accept: ".pdf",
                  },
                  startAdornment: <AttachFileIcon />,
                  size: "small",
                }}
              />
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel sx={{ width: "325px", position: "relative" }}&gt;
                <p>2'nci Sorgulama Sonuç Formu :</p>
              &lt;/InputLabel&gt;
              <MuiFileInput
                value={fileIssf}
                 
                placeholder="Dosya seçmek için tıklayınız"
                sx={{ width: "350px" }}
                 clearIc
                  title: "Sil",
                  children: <CloseIcon f />,
                }}
                InputProps={{
                  inputProps: {
                    accept: ".pdf",
                  },
                  startAdornment: <AttachFileIcon />,
                  size: "small",
                }}
              />
            </Stack>
          </DialogContent>
          <DialogActions>
            <Button
              color="success"
              variant="contained"
               
            >
              Kaydet
            </Button>
            <Button
              variant="outlined"
                => {
                setIhtiyacEkleDialogOpen(false);
                clearIhtiyacEkleModal();
              }}
            >
              İptal
            </Button>
          </DialogActions>
        </Dialog>
      </>
    );
  };
  const intiyacGuncelleForInceleme4Modal = () => {
    return (
      <>
        <Dialog
          open={ihtiyacGuncelleForInceleme4DialogOpen}
            => setIhtiyacGuncelleForInceleme4DialogOpen(false)}
          fullWidth
          maxWidth="md"
        >
          <DialogTitle>Harekat İhtiyaç Planı Bilgileri</DialogTitle>
          <DialogContent>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel
                sx={{
                  width: "250px",
                  position: "relative",
                }}
              &gt;
                <p>Yetenek Alanı :</p>
              &lt;/InputLabel&gt;
              <ComboSingleSelect
                itemList={yetenekAlaniList.map<ComboItem>((item) => ({
                  value: String(item.id),
                  name: item.yetenekAlanAdi,
                }))}
                handleOnChange={(newValue) =>
                  setHipEkleYetenekAlaniId(Number(newValue))
                }
                itemLabel="Yetenek Alanı"
                width="223px"
              />
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel
                sx={{
                  width: "250px",
                  position: "relative",
                }}
              &gt;
                <p>Yetenek Grubu :</p>
              &lt;/InputLabel&gt;
              <ComboSingleSelect
                itemList={yetenekGrubuList.map<ComboItem>((item) => ({
                  value: String(item.id),
                  name: item.yetenekGrubAdi,
                }))}
                handleOnChange={(newValue) =>
                  setHipEkleYetenekGrubuId(Number(newValue))
                }
                itemLabel="Yetenek Grubu"
                width="223px"
              />
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel
                sx={{
                  width: "250px",
                  position: "relative",
                }}
              &gt;
                <p>Yetenek Adı :</p>
              &lt;/InputLabel&gt;
              <ComboSingleSelect
                itemList={yetenekAdiList.map<ComboItem>((item) => ({
                  value: String(item.id),
                  name: item.yetenekTanim,
                }))}
                handleOnChange={(newValue) =>
                  setHipEkleYetenekAdiId(Number(newValue))
                }
                itemLabel="Yetenek Adı"
                width="223px"
              />
            </Stack>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel sx={{ width: "250px", position: "relative" }}&gt;
                <p>Genel Kurmay Başkanlığı Öncelik :</p>
              &lt;/InputLabel&gt;
              <TextField
                placeholder="Genel Kurmay Başkanlığı Öncelik"
                required
                type="number"
                size="small"
                value={hipEkleGnkurBskOncelik}
                  =>
                  setHipEkleGnkurBskOncelik(Number(e.target.value))
                }
              ></TextField>
            </Stack>
          </DialogContent>
          <DialogActions>
            <Button
              color="success"
              variant="contained"
               
            >
              Kaydet
            </Button>
            <Button
              variant="outlined"
                => {
                setIhtiyacGuncelleForInceleme4DialogOpen(false);
                clearIhtiyacEkleModal();
              }}
            >
              İptal
            </Button>
          </DialogActions>
        </Dialog>
      </>
    );
  };

  const intiyacGuncelleForInceleme6Modal = () => {
    return (
      <>
        <Dialog
          open={ihtiyacGuncelleForInceleme6DialogOpen}
            => setIhtiyacGuncelleForInceleme6DialogOpen(false)}
          fullWidth
          maxWidth="md"
        >
          <DialogTitle>Harekat İhtiyaç Planı Bilgileri</DialogTitle>
          <DialogContent>
            <Stack display="flex" flexDirecti alignItems="center">
              &lt;InputLabel sx={{ width: "250px", position: "relative" }}&gt;
                <p>Portföy Grubu :</p>
              &lt;/InputLabel&gt;
              <TextField
                placeholder="Portföy Grubu"
                required
                type="text"
                size="small"
                value={hipEklePortfoyGrubu}
                  => setHipEklePortfoyGrubu(Number(e.target.value))}
              ></TextField>
            </Stack>
          </DialogContent>
          <DialogActions>
            <Button
              color="success"
              variant="contained"
               
            >
              Kaydet
            </Button>
            <Button
              variant="outlined"
                => {
                setIhtiyacGuncelleForInceleme6DialogOpen(false);
                clearIhtiyacEkleModal();
              }}
            >
              İptal
            </Button>
          </DialogActions>
        </Dialog>
      </>
    );
  };

  return (
    <Stack sx={{ marginTop: "10px" }}>
      <Paper
         elevati
        sx={{
          paddingBottom: "20px",
        }}
      >
        <Stack marginLeft="20px" marginTop="20px">
          <Typography variant="h6">
            Harekat İhtiyaçları Planı İşlemleri
          </Typography>
        </Stack>
        <Stack marginLeft="30px">
          <Stack display="flex" flexDirecti alignItems="center">
            &lt;InputLabel sx={{ width: "150px", position: "relative" }}&gt;
              <p>Arama Kriteri:</p>
            &lt;/InputLabel&gt;
            <TextField
              sx={{ width: "350px" }}
              size="small"
              variant="outlined"
              placeholder="Aramak istediğiniz metni giriniz"
              value={aramaKriteri}
                => setAramaKriteri(e.target.value)}
            />
          </Stack>
        </Stack>
        <Stack directi sx={{ marginTop: "10px" }}>
          <Stack directi marginLeft="180px" spacing={2}>
            <LoadingButton
              loading={btnIsLoading}
              variant="contained"
               
              size="small"
            >
              Sorgula
            </LoadingButton>
            <Button  variant="outlined" size="small">
              Temizle
            </Button>
          </Stack>
          <Stack width="170px" display="flex" directi>
            <Button
              variant="contained"
              color="secondary"
              size="small"
                => setIhtiyacEkleDialogOpen(true)}
              startIcon={<AddCardIcon />}
              sx={{ visibility: btnIhtiyacGorunur }}
            >
              İhtiyaç Girişi
            </Button>
          </Stack>
        </Stack>
      </Paper>
      <Paper
         elevati
        sx={{
          marginTop: "20px",
          paddingBottom: "20px",
        }}
      >
        <Stack>
          <IhtiyacGirisSorgulamaSonuc
            columnsHipKayitSureciDetay={columnsHipKayitSureciDetay}
            hipKayitSureciDetayList={hipKayitSureciDetayList}
          />
        </Stack>
      </Paper>
      {mesajKutusu()}
      {ihtiyacEkleModal()}
      {ihtiyacGuncelleModal()}
      {intiyacGuncelleForInceleme4Modal()}
      {intiyacGuncelleForInceleme6Modal()}
    </Stack>
  );
}

const IhtiyacGirisSorgulamaSonuc: React.FC<IntiyacGirisSorgulaProps> = ({
  hipKayitSureciDetayList,
  columnsHipKayitSureciDetay,
}) => {
  return (
    <Stack>
      <DataTable
        title="Harekat İhtiyaçları Planı Listesi"
        highlightOnHover
        fixedHeader
        fixedHeaderScrollHeight="500px"
        columns={columnsHipKayitSureciDetay}
        data={hipKayitSureciDetayList}
        defaultSortFieldId="hiyerarsiAdi"
         sortIc />}
        pagination
        striped
        responsive
        noDataComponent="Gösterilecek kayıt bulunamadı"
        paginationComponentOptions={paginationComponentOptions}
        customStyles={customStyles}
      />
    </Stack>
  );
};