updated pages create update list delete

src/(apicalls)/basics.ts

@@ -4,44 +4,44 @@ export const tokenSecret =
 export const cookieObject: any = {
   httpOnly: true,
   path: "/",
-  // secure: true,
   sameSite: "strict",
   maxAge: 3600,
 };
 
 interface FilterListInterface {
-  page?: number;
+  page?: number | null | undefined;
-  size?: number;
+  size?: number | null | undefined;
-  order_field?: string;
+  orderField?: string | null | undefined;
-  order_type?: string;
+  orderType?: string | null | undefined;
-  include_joins?: any[];
+  includeJoins?: any[] | null | undefined;
-  query?: any;
+  query?: any | null | undefined;
 }
 
 class FilterList {
   page?: number = 1;
   size?: number = 5;
-  order_field?: string = "id";
+  orderField?: string = "id";
-  order_type?: string = "asc";
+  orderType?: string = "asc";
-  include_joins?: any[] = [];
+  includeJoins?: any[] = [];
-
   query?: any;
   constructor({
-    page,
+    page: page = 1,
-    size,
+    size: size = 5,
-    order_field,
+    orderField: orderField = "asc",
-    order_type,
+    orderType: orderType = "id",
-    include_joins,
+    includeJoins: includeJoins = [],
-    query,
+    query: query = {},
   }: FilterListInterface) {
     this.page = page || 1;
     this.size = size || 5;
-    this.order_field = order_field || "id";
+    this.orderField = orderField || "id";
-    this.order_type = order_type || "asc";
+    this.orderType = orderType || "asc";
-    this.include_joins = include_joins || [];
+    this.includeJoins = includeJoins || [];
     this.query = query || {};
   }
 }
 
-export { FilterList };
+const defaultFilterList = new FilterList({});
+
+export { FilterList, defaultFilterList };
 export type { FilterListInterface };

src/(apicalls)/building/build.tsx

@@ -1,14 +1,18 @@
 "use server";
-import { fetchData, fetchDataWithToken } from "../api-fetcher";
+import { fetchDataWithToken } from "../api-fetcher";
-import { baseUrl, FilterList, FilterListInterface } from "../basics";
+import {
+  baseUrl,
+  FilterList,
+  FilterListInterface,
+  defaultFilterList,
+} from "../basics";
 
 const buildListEndpoint = `${baseUrl}/building/build/list`;
 
 async function retrieveBuildList(payload: FilterListInterface) {
-  const feedObject = new FilterList(payload);
   const tokenResponse: any = await fetchDataWithToken(
     buildListEndpoint,
-    feedObject,
+    new FilterList(payload || defaultFilterList),
     "POST",
     false
   );

src/(apicalls)/validations/validationProcesser.ts

@@ -34,17 +34,15 @@ class HeadersAndValidations {
   }
 
   parseProcesser() {
-    const requiredKeys = Array.from(this.validation?.required);
     Object.entries(this.properties).map(([key, value]) => {
-      const isRequired: Boolean = requiredKeys.includes(key);
+      const multipleTypes: Object[] = value?.anyOf || [];
-      const multipleTypes: Object[] = value?.anyOf;
+      const isRequired: boolean = Object.keys(value).includes("anyOf");
       if (!isRequired) {
         multipleTypes.map((row: any) => {
           if (row.type !== "null") {
             this.validated[key] = {
               required: false,
               fieldType: row.type,
-              // fieldType: this.parseType(row.type),
             };
           }
         });
@@ -52,7 +50,6 @@ class HeadersAndValidations {
         this.validated[key] = {
           required: true,
           fieldType: value,
-          // fieldType: this.parseType(value),
         };
       }
     });

src/(apicalls)/validations/validations.tsx

@@ -45,10 +45,8 @@ async function retrieveHeadersAndValidationByEndpoint({
     "POST",
     false
   );
-  console.log("selectResponse", selectResponse);
   if (selectResponse.status === 200) {
     const responseParsed = new HeadersAndValidations(selectResponse);
-    console.log("responseParsed", responseParsed);
     return {
       status: selectResponse.status,
       headers: responseParsed.headers,

src/app/dashboard/page.tsx

@@ -17,8 +17,6 @@ const Dashboard: React.FC = async () => {
   const eventsList = await retrieveAvailableEvents();
   const availableMenu = retrieveAvailableCategories(eventsList || []);
 
-
-
   return (
     <>
       <DashboardPage leftSideMenuContent={availableMenu} />

src/app/trybuildpage/page.tsx

@@ -0,0 +1,31 @@
+"use server";
+import React from "react";
+import { redirect } from "next/navigation";
+import {
+  checkAccessTokenIsValid,
+  retrieveAvailableEvents,
+} from "@/(apicalls)/cookies/token";
+import DashboardPage from "@/components/Dashboards/DashboardPage";
+import { retrieveAvailableCategories } from "@/appEvents/categories";
+import CreatePage from "@/components/ContextComponents/Commons/PageCreate";
+
+const Dashboard: React.FC = async () => {
+  const token_is_valid = await checkAccessTokenIsValid();
+
+  if (!token_is_valid) {
+    redirect("/login/email");
+  }
+  const eventsList = await retrieveAvailableEvents();
+  const availableMenu = retrieveAvailableCategories(eventsList || []);
+  const pageInfo = {
+    title: "Bina Oluştur",
+    description: "Bina oluştur sayfasına hoş geldiniz",
+  };
+  return (
+    <>
+      <CreatePage pageInfo={pageInfo} endpoint="/building/build/create" />
+    </>
+  );
+};
+
+export default Dashboard;

src/appEvents/categoriesSecond.ts

@@ -0,0 +1,182 @@
+import {
+  BuildIcon,
+  BuildPartIcon,
+  LivingSpaceIcon,
+  BuildAreaIcon,
+} from "./building/iconSet";
+import { AccountIcon, meetingIcon } from "./account/iconSet";
+import { InviteIcon, TaskIcon } from "./decisionBook/iconSet";
+
+import BuildPage from "./building/build";
+import BuildLivingSpacePage from "./building/livingspace";
+import AccountPage from "./account/account";
+
+const BuildSubCategories = [
+  {
+    title: "Daireler",
+    icon: BuildPartIcon,
+    component: BuildPage,
+    selfEndpoints: {
+      list: "/building/parts/list",
+      create: "/building/parts/create",
+      update: "/building/parts/update/{build_uu_id}",
+    },
+    allEndpoints: [],
+    subCategories: [],
+  },
+  {
+    title: "Kullanılabilir Alanlar",
+    icon: BuildAreaIcon,
+    component: BuildPage,
+    selfEndpoints: {
+      list: "/building/area/list",
+      create: "/building/area/create",
+      update: "/building/area/update/{build_uu_id}",
+    },
+    allEndpoints: [],
+    subCategories: [],
+  },
+  {
+    title: "Yaşayan Kişiler",
+    icon: LivingSpaceIcon,
+    component: BuildLivingSpacePage,
+    selfEndpoints: {
+      list: "/building/living_space/list",
+      create: "/building/living_space/create",
+      update: "/building/living_space/update/{build_uu_id}",
+    },
+    allEndpoints: [],
+    subCategories: [],
+  },
+];
+
+const AccountSubCategories = [
+  {
+    title: "Bakiye Sorgulama",
+    icon: AccountIcon,
+    component: AccountPage,
+    selfEndpoints: { list: "/account/records/list" },
+    allEndpoints: [],
+    subCategories: [],
+  },
+];
+
+const DecisionBookSubCategories: any = [];
+
+const MeetingSubCategories = [
+  {
+    title: "Davetiyeler",
+    icon: InviteIcon,
+    component: BuildPage,
+    selfEndpoints: {
+      list: "/build/decision_book/invite/list",
+      create: "/build/decision_book/invite/create",
+      update: "/build/decision_book/invite/update",
+      assign: "/build/decision_book/invitations/assign",
+    },
+    allEndpoints: [],
+    subCategories: [],
+  },
+  {
+    title: "Görev Ata",
+    icon: TaskIcon,
+    component: BuildPage,
+    selfEndpoints: {},
+    allEndpoints: [],
+    subCategories: [],
+  },
+];
+
+const buildAllEndpoints = [
+  "/building/build/list",
+  "/building/build/create",
+  "/building/build/update/{build_uu_id}",
+  "/building/parts/list",
+  "/building/parts/create",
+  "/building/parts/update/{build_uu_id}",
+  "/building/area/list",
+  "/building/area/create",
+  "/building/area/update/{build_uu_id}",
+  "/building/living_space/list",
+  "/building/living_space/create",
+  "/building/living_space/update/{build_uu_id}",
+];
+
+const meetingAllEndpoints = [
+  "/build/decision_book/invite/list",
+  "/build/decision_book/invite/create",
+  "/build/decision_book/invite/update",
+  "/build/decision_book/invitations/assign",
+];
+
+const accountAllEndpoints = ["/account/records/list"];
+
+const LeftMenuCategories = [
+  {
+    title: "Bina Tanımları",
+    icon: BuildIcon,
+    component: BuildPage,
+    allEndpoints: buildAllEndpoints,
+    selfEndpoints: {
+      list: "/building/build/list",
+      create: "/building/build/create",
+      update: "/building/build/update/{build_uu_id}",
+    },
+    subCategories: BuildSubCategories,
+  },
+  {
+    title: "Toplantılar",
+    icon: meetingIcon,
+    allEndpoints: meetingAllEndpoints,
+    component: BuildPage,
+    selfEndpoints: {},
+    subCategories: MeetingSubCategories,
+  },
+  {
+    title: "Cari Hesaplar",
+    icon: AccountIcon,
+    component: BuildPage,
+    selfEndpoints: {},
+    allEndpoints: accountAllEndpoints,
+    subCategories: AccountSubCategories,
+  },
+  {
+    title: "Karar Defteri",
+    icon: "decision",
+    component: BuildPage,
+    selfEndpoints: {},
+    allEndpoints: [],
+    subCategories: DecisionBookSubCategories,
+  },
+];
+
+export function retrieveAvailableCategories(availableCategories: any) {
+  const availableCategoriesList = Array.from(
+    availableCategories?.availableEvents || []
+  );
+  let availableMenu: Array<any> = [];
+
+  for (let i = 0; i < LeftMenuCategories.length; i++) {
+    const category = LeftMenuCategories[i];
+    if (category.allEndpoints) {
+      const setCategory = isCategoryAvailable(
+        category,
+        availableCategoriesList
+      );
+      if (setCategory) {
+        availableMenu.push(category);
+      }
+    }
+  }
+  return availableMenu;
+}
+
+function isCategoryAvailable(category: any, availableCategoriesList: any) {
+  const categoryList = Array.from(category.allEndpoints);
+  for (let j = 0; j < categoryList.length; j++) {
+    const endpoint = categoryList[j];
+    if (availableCategoriesList.includes(endpoint)) {
+      return true;
+    }
+  }
+}

src/components/ContextComponents/Building/Build/Build.tsx

@@ -6,161 +6,99 @@ import IsNotAllowed from "@/components/ContextComponents/Commons/PageisNotAllowe
 import DeleteButton from "@/components/ContextComponents/Commons/ButtonDelete";
 import UpdateButton from "@/components/ContextComponents/Commons/ButtonUpdate";
 import CreateButton from "@/components/ContextComponents/Commons/ButtonCreate";
-import BuildUpdatePage from "@/components/ContextComponents/Building/Build/BuildUpdate";
-
 import { retrieveAvailableEvents } from "@/(apicalls)/cookies/token";
 import {
   retrieveBuildList,
   updateBuild,
   createBuild,
 } from "@/(apicalls)/building/build";
-import {
+import CreatePage from "@/components/ContextComponents/Commons/PageCreate";
-  retrieveHeadersEndpoint,
+import DashPage from "@/components/ContextComponents/Commons/DashPage";
-  retrieveHeadersAndValidationByEndpoint,
+import PageUpdate from "@/components/ContextComponents/Commons/PageUpdate";
-} from "@/(apicalls)/validations/validations";
-import PageCreate from "../../Commons/PageCreate";
 
 const Build: React.FC = () => {
-  const [renderTable, setRenderTable] = React.useState(false);
+  const [formPage, setFormPage]: [any, any] = React.useState(null);
-  const [renderCreate, setRenderCreate] = React.useState(false);
+  const [endpointNeedsList, setEndpointNeedsList] = React.useState({});
-  const [renderUpdate, setRenderUpdate] = React.useState(false);
-  const [renderDelete, setRenderDelete] = React.useState(false);
-  const [isFormEnabled, setIsFormEnabled] = React.useState(false);
-  const [formPage, setFormPage] = React.useState(<IsNotAllowed />);
-  const [createValidation, setCreateValidation] = React.useState({});
-  const [updateValidation, setUpdateValidation] = React.useState({});
-  const [deleteValidation, setDeleteValidation] = React.useState({});
-  const [tableValidation, setTableValidation] = React.useState([]);
-  const [tableHeaders, setTableHeaders] = React.useState({});
-  const [tableSelectedRow, setTableSelectedRow] = React.useState({});
 
   const endpointNeeds = {
     table: {
       endpoint: "/building/build/list",
-      variableKey: "headers",
+      component: (
-      variableReact: setTableHeaders,
-      component: renderTable ? (
         <Table
-          headers={tableHeaders}
+          createEndpoint="/building/build/list"
-          tableSelectedRow={tableSelectedRow}
+          updateEndpoint="/building/build/update"
-          setTableSelectedRow={setTableSelectedRow}
+          tableFunction={retrieveBuildList}
-          createTable={retrieveBuildList}
+          UpdatePage={PageUpdate}
+          setFormPage={setFormPage}
+          returnToPage={() => setFormPage(null)}
+          updatePageInfo={{
+            title: "Bina Güncelle",
+            description: "Bina güncelleme sayfasına hoş geldiniz",
+          }}
         />
-      ) : (
-        <IsNotAllowed />
-      ),
-      isRender: setRenderTable,
-    },
-    update: {
-      endpoint: "/building/build/update",
-      isRender: setRenderUpdate,
-      variableReact: setUpdateValidation,
-      variableKey: "validation",
-      component: renderUpdate ? (
-        <UpdateButton
-          buttonLabel="Bina Güncelle"
-          rowData={tableSelectedRow}
-          isFormEnabled={isFormEnabled}
-          pageToSet={
-            <BuildUpdatePage
-              saveFunction={updateBuild}
-              validation={updateValidation}
-              tableSelectedRow={tableSelectedRow}
-              setTableSelectedRow={setTableSelectedRow}
-              formPageFunction={setFormPage}
-              isFormEnabledFunction={setIsFormEnabled}
-            />
-          }
-          formPageFunction={setFormPage}
-          isFormEnabledFunction={setIsFormEnabled}
-        />
-      ) : (
-        <IsNotAllowedButton label="Bina Güncelle" />
       ),
+      notAllowed: <IsNotAllowed buttonKey="list-is-not-allowed" />,
     },
     create: {
       endpoint: "/building/build/create",
-      isRender: setRenderCreate,
+      component: (
-      variableReact: setCreateValidation,
-      variableKey: "validation",
-      component: renderCreate ? (
         <CreateButton
           buttonLabel="Yeni Bina ekle"
-          pageToSet={
+          setFormPage={() =>
-            <PageCreate
+            setFormPage(
-              validation={createValidation}
+              <CreatePage
-              formPageFunction={setFormPage}
+                pageInfo={{
-              isFormEnabledFunction={setIsFormEnabled}
+                  title: "Bina Oluştur",
-              onClickAction={() => console.log("Create button clicked")}
+                  description: "Bina oluştur sayfasına hoş geldiniz",
+                }}
+                endpoint="/building/build/create"
+                returnToPage={() => setFormPage(null)}
               />
+            )
           }
-          isFormEnabled={isFormEnabled}
-          formPageFunction={setFormPage}
-          isFormEnabledFunction={setIsFormEnabled}
         />
-      ) : (
+      ),
-        <IsNotAllowedButton label="Binayı Oluştur" />
+      notAllowed: (
+        <IsNotAllowedButton
+          buttonKey="create-is-not-allowed"
+          label="Bina Oluştur"
+        />
       ),
     },
     delete: {
       endpoint: "/building/build/delete",
-      variableKey: "headers",
+      component: <DeleteButton onClick={() => () => console.log("Hi")} />,
-      variableReact: setDeleteValidation,
+      notAllowed: (
-      component: renderDelete ? (
+        <IsNotAllowedButton
-        <DeleteButton onClick={() => () => setIsFormEnabled(true)} />
+          buttonKey="delete-is-not-allowed"
-      ) : (
+          label="Binayı Sil"
-        <IsNotAllowedButton label="Binayı Sil" />
+        />
       ),
-      isRender: setRenderDelete,
     },
   };
 
   React.useEffect(() => {
     retrieveAvailableEvents()
       .then((data) => {
-        for (const endpointNeed of Object.values(endpointNeeds)) {
+        for (const [key, component] of Object.entries(endpointNeeds)) {
-          if (data?.availableEvents.includes(endpointNeed.endpoint)) {
+          if (data?.availableEvents.includes(component.endpoint)) {
-            if (endpointNeed.variableKey === "headers") {
+            setEndpointNeedsList((prev) => ({
-              retrieveHeadersEndpoint({ endpoint: endpointNeed.endpoint })
+              ...prev,
-                .then((validator) => {
+              [key]: component.component,
-                  if (JSON.stringify(validator?.headers) !== "{}") {
+            }));
-                    setTableHeaders(validator?.headers);
+          } else {
-                  }
+            setEndpointNeedsList((prev) => ({
-                })
+              ...prev,
-                .catch(() => {});
+              [key]: component.notAllowed,
-            } else if (endpointNeed.variableKey === "validation") {
+            }));
-              retrieveHeadersAndValidationByEndpoint({
-                endpoint: endpointNeed.endpoint,
-              })
-                .then((validator) => {
-                  if (JSON.stringify(validator?.validated) !== "{}") {
-                    endpointNeed.variableReact(validator);
-                  }
-                })
-                .catch(() => {});
-            }
-            endpointNeed.isRender(true);
           }
         }
       })
       .catch(() => {});
-  }, []);
+  }, [formPage]);
 
   return (
-    <>
+    <>{formPage ? formPage : <DashPage endpointNeeds={endpointNeedsList} />}</>
-      {isFormEnabled ? (
-        formPage
-      ) : (
-        <div>
-          <div className=" md:flex items-center py-5 my-5 rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
-            {endpointNeeds.update.component}
-            {endpointNeeds.create.component}
-            {endpointNeeds.delete.component}
-          </div>
-          {endpointNeeds.table.component}
-        </div>
-      )}
-    </>
   );
 };
 

src/components/ContextComponents/Building/Build/BuildCreate.tsx

@@ -0,0 +1,213 @@
+"use client";
+import React from "react";
+import EventButton from "@/components/ContextComponents/Commons/ButtonEvent";
+
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { retrieveValidationsByEndpoint } from "../../functions/retrieveEndpointAndValidations";
+
+interface BuildCreateProps {
+  pageInfo: any;
+  endpoint: string;
+}
+
+const BuildCreate: React.FC<BuildCreateProps> = ({ pageInfo, endpoint }) => {
+  const [zodValidation, setZodValidation] = React.useState(z.object({}));
+  const [apiValidation, setApiValidation] = React.useState({});
+  const [apiHeaders, setApiHeaders] = React.useState({});
+
+  React.useEffect(() => {
+    retrieveValidationsByEndpoint(endpoint).then((validations: any) => {
+      setZodValidation(validations.zodValidation as any);
+      setApiHeaders(validations.apiValidation?.headers as Object);
+      setApiValidation(validations.apiValidation?.validated as Object);
+    });
+  }, []);
+
+  const form = useForm<z.infer<typeof zodValidation>>({
+    resolver: zodResolver(zodValidation),
+  });
+
+  function closeFormPage() {}
+  function onClickAction() {}
+
+  return (
+    <div>
+      <>
+        <h1 className="text-center text-3xl">{pageInfo.description}</h1>
+        <div className=" md:flex items-center py-5 my-5 rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
+          <EventButton
+            onClick={() => closeFormPage()}
+            label="Dashboarda Dön"
+            bgColor="bg-red-700"
+            icon={
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="28"
+                height="28"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="lucide lucide-square-x"
+              >
+                <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+                <path d="m15 9-6 6" />
+                <path d="m9 9 6 6" />
+              </svg>
+            }
+          />
+          <div className="absolute right-0">
+            <EventButton
+              onClick={() => onClickAction()}
+              label="Kaydet"
+              bgColor="bg-emerald-700"
+              icon={
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="lucide lucide-check"
+                >
+                  <path d="M20 6 9 17l-5-5" />
+                </svg>
+              }
+            />
+          </div>
+        </div>
+        {
+          <Form {...form}>
+            <form
+              // onSubmit={onSubmit}
+              className="space-y-5 max-w-3xl mx-auto py-10"
+            >
+              {Object.entries(apiValidation).map(
+                ([key, value]: [string, any]) => {
+                  console.log("key", key);
+                  const keyValidation = apiValidation[key] || {
+                    fieldType: { type: "string" },
+                    required: false,
+                  };
+                  const fieldType = keyValidation.fieldType?.type || "string";
+                  if (fieldType === "string" && apiHeaders[key]) {
+                    return (
+                      <>
+                        <div className="mb-4" key={key}>
+                          <label className="mb-2.5 block font-medium text-black dark:text-white">
+                            {apiHeaders[key] || "Unknown"}
+                          </label>
+                          <div className="relative">
+                            <FormField
+                              control={form.control}
+                              name={key}
+                              render={({ field }) => (
+                                <FormItem>
+                                  <FormControl>
+                                    <input
+                                      type="text"
+                                      className="w-full rounded-lg border border-stroke bg-transparent py-4 pl-6 pr-10 text-black outline-none focus:border-primary focus-visible:shadow-none dark:border-form-strokedark dark:bg-form-input dark:text-white dark:focus:border-primary"
+                                      {...field}
+                                      value={field.value}
+                                    />
+                                  </FormControl>
+                                  <FormMessage />
+                                </FormItem>
+                              )}
+                            />
+                            <span className="absolute right-4 top-4">
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="24"
+                                height="24"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                strokeWidth="2"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                className="lucide lucide-pencil"
+                              >
+                                <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
+                                <path d="m15 5 4 4" />
+                              </svg>
+                            </span>
+                          </div>
+                        </div>
+                      </>
+                    );
+                  } else if (fieldType === "integer" && apiHeaders[key]) {
+                    return (
+                      <>
+                        <div className="mb-4" key={key}>
+                          <label className="mb-2.5 block font-medium text-black dark:text-white">
+                            {apiHeaders[key] || "Unknown"}
+                          </label>
+                          <div className="relative">
+                            <FormField
+                              control={form.control}
+                              name={key}
+                              render={({ field }) => (
+                                <FormItem>
+                                  <FormControl>
+                                    <input
+                                      type="text"
+                                      className="w-full rounded-lg border border-stroke bg-transparent py-4 pl-6 pr-10 text-black outline-none focus:border-primary focus-visible:shadow-none dark:border-form-strokedark dark:bg-form-input dark:text-white dark:focus:border-primary"
+                                      {...field}
+                                      value={field.value}
+                                    />
+                                  </FormControl>
+                                  <FormMessage />
+                                </FormItem>
+                              )}
+                            />
+                            <span className="absolute right-4 top-4">
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="24"
+                                height="24"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                strokeWidth="2"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                className="lucide lucide-pencil"
+                              >
+                                <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
+                                <path d="m15 5 4 4" />
+                              </svg>
+                            </span>
+                          </div>
+                        </div>
+                      </>
+                    );
+                  }
+                }
+              )}
+            </form>
+          </Form>
+        }
+      </>
+    </div>
+  );
+};
+
+export default BuildCreate;

src/components/ContextComponents/Building/Build/BuildTable.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const BuildTable: React.FC = () => {
+    return (
+        <div>
+            {}
+        </div>
+    );
+};
+
+export default BuildTable;

src/components/ContextComponents/Building/Build/BuildUpdate.tsx

@@ -1,23 +1,16 @@
 import React from "react";
 import PageUpdate from "@/components/ContextComponents/Commons/PageUpdate";
-import IsNotAllowed from "@/components/ContextComponents/Commons/PageisNotAllowed";
 
 interface BuildUpdatePageButtonProps {
-  validation: any;
+  endpoint: string;
-  tableSelectedRow: any;
+  pageInfo: any;
-  saveFunction: any;
+  selectedRow: any;
-  setTableSelectedRow: React.Dispatch<React.SetStateAction<any>>;
-  formPageFunction: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
-  isFormEnabledFunction: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const BuildUpdatePage: React.FC<BuildUpdatePageButtonProps> = ({
-  validation,
+  endpoint,
-  tableSelectedRow,
+  pageInfo,
-  saveFunction,
+  selectedRow,
-  setTableSelectedRow,
-  formPageFunction,
-  isFormEnabledFunction,
 }) => {
   return (
     <div>
@@ -28,7 +21,6 @@ const BuildUpdatePage: React.FC<BuildUpdatePageButtonProps> = ({
         saveFunction={saveFunction}
         setTableSelectedRow={setTableSelectedRow}
         formPageFunction={formPageFunction}
-        isFormEnabledFunction={isFormEnabledFunction}
       />
     </div>
   );

src/components/ContextComponents/Commons/ButtonCreate.tsx

@@ -3,47 +3,18 @@ import React from "react";
 import EventButton from "@/components/ContextComponents/Commons/ButtonEvent";
 
 interface CreateButtonProps {
-
+  setFormPage: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
   buttonLabel: string;
-  pageToSet: any;
-  isFormEnabled: boolean;
-  formPageFunction: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
-  isFormEnabledFunction: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const CreateButton: React.FC<CreateButtonProps> = ({
-
-  pageToSet,
-  buttonLabel,
-  isFormEnabled,
-  formPageFunction,
-  isFormEnabledFunction,
-}) => {
-
-  function openFormPage({
-    isFormEnabled,
   setFormPage,
-    setIsFormEnabled,
+  buttonLabel,
-  }: {
+}) => {
-    isFormEnabled: boolean;
-    setFormPage: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
-    setIsFormEnabled: React.Dispatch<React.SetStateAction<boolean>>;
-  }) {
-    if (!isFormEnabled) {
-      setFormPage(pageToSet);
-      setIsFormEnabled(true);
-    }
-  }
-
   return (
     <EventButton
-      onClick={() =>
+      key="create-button"
-        openFormPage({
+      onClick={() => setFormPage(<></>)}
-          isFormEnabled: isFormEnabled,
-          setFormPage: formPageFunction,
-          setIsFormEnabled: isFormEnabledFunction,
-        })
-      }
       label={buttonLabel}
       bgColor="bg-indigo-700"
       icon={

src/components/ContextComponents/Commons/ButtonDelete.tsx

@@ -9,6 +9,7 @@ interface DeleteButtonProps {
 const DeleteButton: React.FC<DeleteButtonProps> = ({ onClick }) => {
   return (
     <EventButton
+      key="delete-button"
       onClick={() => onClick()}
       label="Seçili Olanları Sil"
       bgColor="bg-emerald-700"

src/components/ContextComponents/Commons/ButtonUpdate.tsx

@@ -4,50 +4,38 @@ import EventButton from "@/components/ContextComponents/Commons/ButtonEvent";
 import IsNotAllowed from "./PageisNotAllowed";
 
 interface UpdateButtonProps {
-  buttonLabel: string;
-  isFormEnabled: boolean;
   pageToSet: React.JSX.Element;
   rowData: any;
   formPageFunction: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
-  isFormEnabledFunction: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const UpdateButton: React.FC<UpdateButtonProps> = ({
-  buttonLabel,
-  isFormEnabled,
   pageToSet,
   rowData,
   formPageFunction,
-  isFormEnabledFunction,
 }) => {
   function openFormPage({
-    isFormEnabled,
     setFormPage,
-    setIsFormEnabled,
   }: {
-    isFormEnabled: boolean;
     setFormPage: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
-    setIsFormEnabled: React.Dispatch<React.SetStateAction<boolean>>;
   }) {
-    if (!isFormEnabled) {
     if (JSON.stringify(rowData) === "{}") {
       alert("Lütfen bir satır seçiniz.");
       formPageFunction(<IsNotAllowed />);
-        isFormEnabledFunction(false);
+      // isFormEnabledFunction(false);
     } else {
       setFormPage(pageToSet);
-        setIsFormEnabled(true);
-      }
     }
   }
+  // isFormEnabled: isFormEnabled,
+  // setIsFormEnabled: isFormEnabledFunction,
 
   return (
     <EventButton
+      key="update-button"
       onClick={() =>
         openFormPage({
-          isFormEnabled: isFormEnabled,
           setFormPage: formPageFunction,
-          setIsFormEnabled: isFormEnabledFunction,
         })
       }
       label={buttonLabel}

src/components/ContextComponents/Commons/DashPage.tsx

@@ -0,0 +1,21 @@
+"use client";
+import React from "react";
+
+interface DashPageProps {
+  endpointNeeds: any;
+}
+
+const DashPage: React.FC<DashPageProps> = ({ endpointNeeds }) => {
+  return (
+    <div>
+      <div className=" md:flex items-center py-5 my-5 rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
+        {endpointNeeds?.create}
+        {endpointNeeds?.delete}
+        {endpointNeeds?.assign}
+      </div>
+      {endpointNeeds?.table}
+    </div>
+  );
+};
+
+export default DashPage;

src/components/ContextComponents/Commons/PageCreate.tsx

@@ -1,6 +1,7 @@
+"use client";
 import React from "react";
-import IsNotAllowed from "./PageisNotAllowed";
+import EventButton from "@/components/ContextComponents/Commons/ButtonEvent";
-import EventButton from "./ButtonEvent";
+
 import {
   Form,
   FormControl,
@@ -13,75 +14,48 @@ import {
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
+import { retrieveValidationsByEndpoint } from "../functions/retrieveEndpointAndValidations";
 
-interface CreatePageButtonProps {
+interface CreatePageProps {
-  validation: any;
+  pageInfo: any;
-  formPageFunction: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
+  endpoint: string;
-  isFormEnabledFunction: React.Dispatch<React.SetStateAction<boolean>>;
+  returnToPage: any;
-  onClickAction: () => void;
 }
 
-const PageCreate: React.FC<CreatePageButtonProps> = ({
+const CreatePage: React.FC<CreatePageProps> = ({
-  validation,
+  pageInfo,
-  formPageFunction,
+  endpoint,
-  isFormEnabledFunction,
+  returnToPage,
-  onClickAction,
 }) => {
   const [zodValidation, setZodValidation] = React.useState(z.object({}));
-  const validationObj: any = validation?.validated;
+  const [apiValidation, setApiValidation] = React.useState<{
-  const validationHeaders = validation?.headers;
+    [key: string]: any;
+  }>({});
+  const [apiHeaders, setApiHeaders] = React.useState<{
+    [key: string]: any;
+  }>({});
 
   React.useEffect(() => {
-    console.log("validation", validation);
+    retrieveValidationsByEndpoint(endpoint).then((validations: any) => {
-    console.log("validationObj", validationObj);
+      setZodValidation(validations.zodValidation as any);
-    console.log("validationHeaders", validationHeaders);
+      setApiHeaders(validations.apiValidation?.headers as Object);
-
+      setApiValidation(validations.apiValidation?.validated as Object);
-    if (Object.keys(validationObj || {}).length === 0) {
-      let zodValidationInternal: any = {};
-
-      Object.keys(validationObj).map((key: string) => {
-        zodValidationInternal[key] = null;
-
-        const keyValidation = validationObj[key] || {
-          fieldType: { type: "string" },
-          required: false,
-        };
-        const fieldType: String = keyValidation.fieldType?.type || "string";
-        const required = keyValidation.required || false;
-        if (fieldType === "string") {
-          zodValidationInternal[key] = required
-            ? z.string()
-            : z.string().optional();
-        } else if (fieldType === "integer") {
-          zodValidationInternal[key] = required
-            ? z.number()
-            : z.number().optional();
-        }
     });
-      setZodValidation(zodValidationInternal);
+  }, []);
-    }
-  }, [validation]);
 
   const form = useForm<z.infer<typeof zodValidation>>({
     resolver: zodResolver(zodValidation),
   });
 
-  function closeFormPage() {
+  function closeFormPage() {}
-    formPageFunction(<IsNotAllowed />);
+  function saveAction() {}
-    isFormEnabledFunction(false);
-  }
-  function onSubmit() {
-    console.log("onSubmit");
-  }
 
   return (
-    <>
+    <div>
-      <h1 className="text-center text-3xl">
+      <h1 className="text-center text-3xl my-7">{pageInfo.description}</h1>
-        Bina Oluştur Sayfasına Hoş geldiniz
-      </h1>
       <div className=" md:flex items-center py-5 my-5 rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
         <EventButton
-          onClick={() => closeFormPage()}
+          onClick={() => returnToPage()}
           label="Dashboarda Dön"
           bgColor="bg-red-700"
           icon={
@@ -105,7 +79,7 @@ const PageCreate: React.FC<CreatePageButtonProps> = ({
         />
         <div className="absolute right-0">
           <EventButton
-            onClick={() => onClickAction()}
+            onClick={() => saveAction()}
             label="Kaydet"
             bgColor="bg-emerald-700"
             icon={
@@ -129,29 +103,23 @@ const PageCreate: React.FC<CreatePageButtonProps> = ({
       </div>
       {
         <Form {...form}>
-          <form
+          <form className="space-y-5 max-w-3xl mx-auto py-10">
-            // onSubmit={onSubmit}
+            {Object.keys(apiValidation).map((key: string) => {
-            className="space-y-5 max-w-3xl mx-auto py-10"
+              const keyValidation = apiValidation[key] || {
-          >
-            {Object.entries(validationObj).map(
-              ([key, value]: [string, any]) => {
-                console.log("key", key);
-                const keyValidation = validationObj[key] || {
                 fieldType: { type: "string" },
                 required: false,
               };
               const fieldType = keyValidation.fieldType?.type || "string";
-                if (fieldType === "string" && validationHeaders[key]) {
+              if (fieldType === "string" && apiValidation[key]) {
                 return (
-                    <>
+                  <div className="mb-4" key={`${key}-header`}>
-                      <div className="mb-4">
                     <label className="mb-2.5 block font-medium text-black dark:text-white">
-                          {validationHeaders[key] || "Unknown"}
+                      {apiHeaders[key]}
                     </label>
-                        <div className="relative">
+                    <div className="relative" key={key}>
                       <FormField
                         control={form.control}
-                            name={key}
+                        name={key as keyof z.infer<typeof zodValidation>}
                         render={({ field }) => (
                           <FormItem>
                             <FormControl>
@@ -185,19 +153,17 @@ const PageCreate: React.FC<CreatePageButtonProps> = ({
                       </span>
                     </div>
                   </div>
-                    </>
                 );
-                } else if (fieldType === "integer" && validationHeaders[key]) {
+              } else if (fieldType === "integer" && apiValidation[key]) {
                 return (
-                    <>
+                  <div className="mb-4" key={`${key}-header`}>
-                      <div className="mb-4">
                     <label className="mb-2.5 block font-medium text-black dark:text-white">
-                          {validationHeaders[key] || "Unknown"}
+                      {apiHeaders[key]}
                     </label>
-                        <div className="relative">
+                    <div className="relative" key={key}>
                       <FormField
                         control={form.control}
-                            name={key}
+                        name={key as keyof z.infer<typeof zodValidation>}
                         render={({ field }) => (
                           <FormItem>
                             <FormControl>
@@ -231,16 +197,14 @@ const PageCreate: React.FC<CreatePageButtonProps> = ({
                       </span>
                     </div>
                   </div>
-                    </>
                 );
               }
-              }
+            })}
-            )}
           </form>
         </Form>
       }
-    </>
+    </div>
   );
 };
 
-export default PageCreate;
+export default CreatePage;

src/components/ContextComponents/Commons/PageUpdate.tsx

@@ -13,41 +13,48 @@ import {
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
+import { retrieveValidationsByEndpoint } from "../functions/retrieveEndpointAndValidations";
 
 interface UpdatePageButtonProps {
-  title: string;
+  endpoint: string;
-  validation: any;
+  pageInfo: any;
-  tableSelectedRow: any;
+  selectedRow: any;
+  returnToPage: any;
   saveFunction: any;
-  setTableSelectedRow: React.Dispatch<React.SetStateAction<any>>;
-  formPageFunction: React.Dispatch<React.SetStateAction<React.JSX.Element>>;
-  isFormEnabledFunction: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const PageUpdate: React.FC<UpdatePageButtonProps> = ({
-  title,
+  endpoint,
-  validation,
+  pageInfo,
-  tableSelectedRow,
+  selectedRow,
+  returnToPage,
   saveFunction,
-  setTableSelectedRow,
-  formPageFunction,
-  isFormEnabledFunction,
 }) => {
   const [validatedData, setValidatedData] = React.useState({});
   const [zodValidation, setZodValidation] = React.useState(z.object({}));
+  const [apiValidation, setApiValidation] = React.useState<{
+    [key: string]: any;
+  }>({});
+  const [apiHeaders, setApiHeaders] = React.useState<{
+    [key: string]: any;
+  }>({});
 
-  const validationObj = validation?.validated;
+  React.useEffect(() => {
-  const validationHeaders = validation?.headers;
+    retrieveValidationsByEndpoint(endpoint).then((validations: any) => {
+      setZodValidation(validations.zodValidation as any);
+      setApiHeaders(validations.apiValidation?.headers as Object);
+      setApiValidation(validations.apiValidation?.validated as Object);
+    });
+  }, []);
 
   React.useEffect(() => {
     if (Object.keys(validatedData).length === 0) {
-      setValidatedData(tableSelectedRow);
+      setValidatedData(selectedRow);
       let zodValidationInternal: any = {};
 
-      Object.keys(tableSelectedRow).map((key: string) => {
+      Object.keys(selectedRow).map((key: string) => {
         zodValidationInternal[key] = null;
-
+        const keyValidation = apiValidation[key] || {
-        const keyValidation = validationObj[key] || {
           fieldType: { type: "string" },
           required: false,
         };
@@ -65,28 +72,21 @@ const PageUpdate: React.FC<UpdatePageButtonProps> = ({
       });
       setZodValidation(zodValidationInternal);
     }
-  }, [validation]);
+  }, []);
 
   const form = useForm<z.infer<typeof zodValidation>>({
     resolver: zodResolver(zodValidation),
   });
 
-  function closeFormPage() {
+  // function onSubmit(values: z.infer<typeof zodValidation>) {
-    formPageFunction(<IsNotAllowed />);
+  function onSubmit() {}
-    setTableSelectedRow({});
-    isFormEnabledFunction(false);
-  }
-  function onSubmit(values: z.infer<typeof zodValidation>) {
-    console.log("onSubmit", values);
-    // saveFunction(validatedData);
-  }
 
   return (
     <>
-      <h1 className="text-center text-3xl">{title}</h1>
+      <h1 className="text-center text-3xl">{pageInfo?.title}</h1>
       <div className=" md:flex items-center py-5 my-5 rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
         <EventButton
-          onClick={() => closeFormPage()}
+          onClick={() => returnToPage()}
           label="Dashboarda Dön"
           bgColor="bg-red-700"
           icon={
@@ -133,31 +133,27 @@ const PageUpdate: React.FC<UpdatePageButtonProps> = ({
         </div>
       </div>
       <div>
-        {Object.keys(validatedData).length !== 0 && (
         <Form {...form}>
           <form
             // onSubmit={onSubmit}
             className="space-y-5 max-w-3xl mx-auto py-10"
           >
-              {Object.entries(validatedData).map(
+            {Object.keys(apiValidation).map((key: string) => {
-                ([key, value]: [string, any]) => {
+              const keyValidation = apiValidation[key] || {
-                  console.log("key", key);
-                  const keyValidation = validationObj[key] || {
                 fieldType: { type: "string" },
                 required: false,
               };
               const fieldType = keyValidation.fieldType?.type || "string";
-                  if (fieldType === "string" && validationHeaders[key]) {
+              if (fieldType === "string" && apiValidation[key]) {
                 return (
-                      <>
+                  <div className="mb-4" key={`${key}-header`}>
-                        <div className="mb-4">
                     <label className="mb-2.5 block font-medium text-black dark:text-white">
-                            {validationHeaders[key] || "Unknown"}
+                      {apiHeaders[key]}
                     </label>
-                          <div className="relative">
+                    <div className="relative" key={key}>
                       <FormField
                         control={form.control}
-                              name={key as keyof typeof validatedData}
+                        name={key as keyof z.infer<typeof zodValidation>}
                         render={({ field }) => (
                           <FormItem>
                             <FormControl>
@@ -165,8 +161,8 @@ const PageUpdate: React.FC<UpdatePageButtonProps> = ({
                                 type="text"
                                 className="w-full rounded-lg border border-stroke bg-transparent py-4 pl-6 pr-10 text-black outline-none focus:border-primary focus-visible:shadow-none dark:border-form-strokedark dark:bg-form-input dark:text-white dark:focus:border-primary"
                                 {...field}
-                                      value={field.value || value}
+                                defaultValue={validatedData[key] || ""}
-                                      defaultValue={value || ""}
+                                value={field.value}
                               />
                             </FormControl>
                             <FormMessage />
@@ -192,22 +188,17 @@ const PageUpdate: React.FC<UpdatePageButtonProps> = ({
                       </span>
                     </div>
                   </div>
-                      </>
                 );
-                  } else if (
+              } else if (fieldType === "integer" && apiValidation[key]) {
-                    fieldType === "integer" &&
-                    validationHeaders[key]
-                  ) {
                 return (
-                      <>
+                  <div className="mb-4" key={`${key}-header`}>
-                        <div className="mb-4">
                     <label className="mb-2.5 block font-medium text-black dark:text-white">
-                            {validationHeaders[key] || "Unknown"}
+                      {apiHeaders[key]}
                     </label>
-                          <div className="relative">
+                    <div className="relative" key={key}>
                       <FormField
                         control={form.control}
-                              name={key as keyof typeof validatedData}
+                        name={key as keyof z.infer<typeof zodValidation>}
                         render={({ field }) => (
                           <FormItem>
                             <FormControl>
@@ -215,7 +206,8 @@ const PageUpdate: React.FC<UpdatePageButtonProps> = ({
                                 type="text"
                                 className="w-full rounded-lg border border-stroke bg-transparent py-4 pl-6 pr-10 text-black outline-none focus:border-primary focus-visible:shadow-none dark:border-form-strokedark dark:bg-form-input dark:text-white dark:focus:border-primary"
                                 {...field}
-                                      value={field.value || value}
+                                defaultValue={validatedData[key] || ""}
+                                value={field.value}
                               />
                             </FormControl>
                             <FormMessage />
@@ -241,14 +233,11 @@ const PageUpdate: React.FC<UpdatePageButtonProps> = ({
                       </span>
                     </div>
                   </div>
-                      </>
                 );
               }
-                }
+            })}
-              )}
           </form>
         </Form>
-        )}
       </div>
     </>
   );

src/components/ContextComponents/Commons/PageisNotAllowed.tsx

@@ -1,9 +1,15 @@
 import React from "react";
 
-const IsNotAllowed: React.FC = () => {
+interface IsNotAllowedProps {
+  buttonKey?: string;
+}
+
+const IsNotAllowed: React.FC<IsNotAllowedProps> = ({ buttonKey }) => {
   return (
-    <>
+    <div
-      <div className="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
+      key={buttonKey}
+      className="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1"
+    >
       <div className="max-w-full max-h-full overflow-x-auto">
         <div className="w-full h-full ">
           <div className="text-center my-10">
@@ -14,7 +20,6 @@ const IsNotAllowed: React.FC = () => {
         </div>
       </div>
     </div>
-    </>
   );
 };
 

src/components/ContextComponents/Commons/SearchBar.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const SearchBar: React.FC = () => {
+    return (
+        <div>
+            {/* SearchBar component */}
+        </div>
+    );
+};
+
+export default SearchBar;

src/components/ContextComponents/Commons/Table.tsx

@@ -12,12 +12,16 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
+import { retrieveHeadersByEndpoint } from "../functions/retrieveEndpointAndValidations";
 
 interface TableProps {
-  createTable: any;
+  createEndpoint: string;
-  headers: any;
+  updateEndpoint: string;
-  tableSelectedRow: any;
+  tableFunction: any;
-  setTableSelectedRow: React.Dispatch<React.SetStateAction<{}>>;
+  UpdatePage: any;
+  setFormPage: any;
+  updatePageInfo: any;
+  returnToPage: any;
 }
 
 const formSchema = z.object({
@@ -25,113 +29,91 @@ const formSchema = z.object({
 });
 
 const Table: React.FC<TableProps> = ({
-  createTable,
+  createEndpoint,
-  tableSelectedRow,
+  updateEndpoint,
-  setTableSelectedRow,
+  tableFunction,
-  headers,
+  UpdatePage,
+  setFormPage,
+  updatePageInfo,
+  returnToPage,
 }) => {
-  const [initalData, setInitalData] = React.useState([]);
+  const [apiHeaders, setApiHeaders] = React.useState<string[]>([]);
   const [tabledata, settabledata] = React.useState([]);
-  const [headersList, setHeadersList] = React.useState([]);
+  const [searchDropDown, setSearchDropDown] = React.useState("");
-
-  const incomingHeaders = Array.from(Object.values(headers)) || [];
-  const headersObject = headers || {};
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
   });
 
-  React.useEffect(() => {
+  function retrieveData(query: null | any = null) {
-    if (incomingHeaders.length !== 0) {
+    return tableFunction(query)
-      let headersNew: any = [];
-      createTable({})
       .then((res: any) => {
-          const resData: any = res?.data || [];
+        settabledata(res?.data || []);
-          if (resData?.length > 0) {
+        return res?.data || [];
-            settabledata(resData || []);
+      })
-            setInitalData(resData || []);
+      .catch((err: any) => {});
-            for (const key in resData[0]) {
-              if (Object.keys(headersObject).includes(key)) {
-                headersNew.push(headers[key]);
-              } else {
-                console.log("key", key);
   }
-            }
+
-            if (headersNew.length > 0) {
+  React.useEffect(() => {
-              setHeadersList(headersNew);
+    retrieveHeadersByEndpoint(createEndpoint).then((validations: any) => {
+      if (validations?.headers.length !== 0) {
+        tableFunction({
+          page: 1,
+          limit: 10,
+          order_field: "uu_id",
+          order_type: "desc",
+        })
+          .then((response: any) => {
+            settabledata(response?.data || []);
+            for (const key in response?.data[0]) {
+              if (Object.keys(validations?.headers).includes(key)) {
+                setApiHeaders((prev: string[]) => [
+                  ...prev,
+                  validations?.headers[key],
+                ]);
               }
             }
           })
           .catch((err: any) => {});
       }
-  }, [headers]);
+      retrieveData();
+    });
+  }, []);
 
   function cleanSearch() {
-    form.setValue("searchText", "");
+    retrieveData();
-    settabledata(Array.from(initalData));
   }
 
-  function search(values: z.infer<typeof formSchema>) {
+  function searchByForm() {
-    const searchText = values.searchText;
+    const searchText = form.getValues("searchText");
     if (searchText === "") {
-      settabledata(Array.from(initalData));
+      cleanSearch();
     } else {
-      const filteredList = Array.from(tabledata).filter((item) => {
+      if (searchText.length > 3) {
-        return Object.values(item).some((row: any) => {
+        setQuery({ searchDropDown: searchText });
-          console.log(row);
+        retrieveData();
-          return row.toLowerCase().includes(searchText.toLowerCase());
-        });
-      });
-      console.log("filteredList", filteredList);
-      settabledata(filteredList);
       }
     }
+  }
+
+  function updateSelectedRow({ selectedComponent }: any) {
+    setFormPage(
+      <UpdatePage
+        endpoint={updateEndpoint}
+        pageInfo={updatePageInfo}
+        selectedRow={selectedComponent}
+        returnToPage={returnToPage}
+        saveFunction={() => console.log("saveFunction")}
+      />
+    );
+  }
 
   return (
     <>
-      <div className="w-full md:flex items-center py-5 my-5 rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
+      <div className="text-lg rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
-        <div className="md:w-full mx-5 md:flex md:my-auto justify-start text-lg align-middle">
+        <div className="my-5  max-w-full justify-start text-lg align-middle">
-          <div className="my-5 md:flex md:w-1/4 md:my-auto justify-center text-lg align-middle md:mr-5">
-            <div
-              className="w-full md:w-[300px] rounded-full inline-flex items-center justify-center gap-2.5 bg-red-700 px-10 py-4 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
-              onClick={() => setTableSelectedRow({})}
-            >
-              <span>
-                <svg
-                  className="fill-current"
-                  width="20"
-                  height="20"
-                  viewBox="0 0 18 18"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M13.7535 2.47502H11.5879V1.9969C11.5879 1.15315 10.9129 0.478149 10.0691 0.478149H7.90352C7.05977 0.478149 6.38477 1.15315 6.38477 1.9969V2.47502H4.21914C3.40352 2.47502 2.72852 3.15002 2.72852 3.96565V4.8094C2.72852 5.42815 3.09414 5.9344 3.62852 6.1594L4.07852 15.4688C4.13477 16.6219 5.09102 17.5219 6.24414 17.5219H11.7004C12.8535 17.5219 13.8098 16.6219 13.866 15.4688L14.3441 6.13127C14.8785 5.90627 15.2441 5.3719 15.2441 4.78127V3.93752C15.2441 3.15002 14.5691 2.47502 13.7535 2.47502ZM7.67852 1.9969C7.67852 1.85627 7.79102 1.74377 7.93164 1.74377H10.0973C10.2379 1.74377 10.3504 1.85627 10.3504 1.9969V2.47502H7.70664V1.9969H7.67852ZM4.02227 3.96565C4.02227 3.85315 4.10664 3.74065 4.24727 3.74065H13.7535C13.866 3.74065 13.9785 3.82502 13.9785 3.96565V4.8094C13.9785 4.9219 13.8941 5.0344 13.7535 5.0344H4.24727C4.13477 5.0344 4.02227 4.95002 4.02227 4.8094V3.96565ZM11.7285 16.2563H6.27227C5.79414 16.2563 5.40039 15.8906 5.37227 15.3844L4.95039 6.2719H13.0785L12.6566 15.3844C12.6004 15.8625 12.2066 16.2563 11.7285 16.2563Z"
-                    fill=""
-                  />
-                  <path
-                    d="M9.00039 9.11255C8.66289 9.11255 8.35352 9.3938 8.35352 9.75942V13.3313C8.35352 13.6688 8.63477 13.9782 9.00039 13.9782C9.33789 13.9782 9.64727 13.6969 9.64727 13.3313V9.75942C9.64727 9.3938 9.33789 9.11255 9.00039 9.11255Z"
-                    fill=""
-                  />
-                  <path
-                    d="M11.2502 9.67504C10.8846 9.64692 10.6033 9.90004 10.5752 10.2657L10.4064 12.7407C10.3783 13.0782 10.6314 13.3875 10.9971 13.4157C11.0252 13.4157 11.0252 13.4157 11.0533 13.4157C11.3908 13.4157 11.6721 13.1625 11.6721 12.825L11.8408 10.35C11.8408 9.98442 11.5877 9.70317 11.2502 9.67504Z"
-                    fill=""
-                  />
-                  <path
-                    d="M6.72245 9.67504C6.38495 9.70317 6.1037 10.0125 6.13182 10.35L6.3287 12.825C6.35683 13.1625 6.63808 13.4157 6.94745 13.4157C6.97558 13.4157 6.97558 13.4157 7.0037 13.4157C7.3412 13.3875 7.62245 13.0782 7.59433 12.7407L7.39745 10.2657C7.39745 9.90004 7.08808 9.64692 6.72245 9.67504Z"
-                    fill=""
-                  />
-                </svg>
-              </span>
-              Seçimleri Temizle
-            </div>
-          </div>
-          <div className="my-5 md:flex md:w-3/4 md:my-auto justify-center text-lg align-middle">
           <Form {...form}>
-              <form
+            <form onSubmit={searchByForm}>
-                className="min-w-max md:min-w-full"
-                onSubmit={form.handleSubmit(search)}
-              >
               <div className="relative">
                 <FormField
                   control={form.control}
@@ -195,15 +177,37 @@ const Table: React.FC<TableProps> = ({
             </form>
           </Form>
         </div>
-        </div>
-      </div>
-
-      <div className="text-lg rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
         <div className="max-w-full mt-5 mb-10 overflow-x-auto">
+          {tabledata.map((row: any) => {
+            return (
+              <span
+                key={`${row.uu_id}-update`}
+                className="absolute left-20 bottom-30 mt-9"
+              >
+                <svg
+                  onClick={() => updateSelectedRow({ selectedComponent: row })}
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="28"
+                  height="28"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="lucide lucide-pencil"
+                >
+                  <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
+                  <path d="m15 5 4 4" />
+                </svg>
+              </span>
+            );
+          })}
           <table className="w-full table-auto">
             <thead>
               <tr className="bg-gray-2 dark:bg-meta-4 border-b border-[#eee] py-5  dark:border-strokedark xl:pl-11">
-                {headersList.map((header, key) => (
+                {apiHeaders &&
+                  apiHeaders?.map((header, key) => (
                     <th
                       key={key}
                       className="min-w-auto px-4 py-4 font-medium text-black dark:text-white"
@@ -213,39 +217,18 @@ const Table: React.FC<TableProps> = ({
                   ))}
               </tr>
             </thead>
+
             <tbody>
-              {tabledata.map((packageItem: any) => (
+              {tabledata.map((row: any) => (
-                <tr
+                <tr key={row.uu_id}>
-                  className={`${
+                  {Object.entries(row).map(
-                    tableSelectedRow?.uu_id === packageItem?.uu_id
-                      ? "bg-blue-900"
-                      : ""
-                  }`}
-                  key={packageItem.uu_id}
-                  onClick={() =>
-                    setTableSelectedRow(
-                      tableSelectedRow.uu_id == packageItem.uu_id
-                        ? {}
-                        : packageItem
-                    )
-                  }
-                >
-                  {Object.entries(packageItem).map(
                     ([key, value]: [key: string, value: any]) => {
                       return (
                         <td
                           key={key}
                           className="border-b border-[#eee] py-5 pl-9 dark:border-strokedark xl:pl-11"
                         >
-                          <h5
+                          <h5>{value || ""}</h5>
-                            className={`font-medium ${
-                              tableSelectedRow?.uu_id === packageItem.uu_id
-                                ? "bg-blue-900 text-white"
-                                : "text-black"
-                            }`}
-                          >
-                            {value || ""}
-                          </h5>
                         </td>
                       );
                     }

src/components/ContextComponents/Commons/isNotAllowedButton.tsx

@@ -3,13 +3,18 @@ import React from "react";
 import EventButton from "@/components/ContextComponents/Commons/ButtonEvent";
 
 interface IsNotAllowedButtonProps {
+  buttonKey: string;
   label: string;
 }
 
-const IsNotAllowedButton: React.FC<IsNotAllowedButtonProps> = ({ label }) => {
+const IsNotAllowedButton: React.FC<IsNotAllowedButtonProps> = ({
+  label,
+  buttonKey,
+}) => {
   return (
     <>
       <EventButton
+        key={buttonKey}
         label={label}
         bgColor="bg-slate-400"
         ishover={false}

src/components/ContextComponents/functions/retrieveEndpointAndValidations.ts

@@ -0,0 +1,65 @@
+"use client";
+import { z } from "zod";
+import {
+  retrieveHeadersAndValidationByEndpoint,
+  retrieveHeadersEndpoint,
+} from "@/(apicalls)/validations/validations";
+
+async function retrieveValidationsByEndpoint(endpoint: string) {
+  let apiValidation: any = {};
+  let zodValidation: any = {};
+
+  await retrieveHeadersAndValidationByEndpoint({
+    endpoint: endpoint,
+  })
+    .then((validator) => {
+      if (JSON.stringify(validator?.validated) !== "{}") {
+        apiValidation = validator;
+        Object.keys(validator?.validated).map((key: string) => {
+          zodValidation[key] = null;
+          const keyValidation = validator?.validated[key] || {
+            fieldType: { type: "string" },
+            required: false,
+          };
+          const fieldType: String = keyValidation.fieldType?.type || "string";
+          const required = keyValidation.required || false;
+          if (fieldType === "string") {
+            zodValidation[key] = required ? z.string() : z.string().optional();
+          } else if (fieldType === "integer") {
+            zodValidation[key] = required ? z.number() : z.number().optional();
+          }
+        });
+        return {
+          zodValidation: zodValidation,
+          apiValidation: apiValidation,
+        };
+      }
+    })
+    .catch(() => {});
+  return {
+    zodValidation: zodValidation,
+    apiValidation: apiValidation,
+  };
+}
+
+async function retrieveHeadersByEndpoint(endpoint: string) {
+  let headers: any = {};
+
+  await retrieveHeadersEndpoint({
+    endpoint: endpoint,
+  })
+    .then((validator) => {
+      if (JSON.stringify(validator?.headers) !== "{}") {
+        headers = validator?.headers;
+        return {
+          headers: headers,
+        };
+      }
+    })
+    .catch(() => {});
+  return {
+    headers: headers,
+  };
+}
+
+export { retrieveValidationsByEndpoint, retrieveHeadersByEndpoint };

src/components/Dashboards/DashboardPage.tsx

@@ -13,8 +13,12 @@ const DashboardPage: React.FC<DashboardPageProps> = ({
 }) => {
   const [activePage, setActivePage] = React.useState(<Landing />);
   const [activeMenu, setActiveMenu] = React.useState(leftSideMenuContent);
+  const [activeValidationList, setActiveValidationList] = React.useState([]);
+  const [activeValidation, setActiveValidation] = React.useState({});
 
-  React.useEffect(() => {}, [activeMenu]);
+  React.useEffect((
+    
+  ) => {}, [activeMenu]);
   return (
     <DefaultLayout
       leftSideMenuContent={activeMenu}