table updated

apicalls/test.tsx

@@ -0,0 +1,65 @@
+"use server";
+import NextCrypto from "next-crypto";
+import { redirect } from "next/navigation";
+
+const nextCrypto = new NextCrypto(
+  "2f3c097b29fc4a70084403ad7b2f9def1ba0bf6e96c892457b0bebd15d3f48fd7396120708cb7efdf7f4b09003701710c0904addaaf991d412403b47d9762aa9"
+);
+
+export async function defaultPagination() {
+  const paginate = await encryptQuery({
+    size: 10,
+    page: 1,
+    orderBy: "uu_id",
+    orderType: "desc",
+    query: {},
+  });
+  return paginate.replaceAll(" ", "+");
+}
+
+export async function decryptQuery(query: string) {
+  if (!query) return {};
+  const decryptURL = await nextCrypto.decrypt(String(query.replace(/ /g, "+")));
+  try {
+    const cleanedString = String(decryptURL).replace(/\\/g, "");
+    const decodedString = decodeURI(cleanedString || "{}");
+    const parsedObject = JSON.parse(decodedString);
+    if (typeof parsedObject !== "object") {
+      return JSON.parse(parsedObject);
+    }
+    return parsedObject;
+  } catch (error) {
+    return {};
+  }
+}
+
+export async function encryptQuery(queryObject: any) {
+  const encodedURL = encodeURI(JSON.stringify(queryObject));
+  return (await nextCrypto.encrypt(encodedURL)).replaceAll(";", "%3B");
+}
+
+export async function handleFormSubmission(formData: FormData): Promise<void> {
+  let inputs: any = {};
+  formData.forEach((value, key) => {
+    if (key.includes("page")) {
+      inputs.page = value;
+    } else if (key.includes("size")) {
+      inputs.size = value;
+    } else if (key.includes("orderBy")) {
+      inputs.orderBy = value;
+    } else if (key.includes("orderType")) {
+      inputs.orderType = value;
+    } else if (key.includes("section")) {
+    } else if (key.includes("ACTION_ID")) {
+    } else {
+      inputs.query = {
+        ...inputs.query,
+        [key]: value,
+      };
+    }
+  });
+  const queryEncrypt = await encryptQuery(inputs);
+  redirect(
+    `/${formData.get("section")}?q=${queryEncrypt.replaceAll(" ", "+")}`
+  );
+}

src/app/accounts/page.tsx

@@ -0,0 +1,57 @@
+"use server";
+import React from "react";
+import { RefreshCcw } from "lucide-react";
+import Pagination from "./pagination";
+import TableComponent from "./table";
+import {
+  decryptQuery,
+  defaultPagination,
+  handleFormSubmission,
+} from "@/apicalls/test";
+import MainBodyWithHeader from "@/components/defaultLayout/MainBodyWithHeader";
+import { redirect } from "next/navigation";
+
+const DashboardPage = async ({ searchParams }: { searchParams: any }) => {
+  const searchParamsKeys = await searchParams;
+  if (!searchParamsKeys?.q) {
+    const defaultURL = await defaultPagination();
+    console.log(defaultURL);
+    redirect(`/accounts?q=${defaultURL}`);
+  }
+  const queryEncrypt = await decryptQuery(
+    searchParamsKeys?.q.replace(/ /g, "+")
+  );
+  const accountPage = (
+    <div className="p-4 overflow-hidden">
+      <h1 className="text-2xl font-bold mb-4 ">Dashboard</h1>
+      <form
+        action={handleFormSubmission}
+        className="bg-white p-4 rounded-lg shadow"
+      >
+        <div className="grid gap-4">
+          <p>Welcome to your dashboard</p>
+          <h1>{JSON.stringify(queryEncrypt)}</h1>
+          <input type="hidden" name="section" value="accounts" readOnly />
+          <TableComponent inputHeaders={queryEncrypt?.query || {}} />
+          <button
+            type="submit"
+            className="flex items-center justify-center gap-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+          >
+            <RefreshCcw size={16} />
+            Search
+          </button>
+          <Pagination
+            size={parseInt(queryEncrypt?.size || "10")}
+            page={parseInt(queryEncrypt?.page || "1")}
+            orderBy={queryEncrypt?.orderBy || "id"}
+            orderType={queryEncrypt?.orderType || "asc"}
+            totalPage={3}
+          />
+        </div>
+      </form>
+    </div>
+  );
+  return <MainBodyWithHeader children={accountPage} />;
+};
+
+export default DashboardPage;

src/app/accounts/pagination.tsx

@@ -0,0 +1,81 @@
+"use client";
+import React from "react";
+const Pagination = ({
+  page,
+  totalPage,
+  size,
+  orderBy,
+  orderType,
+}: {
+  page: number;
+  size: number;
+  totalPage: number;
+  orderBy: string;
+  orderType: string;
+}) => {
+  const [pageInfo, setPageInfo] = React.useState(page);
+
+  function increasePageInfo(event: any) {
+    if (pageInfo < totalPage) {
+      setPageInfo(pageInfo + 1);
+    } else {
+      event.preventDefault();
+    }
+  }
+
+  function decreasePageInfo(event: any) {
+    if (pageInfo > 1) {
+      setPageInfo(pageInfo - 1);
+    } else {
+      event.preventDefault();
+    }
+  }
+
+  return (
+    <div className="flex items-center justify-between mt-4">
+      <button
+        className="bg-gray-200 w-[150px] text-gray-700 p-2 rounded hover:bg-gray-300"
+        onClick={(event) => decreasePageInfo(event)}
+      >
+        Previous
+      </button>
+      <div className="flex items-center space-x-2">
+        <span className="text-gray-600">Page</span>
+        <input
+          readOnly
+          name="page"
+          value={pageInfo}
+          className="w-16 border p-1 rounded text-center"
+        />
+        <span className="text-gray-600">of</span>
+        <span className="font-bold">{totalPage}</span>
+        Size:{" "}
+        <input
+          name="size"
+          defaultValue={size}
+          className="w-16 border p-1 rounded text-center"
+        />
+        orderBy:
+        <input
+          name="orderBy"
+          defaultValue={orderBy}
+          className="w-16 border p-1 rounded text-center"
+        />
+        orderType:
+        <input
+          name="orderType"
+          defaultValue={orderType}
+          className="w-16 border p-1 rounded text-center"
+        />
+      </div>
+      <button
+        onClick={(event) => increasePageInfo(event)}
+        className="bg-gray-200 w-[150px] text-gray-700 p-2 rounded hover:bg-gray-300"
+      >
+        Next
+      </button>
+    </div>
+  );
+};
+
+export default Pagination;

src/app/accounts/table.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+interface TableComponentInterFace {
+  inputHeaders: any;
+}
+const TableComponent: React.FC<TableComponentInterFace> = ({
+  inputHeaders,
+}) => {
+  return (
+    <div className="grid grid-cols-2 gap-4 mb-4">
+      {Object.entries(inputHeaders).map(([key, value]) => (
+        <div key={key}>
+          <h1>{key} : </h1>
+          <input
+            type="text"
+            className="border p-2 rounded"
+            placeholder={`${key}`}
+            name={key}
+            defaultValue={String(value) || ""}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default TableComponent;

src/app/building/page.tsx

@@ -1,15 +1,10 @@
 "use server";
 import React from "react";
+import MainBodyWithHeader from "@/components/defaultLayout/MainBodyWithHeader";
+import BuildChildComponent from "@/pages/Build/Build";
 
 const Page = () => {
-  return (
-    <div className="container mx-auto px-4 py-8">
-      <h1 className="text-2xl font-bold mb-4">Building Management</h1>
-      <div className="bg-white rounded-lg shadow p-6">
-        <p>Building page content goes here</p>
-      </div>
-    </div>
-  );
+  return <MainBodyWithHeader children={<BuildChildComponent />} />;
 };
 
 export default Page;

src/app/dashboard/page.tsx

@@ -1,17 +0,0 @@
-"use server";
-import React from "react";
-
-const DashboardPage = () => {
-  return (
-    <div className="p-4">
-      <h1 className="text-2xl font-bold mb-4">Dashboard</h1>
-      <div className="grid gap-4">
-        <div className="bg-white p-4 rounded-lg shadow">
-          <p>Welcome to your dashboard</p>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default DashboardPage;

src/app/e/accounts/table.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+interface TableComponentInterFace {
+  inputHeaders: any;
+}
+const TableComponent: React.FC<TableComponentInterFace> = ({
+  inputHeaders,
+}) => {
+  return (
+    <>
+      <div className="grid grid-cols-2 gap-4 mb-4">
+        {Object.entries(inputHeaders).map(([key, value]) => (
+          <div key={key}>
+            <h1>{key} : </h1>
+            <input
+              type="text"
+              className="border p-2 rounded"
+              placeholder={`${key}`}
+              name={key}
+              defaultValue={String(value) || ""}
+            />
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default TableComponent;

src/components/defaultLayout/MainBodyWithHeader.tsx

@@ -0,0 +1,27 @@
+"use server";
+import React, { FC, ReactNode } from "react";
+
+interface MainBodyWithHeaderProps {
+  children: ReactNode;
+}
+
+const MainBodyWithHeader: FC<MainBodyWithHeaderProps> = ({ children }) => {
+  return (
+    <div className="flex flex-row min-h-screen">
+      <div className="basis-1/6 flex flex-col min-h-screen bg-slate-200">
+        <div className="basis-1/4 p-4 border-2 border-black">01</div>
+        <div className="basis-3/4 p-4 border-2 border-black">02</div>
+      </div>
+      <div className="flex flex-col basis-5/6 min-h-screen bg-slate-300">
+        <div className="sticky top-0 bg-slate-500 text-white p-4 z-10 border-2 border-black">
+          <h1>Sticky Header</h1>
+        </div>
+        <div className="flex-1 border-2 border-black p-6 overflow-y-auto">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MainBodyWithHeader;

src/pages/Build/Build.tsx

@@ -0,0 +1,33 @@
+"use server";
+import React from "react";
+
+const BuildChildComponent = () => {
+  return (
+    <>
+      <h1>Building Management</h1>
+      <div className="bg-white rounded-lg shadow p-6 mb-4">
+        <p>Building page content goes here</p>
+      </div>
+      <div className="bg-white rounded-lg shadow p-6 mb-4">
+        <p>More content goes here</p>
+      </div>
+      <div className="bg-white rounded-lg shadow p-6 mb-4">
+        <p>Building page content goes here</p>
+      </div>
+      <div className="bg-white rounded-lg shadow p-6 mb-4">
+        <p>More content goes here</p>
+      </div>
+      <div className="bg-white rounded-lg shadow p-6 mb-4">
+        <p>Building page content goes here</p>
+      </div>
+      <div className="bg-white rounded-lg shadow p-6 mb-4">
+        <p>More content goes here</p>
+      </div>
+      <div className="bg-white rounded-lg shadow p-6 mb-4">
+        <p>Even more content goes here</p>
+      </div>
+    </>
+  );
+};
+
+export default BuildChildComponent;