next js

2025-05-11 22:50:55 +03:00 · 2025-05-11 22:50:55 +03:00 · 6cb23bae3a
parent 791fcc5c60
commit 6cb23bae3a
158 changed files with 8903 additions and 206 deletions
--- a/components.json
+++ b/components.json
@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
--- a/2
+++ b/2
@ -0,0 +1,2 @@
+WEB_BASE_URL=http://localhost:3000
+API_BASE_URL=http://localhost:3000/api
--- a/fullTemplate/aLanguage.tsx
+++ b/fullTemplate/aLanguage.tsx
@ -0,0 +1,40 @@
+import { footerDefaultEn } from "@/languages/mutual/footer/english";
+import { headerDefaultEn } from "@/languages/mutual/header/english";
+import { contentDefaultEn } from "@/languages/mutual/content/english";
+
+const buildingPartsEn = {}
+
+const contentBuildingPartsTenantSomethingEn = {
+    ...contentDefaultEn,
+    title: "Building Parts Tenant Something",
+    content: "Building Parts Tenant Something Content",
+    button: "Building Parts Tenant Something Button",
+};
+const footerBuildingPartsTenantSomethingEn = {
+    ...footerDefaultEn,
+    page: "Building Parts Tenant Something Footer",
+};
+const headerBuildingPartsTenantSomethingEn = {
+    ...headerDefaultEn,
+    page: "Building Parts Tenant Something Header",
+};
+
+const menuBuildingPartsTenantSomethingEn = {
+    ...buildingPartsEn,
+    "tenant/something": "Tenant Info",
+};
+
+const buildingPartsTenantSomethingEn = {
+    header: headerBuildingPartsTenantSomethingEn,
+    menu: menuBuildingPartsTenantSomethingEn,
+    content: contentBuildingPartsTenantSomethingEn,
+    footer: footerBuildingPartsTenantSomethingEn,
+};
+
+export {
+    contentBuildingPartsTenantSomethingEn,
+    footerBuildingPartsTenantSomethingEn,
+    headerBuildingPartsTenantSomethingEn,
+    menuBuildingPartsTenantSomethingEn,
+    buildingPartsTenantSomethingEn,
+};
--- a/fullTemplate/aLayout.tsx
+++ b/fullTemplate/aLayout.tsx
@ -0,0 +1,36 @@
+'use server';
+import { FC } from "react";
+import { joinPageUrlFromLayersArray, retrieveLayersOfUrlFromParams } from "@/lib/menuGet";
+import { dynamicPagesIndex } from "@/languages/custom";
+import { dynamicPageMenuWithLayersGet, dynamicRetrieveMenuFlattenGet, langDynamicPagesGet, langGet } from "@/lib/langGet";
+import { DashboardLayoutProps, ModeTypes } from "@/validations/mutual/dashboard/props";
+
+import HeaderComponent from "@/components/custom/header/component";
+import MenuComponent from "@/components/custom/menu/component";
+import ContentComponent from "@/components/custom/content/component";
+import FooterComponent from "@/components/custom/footer/component";
+
+const DashboardLayout: FC<DashboardLayoutProps> = async ({ params, searchParams, lang }) => {
+    const layersItems = retrieveLayersOfUrlFromParams(params.page);
+    const activePageUrl = joinPageUrlFromLayersArray(layersItems.data);
+    const mode = (searchParams?.mode as ModeTypes) || 'shortList';
+
+    const menuItems = await dynamicPageMenuWithLayersGet(lang);
+    const translations = langGet(lang, langDynamicPagesGet(activePageUrl, dynamicPagesIndex));
+    const menuTranslationsFlatten = dynamicRetrieveMenuFlattenGet(menuItems);
+
+    const headerProps = { translations: translations.header, lang, activePageUrl }
+    const menuProps = { lang, activePageUrl, menuTranslationsFlatten, menuItems }
+    const contentProps = { translations: translations.content, lang, activePageUrl, mode, isMulti: true }
+
+    return (
+        <div className="flex flex-col min-w-screen">
+            <HeaderComponent {...headerProps} />
+            <MenuComponent {...menuProps} />
+            <ContentComponent {...contentProps} />
+            <FooterComponent translations={translations.footer} />
+        </div>
+    );
+}
+
+export { DashboardLayout };
--- a/fullTemplate/aRouter.tsx
+++ b/fullTemplate/aRouter.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;
--- a/fullTemplate/aSchemas.tsx
+++ b/fullTemplate/aSchemas.tsx
@ -0,0 +1,146 @@
+import { z } from "zod";
+import { LanguageTypes } from "@/validations/mutual/language/validations";
+import { buildingPartsFieldsTr } from "@/languages/custom/building/turkish";
+import { buildingPartsFieldsEn } from "@/languages/custom/building/english";
+
+interface BasicInterface {
+    uuid: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+    phoneNumber: string;
+    country: string;
+    description: string;
+    isDeleted: boolean;
+    isConfirmed: boolean;
+    createdAt: string;
+    updatedAt: string;
+}
+
+const labelTranslations = {
+    tr: buildingPartsFieldsTr,
+    en: buildingPartsFieldsEn,
+};
+
+const errorMessagesTr = {
+    firstName: "Ad alanı zorunludur",
+    lastName: "Soyad alanı zorunludur",
+    email: "E-posta alanı zorunludur",
+    phoneNumber: "Telefon numarası alanı zorunludur",
+    country: "Ülke alanı zorunludur",
+};
+
+const errorMessagesEn = {
+    firstName: "First name is required",
+    lastName: "Last name is required",
+    email: "Email is required",
+    phoneNumber: "Phone number is required",
+    country: "Country is required",
+};
+
+const errorMessages = {
+    tr: errorMessagesTr,
+    en: errorMessagesEn,
+};
+
+function getSchemaByLanguage(lang: LanguageTypes) {
+    const createSchema = z.object({
+        "Users.firstName": z
+            .string()
+            .min(1, errorMessages[lang].firstName)
+            .describe("text"),
+        "Users.lastName": z
+            .string()
+            .min(1, errorMessages[lang].lastName)
+            .describe("text"),
+        "Users.email": z
+            .string()
+            .email(errorMessages[lang].email)
+            .describe("email"),
+        "Users.phoneNumber": z
+            .string()
+            .min(12, errorMessages[lang].phoneNumber)
+            .describe("phone"),
+        "Users.country": z
+            .string()
+            .min(1, errorMessages[lang].country)
+            .optional()
+            .describe("selection:country"),
+        "Users.description": z.string().optional().describe("text"),
+        "Users.isDeleted": z.boolean().optional().describe("checkbox"),
+        "Users.isConfirmed": z.boolean().optional().describe("checkbox"),
+    });
+
+    const updateSchema = z.object({
+        "Users.firstName": z
+            .string()
+            .min(1, errorMessages[lang].firstName)
+            .describe("text"),
+        "Users.lastName": z
+            .string()
+            .min(1, errorMessages[lang].lastName)
+            .describe("text"),
+        "Users.email": z
+            .string()
+            .email(errorMessages[lang].email)
+            .describe("email"),
+        "Users.phoneNumber": z
+            .string()
+            .min(12, errorMessages[lang].phoneNumber)
+            .describe("phone"),
+        "Users.country": z
+            .string()
+            .min(1, errorMessages[lang].country)
+            .optional()
+            .describe("selection:country"),
+        "Users.description": z.string().optional().describe("text"),
+        "Users.isDeleted": z.boolean().optional().describe("checkbox"),
+        "Users.isConfirmed": z.boolean().optional().describe("checkbox"),
+    });
+
+    const detailSchema = z.object({
+        "Users.uuid": z.string(),
+        "Users.firstName": z.string(),
+        "Users.lastName": z.string(),
+        "Users.email": z.string(),
+        "Users.phoneNumber": z.string(),
+        "Users.country": z.string(),
+        "Users.description": z.string().optional(),
+        "Users.isDeleted": z.boolean(),
+        "Users.isConfirmed": z.boolean(),
+        "Users.createdAt": z.string(),
+        "Users.updatedAt": z.string(),
+    });
+
+    const shortSchema = z.object({
+        "Users.uuid": z.string(),
+        "Users.firstName": z.string(),
+        "Users.lastName": z.string(),
+        "Users.email": z.string(),
+    });
+
+    const columns = Object.keys(detailSchema.shape);
+    const shortColumns = Object.keys(shortSchema.shape);
+
+    const setColumns = columns.map((column) => {
+        return labelTranslations[lang][
+            column as keyof (typeof labelTranslations)[typeof lang]
+        ];
+    });
+    const setShortColumns = shortColumns.map((column) => {
+        return labelTranslations[lang][
+            column as keyof (typeof labelTranslations)[typeof lang]
+        ];
+    });
+    return {
+        createSchema,
+        updateSchema,
+        detailSchema,
+        shortSchema,
+        labels: labelTranslations[lang],
+        columns: setColumns,
+        shortColumns: setShortColumns,
+    };
+}
+
+export { getSchemaByLanguage };
--- a/fullTemplate/amultiPage.tsx
+++ b/fullTemplate/amultiPage.tsx
@ -0,0 +1,78 @@
+'use client';
+import React, { useState } from "react";
+import Link from "next/link";
+import { EyeIcon, PencilIcon, PlusCircle, ArrowLeftFromLineIcon, ExpandIcon } from "lucide-react";
+
+import { ContentProps } from "@/validations/mutual/dashboard/props";
+import { getSchemaByLanguage } from "@/schemas/custom/building/parts/tenantSomething/schemas";
+
+import TableComponent from "@/components/mutual/tableView/FullTableComp/component";
+import CreateForm from "@/components/mutual/tableView/mutual/CreateForm";
+import UpdateForm from "@/components/mutual/tableView/mutual/UpdateForm";
+import ViewForm from "@/components/mutual/tableView/mutual/ViewForm";
+import { API_BASE_URL } from "@/config/config";
+
+// This is a mock page dont use it
+const aPage: React.FC<ContentProps> = ({ lang, translations, activePageUrl, mode }) => {
+    const [selectedRow, setSelectedRow] = useState<any>(null);
+
+    const getSchema = getSchemaByLanguage(lang)
+    const isList = mode === 'shortList' || mode === 'fullList'
+    const basePageUrl = `/${lang}/${activePageUrl}?mode=`
+    const pageUrl = `${basePageUrl}shortList`
+    const urls = { list: `${API_BASE_URL}/tst` }
+    const initPaginationDefault = { page: 1, size: 10, orderFields: [], orderTypes: [], query: {} }
+    const renderLastRowComponent = (reDirectUrl: string, IconToWrap: any, key: string) => {
+        return <Link key={key} className="flex items-center gap-2" replace href={reDirectUrl} ><IconToWrap /></Link>
+    }
+    const RenderBackToList = <div onClick={() => setSelectedRow(null)}>{renderLastRowComponent(pageUrl, ArrowLeftFromLineIcon, "backToList")}</div>
+    const redirectUrls = {
+        table: {
+            update: renderLastRowComponent(`${basePageUrl}update`, PencilIcon, "update"),
+            view: renderLastRowComponent(`${basePageUrl}view`, EyeIcon, "view"),
+        },
+        page: {
+            create: renderLastRowComponent(`${basePageUrl}create`, PlusCircle, "create"),
+            size: <Link key="size-table" href={mode === 'shortList' ? `${basePageUrl}fullList` : `${basePageUrl}shortList`}><ExpandIcon /></Link>,
+        }
+    }
+    const listWithTableProps = {
+        urls: urls,
+        translations: translations,
+        redirectUrls: redirectUrls,
+        initPagination: initPaginationDefault,
+        setSelectedRow: setSelectedRow,
+    }
+    const CreateFormProps = {
+        schemas: { create: getSchema.createSchema },
+        labels: getSchema.labels,
+        selectedRow: selectedRow,
+    }
+    const UpdateFormProps = {
+        rollbackTo: pageUrl,
+        schemas: { update: getSchema.updateSchema },
+        labels: getSchema.labels,
+        selectedRow: selectedRow,
+    }
+    const ViewFormProps = {
+        rollbackTo: pageUrl,
+        schemas: { view: getSchema.detailSchema },
+        selectedRow: selectedRow,
+        labels: getSchema.labels,
+    }
+    const shortAddProps = { ...listWithTableProps, schemas: { table: getSchema.shortSchema }, columns: { table: getSchema.shortColumns } }
+    const fullAddProps = { ...listWithTableProps, schemas: { table: getSchema.detailSchema }, columns: { table: getSchema.columns } }
+    return (
+        <div>
+            {/* {JSON.stringify(getSchema)} */}
+            {!isList && RenderBackToList}
+            {isList && mode === 'shortList' && <><TableComponent {...shortAddProps} /></>}
+            {isList && mode === 'fullList' && <><TableComponent {...fullAddProps} /></>}
+            {mode === 'create' && <CreateForm {...CreateFormProps} />}
+            {mode === 'update' && <UpdateForm {...UpdateFormProps} />}
+            {mode === 'view' && <ViewForm {...ViewFormProps} />}
+        </div>
+    );
+}
+
+export default aPage
--- a/next.config.ts
+++ b/next.config.ts
@ -1,7 +1,9 @@
 import type { NextConfig } from "next";

 const nextConfig: NextConfig = {
-  /* config options here */
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
 };

 export default nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -9,19 +9,59 @@
    "lint": "next lint"
  },
  "dependencies": {
+    "@hookform/resolvers": "^5.0.1",
+    "@radix-ui/react-accordion": "^1.2.10",
+    "@radix-ui/react-alert-dialog": "^1.1.13",
+    "@radix-ui/react-aspect-ratio": "^1.1.6",
+    "@radix-ui/react-avatar": "^1.1.9",
+    "@radix-ui/react-checkbox": "^1.3.1",
+    "@radix-ui/react-collapsible": "^1.1.10",
+    "@radix-ui/react-context-menu": "^2.2.14",
+    "@radix-ui/react-dialog": "^1.1.13",
+    "@radix-ui/react-dropdown-menu": "^2.1.14",
+    "@radix-ui/react-hover-card": "^1.1.13",
+    "@radix-ui/react-label": "^2.1.6",
+    "@radix-ui/react-menubar": "^1.1.14",
+    "@radix-ui/react-navigation-menu": "^1.2.12",
+    "@radix-ui/react-popover": "^1.1.13",
+    "@radix-ui/react-progress": "^1.1.6",
+    "@radix-ui/react-radio-group": "^1.3.6",
+    "@radix-ui/react-scroll-area": "^1.2.8",
+    "@radix-ui/react-select": "^2.2.4",
+    "@radix-ui/react-separator": "^1.1.6",
+    "@radix-ui/react-slider": "^1.3.4",
+    "@radix-ui/react-slot": "^1.2.2",
+    "@radix-ui/react-switch": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.11",
+    "@radix-ui/react-toggle": "^1.1.8",
+    "@radix-ui/react-tooltip": "^1.2.6",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "flatpickr": "^4.6.13",
+    "lucide-react": "^0.487.0",
+    "next": "^15.2.4",
+    "next-crypto": "^1.0.8",
+    "next-themes": "^0.4.6",
    "react": "^19.0.0",
+    "react-day-picker": "^8.10.1",
    "react-dom": "^19.0.0",
-    "next": "15.3.2"
+    "react-hook-form": "^7.56.2",
+    "sonner": "^2.0.3",
+    "tailwind-merge": "^3.2.0",
+    "zod": "^3.24.4"
  },
  "devDependencies": {
-    "typescript": "^5",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4.1.5",
+    "@types/node": "^20.17.43",
+    "@types/react": "^19.1.3",
+    "@types/react-dom": "^19.1.3",
    "eslint": "^9",
    "eslint-config-next": "15.3.2",
-    "@eslint/eslintrc": "^3"
+    "tailwindcss": "^4.1.5",
+    "tw-animate-css": "^1.2.9",
+    "typescript": "^5.8.3"
  }
 }
--- a/src/app/api/menu/route.ts
+++ b/src/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,
+  });
+}
--- a/src/app/api/pages/route.ts
+++ b/src/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,
+  });
+}
--- a/src/app/api/tst/[...id]/route.ts
+++ b/src/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,
+    },
+  });
+}
--- a/src/app/api/tst/route.ts
+++ b/src/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,
+      },
+    },
+  });
+}
--- a/src/app/en/[...page]/page.tsx
+++ b/src/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;
--- a/src/app/en/page.tsx
+++ b/src/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;
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -1,26 +1,122 @@
@import "tailwindcss";
+@import "tw-animate-css";

-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@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);
 }

-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+: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;
  }
 }
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}
--- a/src/app/test/list/page.tsx
+++ b/src/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;
--- a/src/app/test/list2/page.tsx
+++ b/src/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;
--- a/src/app/test/page.tsx
+++ b/src/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;
--- a/src/app/tr/[...page]/page.tsx
+++ b/src/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;
--- a/src/components/custom/content/PageToBeChildrendMulti.tsx
+++ b/src/components/custom/content/PageToBeChildrendMulti.tsx
@ -0,0 +1,11 @@
+import { ContentProps } from "@/validations/mutual/dashboard/props";
+import { resolveWhichPageToRenderMulti } from "@/pages/resolver/resolver";
+import ContentToRenderNoPage from "@/pages/mutual/noContent/page";
+
+const PageToBeChildrendMulti: React.FC<ContentProps> = async ({ lang, translations, activePageUrl, mode }) => {
+    const ApplicationToRender = await resolveWhichPageToRenderMulti({ activePageUrl })
+    if (!ApplicationToRender) return <ContentToRenderNoPage lang={lang} />
+    return <ApplicationToRender lang={lang} translations={translations} activePageUrl={activePageUrl} mode={mode} />
+}
+
+export default PageToBeChildrendMulti
--- a/src/components/custom/content/PageToBeChildrendSingle.tsx
+++ b/src/components/custom/content/PageToBeChildrendSingle.tsx
@ -0,0 +1,13 @@
+import { ContentProps } from "@/validations/mutual/dashboard/props";
+import ContentToRenderNoPage from "@/pages/mutual/noContent/page";
+import { resolveWhichPageToRenderSingle } from "@/pages/resolver/resolver";
+
+const PageToBeChildrendSingle: React.FC<ContentProps> = ({ lang, translations, activePageUrl }) => {
+    const ApplicationToRender = resolveWhichPageToRenderSingle({ activePageUrl })
+    if (ApplicationToRender) {
+        return <ApplicationToRender lang={lang} translations={translations} activePageUrl={activePageUrl} />
+    }
+    else { return <ContentToRenderNoPage lang={lang} /> }
+}
+
+export default PageToBeChildrendSingle
--- a/src/components/custom/content/component.tsx
+++ b/src/components/custom/content/component.tsx
@ -0,0 +1,19 @@
+'use server';
+import { FC, Suspense } from "react";
+import { ContentProps, ModeTypesList } from "@/validations/mutual/dashboard/props";
+import LoadingContent from "@/components/mutual/loader/component";
+import PageToBeChildrendSingle from "./PageToBeChildrendSingle";
+import PageToBeChildrendMulti from "./PageToBeChildrendMulti";
+
+const ContentComponent: FC<ContentProps> = async ({ lang, translations, activePageUrl, isMulti, mode }) => {
+    const modeFromQuery = ModeTypesList.includes(mode || '') ? mode : 'list'
+    const renderProps = { lang, translations, activePageUrl, mode: modeFromQuery }
+    const PageToBeChildrend = isMulti ? PageToBeChildrendMulti : PageToBeChildrendSingle
+    const loadingContent = <LoadingContent height="h-16" size="w-36 h-48" plane="h-full w-full" />
+    const classNameDiv = "fixed top-24 left-80 right-0 py-10 px-15 border-emerald-150 border-l-2 overflow-y-auto h-[calc(100vh-64px)]"
+    return (
+        <div className={classNameDiv}><Suspense fallback={loadingContent}><PageToBeChildrend {...renderProps} /></Suspense></div>
+    );
+};
+
+export default ContentComponent;
--- a/src/components/custom/footer/component.tsx
+++ b/src/components/custom/footer/component.tsx
@ -0,0 +1,14 @@
+'use server';
+import { FC } from "react";
+import { langGetKey } from "@/lib/langGet";
+import { FooterProps } from "@/validations/mutual/dashboard/props";
+
+const FooterComponent: FC<FooterProps> = ({ translations }) => {
+    return (
+        <div className="fixed text-center bottom-0 left-0 right-0 h-16 p-4 border-t border-emerald-150 border-t-2 shadow-sm backdrop-blur-sm bg-emerald-50">
+            <h1>{langGetKey(translations, "footer")}: {langGetKey(translations, "page")}</h1>
+        </div>
+    );
+};
+
+export default FooterComponent;
--- a/src/components/custom/header/component.tsx
+++ b/src/components/custom/header/component.tsx
@ -0,0 +1,20 @@
+'use server';
+import { FC } from "react";
+import { HeaderProps } from "@/validations/mutual/dashboard/props";
+import LanguageSelectionComponent from "@/components/mutual/languageSelection/component";
+import { langGetKey } from "@/lib/langGet";
+
+const HeaderComponent: FC<HeaderProps> = ({ translations, lang, activePageUrl }) => {
+
+    return (
+        <div className="flex justify-between h-24 items-center p-4 border-emerald-150 border-b-2 shadow-sm backdrop-blur-sm sticky top-0 z-50 bg-emerald-50">
+            <div className="flex flex-row justify-center items-center">
+                <p className="text-2xl font-bold mx-3">{langGetKey(translations, 'selectedPage')} :</p>
+                <p className="text-lg font-bold mx-3"> {langGetKey(translations, 'page')}</p>
+            </div>
+            <LanguageSelectionComponent lang={lang} activePage={activePageUrl} />
+        </div>
+    );
+};
+
+export default HeaderComponent;
--- a/src/components/custom/menu/component.tsx
+++ b/src/components/custom/menu/component.tsx
@ -0,0 +1,172 @@
+'use client';
+import { FC, useState, useEffect } from "react";
+import { MenuProps } from "@/validations/mutual/dashboard/props";
+import { langGetKey } from "@/lib/langGet";
+import { parseURlFormString } from "@/lib/menuGet";
+import FirstLayerDropdown from "./firstLayerComponent";
+import SecondLayerDropdown from "./secondLayerComponent";
+import ThirdLayerDropdown from "./thirdLayerComponent";
+
+// Define types for menu structure
+type ThirdLayerItem = Record<string, any>;
+type SecondLayerItems = Record<string, ThirdLayerItem>;
+type FirstLayerItems = Record<string, SecondLayerItems>;
+type MenuStructure = FirstLayerItems;
+
+const MenuComponent: FC<MenuProps> = ({ lang, menuItems, menuTranslationsFlatten, activePageUrl }) => {
+    // State for tracking expanded menu items
+    const [expandedFirstLayer, setExpandedFirstLayer] = useState<string | null>(null);
+    const [expandedSecondLayer, setExpandedSecondLayer] = useState<string | null>(null);
+    const [menuStructure, setMenuStructure] = useState<MenuStructure>({});
+
+    // Parse active URL to determine which menu items should be active
+    const activePathLayers = parseURlFormString(activePageUrl).data;
+    const activeFirstLayer = activePathLayers[0] || null;
+    const activeSecondLayer = activePathLayers[1] || null;
+    const activeThirdLayer = activePathLayers[2] || null;
+
+    // Initialize expanded state based on active path
+    useEffect(() => {
+        if (activeFirstLayer) {
+            setExpandedFirstLayer(activeFirstLayer);
+            if (activeSecondLayer) {
+                setExpandedSecondLayer(activeSecondLayer);
+            }
+        }
+    }, [activeFirstLayer, activeSecondLayer]);
+
+    // Process menu items into a hierarchical structure
+    useEffect(() => {
+        const processedStructure: MenuStructure = {};
+
+        Object.entries(menuItems).forEach(([path, _]: [string, any]) => {
+            const layers = parseURlFormString(path).data;
+            const firstLayer = layers[0];
+            const secondLayer = layers[1];
+            const thirdLayer = layers[2];
+
+            // Create first layer if it doesn't exist
+            if (!processedStructure[firstLayer]) {
+                processedStructure[firstLayer] = {};
+            }
+
+            // Create second layer if it doesn't exist
+            if (!processedStructure[firstLayer][secondLayer]) {
+                processedStructure[firstLayer][secondLayer] = {};
+            }
+
+            // Add third layer
+            processedStructure[firstLayer][secondLayer][thirdLayer] = {};
+        });
+
+        setMenuStructure(processedStructure);
+    }, [menuItems]);
+
+    // Handle click on first layer menu item
+    const handleFirstLayerClick = (key: string) => {
+        if (expandedFirstLayer === key) {
+            // If already expanded, collapse it
+            setExpandedFirstLayer(null);
+            setExpandedSecondLayer(null);
+        } else {
+            // Otherwise expand it
+            setExpandedFirstLayer(key);
+            setExpandedSecondLayer(null);
+        }
+    };
+
+    // Handle click on second layer menu item
+    const handleSecondLayerClick = (key: string) => {
+        if (expandedSecondLayer === key) {
+            // If already expanded, collapse it
+            setExpandedSecondLayer(null);
+        } else {
+            // Otherwise expand it
+            setExpandedSecondLayer(key);
+        }
+    };
+
+    // Render third layer menu items
+    const renderThirdLayerItems = (firstLayerKey: string, secondLayerKey: string, thirdLayerItems: ThirdLayerItem) => {
+        const baseUrl = `/${firstLayerKey}/${secondLayerKey}`;
+
+        return Object.keys(thirdLayerItems).map(thirdLayerKey => {
+            const isActive =
+                activeFirstLayer === firstLayerKey &&
+                activeSecondLayer === secondLayerKey &&
+                activeThirdLayer === thirdLayerKey;
+
+            const url = `/${lang}${baseUrl}/${thirdLayerKey}`;
+
+            return (
+                <div key={`${thirdLayerKey}-item`} className="ml-2 my-1">
+                    <ThirdLayerDropdown
+                        isActive={isActive}
+                        innerText={langGetKey(menuTranslationsFlatten, thirdLayerKey)}
+                        url={url}
+                    />
+                </div>
+            );
+        });
+    };
+
+    // Render second layer menu items
+    const renderSecondLayerItems = (firstLayerKey: string, secondLayerItems: SecondLayerItems) => {
+        return Object.entries(secondLayerItems).map(([secondLayerKey, thirdLayerItems]) => {
+            const isActive = activeFirstLayer === firstLayerKey && activeSecondLayer === secondLayerKey;
+            const isExpanded = expandedSecondLayer === secondLayerKey;
+
+            return (
+                <div key={`${secondLayerKey}-item`} className="ml-2 my-1">
+                    <SecondLayerDropdown
+                        isActive={isActive}
+                        isExpanded={isExpanded}
+                        innerText={langGetKey(menuTranslationsFlatten, secondLayerKey)}
+                        onClick={() => handleSecondLayerClick(secondLayerKey)}
+                    />
+                    {isExpanded && (
+                        <div className="ml-2 mt-1">
+                            {renderThirdLayerItems(firstLayerKey, secondLayerKey, thirdLayerItems)}
+                        </div>
+                    )}
+                </div>
+            );
+        });
+    };
+
+    // Render first layer menu items
+    const renderFirstLayerItems = () => {
+        return Object.entries(menuStructure).map(([firstLayerKey, secondLayerItems]) => {
+            const isActive = activeFirstLayer === firstLayerKey;
+            const isExpanded = expandedFirstLayer === firstLayerKey;
+
+            return (
+                <div key={`${firstLayerKey}-item`} className="mb-2">
+                    <FirstLayerDropdown
+                        isActive={isActive}
+                        isExpanded={isExpanded}
+                        innerText={langGetKey(menuTranslationsFlatten, firstLayerKey)}
+                        onClick={() => handleFirstLayerClick(firstLayerKey)}
+                    />
+                    {isExpanded && (
+                        <div className="mt-1">
+                            {renderSecondLayerItems(firstLayerKey, secondLayerItems)}
+                        </div>
+                    )}
+                </div>
+            );
+        });
+    };
+
+    return (
+        <div className="fixed top-24 p-5 left-0 right-0 w-80 border-emerald-150 border-r-2 overflow-y-auto h-[calc(100vh-6rem)]">
+            <div className="flex flex-col">
+                {renderFirstLayerItems()}
+            </div>
+        </div>
+    );
+};
+
+
+
+export default MenuComponent;
--- a/src/components/custom/menu/firstLayerComponent.tsx
+++ b/src/components/custom/menu/firstLayerComponent.tsx
@ -0,0 +1,41 @@
+'use client';
+import { FC } from "react";
+
+interface FirstLayerDropdownProps {
+    isActive: boolean;
+    isExpanded: boolean;
+    innerText: string;
+    onClick: () => void;
+}
+
+const FirstLayerDropdown: FC<FirstLayerDropdownProps> = ({ isActive, isExpanded, innerText, onClick }) => {
+    // Base styles
+    const baseClassName = "py-3 px-4 text-sm rounded-xl cursor-pointer transition-colors duration-200 flex justify-between items-center w-full";
+    
+    // Determine the appropriate class based on active and expanded states
+    let className = baseClassName;
+    if (isActive) {
+        className += " bg-emerald-700 text-white font-medium";
+    } else if (isExpanded) {
+        className += " bg-emerald-600 text-white";
+    } else {
+        className += " bg-emerald-800 text-white hover:bg-emerald-700";
+    }
+
+    return (
+        <div onClick={onClick} className={className}>
+            <span>{innerText}</span>
+            {isExpanded ? (
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
+                </svg>
+            ) : (
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+            )}
+        </div>
+    );
+};
+
+export default FirstLayerDropdown;
--- a/src/components/custom/menu/secondLayerComponent.tsx
+++ b/src/components/custom/menu/secondLayerComponent.tsx
@ -0,0 +1,41 @@
+'use client';
+import { FC } from "react";
+
+interface SecondLayerDropdownProps {
+    isActive: boolean;
+    isExpanded: boolean;
+    innerText: string;
+    onClick: () => void;
+}
+
+const SecondLayerDropdown: FC<SecondLayerDropdownProps> = ({ isActive, isExpanded, innerText, onClick }) => {
+    // Base styles
+    const baseClassName = "py-2 my-1 px-3 text-sm rounded-lg cursor-pointer transition-colors duration-200 flex justify-between items-center w-full";
+    
+    // Determine the appropriate class based on active and expanded states
+    let className = baseClassName;
+    if (isActive) {
+        className += " bg-emerald-600 text-white font-medium";
+    } else if (isExpanded) {
+        className += " bg-emerald-500 text-white";
+    } else {
+        className += " bg-emerald-700 text-white hover:bg-emerald-600";
+    }
+
+    return (
+        <div onClick={onClick} className={className}>
+            <span>{innerText}</span>
+            {isExpanded ? (
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
+                </svg>
+            ) : (
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+            )}
+        </div>
+    );
+};
+
+export default SecondLayerDropdown;
--- a/src/components/custom/menu/thirdLayerComponent.tsx
+++ b/src/components/custom/menu/thirdLayerComponent.tsx
@ -0,0 +1,50 @@
+'use client'
+import { FC, useState } from "react";
+import Link from "next/link";
+import LoadingContent from "@/components/mutual/loader/component";
+
+interface ThirdLayerDropdownProps {
+    isActive: boolean,
+    innerText: string,
+    url: string,
+}
+
+const ThirdLayerDropdown: FC<ThirdLayerDropdownProps> = ({ isActive, innerText, url }) => {
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+
+    // Base styles
+    const baseClassName = "py-2 my-1 px-3 text-sm rounded-lg bg-black transition-colors duration-200 flex items-center w-full";
+
+    // Determine the appropriate class based on active state
+    let className = baseClassName;
+    if (isActive) {
+        className += " bg-emerald-500 text-white font-medium";
+    } else {
+        className += " bg-emerald-600 text-white hover:bg-emerald-500";
+    }
+
+    if (isActive) {
+        return (
+            <div className={`${className} cursor-not-allowed`}>
+                <span className="ml-2">{innerText}</span>
+            </div>
+        );
+    } else if (isLoading) {
+        return (
+            <div className={className}>
+                <LoadingContent height="h-5" size="w-5 h-5" plane="" />
+                <span className="ml-2">{innerText}</span>
+            </div>
+        );
+    } else {
+        return (
+            <Link href={url} onClick={() => setIsLoading(true)} className="block">
+                <div className={className}>
+                    <span className="ml-2">{innerText}</span>
+                </div>
+            </Link>
+        );
+    }
+};
+
+export default ThirdLayerDropdown;
--- a/src/components/custom/menu/type.ts
+++ b/src/components/custom/menu/type.ts
@ -0,0 +1,5 @@
+interface IntrerfaceLayerDropdown {
+    isActive: boolean;
+    innerText: string;
+    onClick: () => void;
+}
--- a/src/components/mutual/languageSelection/component.tsx
+++ b/src/components/mutual/languageSelection/component.tsx
@ -0,0 +1,40 @@
+'use server';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } from "@/components/mutual/shadcnui/dropdown-menu";
+import { Button } from "@/components/mutual/shadcnui/button";
+import { languageSelectionTranslation } from "@/languages/mutual/languageSelection";
+import { langGetKey, langGet } from "@/lib/langGet";
+import { LanguageTypes } from "@/validations/mutual/language/validations";
+
+import LanguageSelectionItem from "./languageItem";
+
+const LanguageSelectionComponent: React.FC<{ lang: LanguageTypes, activePage: string }> = ({ lang, activePage }) => {
+    const translations = langGet(lang, languageSelectionTranslation);
+    const getPageWithLocale = (locale: LanguageTypes): string => { return `/${locale}/${activePage}` }
+
+    const englishButtonProps = {
+        activeLang: lang,
+        buttonsLang: "en",
+        refUrl: getPageWithLocale("en"),
+        innerText: langGetKey(translations, "english")
+    }
+    const turkishButtonProps = {
+        activeLang: lang,
+        buttonsLang: "tr",
+        refUrl: getPageWithLocale("tr"),
+        innerText: langGetKey(translations, "turkish")
+    }
+
+    return (
+        <div className="flex items-end justify-end">
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button className="w-48 h-12 text-center text-md">{langGetKey(translations, "title")}</Button>
+                </DropdownMenuTrigger>
+                <LanguageSelectionItem {...englishButtonProps} />
+                <LanguageSelectionItem {...turkishButtonProps} />
+            </DropdownMenu>
+        </div>
+    );
+};
+
+export default LanguageSelectionComponent;
--- a/src/components/mutual/languageSelection/languageItem.tsx
+++ b/src/components/mutual/languageSelection/languageItem.tsx
@ -0,0 +1,38 @@
+'use client';
+import { useState, FC } from "react";
+import { DropdownMenuContent, DropdownMenuLabel } from "@/components/mutual/shadcnui/dropdown-menu";
+import Link from "next/link";
+import LoadingContent from "@/components/mutual/loader/component";
+
+const RenderLinkComponent: FC<{ refUrl: string, innerText: string, setisL: (isLoading: boolean) => void }> = ({ refUrl, innerText, setisL }) => {
+    return (
+        <Link replace href={refUrl} onClick={() => setisL(true)}>
+            <DropdownMenuContent className="flex w-48 h-12 align-center justify-center text-center text-md overflow-y-hidden">
+                <DropdownMenuLabel className="flex items-center justify-center">{innerText}</DropdownMenuLabel>
+            </DropdownMenuContent>
+        </Link>
+    )
+}
+
+const RenderLoadingComponent: FC<{ setisL: (isLoading: boolean) => void }> = ({ setisL }) => {
+    return (
+        <DropdownMenuContent className="flex w-48 h-12 align-center justify-center text-center text-md overflow-y-hidden">
+            <DropdownMenuLabel className="flex items-center justify-center">
+                <LoadingContent height="h-8" size="w-8 h-8" plane="" />
+            </DropdownMenuLabel>
+        </DropdownMenuContent>
+    )
+}
+
+const LanguageSelectionItem: React.FC<{
+    activeLang: string, buttonsLang: string, refUrl: string, innerText: string
+}> = ({ activeLang, buttonsLang, refUrl, innerText }) => {
+    const [isL, setisL] = useState<boolean>(false);
+    const isC = buttonsLang !== activeLang
+    const RenderLinkProp = { refUrl, innerText, setisL }
+    return (
+        <>{isC && <>{isL ? <RenderLoadingComponent setisL={setisL} /> : <RenderLinkComponent {...RenderLinkProp} />}</>}</>
+    )
+}
+
+export default LanguageSelectionItem
--- a/src/components/mutual/loader/component.tsx
+++ b/src/components/mutual/loader/component.tsx
@ -0,0 +1,10 @@
+import { Loader2 } from "lucide-react";
+
+const LoadingContent: React.FC<{ height: string, size: string, plane: string }> = ({ height = "h-16", size = "w-36 h-48", plane = "h-full w-full" }) => {
+    return <>
+        <div className={`flex items-center justify-center ${plane}`}>
+            <div className={height}><Loader2 className={`animate-spin ${size}`} /></div>
+        </div></>
+}
+
+export default LoadingContent
--- a/src/components/mutual/shadcnui/accordion.tsx
+++ b/src/components/mutual/shadcnui/accordion.tsx
@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
--- a/src/components/mutual/shadcnui/alert-dialog.tsx
+++ b/src/components/mutual/shadcnui/alert-dialog.tsx
@ -0,0 +1,157 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/mutual/shadcnui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
--- a/src/components/mutual/shadcnui/alert.tsx
+++ b/src/components/mutual/shadcnui/alert.tsx
@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }
--- a/src/components/mutual/shadcnui/aspect-ratio.tsx
+++ b/src/components/mutual/shadcnui/aspect-ratio.tsx
@ -0,0 +1,11 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+}
+
+export { AspectRatio }
--- a/src/components/mutual/shadcnui/avatar.tsx
+++ b/src/components/mutual/shadcnui/avatar.tsx
@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }
--- a/src/components/mutual/shadcnui/badge.tsx
+++ b/src/components/mutual/shadcnui/badge.tsx
@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
--- a/src/components/mutual/shadcnui/button.tsx
+++ b/src/components/mutual/shadcnui/button.tsx
@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
--- a/src/components/mutual/shadcnui/calendar.tsx
+++ b/src/components/mutual/shadcnui/calendar.tsx
@ -0,0 +1,75 @@
+"use client"
+
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/mutual/shadcnui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: React.ComponentProps<typeof DayPicker>) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row gap-2",
+        month: "flex flex-col gap-4",
+        caption: "flex justify-center pt-1 relative items-center w-full",
+        caption_label: "text-sm font-medium",
+        nav: "flex items-center gap-1",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-x-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range"
+            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            : "[&:has([aria-selected])]:rounded-md"
+        ),
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "size-8 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_start:
+          "day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
+        day_range_end:
+          "day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground aria-selected:text-muted-foreground",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ className, ...props }) => (
+          <ChevronLeft className={cn("size-4", className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }) => (
+          <ChevronRight className={cn("size-4", className)} {...props} />
+        ),
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Calendar }
--- a/src/components/mutual/shadcnui/card.tsx
+++ b/src/components/mutual/shadcnui/card.tsx
@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
--- a/src/components/mutual/shadcnui/checkbox.tsx
+++ b/src/components/mutual/shadcnui/checkbox.tsx
@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
--- a/src/components/mutual/shadcnui/collapsible.tsx
+++ b/src/components/mutual/shadcnui/collapsible.tsx
@ -0,0 +1,33 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
--- a/src/components/mutual/shadcnui/command.tsx
+++ b/src/components/mutual/shadcnui/command.tsx
@ -0,0 +1,177 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/mutual/shadcnui/dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
--- a/src/components/mutual/shadcnui/context-menu.tsx
+++ b/src/components/mutual/shadcnui/context-menu.tsx
@ -0,0 +1,252 @@
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+  )
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  )
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  )
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}
--- a/src/components/mutual/shadcnui/dialog.tsx
+++ b/src/components/mutual/shadcnui/dialog.tsx
@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
--- a/src/components/mutual/shadcnui/dropdown-menu.tsx
+++ b/src/components/mutual/shadcnui/dropdown-menu.tsx
@ -0,0 +1,257 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
--- a/src/components/mutual/shadcnui/form.tsx
+++ b/src/components/mutual/shadcnui/form.tsx
@ -0,0 +1,167 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/mutual/shadcnui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
--- a/src/components/mutual/shadcnui/hover-card.tsx
+++ b/src/components/mutual/shadcnui/hover-card.tsx
@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
--- a/src/components/mutual/shadcnui/input.tsx
+++ b/src/components/mutual/shadcnui/input.tsx
@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
--- a/src/components/mutual/shadcnui/label.tsx
+++ b/src/components/mutual/shadcnui/label.tsx
@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
--- a/src/components/mutual/shadcnui/menubar.tsx
+++ b/src/components/mutual/shadcnui/menubar.tsx
@ -0,0 +1,276 @@
+"use client"
+
+import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Menubar({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn(
+        "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return (
+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+  )
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </MenubarPortal>
+  )
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <MenubarPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  )
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto h-4 w-4" />
+    </MenubarPrimitive.SubTrigger>
+  )
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+}
--- a/src/components/mutual/shadcnui/navigation-menu.tsx
+++ b/src/components/mutual/shadcnui/navigation-menu.tsx
@ -0,0 +1,168 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon
+        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
+        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={cn(
+        "absolute top-full left-0 isolate z-50 flex justify-center"
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+        className
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+}
--- a/src/components/mutual/shadcnui/popover.tsx
+++ b/src/components/mutual/shadcnui/popover.tsx
@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
--- a/src/components/mutual/shadcnui/progress.tsx
+++ b/src/components/mutual/shadcnui/progress.tsx
@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }
--- a/src/components/mutual/shadcnui/radio-group.tsx
+++ b/src/components/mutual/shadcnui/radio-group.tsx
@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }
--- a/src/components/mutual/shadcnui/scroll-area.tsx
+++ b/src/components/mutual/shadcnui/scroll-area.tsx
@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
--- a/src/components/mutual/shadcnui/select.tsx
+++ b/src/components/mutual/shadcnui/select.tsx
@ -0,0 +1,185 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
--- a/src/components/mutual/shadcnui/separator.tsx
+++ b/src/components/mutual/shadcnui/separator.tsx
@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator-root"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
--- a/src/components/mutual/shadcnui/sheet.tsx
+++ b/src/components/mutual/shadcnui/sheet.tsx
@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
--- a/src/components/mutual/shadcnui/skeleton.tsx
+++ b/src/components/mutual/shadcnui/skeleton.tsx
@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
--- a/src/components/mutual/shadcnui/slider.tsx
+++ b/src/components/mutual/shadcnui/slider.tsx
@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }
--- a/src/components/mutual/shadcnui/sonner.tsx
+++ b/src/components/mutual/shadcnui/sonner.tsx
@ -0,0 +1,25 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
--- a/src/components/mutual/shadcnui/switch.tsx
+++ b/src/components/mutual/shadcnui/switch.tsx
@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }
--- a/src/components/mutual/shadcnui/table.tsx
+++ b/src/components/mutual/shadcnui/table.tsx
@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
--- a/src/components/mutual/shadcnui/tabs.tsx
+++ b/src/components/mutual/shadcnui/tabs.tsx
@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
--- a/src/components/mutual/shadcnui/textarea.tsx
+++ b/src/components/mutual/shadcnui/textarea.tsx
@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
--- a/src/components/mutual/shadcnui/toggle.tsx
+++ b/src/components/mutual/shadcnui/toggle.tsx
@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }
--- a/src/components/mutual/shadcnui/tooltip.tsx
+++ b/src/components/mutual/shadcnui/tooltip.tsx
@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
--- a/src/components/mutual/tableView/FullCardTableComp/component.tsx
+++ b/src/components/mutual/tableView/FullCardTableComp/component.tsx
@ -0,0 +1,88 @@
+'use client';
+import React, { useState, useEffect } from "react";
+import { apiPostFetcher } from "@/lib/fetcher";
+import { ApiPaginationRequestWithQuery } from "@/validations/mutual/api/requests/validations";
+import { TableComponentProps } from "@/validations/mutual/table/type";
+import ComponentTable from "../mutual/TableCardPlain";
+import PaginationComponent from "../mutual/UpperPagination";
+import LowerPagination from "../mutual/LowerPagination";
+
+const TableCardComponent: React.FC<TableComponentProps> = ({
+    urls,
+    schemas,
+    translations,
+    columns,
+    initPagination,
+}) => {
+    const defaultPagination = {
+        page: initPagination?.page || 1,
+        size: initPagination?.size || 10,
+        orderFields: initPagination?.orderFields || [],
+        orderTypes: initPagination?.orderTypes || [],
+        query: initPagination?.query || {},
+    }
+    const [data, setData] = useState<any>(null);
+    const [pagination, setPagination] = useState<ApiPaginationRequestWithQuery>(defaultPagination);
+    const [apiPagination, setApiPagination] = useState<any>({
+        onPage: 1,
+        onPageCount: 10,
+        totalPage: 1,
+        totalCount: 1,
+        next: false,
+        back: false,
+    });
+    const handleBack = async () => {
+        setPagination({ ...pagination, page: pagination.page > 1 ? pagination.page - 1 : pagination.page });
+        await fetchData();
+    }
+    const handleNext = async () => {
+        setPagination({ ...pagination, page: pagination.page < apiPagination.totalPage ? pagination.page + 1 : pagination.page });
+        await fetchData();
+    }
+    const fetchData = async () => {
+        const response = await apiPostFetcher({
+            url: urls.list,
+            isNoCache: true,
+            body: {
+                page: pagination.page,
+                size: pagination.size,
+                orderFields: pagination.orderFields,
+                orderTypes: pagination.orderTypes,
+                query: pagination.query,
+            },
+        });
+        if (response && response.data) {
+            setData(response.data.data);
+            if (response.data.pagination) {
+                setApiPagination(response.data.pagination);
+            }
+        }
+    };
+    useEffect(() => { fetchData() }, [pagination.page, pagination.size, pagination.orderFields, pagination.orderTypes]);
+    const upperPaginationProps = {
+        apiPagination,
+        pagination,
+        setPagination,
+        defaultPagination,
+    }
+    const lowerPaginationProps = {
+        pagination: apiPagination,
+        handleBack,
+        handleNext,
+    }
+    const tableProps = {
+        data,
+        columns,
+        translations,
+    }
+
+    return (
+        <div>
+            <div className="flex flex-col items-center justify-start my-6"><PaginationComponent {...upperPaginationProps} /></div>
+            <div className="flex flex-col items-center justify-start my-6"><LowerPagination {...lowerPaginationProps} /></div>
+            <div className="flex flex-col items-center justify-start my-6"><h1>Post Data Page</h1><ComponentTable {...tableProps} /></div>
+        </div>
+    );
+}
+
+export default TableCardComponent;
--- a/src/components/mutual/tableView/FullTableComp/component.tsx
+++ b/src/components/mutual/tableView/FullTableComp/component.tsx
@ -0,0 +1,104 @@
+'use client';
+import React, { useState, useEffect } from "react";
+import ComponentTable from "@/components/mutual/tableView/mutual/TablePlain";
+import PaginationComponent from "@/components/mutual/tableView/mutual/UpperPagination";
+import LowerPagination from "@/components/mutual/tableView/mutual/LowerPagination";
+import { apiPostFetcher } from "@/lib/fetcher";
+import { ApiPaginationRequestWithQuery } from "@/validations/mutual/api/requests/validations";
+import { TableComponentProps } from "@/validations/mutual/table/type";
+
+const TableComponent: React.FC<TableComponentProps> = ({
+    urls,
+    schemas,
+    translations,
+    columns,
+    initPagination,
+    redirectUrls,
+    setSelectedRow,
+}) => {
+    const defaultPagination = {
+        page: initPagination?.page || 1,
+        size: initPagination?.size || 10,
+        orderFields: initPagination?.orderFields || [],
+        orderTypes: initPagination?.orderTypes || [],
+        query: initPagination?.query || {},
+    }
+    const [tableData, setTableData] = useState<any>(null);
+    const [orgTableData, setOrgTableData] = useState<any>(null);
+    const [tableColumns, setTableColumns] = useState<string[]>([]);
+    const [pagination, setPagination] = useState<ApiPaginationRequestWithQuery>(defaultPagination);
+    const [apiPagination, setApiPagination] = useState<any>({
+        onPage: 1,
+        onPageCount: 10,
+        totalPage: 1,
+        totalCount: 1,
+        next: false,
+        back: false,
+    });
+
+    const handleBack = async () => {
+        setPagination({ ...pagination, page: pagination.page > 1 ? pagination.page - 1 : pagination.page });
+        await fetchData();
+    }
+    const handleNext = async () => {
+        setPagination({ ...pagination, page: pagination.page < apiPagination.totalPage ? pagination.page + 1 : pagination.page });
+        await fetchData();
+    }
+    const fetchData = async () => {
+        const response = await apiPostFetcher({
+            url: urls.list,
+            isNoCache: true,
+            body: {
+                page: pagination.page,
+                size: pagination.size,
+                orderFields: pagination.orderFields,
+                orderTypes: pagination.orderTypes,
+                query: pagination.query,
+            },
+        });
+        if (response && response.data) {
+            const oldData = response.data.data
+            setOrgTableData(oldData)
+            if (schemas.table) {
+                const newData = Object.entries(oldData).map(([key]) => {
+                    return schemas.table.safeParse(oldData[key as keyof typeof oldData]).data
+                })
+                setTableData(newData)
+                setTableColumns(columns.table)
+            }
+            if (response.data.pagination) {
+                setApiPagination(response.data.pagination);
+            }
+        }
+    };
+    useEffect(() => { fetchData() }, [pagination.page, pagination.size, pagination.orderFields, pagination.orderTypes]);
+
+    const upperPaginationProps = {
+        apiPagination,
+        pagination,
+        setPagination,
+        defaultPagination,
+    }
+    const lowerPaginationProps = {
+        pagination: apiPagination,
+        handleBack,
+        handleNext,
+    }
+    const tableProps = {
+        data: tableData,
+        orgData: orgTableData,
+        columns: tableColumns,
+        translations,
+        redirectUrls,
+        setSelectedRow,
+    }
+    return (
+        <div>
+            <div className="flex flex-col items-center justify-start my-6"><PaginationComponent {...upperPaginationProps} /></div>
+            <div className="flex flex-col items-center justify-start my-6"><LowerPagination {...lowerPaginationProps} /></div>
+            <div className="flex flex-col items-center justify-start my-6"><ComponentTable {...tableProps} /></div>
+        </div>
+    );
+}
+
+export default TableComponent;
--- a/src/components/mutual/tableView/mutual/CreateForm.tsx
+++ b/src/components/mutual/tableView/mutual/CreateForm.tsx
@ -0,0 +1,40 @@
+import React from "react";
+import { CreateFormProps } from "@/validations/mutual/forms/type";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Form } from "@/components/mutual/shadcnui/form";
+import { renderInputsBySchema } from "@/lib/renderInputs";
+import { Button } from "@/components/mutual/shadcnui/button";
+
+const CreateForm: React.FC<CreateFormProps> = ({ schemas, labels, selectedRow }) => {
+    const createSchema = schemas.create
+    const findLabels = Object.entries(createSchema?.shape || {}).reduce((acc: any, [key, value]: any) => {
+        acc[key] = {
+            label: labels[key] || key,
+            description: value.description,
+        }
+        return acc
+    }, {})
+    const handleSubmit = (data: any) => {
+        console.log(data)
+    }
+    const form = useForm<FormData>({
+        resolver: zodResolver(createSchema),
+        defaultValues: {},
+    });
+
+    return (
+        <div>
+            <div>Create Form</div>
+            <Form {...form}>
+                <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
+                    {renderInputsBySchema(findLabels, form)}
+                    <Button type="submit">Submit</Button>
+                </form>
+            </Form>
+            <div>selectedRow: {JSON.stringify(selectedRow)}</div>
+        </div>
+    )
+}
+
+export default CreateForm
--- a/src/components/mutual/tableView/mutual/LowerPagination.tsx
+++ b/src/components/mutual/tableView/mutual/LowerPagination.tsx
@ -0,0 +1,24 @@
+'use client'
+import { Button } from "@/components/mutual/shadcnui/button";
+import { LowerPaginationProps } from "@/validations/mutual/pagination/type";
+
+const LowerPagination: React.FC<LowerPaginationProps> = ({
+    pagination,
+    handleBack,
+    handleNext,
+}) => {
+    const paginationBackComponent = pagination.back ? (
+        <Button className="w-60" onClick={() => handleBack()}>Back</Button>
+    ) : <></>;
+    const paginationNextComponent = pagination.next ? (
+        <Button className="w-60" onClick={() => handleNext()}>Next</Button>
+    ) : <></>;
+    return (
+        <div className="flex items-center justify-center gap-2 bg-amber-300 p-6 w-full">
+            {paginationBackComponent}
+            {paginationNextComponent}
+        </div>
+    )
+}
+
+export default LowerPagination
--- a/src/components/mutual/tableView/mutual/PaginationDetails.tsx
+++ b/src/components/mutual/tableView/mutual/PaginationDetails.tsx
@ -0,0 +1,34 @@
+import { Input } from "@/components/mutual/shadcnui/input";
+import { Label } from "@/components/mutual/shadcnui/label";
+import { PaginationDetailsProps } from "@/validations/mutual/pagination/type";
+
+const PaginationDetails: React.FC<PaginationDetailsProps> = ({
+    pagination,
+    setPagination,
+    defaultPagination,
+}) => {
+    return (
+        <div className="grid grid-cols-6 gap-2 items-center justify-evenly">
+            <Label>Page Size</Label>
+            <Input
+                type="number"
+                value={pagination.size}
+                onChange={(e) => setPagination({ ...defaultPagination, size: Number(e.target.value) })}
+            />
+            <Label>Order Field</Label>
+            <Input
+                type="text"
+                value={pagination.orderFields.join(",")}
+                onChange={(e) => setPagination({ ...defaultPagination, orderFields: e.target.value.split(",") })}
+            />
+            <Label>Order Type</Label>
+            <Input
+                type="text"
+                value={pagination.orderTypes.join(",")}
+                onChange={(e) => setPagination({ ...pagination, orderType: e.target.value.split(",") })}
+            />
+        </div>
+    )
+}
+
+export default PaginationDetails
--- a/src/components/mutual/tableView/mutual/PaginationShow.tsx
+++ b/src/components/mutual/tableView/mutual/PaginationShow.tsx
@ -0,0 +1,15 @@
+import { PaginationShowProps } from "@/validations/mutual/pagination/type"
+
+const PaginationShow: React.FC<PaginationShowProps> = ({ apiPagination }) => {
+    return (
+        <div className="grid grid-cols-6 gap-2 items-center justify-evenly">
+            <p>Page: {apiPagination.onPage}</p>
+            <p>Page Count: {apiPagination.onPageCount}</p>
+            <p>Total Page: {apiPagination.totalPage}</p>
+            <p>Total Count: {apiPagination.totalCount}</p>
+            <p>Next: {apiPagination.next ? "true" : "false"}</p>
+            <p>Back: {apiPagination.back ? "true" : "false"}</p>
+        </div>
+    )
+}
+export default PaginationShow
--- a/src/components/mutual/tableView/mutual/Search.tsx
+++ b/src/components/mutual/tableView/mutual/Search.tsx
@ -0,0 +1,24 @@
+import { Label } from "@/components/mutual/shadcnui/label";
+import { Textarea } from "@/components/mutual/shadcnui/textarea";
+import { SearchProps } from "@/validations/mutual/table/type";
+
+const SearchBarComponent: React.FC<SearchProps> = ({ pagination, setPagination }) => {
+    const handleSearch = (query: string) => {
+        setTimeout(() => {
+            setPagination({ ...pagination, query: {} })
+        }, 2000)
+    }
+    return (
+        <div>
+            <div className="grid grid-cols-1 w-full px-10 py-2">
+                <Label>Search</Label>
+                <Textarea
+                    value={JSON.stringify(pagination.query, null, 2)}
+                    onChange={(e) => handleSearch(e.target.value)}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default SearchBarComponent
--- a/src/components/mutual/tableView/mutual/TableCardPlain.tsx
+++ b/src/components/mutual/tableView/mutual/TableCardPlain.tsx
@ -0,0 +1,47 @@
+'use client'
+import { Card, CardHeader, CardContent, CardTitle, CardDescription } from "@/components/mutual/shadcnui/card";
+import { TableCardProps } from "@/validations/mutual/table/type";
+import { useEffect, useState } from "react";
+
+const ComponentTableCardPlain: React.FC<TableCardProps> = ({ data, columns, translations }) => {
+    const [tableData, setTableData] = useState<any>(data);
+    useEffect(() => {
+        setTableData(data);
+    }, [data]);
+
+
+    const renderCards = () => {
+        return tableData?.map((item: any, index: number) => (
+            <Card className="w-full min-w-full my-2 p-5" key={index}>
+                <CardHeader>
+                    <CardTitle>Row : {index + 1}</CardTitle>
+                    <CardDescription>{item.uuid}</CardDescription>
+                </CardHeader>
+                <CardContent>
+                    <div className="flex flex-col items-start justify-start">Email: {item.email}</div>
+                    <div className="flex flex-col items-start justify-start">Phone Number: {item.phoneNumber}</div>
+                    <div>Created At: {item.createdAt}</div>
+                </CardContent>
+            </Card>
+        ))
+    }
+
+    const noDataFound = () => (
+        <>
+            No Data Found
+        </>
+    )
+    return (
+        <>
+            {
+                tableData ? (
+                    <div className="w-full min-w-full">
+                        <div className="flex flex-col items-center justify-start my-6">{renderCards()}</div>
+                    </div>
+                ) : (noDataFound())
+            }
+        </>
+    )
+}
+
+export default ComponentTableCardPlain
--- a/src/components/mutual/tableView/mutual/TablePlain.tsx
+++ b/src/components/mutual/tableView/mutual/TablePlain.tsx
@ -0,0 +1,60 @@
+'use client'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/mutual/shadcnui/table";
+import { useEffect, useState } from "react";
+import { TableProps } from "@/validations/mutual/table/type";
+
+const ComponentTablePlain: React.FC<TableProps> = ({
+    data, orgData, columns, translations, redirectUrls, setSelectedRow
+}) => {
+    const [tableData, setTableData] = useState<any>(data);
+    useEffect(() => {
+        setTableData(data);
+    }, [data]);
+
+    const renderColumns = () => {
+        return [translations?.rows, ...columns].map((column, index) => {
+            return (
+                <TableHead key={`headers-${index}`}>{column}</TableHead>
+            )
+        })
+    }
+    const renderRows = () => (
+        <>{tableData?.map((item: any, index: number) => {
+            return (
+                <TableRow key={`${index}-row`} >
+                    <TableCell>{index + 1}</TableCell>
+                    {
+                        Object.entries(item).map(([key, value]: [string, any]) => (
+                            <TableCell key={`${index}-column-${key}`}>{value}</TableCell>
+                        ))
+                    }
+
+                    {
+                        Object.values(redirectUrls?.table || {}).map((redirectUrl: any, index: number) => {
+                            return (
+                                <TableCell className="cursor-pointer w-4" key={`${index}-action-${index}`}
+                                    onClick={() => setSelectedRow?.(orgData[index])}>{redirectUrl}</TableCell>
+                            )
+                        })
+                    }
+                </TableRow>
+            )
+        })}</>
+    )
+    const noDataFound = (<>No Data Found</>)
+    const renderTable = (
+        <Table><TableHeader><TableRow>{renderColumns()}</TableRow></TableHeader><TableBody>{renderRows()}</TableBody></Table>
+    )
+    return (
+        <>
+            <div className="flex flex-row justify-between gap-2">
+                {Object.values(redirectUrls?.page || {}).map((action, index) => (
+                    <div className="flex flex-row justify-center items-center gap-2" key={`page-action-${index}`}>{action}</div>
+                ))}
+            </div>
+            {tableData ? renderTable : noDataFound}
+        </>
+    )
+}
+
+export default ComponentTablePlain
--- a/src/components/mutual/tableView/mutual/UpdateForm.tsx
+++ b/src/components/mutual/tableView/mutual/UpdateForm.tsx
@ -0,0 +1,46 @@
+'use client'
+import React, { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { UpdateFormProps } from "@/validations/mutual/forms/type";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Form } from "@/components/mutual/shadcnui/form";
+import { renderInputsBySchema } from "@/lib/renderInputs";
+import { Button } from "@/components/mutual/shadcnui/button";
+
+const UpdateForm: React.FC<UpdateFormProps> = ({ schemas, selectedRow, rollbackTo, labels }) => {
+    const router = useRouter()
+    useEffect(() => {
+        if (!selectedRow) {
+            router.push(rollbackTo, { scroll: false })
+        }
+    }, [selectedRow])
+    const updateSchema = schemas.update
+    const findLabels = Object.entries(updateSchema?.shape || {}).reduce((acc: any, [key, value]: any) => {
+        acc[key] = {
+            label: labels[key] || key,
+            description: value.description,
+        }
+        return acc
+    }, {})
+    const handleSubmit = (data: any) => {
+        console.log(data)
+    }
+    const form = useForm<FormData>({
+        resolver: zodResolver(updateSchema),
+        defaultValues: selectedRow,
+    });
+    return (
+        <div>
+            <div>Update Form</div>
+            <Form {...form}>
+                <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
+                    {selectedRow && renderInputsBySchema(findLabels, form)}
+                    {selectedRow && <Button type="submit">Submit</Button>}
+                </form>
+            </Form>
+        </div>
+    )
+}
+
+export default UpdateForm
--- a/src/components/mutual/tableView/mutual/UpperPagination.tsx
+++ b/src/components/mutual/tableView/mutual/UpperPagination.tsx
@ -0,0 +1,21 @@
+import { PaginationProps } from "@/validations/mutual/pagination/type";
+import PaginationDetails from "./PaginationDetails";
+import PaginationShow from "./PaginationShow";
+import SearchBarComponent from "./Search";
+
+const PaginationComponent: React.FC<PaginationProps> = ({
+    apiPagination,
+    pagination,
+    setPagination,
+    defaultPagination,
+}) => {
+    return (
+        <>
+            <PaginationDetails pagination={pagination} setPagination={setPagination} defaultPagination={defaultPagination} />
+            <SearchBarComponent pagination={pagination} setPagination={setPagination} />
+            <PaginationShow apiPagination={apiPagination} />
+        </ >
+    )
+}
+
+export default PaginationComponent
--- a/src/components/mutual/tableView/mutual/ViewForm.tsx
+++ b/src/components/mutual/tableView/mutual/ViewForm.tsx
@ -0,0 +1,30 @@
+'use client'
+import React, { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { ViewFormProps } from "@/validations/mutual/forms/type";
+import { renderInputsBySchemaView } from "@/lib/renderInputs";
+
+const ViewForm: React.FC<ViewFormProps> = ({ schemas, selectedRow, rollbackTo, labels }) => {
+    const router = useRouter()
+    useEffect(() => {
+        if (!selectedRow) {
+            router.push(rollbackTo, { scroll: false })
+        }
+    }, [selectedRow])
+    const viewSchema = schemas.view
+    const findLabels = Object.entries(viewSchema?.shape || {}).reduce((acc: any, [key, value]: any) => {
+        acc[key] = {
+            label: labels[key] || key,
+            description: value.description,
+        }
+        return acc
+    }, {})
+    return (
+        <div>
+            <div>View Form</div>
+            {selectedRow && renderInputsBySchemaView(findLabels, selectedRow)}
+        </div>
+    )
+}
+
+export default ViewForm
--- a/src/config/config.ts
+++ b/src/config/config.ts
@ -0,0 +1,2 @@
+export const WEB_BASE_URL = process.env.WEB_BASE_URL;
+export const API_BASE_URL = process.env.API_BASE_URL;
--- a/src/hooks/a.txt
+++ b/src/hooks/a.txt
--- a/src/hooks/application/hook.tsx
+++ b/src/hooks/application/hook.tsx
@ -0,0 +1,29 @@
+export async function retrieveAvailableApplications(data: any): Promise<string[]> {
+    try {
+        const response = await fetch("http://localhost:3000/api/menu", {
+            method: "POST",
+            headers: { "Content-Type": "application/json", "no-cache": "true" },
+            body: JSON.stringify({ ...data }),
+        })
+        if (response.status !== 200) {
+            throw new Error("Failed to retrieve available applications");
+        }
+        const result = await response.json();
+        return result.data
+    } catch (error) { throw error }
+}
+
+export async function retrievePageToRender(data: any): Promise<string> {
+    try {
+        const response = await fetch("http://localhost:3000/api/pages", {
+            method: "POST",
+            headers: { "Content-Type": "application/json", "no-cache": "true" },
+            body: JSON.stringify({ ...data }),
+        })
+        if (response.status !== 200) {
+            throw new Error("Failed to retrieve page to render");
+        }
+        const result = await response.json();
+        return result.data
+    } catch (error) { throw error }
+}
--- a/src/languages/a.txt
+++ b/src/languages/a.txt
--- a/src/languages/custom/building/english.ts
+++ b/src/languages/custom/building/english.ts
@ -0,0 +1,24 @@
+const buildingEn = {
+  building: "Building First Layer Label",
+};
+
+const buildingPartsEn = {
+  ...buildingEn,
+  parts: "Parts Second Layer Label",
+};
+
+const buildingPartsFieldsEn = {
+  "Users.uuid": "UUID",
+  "Users.firstName": "First Name",
+  "Users.lastName": "Last Name",
+  "Users.email": "Email",
+  "Users.phoneNumber": "Phone Number",
+  "Users.country": "Country",
+  "Users.description": "Description",
+  "Users.isDeleted": "Is Deleted",
+  "Users.isConfirmed": "Is Confirmed",
+  "Users.createdAt": "Created At",
+  "Users.updatedAt": "Updated At",
+};
+
+export { buildingEn, buildingPartsEn, buildingPartsFieldsEn };
--- a/src/languages/custom/building/parts/a.txt
+++ b/src/languages/custom/building/parts/a.txt
--- a/src/languages/custom/building/parts/tenantSomething/a.txt
+++ b/src/languages/custom/building/parts/tenantSomething/a.txt
--- a/src/languages/custom/building/parts/tenantSomething/english.ts
+++ b/src/languages/custom/building/parts/tenantSomething/english.ts
@ -0,0 +1,39 @@
+import { footerDefaultEn } from "@/languages/mutual/footer/english";
+import { headerDefaultEn } from "@/languages/mutual/header/english";
+import { buildingPartsEn } from "../../english";
+import { contentDefaultEn } from "@/languages/mutual/content/english";
+
+const contentBuildingPartsTenantSomethingEn = {
+  ...contentDefaultEn,
+  title: "Building Parts Tenant Something",
+  content: "Building Parts Tenant Something Content",
+  button: "Building Parts Tenant Something Button",
+};
+const footerBuildingPartsTenantSomethingEn = {
+  ...footerDefaultEn,
+  page: "Building Parts Tenant Something Footer",
+};
+const headerBuildingPartsTenantSomethingEn = {
+  ...headerDefaultEn,
+  page: "Building Parts Tenant Something Header",
+};
+
+const menuBuildingPartsTenantSomethingEn = {
+  ...buildingPartsEn,
+  "tenant/something": "Tenant Info",
+};
+
+const buildingPartsTenantSomethingEn = {
+  header: headerBuildingPartsTenantSomethingEn,
+  menu: menuBuildingPartsTenantSomethingEn,
+  content: contentBuildingPartsTenantSomethingEn,
+  footer: footerBuildingPartsTenantSomethingEn,
+};
+
+export {
+  contentBuildingPartsTenantSomethingEn,
+  footerBuildingPartsTenantSomethingEn,
+  headerBuildingPartsTenantSomethingEn,
+  menuBuildingPartsTenantSomethingEn,
+  buildingPartsTenantSomethingEn,
+};
--- a/src/languages/custom/building/parts/tenantSomething/index.ts
+++ b/src/languages/custom/building/parts/tenantSomething/index.ts
@ -0,0 +1,9 @@
+import { buildingPartsTenantSomethingTr } from "./turkish";
+import { buildingPartsTenantSomethingEn } from "./english";
+
+const buildingPartsTenantSomething = {
+  tr: buildingPartsTenantSomethingTr,
+  en: buildingPartsTenantSomethingEn,
+};
+
+export { buildingPartsTenantSomething };
--- a/src/languages/custom/building/parts/tenantSomething/turkish.ts
+++ b/src/languages/custom/building/parts/tenantSomething/turkish.ts
@ -0,0 +1,38 @@
+import { footerDefaultTr } from "@/languages/mutual/footer/turkish";
+import { headerDefaultTr } from "@/languages/mutual/header/turkish";
+import { buildingPartsTr } from "../../turkish";
+import { contentDefaultTr } from "@/languages/mutual/content/turkish";
+
+const contentBuildingPartsTenantSomethingTr = {
+  ...contentDefaultTr,
+  title: "Bina Parçaları Kiracı Bilgileri",
+  description: "Bina Parçaları Kiracı Bilgileri",
+  button: "Bina Parçaları Kiracı Bilgileri Buton",
+};
+const footerBuildingPartsTenantSomethingTr = {
+  ...footerDefaultTr,
+  page: "Bina Parçaları Kiracı Bilgileri Footer",
+};
+const headerBuildingPartsTenantSomethingTr = {
+  ...headerDefaultTr,
+  page: "Bina Parçaları Kiracı Bilgileri Header",
+};
+
+const menuBuildingPartsTenantSomethingTr = {
+  ...buildingPartsTr,
+  "tenant/something": "Kiracı Bilgileri",
+};
+const buildingPartsTenantSomethingTr = {
+  header: headerBuildingPartsTenantSomethingTr,
+  menu: menuBuildingPartsTenantSomethingTr,
+  content: contentBuildingPartsTenantSomethingTr,
+  footer: footerBuildingPartsTenantSomethingTr,
+};
+
+export {
+  contentBuildingPartsTenantSomethingTr,
+  footerBuildingPartsTenantSomethingTr,
+  headerBuildingPartsTenantSomethingTr,
+  menuBuildingPartsTenantSomethingTr,
+  buildingPartsTenantSomethingTr,
+};
--- a/src/languages/custom/building/turkish.ts
+++ b/src/languages/custom/building/turkish.ts
@ -0,0 +1,23 @@
+const buildingTr = {
+  building: "Bina Birinci Seviye",
+};
+const buildingPartsTr = {
+  ...buildingTr,
+  parts: "Parçalar İkinci Seviye",
+};
+
+const buildingPartsFieldsTr = {
+  "Users.uuid": "UUID",
+  "Users.firstName": "Ad",
+  "Users.lastName": "Soyad",
+  "Users.email": "Email",
+  "Users.phoneNumber": "Telefon Numarası",
+  "Users.country": "Ülke",
+  "Users.description": "Açıklama",
+  "Users.isDeleted": "Silindi",
+  "Users.isConfirmed": "Onaylandı",
+  "Users.createdAt": "Oluşturulma Tarihi",
+  "Users.updatedAt": "Güncellenme Tarihi",
+};
+
+export { buildingTr, buildingPartsTr, buildingPartsFieldsTr };
--- a/src/languages/custom/index.ts
+++ b/src/languages/custom/index.ts
@ -0,0 +1,14 @@
+import { LanguageTypes } from "@/validations/mutual/language/validations";
+import { DynamicPage } from "@/schemas/custom/menu/type";
+import { managementAccountTenantMain } from "./management/account/tenantSomething/index";
+import { managementAccountTenantMainSecond } from "./management/account/tenantSomethingSecond/index";
+import { buildingPartsTenantSomething } from "./building/parts/tenantSomething/index";
+
+const dynamicPagesIndex: Record<string, Record<LanguageTypes, DynamicPage>> = {
+  "management/account/tenant/something": managementAccountTenantMain,
+  "management/account/tenant/somethingSecond":
+    managementAccountTenantMainSecond,
+  "building/parts/tenant/something": buildingPartsTenantSomething,
+};
+
+export { dynamicPagesIndex };
--- a/src/languages/custom/management/a.txt
+++ b/src/languages/custom/management/a.txt
--- a/src/languages/custom/management/account/a
+++ b/src/languages/custom/management/account/a
--- a/src/languages/custom/management/account/tenantSomething/english.ts
+++ b/src/languages/custom/management/account/tenantSomething/english.ts
@ -0,0 +1,39 @@
+import { footerDefaultEn } from "@/languages/mutual/footer/english";
+import { headerDefaultEn } from "@/languages/mutual/header/english";
+import { managementAccountEn, managementAccountFieldsEn } from "../../english";
+import { contentDefaultEn } from "@/languages/mutual/content/english";
+
+const contentManagementAccountTenantSomethingEn = {
+  ...managementAccountFieldsEn,
+  title: "Management Account Tenant Something",
+  content: "Management Account Tenant Something Content",
+  button: "Management Account Tenant Something Button",
+};
+const footerManagementAccountTenantSomethingEn = {
+  ...footerDefaultEn,
+  page: "Management Account Tenant Something Footer",
+};
+const headerManagementAccountTenantSomethingEn = {
+  ...headerDefaultEn,
+  page: "Management Account Tenant Something Header",
+};
+
+const menuManagementAccountTenantSomethingEn = {
+  ...managementAccountEn,
+  "tenant/something": "Tenant Info",
+};
+
+const managementAccountTenantMainEn = {
+  header: headerManagementAccountTenantSomethingEn,
+  menu: menuManagementAccountTenantSomethingEn,
+  content: contentManagementAccountTenantSomethingEn,
+  footer: footerManagementAccountTenantSomethingEn,
+};
+
+export {
+  contentManagementAccountTenantSomethingEn,
+  footerManagementAccountTenantSomethingEn,
+  headerManagementAccountTenantSomethingEn,
+  menuManagementAccountTenantSomethingEn,
+  managementAccountTenantMainEn,
+};
--- a/src/languages/custom/management/account/tenantSomething/index.ts
+++ b/src/languages/custom/management/account/tenantSomething/index.ts
@ -0,0 +1,9 @@
+import { managementAccountTenantMainTr } from "./turkish";
+import { managementAccountTenantMainEn } from "./english";
+
+const managementAccountTenantMain = {
+    tr: managementAccountTenantMainTr,
+    en: managementAccountTenantMainEn,
+}
+
+export { managementAccountTenantMain }
--- a/src/languages/custom/management/account/tenantSomething/turkish.ts
+++ b/src/languages/custom/management/account/tenantSomething/turkish.ts
@ -0,0 +1,36 @@
+import { footerDefaultTr } from "@/languages/mutual/footer/turkish";
+import { headerDefaultTr } from "@/languages/mutual/header/turkish";
+import { managementAccountTr } from "../../turkish";
+
+const contentManagementAccountTenantSomethingTr = {
+  title: "Yönetim Hesap Kiracı Bilgileri",
+  description: "Yönetim Hesap Kiracı Bilgileri",
+  button: "Yönetim Hesap Kiracı Bilgileri Buton",
+};
+const footerManagementAccountTenantSomethingTr = {
+  ...footerDefaultTr,
+  page: "Yönetim Hesap Kiracı Bilgileri Footer",
+};
+const headerManagementAccountTenantSomethingTr = {
+  ...headerDefaultTr,
+  page: "Yönetim Hesap Kiracı Bilgileri Header",
+};
+
+const menuManagementAccountTenantSomethingTr = {
+  ...managementAccountTr,
+  "tenant/something": "Kiracı Bilgileri",
+};
+const managementAccountTenantMainTr = {
+  header: headerManagementAccountTenantSomethingTr,
+  menu: menuManagementAccountTenantSomethingTr,
+  content: contentManagementAccountTenantSomethingTr,
+  footer: footerManagementAccountTenantSomethingTr,
+};
+
+export {
+  contentManagementAccountTenantSomethingTr,
+  footerManagementAccountTenantSomethingTr,
+  headerManagementAccountTenantSomethingTr,
+  menuManagementAccountTenantSomethingTr,
+  managementAccountTenantMainTr,
+};
--- a/Show More
+++ b/Show More