updated docs

web_services/web-controllers/app/api/menu/route.ts

@@ -0,0 +1,20 @@
+import { NextResponse } from "next/server";
+
+export async function POST() {
+  async function retrieveAvailableApplication(): Promise<string[]> {
+    return new Promise((resolve) => {
+      const mockList = [
+        "management/account/tenant/something",
+        "management/account/tenant/somethingSecond",
+        "building/parts/tenant/something",
+      ];
+      resolve(mockList);
+    });
+  }
+
+  const availableApplications = await retrieveAvailableApplication();
+  return NextResponse.json({
+    status: 200,
+    data: availableApplications,
+  });
+}

web_services/web-controllers/app/api/pages/route.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from "next/server";
+
+export async function POST(): Promise<NextResponse> {
+  async function retrievePageToRender(): Promise<string> {
+    return new Promise((resolve) => {
+      resolve("superUserTenantSomething");
+    });
+  }
+
+  const pageToRender = await retrievePageToRender();
+  return NextResponse.json({
+    status: 200,
+    data: pageToRender,
+  });
+}

web_services/web-controllers/app/api/tst/[...id]/route.ts

@@ -0,0 +1,138 @@
+import { NextResponse, NextRequest } from "next/server";
+
+interface APiData {
+  uuid: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  phoneNumber: string;
+  country: string;
+  description: string;
+  isDeleted: boolean;
+  isConfirmed: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+function generateMockData(volume: number) : APiData[] {
+  const data : APiData[] = [];
+  for (let i = 0; i < volume; i++) {
+    data.push({
+      uuid: i.toString(),
+      firstName: "test-" + i,
+      lastName: "test-" + i,
+      email: "test-" + i,
+      phoneNumber: "test-" + i,
+      country: "test-" + i,
+      description: "test-" + i,
+      isDeleted: false,
+      isConfirmed: false,
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    });
+  }
+  return data;
+}
+
+const apiMockData: APiData[] = generateMockData(10);
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string[] }> }
+) {
+  const id = (await params).id[0];
+  const data = apiMockData.find((item) => item.uuid === id);
+  if (!data) {
+    return NextResponse.json({
+      status: 404,
+      data: {
+        message: "Not Found",
+      },
+    });
+  }
+  return NextResponse.json({
+    status: 200,
+    data: data,
+  });
+}
+
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string[] }> }
+) {
+  const id = (await params).id[0];
+  const body = await request.json();
+  const idFound = apiMockData.find((item) => item.uuid === id);
+
+  if (!idFound) {
+    return NextResponse.json({
+      status: 404,
+      data: {
+        message: "Not Found",
+      },
+    });
+  }
+  apiMockData.splice(apiMockData.indexOf(idFound as any), 1);
+  apiMockData.push({
+    ...idFound,
+    firstName: body.name || idFound.firstName,
+    description: body.description || idFound.description,
+    uuid: id,
+    isDeleted: false,
+    createdAt: new Date(),
+    updatedAt: new Date(),
+  });
+  return NextResponse.json({
+    status: 200,
+    data: {
+      ...idFound,
+      firstName: body.name,
+      description: body.description,
+    },
+  });
+}
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string[] }> }
+) {
+  const id = (await params).id[0];
+  const data = apiMockData.find((item) => item.uuid === id);
+  if (!data) {
+    return NextResponse.json({
+      status: 404,
+      data: {
+        message: "Not Found",
+      },
+    });
+  }
+  apiMockData.splice(apiMockData.indexOf(data as any), 1);
+  return NextResponse.json({
+    status: 200,
+    data: apiMockData.length,
+  });
+}
+
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string[] }> }
+) {
+  const id = (await params).id[0];
+  const body = await request.json();
+  const data = apiMockData.find((item) => item.uuid === id);
+  if (!data) {
+    return NextResponse.json({
+      status: 404,
+      data: {
+        message: "Not Found",
+      },
+    });
+  }
+  return NextResponse.json({
+    status: 200,
+    data: {
+      ...data,
+      firstName: body.name || data.firstName,
+    },
+  });
+}

web_services/web-controllers/app/api/tst/route.ts

@@ -0,0 +1,139 @@
+import { NextResponse, NextRequest } from "next/server";
+import { randomUUID } from "crypto";
+interface APiData {
+  "Users.uuid": string;
+  "Users.firstName": string;
+  "Users.lastName": string;
+  "Users.email": string;
+  "Users.phoneNumber": string;
+  "Users.country": string;
+  "Users.description": string;
+  "Users.isDeleted": boolean;
+  "Users.isConfirmed": boolean;
+  "Users.createdAt": Date;
+  "Users.updatedAt": Date;
+}
+
+function generateMockData(volume: number): APiData[] {
+  const data: APiData[] = [];
+
+  for (let i = 0; i < volume; i++) {
+    data.push({
+      "Users.uuid": randomUUID(),
+      "Users.firstName": "test-name-" + i,
+      "Users.lastName": "test-lastName-" + i,
+      "Users.email": "test-email-" + i,
+      "Users.phoneNumber": "test-phoneNumber-" + i,
+      "Users.country": "test-country-" + i,
+      "Users.description": "test-description-" + i,
+      "Users.isDeleted": Math.random() > 0.5,
+      "Users.isConfirmed": Math.random() > 0.5,
+      "Users.createdAt": new Date(),
+      "Users.updatedAt": new Date(),
+    });
+  }
+  return data;
+}
+
+interface RequestParams {
+  page: number;
+  size: number;
+  orderField: string[];
+  orderType: string[];
+  query: Record<string, any>;
+}
+
+const apiMockData: APiData[] = generateMockData(108);
+
+interface PaginationRequest {
+  page: number;
+  size: number;
+  orderField: string[];
+  orderType: string[];
+  query: Record<string, any>;
+}
+
+interface PaginationResponse {
+  onPage: number;
+  onPageCount: number;
+  totalPage: number;
+  totalCount: number;
+  next: boolean;
+  back: boolean;
+}
+
+interface DataResponse<T> {
+  data: T[];
+  pagination: PaginationResponse;
+}
+interface NextApiResponse<T> {
+  status: number;
+  data: DataResponse<T>;
+}
+
+export async function POST(
+  request: NextRequest
+): Promise<NextResponse<NextApiResponse<APiData>>> {
+  const pagination: PaginationRequest = await request.json();
+
+  const ceilLength = Math.ceil(apiMockData.length / pagination.size);
+  const isNext = pagination.page < ceilLength;
+  const isBack = pagination.page > 1;
+  const sliceIfPaginationCorrect =
+    pagination.page <= ceilLength ? pagination.page : ceilLength;
+  const sliceParams = [
+    (pagination.page - 1) * pagination.size,
+    sliceIfPaginationCorrect * pagination.size,
+  ];
+  const orderField = pagination.orderField;
+  const orderType = pagination.orderType;
+  const query = pagination.query;
+
+  const filteredData = apiMockData.filter((item) => {
+    return Object.keys(query).every((key) => {
+      return item[key as keyof APiData] === query[key];
+    });
+  });
+  if (orderField && orderType) {
+    for (let i = 0; i < orderField.length; i++) {
+      const field = orderField[i];
+      const order = orderType[i];
+      if (order === "asc") {
+        filteredData.sort((a, b) => {
+          if (a[field as keyof APiData] < b[field as keyof APiData]) {
+            return -1;
+          }
+          if (a[field as keyof APiData] > b[field as keyof APiData]) {
+            return 1;
+          }
+          return 0;
+        });
+      } else {
+        filteredData.sort((a, b) => {
+          if (a[field as keyof APiData] < b[field as keyof APiData]) {
+            return 1;
+          }
+          if (a[field as keyof APiData] > b[field as keyof APiData]) {
+            return -1;
+          }
+          return 0;
+        });
+      }
+    }
+  }
+
+  return NextResponse.json({
+    status: 200,
+    data: {
+      data: filteredData.slice(...sliceParams),
+      pagination: {
+        onPage: pagination.page,
+        onPageCount: pagination.size,
+        totalPage: ceilLength,
+        totalCount: apiMockData.length,
+        next: isNext,
+        back: isBack,
+      },
+    },
+  });
+}

web_services/web-controllers/app/en/[...page]/page.tsx

@@ -0,0 +1,15 @@
+'use server';
+import { MaindasboardPageProps } from "@/validations/mutual/dashboard/props";
+import { DashboardLayout } from "@/layouts/dashboard/layout";
+
+const MainEnPage: React.FC<MaindasboardPageProps> = async ({ params, searchParams }) => {
+  const parameters = await params;
+  const searchParameters = await searchParams;
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <DashboardLayout params={parameters} searchParams={searchParameters} lang="en" />
+    </div>
+  );
+}
+
+export default MainEnPage;

web_services/web-controllers/app/en/page.tsx

@@ -0,0 +1,15 @@
+'use server';
+import { DashboardLayout } from "@/layouts/dashboard/layout";
+import { MaindasboardPageProps } from "@/validations/mutual/dashboard/props";
+
+const MainEnPage: React.FC<MaindasboardPageProps> = async ({ params, searchParams }) => {
+  const parameters = await params;
+  const searchParameters = await searchParams;
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <DashboardLayout lang="en" params={parameters} searchParams={searchParameters} />
+    </div>
+  );
+}
+
+export default MainEnPage;

web_services/web-controllers/app/globals.css

@@ -0,0 +1,122 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.129 0.042 264.695);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.129 0.042 264.695);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.129 0.042 264.695);
+  --primary: oklch(0.208 0.042 265.755);
+  --primary-foreground: oklch(0.984 0.003 247.858);
+  --secondary: oklch(0.968 0.007 247.896);
+  --secondary-foreground: oklch(0.208 0.042 265.755);
+  --muted: oklch(0.968 0.007 247.896);
+  --muted-foreground: oklch(0.554 0.046 257.417);
+  --accent: oklch(0.968 0.007 247.896);
+  --accent-foreground: oklch(0.208 0.042 265.755);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.929 0.013 255.508);
+  --input: oklch(0.929 0.013 255.508);
+  --ring: oklch(0.704 0.04 256.788);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.984 0.003 247.858);
+  --sidebar-foreground: oklch(0.129 0.042 264.695);
+  --sidebar-primary: oklch(0.208 0.042 265.755);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.968 0.007 247.896);
+  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+  --sidebar-border: oklch(0.929 0.013 255.508);
+  --sidebar-ring: oklch(0.704 0.04 256.788);
+}
+
+.dark {
+  --background: oklch(0.129 0.042 264.695);
+  --foreground: oklch(0.984 0.003 247.858);
+  --card: oklch(0.208 0.042 265.755);
+  --card-foreground: oklch(0.984 0.003 247.858);
+  --popover: oklch(0.208 0.042 265.755);
+  --popover-foreground: oklch(0.984 0.003 247.858);
+  --primary: oklch(0.929 0.013 255.508);
+  --primary-foreground: oklch(0.208 0.042 265.755);
+  --secondary: oklch(0.279 0.041 260.031);
+  --secondary-foreground: oklch(0.984 0.003 247.858);
+  --muted: oklch(0.279 0.041 260.031);
+  --muted-foreground: oklch(0.704 0.04 256.788);
+  --accent: oklch(0.279 0.041 260.031);
+  --accent-foreground: oklch(0.984 0.003 247.858);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.551 0.027 264.364);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.208 0.042 265.755);
+  --sidebar-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.279 0.041 260.031);
+  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.551 0.027 264.364);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

web_services/web-controllers/app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

web_services/web-controllers/app/page.tsx

@@ -0,0 +1,103 @@
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
+        <Image
+          className="dark:invert"
+          src="/next.svg"
+          alt="Next.js logo"
+          width={180}
+          height={38}
+          priority
+        />
+        <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
+          <li className="mb-2 tracking-[-.01em]">
+            Get started by editing{" "}
+            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
+              src/app/page.tsx
+            </code>
+            .
+          </li>
+          <li className="tracking-[-.01em]">
+            Save and see your changes instantly.
+          </li>
+        </ol>
+
+        <div className="flex gap-4 items-center flex-col sm:flex-row">
+          <a
+            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              className="dark:invert"
+              src="/vercel.svg"
+              alt="Vercel logomark"
+              width={20}
+              height={20}
+            />
+            Deploy now
+          </a>
+          <a
+            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
+            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Read our docs
+          </a>
+        </div>
+      </main>
+      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
+        <a
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            aria-hidden
+            src="/file.svg"
+            alt="File icon"
+            width={16}
+            height={16}
+          />
+          Learn
+        </a>
+        <a
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            aria-hidden
+            src="/window.svg"
+            alt="Window icon"
+            width={16}
+            height={16}
+          />
+          Examples
+        </a>
+        <a
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            aria-hidden
+            src="/globe.svg"
+            alt="Globe icon"
+            width={16}
+            height={16}
+          />
+          Go to nextjs.org →
+        </a>
+      </footer>
+    </div>
+  );
+}

web_services/web-controllers/app/test/list/page.tsx

@@ -0,0 +1,37 @@
+'use server';
+import React from "react";
+import TableCardComponent from "@/components/mutual/tableView/FullCardTableComp/component";
+
+const TestPage = () => {
+    const baseUrl = "http://localhost:3000/api/tst";
+    const translations = {
+        firstName: "First Name",
+        lastName: "Last Name",
+        email: "Email",
+        phoneNumber: "Phone Number",
+        country: "Country",
+        description: "Description",
+        isDeleted: "Is Deleted",
+        isConfirmed: "Is Confirmed",
+        createdAt: "Created At",
+        updatedAt: "Updated At",
+    }
+    const columns = [
+        "firstName",
+        "lastName",
+        "email",
+        "phoneNumber",
+        "country",
+        "description",
+        "isDeleted",
+        "isConfirmed",
+        "createdAt",
+        "updatedAt",
+    ]
+    const initPaginationDefault = { page: 1, size: 10, orderFields: [], orderTypes: [], query: {} }
+    return (
+        <TableCardComponent baseUrl={baseUrl} translations={translations} columns={columns} initPagination={initPaginationDefault} />
+    );
+}
+
+export default TestPage;

web_services/web-controllers/app/test/list2/page.tsx

@@ -0,0 +1,37 @@
+'use server';
+import React from "react";
+import TableComponent from "@/components/mutual/tableView/FullTableComp/component";
+
+const TestPage = () => {
+    const baseUrl = "http://localhost:3000/api/tst";
+    const translations = {
+        firstName: "First Name",
+        lastName: "Last Name",
+        email: "Email",
+        phoneNumber: "Phone Number",
+        country: "Country",
+        description: "Description",
+        isDeleted: "Is Deleted",
+        isConfirmed: "Is Confirmed",
+        createdAt: "Created At",
+        updatedAt: "Updated At",
+    }
+    const columns = [
+        "firstName",
+        "lastName",
+        "email",
+        "phoneNumber",
+        "country",
+        "description",
+        "isDeleted",
+        "isConfirmed",
+        "createdAt",
+        "updatedAt",
+    ]
+    const initPaginationDefault = { page: 1, size: 10, orderFields: [], orderTypes: [], query: {} }
+    return (
+        <TableComponent baseUrl={baseUrl} translations={translations} columns={columns} initPagination={initPaginationDefault} />
+    );
+}
+
+export default TestPage;

web_services/web-controllers/app/test/page.tsx

@@ -0,0 +1,158 @@
+'use client';
+import React, { useState, useEffect } from "react";
+import {
+    apiGetFetcher,
+    apiPostFetcher,
+    apiPutFetcher,
+    apiDeleteFetcher,
+    apiPatchFetcher,
+} from "@/lib/fetcher";
+import { Input } from "@/components/mutual/shadcnui/input";
+import { Textarea } from "@/components/mutual/shadcnui/textarea";
+import { Button } from "@/components/mutual/shadcnui/button";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/mutual/shadcnui/table";
+import { Label } from "@/components/mutual/shadcnui/label";
+
+const TestPage = () => {
+    const baseUrl = "http://localhost:3000/api";
+    const [postData, setPostData] = useState<any>(null);
+    const [page, setPage] = useState<number>(1);
+    const [pageSize, setPageSize] = useState<number>(10);
+    const [orderField, setOrderField] = useState<string[]>([]);
+    const [orderType, setOrderType] = useState<string[]>([]);
+    const [query, setQuery] = useState<any>({});
+
+    const [pagination, setPagination] = useState<any>({
+        onPage: 1,
+        onPageCount: 10,
+        totalPage: 1,
+        totalCount: 1,
+        next: false,
+        back: false,
+    });
+
+    const handleBack = async () => {
+        setPage(page > 1 ? page - 1 : page);
+        await fetchData();
+    }
+
+    const handleNext = async () => {
+        setPage(page < pagination.totalPage ? page + 1 : page);
+        await fetchData();
+    }
+    const fetchData = async () => {
+        const response = await apiPostFetcher({
+            url: `${baseUrl}/tst`,
+            isNoCache: true,
+            body: {
+                page: page,
+                size: pagination.onPageCount,
+                orderField: orderField,
+                orderType: orderType,
+                query: query,
+            },
+        });
+
+        // Check if response and response.data exist before setting state
+        if (response && response.data) {
+            setPostData(response.data);
+            // Check if pagination exists in the response
+            if (response.data.pagination) {
+                setPagination(response.data.pagination);
+            }
+        }
+    };
+    useEffect(() => {
+        fetchData();
+    }, [page, query, orderField, orderType]);
+
+
+    return (
+        <div>
+            <Label>Page Size</Label>
+            <Input
+                type="number"
+                value={pageSize}
+                onChange={(e) => setPageSize(Number(e.target.value))}
+            />
+            <Label>Order Field</Label>
+            <Input
+                type="text"
+                value={orderField.join(",")}
+                onChange={(e) => setOrderField(e.target.value.split(","))}
+            />
+            <Label>Order Type</Label>
+            <Input
+                type="text"
+                value={orderType.join(",")}
+                onChange={(e) => setOrderType(e.target.value.split(","))}
+            />
+            <div>
+                <p>Page: {pagination.onPage}</p>
+                <p>Page Count: {pagination.onPageCount}</p>
+                <p>Total Page: {pagination.totalPage}</p>
+                <p>Total Count: {pagination.totalCount}</p>
+                <p>Next: {pagination.next ? "true" : "false"}</p>
+                <p>Back: {pagination.back ? "true" : "false"}</p>
+            </div>
+            <div className="flex flex-col items-center justify-start my-6">
+                <h1>Post Data Page</h1>
+                <Table>
+                    <TableHeader>
+                        <TableRow>
+                            <TableHead>Row</TableHead>
+                            <TableHead>UUID</TableHead>
+                            <TableHead>First Name</TableHead>
+                            <TableHead>Last Name</TableHead>
+                            <TableHead>Email</TableHead>
+                            <TableHead>Phone Number</TableHead>
+                            <TableHead>Country</TableHead>
+                            <TableHead>Description</TableHead>
+                            <TableHead>Is Deleted</TableHead>
+                            <TableHead>Is Confirmed</TableHead>
+                            <TableHead>Created At</TableHead>
+                            <TableHead>Updated At</TableHead>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        {postData?.data?.map((item: any, index: number) => (
+                            <TableRow key={item.uuid}>
+                                <TableCell>{index + 1}</TableCell>
+                                <TableCell>{item.uuid}</TableCell>
+                                <TableCell>{item.firstName}</TableCell>
+                                <TableCell>{item.lastName}</TableCell>
+                                <TableCell>{item.email}</TableCell>
+                                <TableCell>{item.phoneNumber}</TableCell>
+                                <TableCell>{item.country}</TableCell>
+                                <TableCell>{item.description}</TableCell>
+                                <TableCell>{item.isDeleted}</TableCell>
+                                <TableCell>{item.isConfirmed}</TableCell>
+                                <TableCell>{item.createdAt}</TableCell>
+                                <TableCell>{item.updatedAt}</TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </div>
+            <div className="absolute bottom-10 left-0 right-0">
+                <div className="flex items-center justify-center gap-2 bg-amber-300 p-6">
+                    {
+                        pagination.back && (
+                            <Button className="w-20" onClick={() => handleBack()}>Back</Button>
+                        )
+                    }
+                    {
+                        pagination.next && (
+                            <Button className="w-20" onClick={() => handleNext()}>Next</Button>
+                        )
+                    }
+                </div>
+            </div>
+
+
+
+        </div >
+    );
+}
+
+export default TestPage;

web_services/web-controllers/app/tr/[...page]/page.tsx

@@ -0,0 +1,15 @@
+'use server';
+import { DashboardLayout } from "@/layouts/dashboard/layout";
+import { MaindasboardPageProps } from "@/validations/mutual/dashboard/props";
+
+const MainTrPage: React.FC<MaindasboardPageProps> = async ({ params, searchParams }) => {
+  const parameters = await params;
+  const searchParameters = await searchParams;
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <DashboardLayout lang="tr" params={parameters} searchParams={searchParameters} />
+    </div>
+  );
+}
+
+export default MainTrPage;