.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

LICENSE

@@ -1,9 +0,0 @@
-MIT License
-
-Copyright (c) 2025 evyos-center-server
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,3 +1,36 @@
-# next-js-template
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
-next js template
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

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"
+}

env

@@ -0,0 +1,2 @@
+WEB_BASE_URL=http://localhost:3000
+API_BASE_URL=http://localhost:3000/api

eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

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,
+};

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 };

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;

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 };

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

next.config.ts

@@ -0,0 +1,9 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,67 @@
+{
+  "name": "dev-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "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",
+    "react-hook-form": "^7.56.2",
+    "sonner": "^2.0.3",
+    "tailwind-merge": "^3.2.0",
+    "zod": "^3.24.4"
+  },
+  "devDependencies": {
+    "@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",
+    "tailwindcss": "^4.1.5",
+    "tw-animate-css": "^1.2.9",
+    "typescript": "^5.8.3"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

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,
+  });
+}

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,
+  });
+}

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,
+    },
+  });
+}

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,
+      },
+    },
+  });
+}

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;

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;

src/app/globals.css

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

src/app/layout.tsx

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

src/app/page.tsx

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

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;

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;

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;

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;

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

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

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;

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;

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;

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;

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;

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;

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;

src/components/custom/menu/type.ts

@@ -0,0 +1,5 @@
+interface IntrerfaceLayerDropdown {
+    isActive: boolean;
+    innerText: string;
+    onClick: () => void;
+}

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;

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

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

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 }

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,
+}

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 }

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 }

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 }

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 }

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 }

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 }

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,
+}

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 }

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 }

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,
+}

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,
+}

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,
+}

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,
+}

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,
+}

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 }

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 }

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 }

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,
+}

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,
+}

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 }

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 }

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 }

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 }

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,
+}

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 }

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,
+}

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 }

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 }

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 }

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 }

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,
+}

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 }

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 }

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 }

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 }

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;

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;

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

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

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

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

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

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

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

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

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

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

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;

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 }
+}