next js

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