updated and tested dashboard page

ServicesWeb/customer/src/app/(AuthLayout)/auth/[...page]/page.tsx

@@ -0,0 +1,19 @@
+'use server';
+import { AuthLayout } from "@/layouts/auth/layout";
+import { AuthServerProps } from "@/validations/mutual/pages/props";
+import { LanguageTypes } from "@/validations/mutual/language/validations";
+import { checkAccessTokenIsValid } from "@/fetchers/mutual/cookies/token";
+import { getOnlineFromRedis } from "@/fetchers/custom/context/page/online/fetch";
+import { redirect } from "next/navigation";
+import Login from "@/pages/single/auth/login/page";
+
+const AuthPageSSR = async ({ params, searchParams }: AuthServerProps) => {
+    const awaitedParams = await params;
+    const awaitedSearchParams = await searchParams;
+    const pageUrlFromParams = `/${awaitedParams.page?.join("/")}` || "/login";
+    const tokenValid = await checkAccessTokenIsValid();
+    try { const online = await getOnlineFromRedis(); if (tokenValid && online) { redirect("/panel/dashboard") } } catch (error) { }
+    return <div className="flex flex-col items-center justify-center"><AuthLayout lang={"en"} page={<Login language={"en"} query={awaitedSearchParams} />} activePageUrl={pageUrlFromParams} /></div>
+}
+
+export default AuthPageSSR;

ServicesWeb/customer/src/app/(DashboardLayout)/panel/[...page]/page.tsx

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

ServicesWeb/customer/src/app/api/login/email/route.ts

@@ -1,6 +1,6 @@
 import { NextResponse } from "next/server";
-import { loginViaAccessKeys } from "@/apifetchers/custom/login/login";
+import { loginViaAccessKeys } from "@/fetchers/custom/login/login";
-import { loginSchemaEmail } from "@/webPages/auth/login/schemas";
+import { loginSchemaEmail } from "@/pages/single/auth/login/schemas";
 
 export async function POST(req: Request): Promise<NextResponse> {
   try {

ServicesWeb/customer/src/app/dashboard/page.tsx

@@ -1,7 +1,7 @@
 import { DashboardLayout } from '@/layouts/dashboard/layout';
 import { LanguageTypes } from '@/validations/mutual/language/validations';
 
-export default function Page({ params, searchParams }: { params: { page?: string[] }, searchParams: Record<string, any> }) {
+export default async function Page({ params, searchParams }: { params: { page?: string[] }, searchParams: Record<string, any> }) {
     const lang: LanguageTypes = 'en';
-    return <DashboardLayout params={params} searchParams={searchParams} lang={lang} />;
+    return <DashboardLayout params={{ page: params.page || [] }} searchParams={searchParams} lang={lang} />
 }

ServicesWeb/customer/src/components/custom/content/PageToBeChildrendMulti.tsx

@@ -1,6 +1,6 @@
 import { ContentProps } from "@/validations/mutual/dashboard/props";
 import ContentToRenderNoPage from "@/pages/mutual/noContent/page";
-import pageIndexMulti from "@/pages/multi/index";
+import { pageIndexMulti } from "@/pages/multi/index"
 
 const PageToBeChildrendMulti: React.FC<ContentProps> = ({
     activePageUrl,

ServicesWeb/customer/src/components/custom/content/PageToBeChildrendSingle.tsx

@@ -1,13 +0,0 @@
-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> = async ({ lang, translations, activePageUrl, mode }) => {
-    const ApplicationToRender = await resolveWhichPageToRenderSingle({ activePageUrl })
-    if (ApplicationToRender) {
-        return <ApplicationToRender lang={lang} translations={translations} activePageUrl={activePageUrl} mode={mode} />
-    }
-    return <ContentToRenderNoPage lang={lang} />
-}
-
-export default PageToBeChildrendSingle

ServicesWeb/customer/src/components/custom/footer/component.tsx

@@ -23,7 +23,7 @@ const FooterComponent: FC<FooterProps> = ({
     const lang = onlineData?.lang as LanguageTypes || 'en';
 
     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">
+        <div className="fixed text-center bottom-0 left-0 right-0 h-16 p-4 border-emerald-150 border-t-2 shadow-sm backdrop-blur-sm bg-emerald-50">
             <div className="flex justify-between items-center">
                 <div className="text-sm text-gray-500">
                     {!configLoading && configData && (

ServicesWeb/customer/src/components/custom/header/component.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { FC } from "react";
+import { FC, useState, useEffect } from "react";
 import { HeaderProps } from "@/validations/mutual/dashboard/props";
 import { langGetKey } from "@/lib/langGet";
 import { LanguageTypes } from "@/validations/mutual/language/validations";
@@ -8,35 +8,208 @@ import LanguageSelectionComponent from "@/components/mutual/languageSelection/co
 const translations = {
     en: {
         selectedPage: "selectedPage",
-        page: "page"
+        page: "page",
+        search: "Search...",
+        notifications: "Notifications",
+        messages: "Messages",
+        profile: "Profile",
+        settings: "Settings",
+        logout: "Log Out"
     },
     tr: {
         selectedPage: "seçiliSayfa",
-        page: "sayfa"
+        page: "sayfa",
+        search: "Ara...",
+        notifications: "Bildirimler",
+        messages: "Mesajlar",
+        profile: "Profil",
+        settings: "Ayarlar",
+        logout: "Çıkış"
     }
 }
 
 const HeaderComponent: FC<HeaderProps> = ({
-    activePageUrl, onlineData, onlineLoading, onlineError, refreshOnline, updateOnline,
+    activePageUrl, searchParams,
+    onlineData, onlineLoading, onlineError, refreshOnline, updateOnline,
     userData, userLoading, userError, refreshUser, updateUser
 }) => {
     const lang = onlineData?.lang as LanguageTypes || 'en';
+    const [activeTab, setActiveTab] = useState('notifications');
+    const [isFullscreen, setIsFullscreen] = useState(false);
+
+    useEffect(() => {
+        const handleFullscreenChange = () => {
+            setIsFullscreen(!!document.fullscreenElement);
+        };
+
+        document.addEventListener('fullscreenchange', handleFullscreenChange);
+        return () => {
+            document.removeEventListener('fullscreenchange', handleFullscreenChange);
+        };
+    }, []);
+
+    const toggleFullscreen = () => {
+        if (document.fullscreenElement) {
+            document.exitFullscreen();
+        } else {
+            document.documentElement.requestFullscreen().catch(err => {
+                console.error(`Error attempting to enable fullscreen: ${err.message}`);
+            });
+        }
+    };
+
     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="py-2 px-6 bg-[#f8f4f3] flex items-center shadow-md shadow-black/5 sticky top-0 left-0 z-30">
-            <div className="flex flex-row justify-center items-center">
+            <button type="button" className="text-lg text-gray-900 font-semibold sidebar-toggle">
-                <p className="text-2xl font-bold mx-3">{langGetKey(translations[lang], 'selectedPage')} :</p>
+                <i className="ri-menu-line"></i>
-                <p className="text-lg font-bold mx-3"> {activePageUrl || langGetKey(translations[lang], 'page')}</p>
+            </button>
+
+            <div className="ml-4">
+                <p className="text-lg font-semibold">{activePageUrl || langGetKey(translations[lang], 'page')}</p>
             </div>
-            <div className="flex items-center">
+
-                {!onlineLoading && onlineData && onlineData.userType && (
+            <ul className="ml-auto flex items-center">
-                    <div className="mr-4 text-sm">
+                <li className="mr-1 dropdown relative group">
-                        <span className="font-semibold">{lang}</span>
+                    <button type="button" className="dropdown-toggle text-gray-400 mr-4 w-8 h-8 rounded flex items-center justify-center hover:text-gray-600">
-                        <span className="ml-2 text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">{onlineData.userType}</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" className="hover:bg-gray-100 rounded-full" viewBox="0 0 24 24" style={{ fill: 'gray' }}>
+                            <path d="M19.023 16.977a35.13 35.13 0 0 1-1.367-1.384c-.372-.378-.596-.653-.596-.653l-2.8-1.337A6.962 6.962 0 0 0 16 9c0-3.859-3.14-7-7-7S2 5.141 2 9s3.14 7 7 7c1.763 0 3.37-.66 4.603-1.739l1.337 2.8s.275.224.653.596c.387.363.896.854 1.384 1.367l1.358 1.392.604.646 2.121-2.121-.646-.604c-.379-.372-.885-.866-1.391-1.36zM9 14c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5z"></path>
+                        </svg>
+                    </button>
+                    <div className="dropdown-menu shadow-md shadow-black/5 z-30 hidden group-hover:block absolute right-0 top-full max-w-xs w-60 bg-white rounded-md border border-gray-100">
+                        <form action="" className="p-4 border-b border-b-gray-100">
+                            <div className="relative w-full">
+                                <input type="text" className="py-2 pr-4 pl-10 bg-gray-50 w-full outline-none border border-gray-100 rounded-md text-sm focus:border-blue-500" placeholder={langGetKey(translations[lang], 'search')} />
+                                <i className="ri-search-line absolute top-1/2 left-4 -translate-y-1/2 text-gray-900"></i>
                             </div>
-                )}<LanguageSelectionComponent
+                        </form>
-                    activePage={activePageUrl} onlineData={onlineData} onlineLoading={onlineLoading} onlineError={onlineError} refreshOnline={refreshOnline} updateOnline={updateOnline}
+                    </div>
+                </li>
+
+                <li className="dropdown relative group">
+                    <button type="button" className="dropdown-toggle text-gray-400 mr-4 w-8 h-8 rounded flex items-center justify-center hover:text-gray-600">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" className="hover:bg-gray-100 rounded-full" viewBox="0 0 24 24" style={{ fill: 'gray' }}>
+                            <path d="M19 13.586V10c0-3.217-2.185-5.927-5.145-6.742C13.562 2.52 12.846 2 12 2s-1.562.52-1.855 1.258C7.185 4.074 5 6.783 5 10v3.586l-1.707 1.707A.996.996 0 0 0 3 16v2a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-2a.996.996 0 0 0-.293-.707L19 13.586zM19 17H5v-.586l1.707-1.707A.996.996 0 0 0 7 14v-4c0-2.757 2.243-5 5-5s5 2.243 5 5v4c0 .266.105.52.293.707L19 16.414V17zm-7 5a2.98 2.98 0 0 0 2.818-2H9.182A2.98 2.98 0 0 0 12 22z"></path>
+                        </svg>
+                    </button>
+                    <div className="dropdown-menu shadow-md shadow-black/5 z-30 hidden group-hover:block absolute right-0 top-full max-w-xs w-80 bg-white rounded-md border border-gray-100">
+                        <div className="flex items-center px-4 pt-4 border-b border-b-gray-100 notification-tab">
+                            <button
+                                type="button"
+                                onClick={() => setActiveTab('notifications')}
+                                className={`text-gray-400 font-medium text-[13px] hover:text-gray-600 border-b-2 ${activeTab === 'notifications' ? 'border-b-blue-500 text-blue-500' : 'border-b-transparent'} mr-4 pb-1`}
+                            >
+                                {langGetKey(translations[lang], 'notifications')}
+                            </button>
+                            <button
+                                type="button"
+                                onClick={() => setActiveTab('messages')}
+                                className={`text-gray-400 font-medium text-[13px] hover:text-gray-600 border-b-2 ${activeTab === 'messages' ? 'border-b-blue-500 text-blue-500' : 'border-b-transparent'} mr-4 pb-1`}
+                            >
+                                {langGetKey(translations[lang], 'messages')}
+                            </button>
+                        </div>
+                        <div className="my-2">
+                            <ul className={`max-h-64 overflow-y-auto ${activeTab === 'notifications' ? 'block' : 'hidden'}`}>
+                                {/* Notification items would go here */}
+                                <li>
+                                    <a href="#" className="py-2 px-4 flex items-center hover:bg-gray-50 group">
+                                        <div className="w-8 h-8 rounded bg-blue-100 flex items-center justify-center mr-2">
+                                            <i className="ri-notification-2-line text-blue-500"></i>
+                                        </div>
+                                        <div className="ml-2">
+                                            <div className="text-[13px] text-gray-600 font-medium truncate group-hover:text-blue-500">System Notification</div>
+                                            <div className="text-[11px] text-gray-400">Just now</div>
+                                        </div>
+                                    </a>
+                                </li>
+                            </ul>
+                            <ul className={`max-h-64 overflow-y-auto ${activeTab === 'messages' ? 'block' : 'hidden'}`}>
+                                {/* Message items would go here */}
+                                <li>
+                                    <a href="#" className="py-2 px-4 flex items-center hover:bg-gray-50 group">
+                                        <div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-2">
+                                            <i className="ri-user-line text-gray-500"></i>
+                                        </div>
+                                        <div className="ml-2">
+                                            <div className="text-[13px] text-gray-600 font-medium truncate group-hover:text-blue-500">Support Team</div>
+                                            <div className="text-[11px] text-gray-400">Hello there!</div>
+                                        </div>
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </li>
+
+                <button onClick={toggleFullscreen} className="text-gray-400 mr-4 w-8 h-8 rounded flex items-center justify-center hover:text-gray-600">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" className="hover:bg-gray-100 rounded-full" viewBox="0 0 24 24" style={{ fill: 'gray' }}>
+                        <path d="M5 5h5V3H3v7h2zm5 14H5v-5H3v7h7zm11-5h-2v5h-5v2h7zm-2-4h2V3h-7v2h5z"></path>
+                    </svg>
+                </button>
+
+                <li className="dropdown ml-3 relative group">
+                    <button type="button" className="dropdown-toggle flex items-center">
+                        <div className="flex-shrink-0 w-10 h-10 relative">
+                            <div className="p-1 bg-white rounded-full focus:outline-none focus:ring">
+                                {userData?.avatar ? (
+                                    <img className="w-8 h-8 rounded-full" src={userData.avatar} alt="User Avatar" />
+                                ) : (
+                                    <div className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
+                                        <i className="ri-user-line text-gray-500"></i>
+                                    </div>
+                                )}
+                                {!onlineLoading && onlineData && onlineData.status === 'online' && (
+                                    <>
+                                        <div className="top-0 left-7 absolute w-3 h-3 bg-lime-400 border-2 border-white rounded-full animate-ping"></div>
+                                        <div className="top-0 left-7 absolute w-3 h-3 bg-lime-500 border-2 border-white rounded-full"></div>
+                                    </>
+                                )}
+                            </div>
+                        </div>
+                        <div className="p-2 md:block text-left">
+                            <h2 className="text-sm font-semibold text-gray-800">{userData?.name || 'User'}</h2>
+                            <p className="text-xs text-gray-500">{onlineData?.userType || 'Guest'}</p>
+                        </div>
+                    </button>
+                    <ul className="dropdown-menu shadow-md shadow-black/5 z-30 hidden group-hover:block absolute right-0 top-full py-1.5 rounded-md bg-white border border-gray-100 w-full max-w-[140px]">
+                        <li>
+                            <a href="#" className="flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-[#f84525] hover:bg-gray-50">
+                                {langGetKey(translations[lang], 'profile')}
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#" className="flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-[#f84525] hover:bg-gray-50">
+                                {langGetKey(translations[lang], 'settings')}
+                            </a>
+                        </li>
+                        <li>
+                            <form method="POST" action="">
+                                <a
+                                    role="menuitem"
+                                    className="flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-[#f84525] hover:bg-gray-50 cursor-pointer"
+                                    onClick={(e) => {
+                                        e.preventDefault();
+                                        // Handle logout logic here
+                                    }}
+                                >
+                                    {langGetKey(translations[lang], 'logout')}
+                                </a>
+                            </form>
+                        </li>
+                    </ul>
+                </li>
+
+                <div className="ml-3">
+                    <LanguageSelectionComponent
+                        activePage={activePageUrl}
+                        onlineData={onlineData}
+                        onlineLoading={onlineLoading}
+                        onlineError={onlineError}
+                        refreshOnline={refreshOnline}
+                        updateOnline={updateOnline}
                     />
                 </div>
+            </ul>
         </div>
     );
 };

ServicesWeb/customer/src/fetchers/base.ts

@@ -1,11 +1,12 @@
-import { ApiResponse, CookieObject } from "./types";
+import { ResponseCookie } from "next/dist/compiled/@edge-runtime/cookies";
+import { ApiResponse } from "./types";
 import NextCrypto from "next-crypto";
 
 const tokenSecretEnv = process.env.TOKENSECRET_90;
 const tokenSecret = tokenSecretEnv || "e781d1b0-9418-40b3-9940-385abf81a0b7";
 const REDIS_TIMEOUT = 5000; // Redis operation timeout (5 seconds)
 const nextCrypto = new NextCrypto(tokenSecret);
-const cookieObject: CookieObject = {
+const cookieObject: Partial<ResponseCookie> = {
   httpOnly: true,
   path: "/",
   sameSite: "none",

ServicesWeb/customer/src/fetchers/custom/login/login.tsx

@@ -0,0 +1,200 @@
+"use server";
+import NextCrypto from "next-crypto";
+import { fetchData, fetchDataWithToken } from "@/fetchers/fecther";
+import { cookieObject, tokenSecret } from "@/fetchers/base";
+import { urlLoginEndpoint, urlLoginSelectEndpoint, urlLogoutEndpoint } from "@/fetchers/index";
+
+import { cookies } from "next/headers";
+import { setNewCompleteToRedis, getCompleteFromRedis } from "@/fetchers/custom/context/complete/fetch";
+import {
+  defaultValuesHeader,
+  defaultValuesMenu,
+  defaultValuesOnline,
+  defaultValuesPageConfig,
+} from "@/fetchers/types/context";
+import { retrievePageList } from "@/fetchers/mutual/cookies/token";
+import { deleteAllCookies } from "@/fetchers/mutual/cookies/cookie-actions";
+import { setMenuToRedis } from "@/fetchers/custom/context/page/menu/fetch";
+import { LoginViaAccessKeys, LoginSelect, LoginSelectOccupant } from "@/fetchers/types/login/validations";
+
+async function logoutActiveSession() {
+  const response = await fetchDataWithToken(urlLogoutEndpoint, {}, "GET", false);
+  await deleteAllCookies();
+  return response;
+}
+
+async function initRedis(loginRespone: any, firstSelection: any, accessToken: string, redisKey: string) {
+  let alreadyAtRedis = null
+  try {
+    const redisData = await getCompleteFromRedis();
+    alreadyAtRedis = redisData;
+  } catch (error) { }
+  if (!alreadyAtRedis) {
+    const loginObjectToRedis = {
+      online: {
+        ...defaultValuesOnline,
+        lastLogin: new Date(),
+        userType: `${loginRespone.user_type}`.toUpperCase(),
+        lang: loginRespone.user.person.country_code.toLowerCase(),
+      },
+      pageConfig: defaultValuesPageConfig,
+      menu: defaultValuesMenu,
+      header: defaultValuesHeader,
+      selection: { selectionList: loginRespone.selection_list, activeSelection: firstSelection },
+      user: loginRespone.user,
+      settings: { lastOnline: new Date(), token: accessToken },
+      chatRoom: [],
+      notifications: [],
+      messages: [],
+    }
+    await setNewCompleteToRedis(loginObjectToRedis, redisKey);
+  }
+}
+
+async function loginViaAccessKeys(payload: LoginViaAccessKeys) {
+  const cookieStore = await cookies();
+  try {
+    const response = await fetchData(
+      urlLoginEndpoint,
+      {
+        access_key: payload.accessKey,
+        password: payload.password,
+        remember_me: payload.rememberMe,
+      },
+      "POST",
+      false
+    );
+    await deleteAllCookies()
+    if (response.status === 200 || response.status === 202) {
+
+      const loginRespone: any = response?.data;
+      const firstSelection = loginRespone.selection_list.find((item: any) => item.uu_id === loginRespone.selection_list[0].uu_id);
+
+      const nextCrypto = new NextCrypto(tokenSecret);
+      const accessToken = await nextCrypto.encrypt(loginRespone.access_token);
+
+      const redisKey = `CLIENT:${loginRespone.user_type.toUpperCase()}:${firstSelection.uu_id}`;
+      const redisKeyAccess = await nextCrypto.encrypt(redisKey);
+      const usersSelection = await nextCrypto.encrypt(
+        JSON.stringify({
+          selected: firstSelection.uu_id,
+          userType: loginRespone.user_type.toUpperCase(),
+          redisKey,
+        })
+      );
+
+      await initRedis(loginRespone, firstSelection, accessToken, redisKey);
+      cookieStore.set({
+        name: "eys-zzz",
+        value: accessToken,
+        ...cookieObject,
+      });
+      cookieStore.set({
+        name: "eys-yyy",
+        value: redisKeyAccess,
+        ...cookieObject,
+      });
+      cookieStore.set({
+        name: "eys-sel",
+        value: usersSelection,
+        ...cookieObject,
+      });
+      try {
+        return {
+          completed: true,
+          message: "Login successful",
+          status: 200,
+          data: loginRespone,
+        };
+      } catch (error) {
+        console.error("JSON parse error:", error);
+        return {
+          completed: false,
+          message: "Login NOT successful",
+          status: 401,
+          data: "{}",
+        };
+      }
+    }
+
+    return {
+      completed: false,
+      // error: response.error || "Login failed",
+      // message: response.message || "Authentication failed",
+      status: response.status || 500,
+    };
+  } catch (error) {
+    console.error("Login error:", error);
+    return {
+      completed: false,
+      // error: error instanceof Error ? error.message : "Login error",
+      // message: "An error occurred during login",
+      status: 500,
+    };
+  }
+}
+
+async function loginSelectEmployee(payload: LoginSelect) {
+  const cookieStore = await cookies();
+  const nextCrypto = new NextCrypto(tokenSecret);
+  const employeeUUID = payload.uuid;
+  const redisKey = `CLIENT:EMPLOYEE:${employeeUUID}`;
+  const selectResponse: any = await fetchDataWithToken(urlLoginSelectEndpoint, { uuid: employeeUUID }, "POST", false);
+  cookieStore.delete({ name: "eys-sel", ...cookieObject });
+
+  if (selectResponse.status === 200 || selectResponse.status === 202) {
+    const usersSelection = await nextCrypto.encrypt(
+      JSON.stringify({
+        selected: employeeUUID,
+        userType: "employee",
+        redisKey,
+      })
+    );
+    cookieStore.set({
+      name: "eys-sel",
+      value: usersSelection,
+      ...cookieObject,
+    });
+    try {
+      const pageList = await retrievePageList()
+      await setMenuToRedis({
+        selectionList: pageList,
+        activeSelection: "/dashboard"
+      })
+    } catch (error) { }
+  }
+  return selectResponse;
+}
+
+async function loginSelectOccupant(payload: LoginSelectOccupant) {
+  const livingSpaceUUID = payload.uuid;
+  const cookieStore = await cookies();
+  const nextCrypto = new NextCrypto(tokenSecret);
+
+  const selectResponse: any = await fetchDataWithToken(urlLoginSelectEndpoint, { uuid: livingSpaceUUID }, "POST", false);
+  const redisKey = `CLIENT:OCCUPANT:${livingSpaceUUID}`;
+  cookieStore.delete("eys-sel");
+
+  if (selectResponse.status === 200 || selectResponse.status === 202) {
+    const usersSelection = await nextCrypto.encrypt(
+      JSON.stringify({
+        selected: livingSpaceUUID,
+        userType: "OCCUPANT",
+        redisKey,
+      })
+    );
+    cookieStore.set({
+      name: "eys-sel",
+      value: usersSelection,
+      ...cookieObject,
+    });
+  }
+  return selectResponse;
+}
+
+export {
+  loginViaAccessKeys,
+  loginSelectEmployee,
+  loginSelectOccupant,
+  logoutActiveSession,
+};

ServicesWeb/customer/src/fetchers/index.ts

@@ -25,12 +25,19 @@ const urlCheckToken = `${baseUrlAuth}/authentication/token/check`;
 const urlPageValid = `${baseUrlRestriction}/restrictions/page/valid`;
 const urlSiteUrls = `${baseUrlRestriction}/restrictions/sites/list`;
 
+const urlLoginEndpoint = `${baseUrlAuth}/authentication/login`;
+const urlLoginSelectEndpoint = `${baseUrlAuth}/authentication/select`;
+const urlLogoutEndpoint = `${baseUrlAuth}/authentication/logout`;
+
 const urlTesterList = `${baseUrlTester}/tester/list`;
 
 export {
   urlCheckToken,
   urlPageValid,
   urlSiteUrls,
+  urlLoginEndpoint,
+  urlLoginSelectEndpoint,
+  urlLogoutEndpoint,
   // For test use only
   urlTesterList,
 };

ServicesWeb/customer/src/fetchers/types/login/validations.ts

@@ -0,0 +1,15 @@
+interface LoginViaAccessKeys {
+  accessKey: string;
+  password: string;
+  rememberMe: boolean;
+}
+
+interface LoginSelect {
+  uuid: string;
+}
+
+interface LoginSelectOccupant {
+  uuid: any;
+}
+
+export type { LoginViaAccessKeys, LoginSelect, LoginSelectOccupant };

ServicesWeb/customer/src/pages/multi/index.ts

@@ -1,10 +1,10 @@
-import { DashboardPage } from '@/components/custom/content/DashboardPage';
+import { DashboardPage } from "@/components/custom/content/DashboardPage";
 
 const pageIndexMulti: Record<string, Record<string, React.FC<any>>> = {
-    '/dashboard': {
+  "/dashboard": {
-        'DashboardPage': DashboardPage
+    DashboardPage: DashboardPage,
   },
   // Add more pages as needed
 };
 
-export default pageIndexMulti;
+export { pageIndexMulti };

ServicesWeb/customer/src/pages/single/auth/login/hook.ts

@@ -0,0 +1,37 @@
+import { LanguageTypes } from "@/validations/mutual/language/validations";
+
+export function loginHook(
+  startTransition: any,
+  data: any,
+  setError: any,
+  setJsonText: any,
+  Router: any,
+  lang: LanguageTypes
+) {
+  try {
+    const sendData = { ...data };
+    startTransition(() => {
+      fetch("/api/login/email", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(sendData),
+      })
+        .then((response) => {
+          if (response.status === 200) {
+            response.json().then((data) => {
+              setTimeout(() => {
+                Router.push(`/panel/dashboard`);
+              }, 100);
+            });
+          } else {
+            response.json().then((data) => {
+              setError(data?.message);
+            });
+          }
+        })
+        .catch(() => {});
+    });
+  } catch (error) {
+    setError("An error occurred during login");
+  }
+}

ServicesWeb/customer/src/pages/single/auth/login/language.ts

@@ -0,0 +1,22 @@
+export const loginTranslation = {
+  tr: {
+    email: "E-Posta",
+    password: "Şifre",
+    rememberMe: "Beni Hatırla",
+    login: "Giriş Yap",
+    successMessage: "Giriş Yapıldı",
+    errorMessage: "Giriş Yapılmadı",
+    pendingMessage: "Giriş Yapılıyor...",
+    responseData: "Giriş Verileri",
+  },
+  en: {
+    email: "Email",
+    password: "Password",
+    rememberMe: "Remember Me",
+    login: "Login",
+    successMessage: "Login completed successfully",
+    errorMessage: "Login failed",
+    pendingMessage: "Logging in...",
+    responseData: "Response Data",
+  },
+};

ServicesWeb/customer/src/pages/single/auth/login/page.tsx

@@ -0,0 +1,62 @@
+"use client";
+import { useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { LoginFormData } from "./types";
+import { loginSchemaEmail } from "./schemas";
+import { loginTranslation } from "./language";
+import { loginHook } from "./hook";
+import { AuthPageProps } from "@/validations/mutual/auth/props";
+
+function Login({ language }: AuthPageProps) {
+  const Router = useRouter();
+  const translation = loginTranslation[language];
+
+  const [isPending, startTransition] = useTransition();
+  const [error, setError] = useState<string | null>(null);
+  const [jsonText, setJsonText] = useState<string | null>(null);
+
+  const { register, formState: { errors }, handleSubmit, } = useForm<LoginFormData>({ resolver: zodResolver(loginSchemaEmail) });
+  const onSubmit = async (data: LoginFormData) => { loginHook(startTransition, data, setError, setJsonText, Router, language) };
+
+  return (
+    <>
+      <div className="flex h-full min-h-[inherit] flex-col items-center justify-center gap-4">
+        <div className="w-full max-w-md rounded-lg bg-white p-8 shadow-md">
+          <h2 className="mb-6 text-center text-2xl font-bold text-gray-900">{translation.login}</h2>
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-gray-700">{translation.email}</label>
+              <input {...register("email")} type="email" id="email" className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500" />
+              {errors.email && (<p className="mt-1 text-sm text-red-600">{errors.email.message}</p>)}
+            </div>
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-gray-700">{translation.password}</label>
+              <input {...register("password")} type="password" id="password" className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500" />
+              {errors.password && (<p className="mt-1 text-sm text-red-600">{errors.password.message}</p>)}
+            </div>
+            {error && (<div className="rounded-md bg-red-50 p-4"><p className="text-sm text-red-700">{error}</p></div>)}
+            <button type="submit" disabled={isPending} className="w-full rounded-md bg-indigo-600 px-4 py-2 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50">
+              {isPending ? translation.pendingMessage : translation.login}</button>
+          </form>
+        </div>
+        {jsonText && (
+          <div className="w-full max-w-md rounded-lg bg-white p-8 shadow-md">
+            <h2 className="mb-4 text-center text-xl font-bold text-gray-900">{translation.responseData}</h2>
+            <div className="space-y-2">
+              {Object.entries(JSON.parse(jsonText)).map(([key, value]) => (
+                <div key={key} className="flex items-start gap-2">
+                  <strong className="text-gray-700">{key}:</strong>
+                  <span className="text-gray-600">{typeof value === "object" ? JSON.stringify(value) : value?.toString() || "N/A"}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+export default Login;

ServicesWeb/customer/src/pages/single/auth/login/schemas.ts

@@ -0,0 +1,15 @@
+import { z } from "zod";
+
+const loginSchemaEmail = z.object({
+  email: z.string().email("Invalid email address"),
+  password: z.string().min(5, "Password must be at least 5 characters"),
+  rememberMe: z.boolean().optional().default(false),
+});
+
+const loginSchemaPhone = z.object({
+  phone: z.string().regex(/^[0-9]{10}$/, "Invalid phone number"),
+  password: z.string().min(5, "Password must be at least 5 characters"),
+  rememberMe: z.boolean().optional().default(false),
+});
+
+export { loginSchemaEmail, loginSchemaPhone };

ServicesWeb/customer/src/pages/single/auth/login/types.ts

@@ -0,0 +1,13 @@
+type LoginFormData = {
+  email: string;
+  password: string;
+  rememberMe?: boolean;
+};
+
+type LoginFormDataPhone = {
+  phone: string;
+  password: string;
+  rememberMe?: boolean;
+};
+
+export type { LoginFormData, LoginFormDataPhone };

ServicesWeb/customer/src/validations/mutual/auth/props.ts

@@ -0,0 +1,13 @@
+import { LanguageTypes } from "../language/validations";
+
+// <AuthLayout params={params} searchParams={searchParams} lang={lang} page={page} />
+interface AuthLayoutProps {
+  page: React.ReactNode;
+  lang: LanguageTypes;
+  activePageUrl: string;
+}
+interface AuthPageProps {
+  query?: { [key: string]: string | string[] | undefined };
+  language: LanguageTypes;
+}
+export type { AuthLayoutProps, AuthPageProps };

ServicesWeb/customer/src/validations/mutual/pages/props.ts

@@ -0,0 +1,7 @@
+type ParamsType = { page: string[] | undefined };
+interface AuthServerProps {
+  params: Promise<{ page: string[] | undefined }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}
+
+export type { ParamsType, AuthServerProps };

example_components/content/content.html

@@ -0,0 +1,188 @@
+<!-- Content -->
+<div class="p-6">
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
+        <div class="bg-white rounded-md border border-gray-100 p-6 shadow-md shadow-black/5">
+            <div class="flex justify-between mb-6">
+                <div>
+                    <div class="flex items-center mb-1">
+                        <div class="text-2xl font-semibold">2</div>
+                    </div>
+                    <div class="text-sm font-medium text-gray-400">Users</div>
+                </div>
+                 <div class="dropdown">
+                    <button type="button" class="dropdown-toggle text-gray-400 hover:text-gray-600"><i class="ri-more-fill"></i></button>
+                    <ul class="dropdown-menu shadow-md shadow-black/5 z-30 hidden py-1.5 rounded-md bg-white border border-gray-100 w-full max-w-[140px]">
+                        <li>
+                            <a href="#" class="flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50">Profile</a>
+                        </li>
+                        <li>
+                            <a href="#" class="flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50">Settings</a>
+                        </li>
+                        <li>
+                            <a href="#" class="flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50">Logout</a>
+                        </li>
+                    </ul>
+                </div> 
+            </div>
+            <a href="/gebruikers" class="text-[#f84525] font-medium text-sm hover:text-red-800">View</a>
+        </div>
+        <div class="bg-white rounded-md border border-gray-100 p-6 shadow-md shadow-black/5">
+            <div class="flex justify-between mb-4">
+                <div>
+                    <div class="flex items-center mb-1">
+                        <div class="text-2xl font-semibold">100</div>
+                        <div class="p-1 rounded bg-emerald-500/10 text-emerald-500 text-[12px] font-semibold leading-none ml-2">+30%</div>
+                    </div>
+                    <div class="text-sm font-medium text-gray-400">Companies</div>
+                </div>
+                 <div class="dropdown">
+                    <button type="button" class="dropdown-toggle text-gray-400 hover:text-gray-600"><i class="ri-more-fill"></i></button>
+                    <ul class="dropdown-menu shadow-md shadow-black/5 z-30 hidden py-1.5 rounded-md bg-white border border-gray-100 w-full max-w-[140px]">
+                        <li>
+                            <a href="#" class="flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50">Profile</a>
+                        </li>
+                        <li>
+                            <a href="#" class="flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50">Settings</a>
+                        </li>
+                        <li>
+                            <a href="#" class="flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50">Logout</a>
+                        </li>
+                    </ul>
+                </div> 
+            </div>
+            <a href="/dierenartsen" class="text-[#f84525] font-medium text-sm hover:text-red-800">View</a>
+        </div>
+        <div class="bg-white rounded-md border border-gray-100 p-6 shadow-md shadow-black/5">
+            <div class="flex justify-between mb-6">
+                <div>
+                    <div class="text-2xl font-semibold mb-1">100</div>
+                    <div class="text-sm font-medium text-gray-400">Blogs</div>
+                </div>
+                 <div class="dropdown">
+                    <button type="button" class="dropdown-toggle text-gray-400 hover:text-gray-600"><i class="ri-more-fill"></i></button>
+                    <ul class="dropdown-menu shadow-md shadow-black/5 z-30 hidden py-1.5 rounded-md bg-white border border-gray-100 w-full max-w-[140px]">
+                        <li>
+                            <a href="#" class="flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50">Profile</a>
+                        </li>
+                        <li>
+                            <a href="#" class="flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50">Settings</a>
+                        </li>
+                        <li>
+                            <a href="#" class="flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50">Logout</a>
+                        </li>
+                    </ul>
+                </div> 
+            </div>
+            <a href="" class="text-[#f84525] font-medium text-sm hover:text-red-800">View</a>
+        </div>
+    </div>
+    
+    <!-- Tables section -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+        <!-- Users table -->
+        <div class="p-6 relative flex flex-col min-w-0 mb-4 lg:mb-0 break-words bg-gray-50 dark:bg-gray-800 w-full shadow-lg rounded">
+            <div class="rounded-t mb-0 px-0 border-0">
+              <div class="flex flex-wrap items-center px-4 py-2">
+                <div class="relative w-full max-w-full flex-grow flex-1">
+                  <h3 class="font-semibold text-base text-gray-900 dark:text-gray-50">Users</h3>
+                </div>
+              </div>
+              <div class="block w-full overflow-x-auto">
+                <table class="items-center w-full bg-transparent border-collapse">
+                  <thead>
+                    <tr>
+                      <th class="px-4 bg-gray-100 dark:bg-gray-600 text-gray-500 dark:text-gray-100 align-middle border border-solid border-gray-200 dark:border-gray-500 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">Role</th>
+                      <th class="px-4 bg-gray-100 dark:bg-gray-600 text-gray-500 dark:text-gray-100 align-middle border border-solid border-gray-200 dark:border-gray-500 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left">Amount</th>
+                      <th class="px-4 bg-gray-100 dark:bg-gray-600 text-gray-500 dark:text-gray-100 align-middle border border-solid border-gray-200 dark:border-gray-500 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left min-w-140-px"></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr class="text-gray-700 dark:text-gray-100">
+                      <th class="border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">Administrator</th>
+                      <td class="border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">1</td>
+                      <td class="border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
+                        <div class="flex items-center">
+                          <span class="mr-2">70%</span>
+                          <div class="relative w-full">
+                            <div class="overflow-hidden h-2 text-xs flex rounded bg-blue-200">
+                              <div style="width: 70%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-600"></div>
+                            </div>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr class="text-gray-700 dark:text-gray-100">
+                      <th class="border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">User</th>
+                      <td class="border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">6</td>
+                      <td class="border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
+                        <div class="flex items-center">
+                          <span class="mr-2">40%</span>
+                          <div class="relative w-full">
+                            <div class="overflow-hidden h-2 text-xs flex rounded bg-blue-200">
+                              <div style="width: 40%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500"></div>
+                            </div>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+        </div>
+        
+        <!-- Activities table -->
+        <div class="bg-white border border-gray-100 shadow-md shadow-black/5 p-6 rounded-md">
+            <div class="flex justify-between mb-4 items-start">
+                <div class="font-medium">Activities</div>
+                 <div class="dropdown">
+                    <button type="button" class="dropdown-toggle text-gray-400 hover:text-gray-600"><i class="ri-more-fill"></i></button>
+                    <ul class="dropdown-menu shadow-md shadow-black/5 z-30 hidden py-1.5 rounded-md bg-white border border-gray-100 w-full max-w-[140px]">
+                        <li>
+                            <a href="#" class="flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50">Profile</a>
+                        </li>
+                        <li>
+                            <a href="#" class="flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50">Settings</a>
+                        </li>
+                        <li>
+                            <a href="#" class="flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50">Logout</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="overflow-hidden">
+                <table class="w-full min-w-[540px]">
+                    <tbody>
+                        <tr>
+                            <td class="py-2 px-4 border-b border-b-gray-50">
+                                <div class="flex items-center">
+                                    <a href="#" class="text-gray-600 text-sm font-medium hover:text-blue-500 ml-2 truncate">Lorem Ipsum</a>
+                                </div>
+                            </td>
+                            <td class="py-2 px-4 border-b border-b-gray-50">
+                                <span class="text-[13px] font-medium text-gray-400">02-02-2024</span>
+                            </td>
+                            <td class="py-2 px-4 border-b border-b-gray-50">
+                                <span class="inline-block p-1 rounded bg-emerald-500/10 text-emerald-500 font-medium text-[12px] leading-none">Completed</span>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="py-2 px-4 border-b border-b-gray-50">
+                                <div class="flex items-center">
+                                    <a href="#" class="text-gray-600 text-sm font-medium hover:text-blue-500 ml-2 truncate">Lorem Ipsum</a>
+                                </div>
+                            </td>
+                            <td class="py-2 px-4 border-b border-b-gray-50">
+                                <span class="text-[13px] font-medium text-gray-400">02-02-2024</span>
+                            </td>
+                            <td class="py-2 px-4 border-b border-b-gray-50">
+                                <span class="inline-block p-1 rounded bg-rose-500/10 text-rose-500 font-medium text-[12px] leading-none">Cancelled</span>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- End Content -->

example_components/index.html

@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <link rel="preconnect" href="https://fonts.bunny.net">
+    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
+    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
+    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
+    
+    <title>Admin Panel</title>
+    
+    <!-- Include the stylesheets -->
+    <link rel="stylesheet" href="styles/main.css">
+</head>
+<body class="text-gray-800 font-inter">
+    <!-- Include the sidebar component -->
+    <div id="sidebar-container"></div>
+    <script>
+        fetch('sidebar/sidebar.html')
+            .then(response => response.text())
+            .then(html => {
+                document.getElementById('sidebar-container').innerHTML = html;
+            });
+    </script>
+    
+    <main class="w-full md:w-[calc(100%-256px)] md:ml-64 bg-gray-200 min-h-screen transition-all main">
+        <!-- Include the navbar component -->
+        <div id="navbar-container"></div>
+        <script>
+            fetch('navbar/navbar.html')
+                .then(response => response.text())
+                .then(html => {
+                    document.getElementById('navbar-container').innerHTML = html;
+                });
+        </script>
+        
+        <!-- Include the content component -->
+        <div id="content-container"></div>
+        <script>
+            fetch('content/content.html')
+                .then(response => response.text())
+                .then(html => {
+                    document.getElementById('content-container').innerHTML = html;
+                });
+        </script>
+    </main>
+    
+    <script src="https://unpkg.com/@popperjs/core@2"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    
+    <!-- Include the JavaScript files -->
+    <script src="scripts/sidebar.js"></script>
+    <script src="scripts/popper.js"></script>
+    <script src="scripts/tabs.js"></script>
+</body>
+</html>

example_components/navbar/navbar.html

@@ -0,0 +1,94 @@
+<!-- navbar -->
+<div class="py-2 px-6 bg-[#f8f4f3] flex items-center shadow-md shadow-black/5 sticky top-0 left-0 z-30">
+    <button type="button" class="text-lg text-gray-900 font-semibold sidebar-toggle">
+        <i class="ri-menu-line"></i>
+    </button>
+
+    <ul class="ml-auto flex items-center">
+        <li class="mr-1 dropdown">
+            <button type="button" class="dropdown-toggle text-gray-400 mr-4 w-8 h-8 rounded flex items-center justify-center hover:text-gray-600">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="hover:bg-gray-100 rounded-full" viewBox="0 0 24 24" style="fill: gray;transform: ;msFilter:;"><path d="M19.023 16.977a35.13 35.13 0 0 1-1.367-1.384c-.372-.378-.596-.653-.596-.653l-2.8-1.337A6.962 6.962 0 0 0 16 9c0-3.859-3.14-7-7-7S2 5.141 2 9s3.14 7 7 7c1.763 0 3.37-.66 4.603-1.739l1.337 2.8s.275.224.653.596c.387.363.896.854 1.384 1.367l1.358 1.392.604.646 2.121-2.121-.646-.604c-.379-.372-.885-.866-1.391-1.36zM9 14c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5z"></path></svg>                    
+            </button>
+            <div class="dropdown-menu shadow-md shadow-black/5 z-30 hidden max-w-xs w-full bg-white rounded-md border border-gray-100">
+                <form action="" class="p-4 border-b border-b-gray-100">
+                    <div class="relative w-full">
+                        <input type="text" class="py-2 pr-4 pl-10 bg-gray-50 w-full outline-none border border-gray-100 rounded-md text-sm focus:border-blue-500" placeholder="Search...">
+                        <i class="ri-search-line absolute top-1/2 left-4 -translate-y-1/2 text-gray-900"></i>
+                    </div>
+                </form>
+            </div>
+        </li>
+        <li class="dropdown">
+            <button type="button" class="dropdown-toggle text-gray-400 mr-4 w-8 h-8 rounded flex items-center justify-center hover:text-gray-600">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="hover:bg-gray-100 rounded-full" viewBox="0 0 24 24" style="fill: gray;transform: ;msFilter:;"><path d="M19 13.586V10c0-3.217-2.185-5.927-5.145-6.742C13.562 2.52 12.846 2 12 2s-1.562.52-1.855 1.258C7.185 4.074 5 6.783 5 10v3.586l-1.707 1.707A.996.996 0 0 0 3 16v2a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-2a.996.996 0 0 0-.293-.707L19 13.586zM19 17H5v-.586l1.707-1.707A.996.996 0 0 0 7 14v-4c0-2.757 2.243-5 5-5s5 2.243 5 5v4c0 .266.105.52.293.707L19 16.414V17zm-7 5a2.98 2.98 0 0 0 2.818-2H9.182A2.98 2.98 0 0 0 12 22z"></path></svg>                    
+            </button>
+            <div class="dropdown-menu shadow-md shadow-black/5 z-30 hidden max-w-xs w-full bg-white rounded-md border border-gray-100">
+                <div class="flex items-center px-4 pt-4 border-b border-b-gray-100 notification-tab">
+                    <button type="button" data-tab="notification" data-tab-page="notifications" class="text-gray-400 font-medium text-[13px] hover:text-gray-600 border-b-2 border-b-transparent mr-4 pb-1 active">Notifications</button>
+                    <button type="button" data-tab="notification" data-tab-page="messages" class="text-gray-400 font-medium text-[13px] hover:text-gray-600 border-b-2 border-b-transparent mr-4 pb-1">Messages</button>
+                </div>
+                <div class="my-2">
+                    <ul class="max-h-64 overflow-y-auto" data-tab-for="notification" data-page="notifications">
+                        <li>
+                            <a href="#" class="py-2 px-4 flex items-center hover:bg-gray-50 group">
+                                <img src="https://placehold.co/32x32" alt="" class="w-8 h-8 rounded block object-cover align-middle">
+                                <div class="ml-2">
+                                    <div class="text-[13px] text-gray-600 font-medium truncate group-hover:text-blue-500">New order</div>
+                                    <div class="text-[11px] text-gray-400">from a user</div>
+                                </div>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#" class="py-2 px-4 flex items-center hover:bg-gray-50 group">
+                                <img src="https://placehold.co/32x32" alt="" class="w-8 h-8 rounded block object-cover align-middle">
+                                <div class="ml-2">
+                                    <div class="text-[13px] text-gray-600 font-medium truncate group-hover:text-blue-500">New order</div>
+                                    <div class="text-[11px] text-gray-400">from a user</div>
+                                </div>
+                            </a>
+                        </li>
+                    </ul>
+                    <ul class="max-h-64 overflow-y-auto hidden" data-tab-for="notification" data-page="messages">
+                        <li>
+                            <a href="#" class="py-2 px-4 flex items-center hover:bg-gray-50 group">
+                                <img src="https://placehold.co/32x32" alt="" class="w-8 h-8 rounded block object-cover align-middle">
+                                <div class="ml-2">
+                                    <div class="text-[13px] text-gray-600 font-medium truncate group-hover:text-blue-500">John Doe</div>
+                                    <div class="text-[11px] text-gray-400">Hello there!</div>
+                                </div>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#" class="py-2 px-4 flex items-center hover:bg-gray-50 group">
+                                <img src="https://placehold.co/32x32" alt="" class="w-8 h-8 rounded block object-cover align-middle">
+                                <div class="ml-2">
+                                    <div class="text-[13px] text-gray-600 font-medium truncate group-hover:text-blue-500">Jane Doe</div>
+                                    <div class="text-[11px] text-gray-400">Hi! How are you?</div>
+                                </div>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </li>
+        <li class="dropdown">
+            <button type="button" class="dropdown-toggle flex items-center gap-2">
+                <img src="https://placehold.co/32x32" alt="" class="w-8 h-8 rounded block object-cover align-middle">
+                <span class="text-sm font-medium text-gray-600">John Doe</span>
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-400" viewBox="0 0 24 24" style="fill: currentColor;transform: ;msFilter:;"><path d="M16.293 9.293 12 13.586 7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z"></path></svg>
+            </button>
+            <ul class="dropdown-menu shadow-md shadow-black/5 z-30 hidden py-1.5 rounded-md bg-white border border-gray-100 w-full max-w-[140px]">
+                <li>
+                    <a href="#" class="flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50">Profile</a>
+                </li>
+                <li>
+                    <a href="#" class="flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50">Settings</a>
+                </li>
+                <li>
+                    <a href="#" class="flex items-center text-[13px] py-1.5 px-4 text-gray-600 hover:text-blue-500 hover:bg-gray-50">Logout</a>
+                </li>
+            </ul>
+        </li>
+    </ul>
+</div>
+<!-- end navbar -->

example_components/scripts/popper.js

@@ -0,0 +1,88 @@
+// Popper functionality for dropdowns
+document.addEventListener('DOMContentLoaded', function() {
+    // start: Popper
+    const popperInstance = {};
+    document.querySelectorAll('.dropdown').forEach(function (item, index) {
+        const popperId = 'popper-' + index;
+        const toggle = item.querySelector('.dropdown-toggle');
+        const menu = item.querySelector('.dropdown-menu');
+        
+        if (toggle && menu) {
+            menu.dataset.popperId = popperId;
+            popperInstance[popperId] = Popper.createPopper(toggle, menu, {
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [0, 8],
+                        },
+                    },
+                    {
+                        name: 'preventOverflow',
+                        options: {
+                            padding: 24,
+                        },
+                    },
+                ],
+                placement: 'bottom-end'
+            });
+        }
+    });
+    
+    document.addEventListener('click', function (e) {
+        const toggle = e.target.closest('.dropdown-toggle');
+        const menu = e.target.closest('.dropdown-menu');
+        
+        if (toggle) {
+            const menuEl = toggle.closest('.dropdown').querySelector('.dropdown-menu');
+            const popperId = menuEl.dataset.popperId;
+            
+            if (menuEl.classList.contains('hidden')) {
+                hideDropdown();
+                menuEl.classList.remove('hidden');
+                showPopper(popperId);
+            } else {
+                menuEl.classList.add('hidden');
+                hidePopper(popperId);
+            }
+        } else if (!menu) {
+            hideDropdown();
+        }
+    });
+
+    function hideDropdown() {
+        document.querySelectorAll('.dropdown-menu').forEach(function (item) {
+            item.classList.add('hidden');
+        });
+    }
+    
+    function showPopper(popperId) {
+        if (popperInstance[popperId]) {
+            popperInstance[popperId].setOptions(function (options) {
+                return {
+                    ...options,
+                    modifiers: [
+                        ...options.modifiers,
+                        { name: 'eventListeners', enabled: true },
+                    ],
+                }
+            });
+            popperInstance[popperId].update();
+        }
+    }
+    
+    function hidePopper(popperId) {
+        if (popperInstance[popperId]) {
+            popperInstance[popperId].setOptions(function (options) {
+                return {
+                    ...options,
+                    modifiers: [
+                        ...options.modifiers,
+                        { name: 'eventListeners', enabled: false },
+                    ],
+                }
+            });
+        }
+    }
+    // end: Popper
+});

example_components/scripts/sidebar.js

@@ -0,0 +1,42 @@
+// Sidebar functionality
+document.addEventListener('DOMContentLoaded', function() {
+    // start: Sidebar
+    const sidebarToggle = document.querySelector('.sidebar-toggle');
+    const sidebarOverlay = document.querySelector('.sidebar-overlay');
+    const sidebarMenu = document.querySelector('.sidebar-menu');
+    const main = document.querySelector('.main');
+    
+    if (sidebarToggle) {
+        sidebarToggle.addEventListener('click', function (e) {
+            e.preventDefault();
+            main.classList.toggle('active');
+            sidebarOverlay.classList.toggle('hidden');
+            sidebarMenu.classList.toggle('-translate-x-full');
+        });
+    }
+    
+    if (sidebarOverlay) {
+        sidebarOverlay.addEventListener('click', function (e) {
+            e.preventDefault();
+            main.classList.add('active');
+            sidebarOverlay.classList.add('hidden');
+            sidebarMenu.classList.add('-translate-x-full');
+        });
+    }
+    
+    document.querySelectorAll('.sidebar-dropdown-toggle').forEach(function (item) {
+        item.addEventListener('click', function (e) {
+            e.preventDefault();
+            const parent = item.closest('.group');
+            if (parent.classList.contains('selected')) {
+                parent.classList.remove('selected');
+            } else {
+                document.querySelectorAll('.sidebar-dropdown-toggle').forEach(function (i) {
+                    i.closest('.group').classList.remove('selected');
+                });
+                parent.classList.add('selected');
+            }
+        });
+    });
+    // end: Sidebar
+});

example_components/scripts/tabs.js

@@ -0,0 +1,29 @@
+// Tab functionality for notifications and messages
+document.addEventListener('DOMContentLoaded', function() {
+    // start: Tab
+    document.querySelectorAll('[data-tab]').forEach(function (item) {
+        item.addEventListener('click', function (e) {
+            e.preventDefault();
+            const tab = item.dataset.tab;
+            const page = item.dataset.tabPage;
+            const target = document.querySelector('[data-tab-for="' + tab + '"][data-page="' + page + '"]');
+            
+            // Remove active class from all tab buttons
+            document.querySelectorAll('[data-tab="' + tab + '"]').forEach(function (i) {
+                i.classList.remove('active');
+            });
+            
+            // Hide all tab content
+            document.querySelectorAll('[data-tab-for="' + tab + '"]').forEach(function (i) {
+                i.classList.add('hidden');
+            });
+            
+            // Add active class to clicked tab button and show its content
+            item.classList.add('active');
+            if (target) {
+                target.classList.remove('hidden');
+            }
+        });
+    });
+    // end: Tab
+});

example_components/sidebar/sidebar.html

@@ -0,0 +1,75 @@
+<!--sidenav -->
+<div class="fixed left-0 top-0 w-64 h-full bg-[#f8f4f3] p-4 z-50 sidebar-menu transition-transform">
+    <a href="#" class="flex items-center pb-4 border-b border-b-gray-800">
+        <h2 class="font-bold text-2xl">LOREM <span class="bg-[#f84525] text-white px-2 rounded-md">IPSUM</span></h2>
+    </a>
+    <ul class="mt-4">
+        <span class="text-gray-400 font-bold">ADMIN</span>
+        <li class="mb-1 group">
+            <a href="" class="flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100">
+                <i class="ri-home-2-line mr-3 text-lg"></i>
+                <span class="text-sm">Dashboard</span>
+            </a>
+        </li>
+        <li class="mb-1 group">
+            <a href="" class="flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100 sidebar-dropdown-toggle">
+                <i class='bx bx-user mr-3 text-lg'></i>                
+                <span class="text-sm">Users</span>
+                <i class="ri-arrow-right-s-line ml-auto group-[.selected]:rotate-90"></i>
+            </a>
+            <ul class="pl-7 mt-2 hidden group-[.selected]:block">
+                <li class="mb-4">
+                    <a href="" class="text-gray-900 text-sm flex items-center hover:text-[#f84525] before:contents-[''] before:w-1 before:h-1 before:rounded-full before:bg-gray-300 before:mr-3">All</a>
+                </li> 
+                <li class="mb-4">
+                    <a href="" class="text-gray-900 text-sm flex items-center hover:text-[#f84525] before:contents-[''] before:w-1 before:h-1 before:rounded-full before:bg-gray-300 before:mr-3">Roles</a>
+                </li> 
+            </ul>
+        </li>
+        <li class="mb-1 group">
+            <a href="" class="flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100">
+                <i class='bx bx-list-ul mr-3 text-lg'></i>                
+                <span class="text-sm">Activities</span>
+            </a>
+        </li>
+        <span class="text-gray-400 font-bold">BLOG</span>
+        <li class="mb-1 group">
+            <a href="" class="flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100 sidebar-dropdown-toggle">
+                <i class='bx bxl-blogger mr-3 text-lg' ></i>                 
+                <span class="text-sm">Post</span>
+                <i class="ri-arrow-right-s-line ml-auto group-[.selected]:rotate-90"></i>
+            </a>
+            <ul class="pl-7 mt-2 hidden group-[.selected]:block">
+                <li class="mb-4">
+                    <a href="" class="text-gray-900 text-sm flex items-center hover:text-[#f84525] before:contents-[''] before:w-1 before:h-1 before:rounded-full before:bg-gray-300 before:mr-3">All</a>
+                </li> 
+                <li class="mb-4">
+                    <a href="" class="text-gray-900 text-sm flex items-center hover:text-[#f84525] before:contents-[''] before:w-1 before:h-1 before:rounded-full before:bg-gray-300 before:mr-3">Categories</a>
+                </li> 
+            </ul>
+        </li>
+        <li class="mb-1 group">
+            <a href="" class="flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100">
+                <i class='bx bx-archive mr-3 text-lg'></i>                
+                <span class="text-sm">Archive</span>
+            </a>
+        </li>
+        <span class="text-gray-400 font-bold">PERSONAL</span>
+        <li class="mb-1 group">
+            <a href="" class="flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100">
+                <i class='bx bx-bell mr-3 text-lg' ></i>                
+                <span class="text-sm">Notifications</span>
+                <span class=" md:block px-2 py-0.5 ml-auto text-xs font-medium tracking-wide text-red-600 bg-red-200 rounded-full">5</span>
+            </a>
+        </li>
+        <li class="mb-1 group">
+            <a href="" class="flex font-semibold items-center py-2 px-4 text-gray-900 hover:bg-gray-950 hover:text-gray-100 rounded-md group-[.active]:bg-gray-800 group-[.active]:text-white group-[.selected]:bg-gray-950 group-[.selected]:text-gray-100">
+                <i class='bx bx-envelope mr-3 text-lg' ></i>                
+                <span class="text-sm">Messages</span>
+                <span class=" md:block px-2 py-0.5 ml-auto text-xs font-medium tracking-wide text-green-600 bg-green-200 rounded-full">2 New</span>
+            </a>
+        </li>
+    </ul>
+</div>
+<div class="fixed top-0 left-0 w-full h-full bg-black/50 z-40 md:hidden sidebar-overlay"></div>
+<!-- end sidenav -->

example_components/styles/main.css

@@ -0,0 +1,83 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+/* Base styles */
+body {
+  font-family: 'Inter', sans-serif;
+}
+
+/* Sidebar styles */
+.sidebar-menu {
+  transition: transform 0.3s ease;
+}
+
+.sidebar-menu.-translate-x-full {
+  transform: translateX(-100%);
+}
+
+/* Dropdown styles */
+.dropdown-menu {
+  transition: all 0.2s ease;
+}
+
+/* Active states */
+.active {
+  border-bottom: 2px solid #f84525;
+  color: #111827;
+}
+
+/* Group selected states */
+.group.selected .group-[\.selected]\:rotate-90 {
+  transform: rotate(90deg);
+}
+
+.group.selected .group-[\.selected]\:block {
+  display: block;
+}
+
+.group.selected .group-[\.selected]\:bg-gray-950 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 7 18 / var(--tw-bg-opacity));
+}
+
+.group.active .group-[\.active]\:text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.group.selected .group-[\.selected]\:text-gray-100 {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+
+/* Responsive styles */
+@media (min-width: 768px) {
+  .md\:ml-64 {
+    margin-left: 16rem;
+  }
+
+  .md\:hidden {
+    display: none;
+  }
+
+  .md\:w-\[calc\(100\%-256px\)\] {
+    width: calc(100% - 256px);
+  }
+
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
+  .lg\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}