@greatapps/common 1.0.0

package/dist/modules/users/action/find-user-by-id.action.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/modules/users/action/find-user-by-id.action.ts"],"sourcesContent":["'use server';\r\n\r\nimport { userService } from '../services/user.service';\r\nimport { User } from '../schema';\r\n\r\nexport async function findUserById(): Promise<{\r\n  success: boolean;\r\n  data?: User;\r\n  error?: string;\r\n}> {\r\n  try {\r\n    const user = await userService.findById();\r\n\r\n    return {\r\n      success: true,\r\n      data: user,\r\n    };\r\n  } catch (error) {\r\n    console.error('[findUserById] Error:', error);\r\n    return {\r\n      success: false,\r\n      error: error instanceof Error ? error.message : 'Erro desconhecido',\r\n    };\r\n  }\r\n}\r\n"],"mappings":";AAEA,SAAS,mBAAmB;AAG5B,eAAsB,eAInB;AACD,MAAI;AACF,UAAM,OAAO,MAAM,YAAY,SAAS;AAExC,WAAO;AAAA,MACL,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF,SAAS,OAAO;AACd,YAAQ,MAAM,yBAAyB,KAAK;AAC5C,WAAO;AAAA,MACL,SAAS;AAAA,MACT,OAAO,iBAAiB,QAAQ,MAAM,UAAU;AAAA,IAClD;AAAA,EACF;AACF;","names":[]}

package/dist/modules/users/schema.mjs

@@ -0,0 +1,11 @@
+var UserProfile = /* @__PURE__ */ ((UserProfile2) => {
+  UserProfile2["viewer"] = "viewer";
+  UserProfile2["collaborator"] = "collaborator";
+  UserProfile2["admin"] = "admin";
+  UserProfile2["owner"] = "owner";
+  return UserProfile2;
+})(UserProfile || {});
+export {
+  UserProfile
+};
+//# sourceMappingURL=schema.mjs.map

package/dist/modules/users/schema.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/modules/users/schema.ts"],"sourcesContent":["export enum UserProfile {\r\n  viewer = 'viewer',\r\n  collaborator = 'collaborator',\r\n  admin = 'admin',\r\n  owner = 'owner',\r\n}\r\n\r\nexport interface User {\r\n  // Identificação\r\n  id: number;\r\n  id_wl: number;\r\n  id_account: number;\r\n  id_api: number;\r\n\r\n  // Dados pessoais\r\n  name: string;\r\n  last_name: string;\r\n  email: string;\r\n  ddi: string;\r\n  phone: string;\r\n  rg: string | null;\r\n  cpf: string | null;\r\n  gender: number;\r\n\r\n  // Autenticação e segurança\r\n  two_factor_authentication: boolean;\r\n\r\n  // Perfil e permissões\r\n  profile: UserProfile;\r\n\r\n  // Preferências\r\n  language: string;\r\n  receive_sms: boolean;\r\n  receive_email: boolean;\r\n  photo: string | null;\r\n\r\n  // Metadados\r\n  deleted: number;\r\n  datetime_alt: string;\r\n  datetime_del: string | null;\r\n  datetime_add: string;\r\n\r\n  total_projects: number;\r\n  projects: { id: number; title: string }[];\r\n\r\n  initials?: string;\r\n  emailVerified?: boolean;\r\n  createdAt?: string;\r\n  updatedAt?: string;\r\n}\r\n\r\nexport interface GetUserDataResponse {\r\n  status: 0 | 1;\r\n  total: number;\r\n  data: User[];\r\n}\r\n\r\nexport interface JWTPayload {\r\n  session: {\r\n    location: {\r\n      continent: string;\r\n      country: string;\r\n      region: string;\r\n      city: string;\r\n      latitude: string;\r\n      longitude: string;\r\n    };\r\n    ip: string;\r\n    timezone: string;\r\n    agent: string;\r\n    code: string | null;\r\n  };\r\n  id_wl: string;\r\n  id_account: number;\r\n  id_user: number;\r\n  iss: string;\r\n  aud: string;\r\n  iat: number;\r\n}\r\n"],"mappings":"AAAO,IAAK,cAAL,kBAAKA,iBAAL;AACL,EAAAA,aAAA,YAAS;AACT,EAAAA,aAAA,kBAAe;AACf,EAAAA,aAAA,WAAQ;AACR,EAAAA,aAAA,WAAQ;AAJE,SAAAA;AAAA,GAAA;","names":["UserProfile"]}

package/dist/modules/users/services/user.service.mjs

@@ -0,0 +1,50 @@
+import "server-only";
+import { cookies } from "next/headers";
+import { ApiError } from "../../../infra/api/types";
+import { findWhitelabel } from "../../whitelabel/actions/find-whitelabel.action";
+const AUTH_COOKIE_NAME = "greatapps";
+const API_BASE_URL = process.env.R3_API_URL || "https://r3-api.greatapps.dev.br";
+class UserService {
+  async getAuthToken() {
+    const cookieStore = await cookies();
+    const token = cookieStore.get(AUTH_COOKIE_NAME)?.value;
+    if (!token) {
+      throw new ApiError("N\xE3o autenticado", "NOT_AUTHENTICATED", 401);
+    }
+    return token;
+  }
+  decodeJWT(token) {
+    try {
+      return JSON.parse(atob(token.split(".")[1]));
+    } catch {
+      throw new ApiError("Token inv\xE1lido", "INVALID_TOKEN", 401);
+    }
+  }
+  async findById() {
+    const token = await this.getAuthToken();
+    const payload = this.decodeJWT(token);
+    const { id_wl, id_account, id_user } = payload;
+    const { token: wlToken } = await findWhitelabel();
+    const url = `${API_BASE_URL}/v1/pt-br/${id_wl}/accounts/${id_account}/users/${id_user}`;
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        authorization: wlToken
+      }
+    });
+    if (!response.ok) {
+      throw new ApiError("Erro ao buscar dados do usu\xE1rio", "FETCH_ERROR", response.status);
+    }
+    const data = await response.json();
+    if (data.status === 0 || !data.data || data.data.length === 0) {
+      throw new ApiError("Dados do usu\xE1rio n\xE3o encontrados", "USER_NOT_FOUND", 404);
+    }
+    return data.data[0];
+  }
+}
+const userService = new UserService();
+export {
+  userService
+};
+//# sourceMappingURL=user.service.mjs.map

package/dist/modules/users/services/user.service.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/modules/users/services/user.service.ts"],"sourcesContent":["import 'server-only';\r\n\r\nimport { cookies } from 'next/headers';\r\n\r\nimport { ApiError } from '../../../infra/api/types';\r\nimport { GetUserDataResponse, JWTPayload, User } from '../schema';\r\nimport { findWhitelabel } from '../../whitelabel/actions/find-whitelabel.action';\r\n\r\nconst AUTH_COOKIE_NAME = 'greatapps';\r\nconst API_BASE_URL = process.env.R3_API_URL || 'https://r3-api.greatapps.dev.br';\r\n\r\nclass UserService {\r\n  private async getAuthToken(): Promise<string> {\r\n    const cookieStore = await cookies();\r\n    const token = cookieStore.get(AUTH_COOKIE_NAME)?.value;\r\n\r\n    if (!token) {\r\n      throw new ApiError('Não autenticado', 'NOT_AUTHENTICATED', 401);\r\n    }\r\n\r\n    return token;\r\n  }\r\n\r\n  private decodeJWT(token: string): JWTPayload {\r\n    try {\r\n      return JSON.parse(atob(token.split('.')[1])) as JWTPayload;\r\n    } catch {\r\n      throw new ApiError('Token inválido', 'INVALID_TOKEN', 401);\r\n    }\r\n  }\r\n\r\n  async findById(): Promise<User> {\r\n    const token = await this.getAuthToken();\r\n    const payload = this.decodeJWT(token);\r\n\r\n    const { id_wl, id_account, id_user } = payload;\r\n    const { token: wlToken } = await findWhitelabel();\r\n\r\n    const url = `${API_BASE_URL}/v1/pt-br/${id_wl}/accounts/${id_account}/users/${id_user}`;\r\n\r\n    const response = await fetch(url, {\r\n      method: 'GET',\r\n      headers: {\r\n        'Content-Type': 'application/json',\r\n        authorization: wlToken,\r\n      },\r\n    });\r\n\r\n    if (!response.ok) {\r\n      throw new ApiError('Erro ao buscar dados do usuário', 'FETCH_ERROR', response.status);\r\n    }\r\n\r\n    const data = (await response.json()) as GetUserDataResponse;\r\n\r\n    if (data.status === 0 || !data.data || data.data.length === 0) {\r\n      throw new ApiError('Dados do usuário não encontrados', 'USER_NOT_FOUND', 404);\r\n    }\r\n\r\n    return data.data[0];\r\n  }\r\n}\r\n\r\nexport const userService = new UserService();\r\n"],"mappings":"AAAA,OAAO;AAEP,SAAS,eAAe;AAExB,SAAS,gBAAgB;AAEzB,SAAS,sBAAsB;AAE/B,MAAM,mBAAmB;AACzB,MAAM,eAAe,QAAQ,IAAI,cAAc;AAE/C,MAAM,YAAY;AAAA,EAChB,MAAc,eAAgC;AAC5C,UAAM,cAAc,MAAM,QAAQ;AAClC,UAAM,QAAQ,YAAY,IAAI,gBAAgB,GAAG;AAEjD,QAAI,CAAC,OAAO;AACV,YAAM,IAAI,SAAS,sBAAmB,qBAAqB,GAAG;AAAA,IAChE;AAEA,WAAO;AAAA,EACT;AAAA,EAEQ,UAAU,OAA2B;AAC3C,QAAI;AACF,aAAO,KAAK,MAAM,KAAK,MAAM,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC;AAAA,IAC7C,QAAQ;AACN,YAAM,IAAI,SAAS,qBAAkB,iBAAiB,GAAG;AAAA,IAC3D;AAAA,EACF;AAAA,EAEA,MAAM,WAA0B;AAC9B,UAAM,QAAQ,MAAM,KAAK,aAAa;AACtC,UAAM,UAAU,KAAK,UAAU,KAAK;AAEpC,UAAM,EAAE,OAAO,YAAY,QAAQ,IAAI;AACvC,UAAM,EAAE,OAAO,QAAQ,IAAI,MAAM,eAAe;AAEhD,UAAM,MAAM,GAAG,YAAY,aAAa,KAAK,aAAa,UAAU,UAAU,OAAO;AAErF,UAAM,WAAW,MAAM,MAAM,KAAK;AAAA,MAChC,QAAQ;AAAA,MACR,SAAS;AAAA,QACP,gBAAgB;AAAA,QAChB,eAAe;AAAA,MACjB;AAAA,IACF,CAAC;AAED,QAAI,CAAC,SAAS,IAAI;AAChB,YAAM,IAAI,SAAS,sCAAmC,eAAe,SAAS,MAAM;AAAA,IACtF;AAEA,UAAM,OAAQ,MAAM,SAAS,KAAK;AAElC,QAAI,KAAK,WAAW,KAAK,CAAC,KAAK,QAAQ,KAAK,KAAK,WAAW,GAAG;AAC7D,YAAM,IAAI,SAAS,0CAAoC,kBAAkB,GAAG;AAAA,IAC9E;AAEA,WAAO,KAAK,KAAK,CAAC;AAAA,EACpB;AACF;AAEO,MAAM,cAAc,IAAI,YAAY;","names":[]}

package/dist/modules/whitelabel/actions/find-whitelabel.action.mjs

@@ -0,0 +1,19 @@
+import { headers } from "next/headers";
+import { whitelabelService } from "../services/whitelabel.service";
+import { ApiError } from "../../../infra/api/types";
+async function findWhitelabel() {
+  const headersList = await headers();
+  const host = headersList.get("host");
+  if (!host) {
+    throw new ApiError("Host header not found", "HOST_NOT_FOUND", 400);
+  }
+  const whitelabel = await whitelabelService.getTokenByDomain(host);
+  if (!whitelabel) {
+    throw new ApiError("Whitelabel not found", "WL_NOT_FOUND", 404);
+  }
+  return whitelabel;
+}
+export {
+  findWhitelabel
+};
+//# sourceMappingURL=find-whitelabel.action.mjs.map

package/dist/modules/whitelabel/actions/find-whitelabel.action.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/modules/whitelabel/actions/find-whitelabel.action.ts"],"sourcesContent":["import { headers } from \"next/headers\";\nimport { whitelabelService } from \"../services/whitelabel.service\";\nimport { ApiError } from \"../../../infra/api/types\";\n\nexport async function findWhitelabel() {\n    const headersList = await headers();\n    const host = headersList.get('host');\n\n    if (!host) {\n        throw new ApiError('Host header not found', 'HOST_NOT_FOUND', 400);\n    }\n\n    const whitelabel = await whitelabelService.getTokenByDomain(host);\n\n    if (!whitelabel) {\n        throw new ApiError('Whitelabel not found', 'WL_NOT_FOUND', 404);\n    }\n\n    return whitelabel;\n}"],"mappings":"AAAA,SAAS,eAAe;AACxB,SAAS,yBAAyB;AAClC,SAAS,gBAAgB;AAEzB,eAAsB,iBAAiB;AACnC,QAAM,cAAc,MAAM,QAAQ;AAClC,QAAM,OAAO,YAAY,IAAI,MAAM;AAEnC,MAAI,CAAC,MAAM;AACP,UAAM,IAAI,SAAS,yBAAyB,kBAAkB,GAAG;AAAA,EACrE;AAEA,QAAM,aAAa,MAAM,kBAAkB,iBAAiB,IAAI;AAEhE,MAAI,CAAC,YAAY;AACb,UAAM,IAAI,SAAS,wBAAwB,gBAAgB,GAAG;AAAA,EAClE;AAEA,SAAO;AACX;","names":[]}

package/dist/modules/whitelabel/schema.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=schema.mjs.map

package/dist/modules/whitelabel/schema.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/modules/whitelabel/services/whitelabel.service.mjs

@@ -0,0 +1,62 @@
+import "server-only";
+import greatCache from "@greatapps/cache";
+import { ApiError } from "../../../infra/api/types";
+class WhitelabelService {
+  getApiUrl() {
+    const apiUrl = process.env.R3_API_URL;
+    if (!apiUrl) {
+      throw new ApiError("R3_API_URL not configured", "CONFIG_ERROR", 500);
+    }
+    return apiUrl;
+  }
+  getToken() {
+    const token = process.env.WHITELABEL_TOKEN_MASTER;
+    if (!token) {
+      throw new ApiError("WHITELABEL_TOKEN_MASTER not configured", "CONFIG_ERROR", 500);
+    }
+    return token;
+  }
+  async getTokenByDomain(hostname) {
+    hostname = "greatapps.com.br";
+    const apiUrl = this.getApiUrl();
+    const whitelabelMasterToken = this.getToken();
+    const url = `${apiUrl}/v1/pt-br/1/whitelabel/${hostname}/token`;
+    console.log("[WhitelabelService] Fetching token for domain", { url });
+    const cache = new greatCache({
+      service: "whitelabel-service",
+      version: "1.0",
+      domain: "whitelabel-cache.greatapps.com.br",
+      ambient: process.env.NODE_ENV || "development"
+    });
+    const cachedData = await cache.select(`whitelabel-token-${hostname}`);
+    if (cachedData.status == 1 && "data" in cachedData && cachedData.data) {
+      console.log("[WhitelabelService] Cache hit for domain", { hostname });
+      return JSON.parse(cachedData.data);
+    }
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        authorization: whitelabelMasterToken
+      }
+    });
+    if (!response.ok) {
+      console.error("[WhitelabelService] Failed to fetch whitelabel token", { response });
+      throw new ApiError(
+        `Failed to fetch whitelabel token: ${response.status}`,
+        "FETCH_ERROR",
+        response.status
+      );
+    }
+    const result = await response.json();
+    if (result.status !== 1 || !result.data?.length) {
+      throw new ApiError("Whitelabel token not found", "TOKEN_NOT_FOUND", 404);
+    }
+    await cache.insert(`whitelabel-token-${hostname}`, JSON.stringify(result.data[0]), 604800);
+    return result.data[0];
+  }
+}
+const whitelabelService = new WhitelabelService();
+export {
+  whitelabelService
+};
+//# sourceMappingURL=whitelabel.service.mjs.map

package/dist/modules/whitelabel/services/whitelabel.service.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/modules/whitelabel/services/whitelabel.service.ts"],"sourcesContent":["import 'server-only';\r\n\r\nimport greatCache from '@greatapps/cache';\r\nimport { ApiError } from '../../../infra/api/types';\r\nimport { WhitelabelTokenApiResponse, WhitelabelTokenData } from '../schema';\r\n\r\nclass WhitelabelService {\r\n  private getApiUrl(): string {\r\n    const apiUrl = process.env.R3_API_URL;\r\n    if (!apiUrl) {\r\n      throw new ApiError('R3_API_URL not configured', 'CONFIG_ERROR', 500);\r\n    }\r\n    return apiUrl;\r\n  }\r\n\r\n  private getToken(): string {\r\n    const token = process.env.WHITELABEL_TOKEN_MASTER;\r\n    if (!token) {\r\n      throw new ApiError('WHITELABEL_TOKEN_MASTER not configured', 'CONFIG_ERROR', 500);\r\n    }\r\n    return token;\r\n  }\r\n\r\n  async getTokenByDomain(hostname: string): Promise<WhitelabelTokenData> {\r\n    hostname = 'greatapps.com.br';\r\n\r\n    const apiUrl = this.getApiUrl();\r\n    const whitelabelMasterToken = this.getToken();\r\n\r\n    const url = `${apiUrl}/v1/pt-br/1/whitelabel/${hostname}/token`;\r\n\r\n    console.log('[WhitelabelService] Fetching token for domain', { url });\r\n\r\n    const cache = new greatCache({\r\n      service: 'whitelabel-service',\r\n      version: '1.0',\r\n      domain: 'whitelabel-cache.greatapps.com.br',\r\n      ambient: process.env.NODE_ENV || 'development',\r\n    });\r\n\r\n    const cachedData = await cache.select(`whitelabel-token-${hostname}`);\r\n\r\n    if (cachedData.status == 1 && 'data' in cachedData && cachedData.data) {\r\n      console.log('[WhitelabelService] Cache hit for domain', { hostname });\r\n\r\n      return JSON.parse(cachedData.data) as WhitelabelTokenData;\r\n    }\r\n\r\n    const response = await fetch(url, {\r\n      method: 'GET',\r\n      headers: {\r\n        authorization: whitelabelMasterToken,\r\n      },\r\n    });\r\n\r\n    if (!response.ok) {\r\n      console.error('[WhitelabelService] Failed to fetch whitelabel token', { response });\r\n      throw new ApiError(\r\n        `Failed to fetch whitelabel token: ${response.status}`,\r\n        'FETCH_ERROR',\r\n        response.status\r\n      );\r\n    }\r\n\r\n    const result: WhitelabelTokenApiResponse = await response.json();\r\n\r\n    if (result.status !== 1 || !result.data?.length) {\r\n      throw new ApiError('Whitelabel token not found', 'TOKEN_NOT_FOUND', 404);\r\n    }\r\n\r\n    await cache.insert(`whitelabel-token-${hostname}`, JSON.stringify(result.data[0]), 604800);\r\n\r\n    return result.data[0];\r\n  }\r\n}\r\n\r\nexport const whitelabelService = new WhitelabelService();\r\n"],"mappings":"AAAA,OAAO;AAEP,OAAO,gBAAgB;AACvB,SAAS,gBAAgB;AAGzB,MAAM,kBAAkB;AAAA,EACd,YAAoB;AAC1B,UAAM,SAAS,QAAQ,IAAI;AAC3B,QAAI,CAAC,QAAQ;AACX,YAAM,IAAI,SAAS,6BAA6B,gBAAgB,GAAG;AAAA,IACrE;AACA,WAAO;AAAA,EACT;AAAA,EAEQ,WAAmB;AACzB,UAAM,QAAQ,QAAQ,IAAI;AAC1B,QAAI,CAAC,OAAO;AACV,YAAM,IAAI,SAAS,0CAA0C,gBAAgB,GAAG;AAAA,IAClF;AACA,WAAO;AAAA,EACT;AAAA,EAEA,MAAM,iBAAiB,UAAgD;AACrE,eAAW;AAEX,UAAM,SAAS,KAAK,UAAU;AAC9B,UAAM,wBAAwB,KAAK,SAAS;AAE5C,UAAM,MAAM,GAAG,MAAM,0BAA0B,QAAQ;AAEvD,YAAQ,IAAI,iDAAiD,EAAE,IAAI,CAAC;AAEpE,UAAM,QAAQ,IAAI,WAAW;AAAA,MAC3B,SAAS;AAAA,MACT,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS,QAAQ,IAAI,YAAY;AAAA,IACnC,CAAC;AAED,UAAM,aAAa,MAAM,MAAM,OAAO,oBAAoB,QAAQ,EAAE;AAEpE,QAAI,WAAW,UAAU,KAAK,UAAU,cAAc,WAAW,MAAM;AACrE,cAAQ,IAAI,4CAA4C,EAAE,SAAS,CAAC;AAEpE,aAAO,KAAK,MAAM,WAAW,IAAI;AAAA,IACnC;AAEA,UAAM,WAAW,MAAM,MAAM,KAAK;AAAA,MAChC,QAAQ;AAAA,MACR,SAAS;AAAA,QACP,eAAe;AAAA,MACjB;AAAA,IACF,CAAC;AAED,QAAI,CAAC,SAAS,IAAI;AAChB,cAAQ,MAAM,wDAAwD,EAAE,SAAS,CAAC;AAClF,YAAM,IAAI;AAAA,QACR,qCAAqC,SAAS,MAAM;AAAA,QACpD;AAAA,QACA,SAAS;AAAA,MACX;AAAA,IACF;AAEA,UAAM,SAAqC,MAAM,SAAS,KAAK;AAE/D,QAAI,OAAO,WAAW,KAAK,CAAC,OAAO,MAAM,QAAQ;AAC/C,YAAM,IAAI,SAAS,8BAA8B,mBAAmB,GAAG;AAAA,IACzE;AAEA,UAAM,MAAM,OAAO,oBAAoB,QAAQ,IAAI,KAAK,UAAU,OAAO,KAAK,CAAC,CAAC,GAAG,MAAM;AAEzF,WAAO,OAAO,KAAK,CAAC;AAAA,EACtB;AACF;AAEO,MAAM,oBAAoB,IAAI,kBAAkB;","names":[]}

package/dist/providers/auth.provider.mjs

@@ -0,0 +1,84 @@
+"use client";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo
+} from "react";
+import {
+  useUserQuery,
+  useSetUserData,
+  useInvalidateUser,
+  useUserValidateSession
+} from "../modules/auth/hooks/useUserQuery";
+import { useLogin } from "../modules/auth/hooks/login.hook";
+import { useRegister } from "../modules/auth/hooks/register.hook";
+import { useLogout } from "../modules/auth/hooks/logout.hook";
+const AuthContext = createContext(
+  void 0
+);
+function AuthProvider({ children }) {
+  const { data: user, isLoading: isQueryLoading } = useUserQuery();
+  const { isLoading: isSessionLoading } = useUserValidateSession();
+  const setUserData = useSetUserData();
+  const invalidateUser = useInvalidateUser();
+  const { mutateAsync: loginMutate, isPending: isLogging } = useLogin();
+  const { mutateAsync: registerMutate, isPending: isRegistering } = useRegister();
+  const { mutateAsync: logoutMutate, isPending: isLoggingOut } = useLogout();
+  const isAuthenticated = !!user;
+  const isLoading = isLogging || isRegistering || isLoggingOut || isQueryLoading || isSessionLoading;
+  const login = useCallback(
+    async (credentials) => {
+      await loginMutate(credentials, {
+        onSuccess: (data) => {
+          invalidateUser();
+          setUserData(data.user);
+        }
+      });
+    },
+    [invalidateUser]
+  );
+  const register = useCallback(
+    async (data) => {
+      await registerMutate(data, {
+        onSuccess: (data2) => {
+          invalidateUser();
+          setUserData(data2.user);
+        }
+      });
+    },
+    [setUserData]
+  );
+  const logout = useCallback(async () => {
+    await logoutMutate(void 0, {
+      onSuccess: () => {
+        invalidateUser();
+      }
+    });
+  }, [setUserData]);
+  const value = useMemo(
+    () => ({
+      user: user ?? null,
+      isAuthenticated,
+      isLoading,
+      login,
+      register,
+      logout
+    }),
+    [user, isAuthenticated, isLoading, login, register, logout]
+  );
+  return /* @__PURE__ */ React.createElement(AuthContext.Provider, { value }, children);
+}
+function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === void 0) {
+    throw new Error("useAuth deve ser usado dentro de um AuthProvider");
+  }
+  return context;
+}
+export {
+  AuthContext,
+  AuthProvider,
+  useAuth
+};
+//# sourceMappingURL=auth.provider.mjs.map

package/dist/providers/auth.provider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/providers/auth.provider.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {\r\n  createContext,\r\n  ReactNode,\r\n  useCallback,\r\n  useContext,\r\n  useMemo,\r\n} from \"react\";\r\nimport {\r\n  useUserQuery,\r\n  useSetUserData,\r\n  useInvalidateUser,\r\n  useUserValidateSession,\r\n} from \"../modules/auth/hooks/useUserQuery\";\r\nimport { useLogin } from \"../modules/auth/hooks/login.hook\";\r\nimport { useRegister } from \"../modules/auth/hooks/register.hook\";\r\nimport { useLogout } from \"../modules/auth/hooks/logout.hook\";\r\nimport {\r\n  AuthState,\r\n  LoginRequest,\r\n  RegisterRequest,\r\n} from \"../modules/auth/schema\";\r\n\r\ninterface AuthContextProps extends AuthState {\r\n  login: (credentials: LoginRequest) => Promise<void>;\r\n  register: (data: RegisterRequest) => Promise<void>;\r\n  logout: () => Promise<void>;\r\n}\r\n\r\nexport const AuthContext = createContext<AuthContextProps | undefined>(\r\n  undefined,\r\n);\r\n\r\ninterface AuthProviderProps {\r\n  children: ReactNode;\r\n}\r\n\r\nexport function AuthProvider({ children }: AuthProviderProps) {\r\n  const { data: user, isLoading: isQueryLoading } = useUserQuery();\r\n  const { isLoading: isSessionLoading } = useUserValidateSession();\r\n  const setUserData = useSetUserData();\r\n  const invalidateUser = useInvalidateUser();\r\n\r\n  const { mutateAsync: loginMutate, isPending: isLogging } = useLogin();\r\n  const { mutateAsync: registerMutate, isPending: isRegistering } =\r\n    useRegister();\r\n  const { mutateAsync: logoutMutate, isPending: isLoggingOut } = useLogout();\r\n\r\n  const isAuthenticated = !!user;\r\n  const isLoading =\r\n    isLogging ||\r\n    isRegistering ||\r\n    isLoggingOut ||\r\n    isQueryLoading ||\r\n    isSessionLoading;\r\n\r\n  const login = useCallback(\r\n    async (credentials: LoginRequest): Promise<void> => {\r\n      await loginMutate(credentials, {\r\n        onSuccess: (data) => {\r\n          invalidateUser();\r\n          setUserData(data.user);\r\n        },\r\n      });\r\n    },\r\n    [invalidateUser],\r\n  );\r\n\r\n  const register = useCallback(\r\n    async (data: RegisterRequest): Promise<void> => {\r\n      await registerMutate(data, {\r\n        onSuccess: (data) => {\r\n          invalidateUser();\r\n          setUserData(data.user);\r\n        },\r\n      });\r\n    },\r\n    [setUserData],\r\n  );\r\n\r\n  const logout = useCallback(async (): Promise<void> => {\r\n    await logoutMutate(undefined, {\r\n      onSuccess: () => {\r\n        invalidateUser();\r\n      },\r\n    });\r\n  }, [setUserData]);\r\n\r\n  const value: AuthContextProps = useMemo(\r\n    () => ({\r\n      user: user ?? null,\r\n      isAuthenticated,\r\n      isLoading,\r\n      login,\r\n      register,\r\n      logout,\r\n    }),\r\n    [user, isAuthenticated, isLoading, login, register, logout],\r\n  );\r\n\r\n  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;\r\n}\r\n\r\nexport function useAuth(): AuthContextProps {\r\n  const context = useContext(AuthContext);\r\n\r\n  if (context === undefined) {\r\n    throw new Error(\"useAuth deve ser usado dentro de um AuthProvider\");\r\n  }\r\n\r\n  return context;\r\n}\r\n"],"mappings":";AAEA;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAanB,MAAM,cAAc;AAAA,EACzB;AACF;AAMO,SAAS,aAAa,EAAE,SAAS,GAAsB;AAC5D,QAAM,EAAE,MAAM,MAAM,WAAW,eAAe,IAAI,aAAa;AAC/D,QAAM,EAAE,WAAW,iBAAiB,IAAI,uBAAuB;AAC/D,QAAM,cAAc,eAAe;AACnC,QAAM,iBAAiB,kBAAkB;AAEzC,QAAM,EAAE,aAAa,aAAa,WAAW,UAAU,IAAI,SAAS;AACpE,QAAM,EAAE,aAAa,gBAAgB,WAAW,cAAc,IAC5D,YAAY;AACd,QAAM,EAAE,aAAa,cAAc,WAAW,aAAa,IAAI,UAAU;AAEzE,QAAM,kBAAkB,CAAC,CAAC;AAC1B,QAAM,YACJ,aACA,iBACA,gBACA,kBACA;AAEF,QAAM,QAAQ;AAAA,IACZ,OAAO,gBAA6C;AAClD,YAAM,YAAY,aAAa;AAAA,QAC7B,WAAW,CAAC,SAAS;AACnB,yBAAe;AACf,sBAAY,KAAK,IAAI;AAAA,QACvB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,WAAW;AAAA,IACf,OAAO,SAAyC;AAC9C,YAAM,eAAe,MAAM;AAAA,QACzB,WAAW,CAACA,UAAS;AACnB,yBAAe;AACf,sBAAYA,MAAK,IAAI;AAAA,QACvB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,SAAS,YAAY,YAA2B;AACpD,UAAM,aAAa,QAAW;AAAA,MAC5B,WAAW,MAAM;AACf,uBAAe;AAAA,MACjB;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,QAA0B;AAAA,IAC9B,OAAO;AAAA,MACL,MAAM,QAAQ;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,MAAM,iBAAiB,WAAW,OAAO,UAAU,MAAM;AAAA,EAC5D;AAEA,SAAO,oCAAC,YAAY,UAAZ,EAAqB,SAAe,QAAS;AACvD;AAEO,SAAS,UAA4B;AAC1C,QAAM,UAAU,WAAW,WAAW;AAEtC,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AAEA,SAAO;AACT;","names":["data"]}

package/dist/providers/query.provider.mjs

@@ -0,0 +1,37 @@
+"use client";
+import {
+  QueryCache,
+  QueryClient,
+  QueryClientProvider
+} from "@tanstack/react-query";
+import { useState } from "react";
+import dynamic from "next/dynamic";
+import { toast } from "sonner";
+const ReactQueryDevtools = process.env.NODE_ENV === "development" ? dynamic(
+  () => import("@tanstack/react-query-devtools").then((mod) => ({
+    default: mod.ReactQueryDevtools
+  })),
+  { ssr: false }
+) : () => null;
+function QueryProvider({ children }) {
+  const [queryClient] = useState(
+    () => new QueryClient({
+      defaultOptions: {
+        queries: {
+          staleTime: 60 * 1e3,
+          refetchOnWindowFocus: false
+        }
+      },
+      queryCache: new QueryCache({
+        onError: (error) => {
+          toast.error(error.message);
+        }
+      })
+    })
+  );
+  return /* @__PURE__ */ React.createElement(QueryClientProvider, { client: queryClient }, children, /* @__PURE__ */ React.createElement(ReactQueryDevtools, { initialIsOpen: false }));
+}
+export {
+  QueryProvider
+};
+//# sourceMappingURL=query.provider.mjs.map

package/dist/providers/query.provider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/providers/query.provider.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {\r\n  QueryCache,\r\n  QueryClient,\r\n  QueryClientProvider,\r\n} from \"@tanstack/react-query\";\r\nimport { ReactNode, useState } from \"react\";\r\nimport dynamic from \"next/dynamic\";\r\nimport { toast } from \"sonner\";\r\n\r\n// React Query Devtools só em desenvolvimento - remove do bundle de produção\r\nconst ReactQueryDevtools =\r\n  process.env.NODE_ENV === \"development\"\r\n    ? dynamic(\r\n        () =>\r\n          import(\"@tanstack/react-query-devtools\").then((mod) => ({\r\n            default: mod.ReactQueryDevtools,\r\n          })),\r\n        { ssr: false },\r\n      )\r\n    : () => null;\r\n\r\ninterface QueryProviderProps {\r\n  children: ReactNode;\r\n}\r\n\r\nexport function QueryProvider({ children }: QueryProviderProps) {\r\n  const [queryClient] = useState(\r\n    () =>\r\n      new QueryClient({\r\n        defaultOptions: {\r\n          queries: {\r\n            staleTime: 60 * 1000,\r\n            refetchOnWindowFocus: false,\r\n          },\r\n        },\r\n        queryCache: new QueryCache({\r\n          onError: (error) => {\r\n            toast.error(error.message);\r\n          },\r\n        }),\r\n      }),\r\n  );\r\n\r\n  return (\r\n    <QueryClientProvider client={queryClient}>\r\n      {children}\r\n      <ReactQueryDevtools initialIsOpen={false} />\r\n    </QueryClientProvider>\r\n  );\r\n}\r\n"],"mappings":";AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAoB,gBAAgB;AACpC,OAAO,aAAa;AACpB,SAAS,aAAa;AAGtB,MAAM,qBACJ,QAAQ,IAAI,aAAa,gBACrB;AAAA,EACE,MACE,OAAO,gCAAgC,EAAE,KAAK,CAAC,SAAS;AAAA,IACtD,SAAS,IAAI;AAAA,EACf,EAAE;AAAA,EACJ,EAAE,KAAK,MAAM;AACf,IACA,MAAM;AAML,SAAS,cAAc,EAAE,SAAS,GAAuB;AAC9D,QAAM,CAAC,WAAW,IAAI;AAAA,IACpB,MACE,IAAI,YAAY;AAAA,MACd,gBAAgB;AAAA,QACd,SAAS;AAAA,UACP,WAAW,KAAK;AAAA,UAChB,sBAAsB;AAAA,QACxB;AAAA,MACF;AAAA,MACA,YAAY,IAAI,WAAW;AAAA,QACzB,SAAS,CAAC,UAAU;AAClB,gBAAM,MAAM,MAAM,OAAO;AAAA,QAC3B;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACL;AAEA,SACE,oCAAC,uBAAoB,QAAQ,eAC1B,UACD,oCAAC,sBAAmB,eAAe,OAAO,CAC5C;AAEJ;","names":[]}

package/dist/providers/whitelabel.provider.mjs

@@ -0,0 +1,33 @@
+"use client";
+import { createContext, useContext } from "react";
+const WhitelabelContext = createContext(
+  void 0
+);
+function WhitelabelProvider({
+  children,
+  whitelabel
+}) {
+  return /* @__PURE__ */ React.createElement(
+    WhitelabelContext.Provider,
+    {
+      value: {
+        whitelabel
+      }
+    },
+    children
+  );
+}
+function useWhitelabel() {
+  const context = useContext(WhitelabelContext);
+  if (context === void 0) {
+    throw new Error(
+      "useWhitelabel deve ser usado dentro de um WhitelabelProvider"
+    );
+  }
+  return context;
+}
+export {
+  WhitelabelProvider,
+  useWhitelabel
+};
+//# sourceMappingURL=whitelabel.provider.mjs.map

package/dist/providers/whitelabel.provider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/providers/whitelabel.provider.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { createContext, ReactNode, useContext } from \"react\";\r\nimport { WhitelabelData } from \"../modules/whitelabel/schema\";\r\n\r\ninterface WhitelabelContextProps {\r\n  whitelabel: WhitelabelData | null;\r\n}\r\n\r\nconst WhitelabelContext = createContext<WhitelabelContextProps | undefined>(\r\n  undefined,\r\n);\r\n\r\ninterface WhitelabelProviderProps {\r\n  children: ReactNode;\r\n  whitelabel: WhitelabelData | null;\r\n}\r\n\r\nexport function WhitelabelProvider({\r\n  children,\r\n  whitelabel,\r\n}: WhitelabelProviderProps) {\r\n  return (\r\n    <WhitelabelContext.Provider\r\n      value={{\r\n        whitelabel,\r\n      }}\r\n    >\r\n      {children}\r\n    </WhitelabelContext.Provider>\r\n  );\r\n}\r\n\r\nexport function useWhitelabel(): WhitelabelContextProps {\r\n  const context = useContext(WhitelabelContext);\r\n\r\n  if (context === undefined) {\r\n    throw new Error(\r\n      \"useWhitelabel deve ser usado dentro de um WhitelabelProvider\",\r\n    );\r\n  }\r\n\r\n  return context;\r\n}\r\n"],"mappings":";AAEA,SAAS,eAA0B,kBAAkB;AAOrD,MAAM,oBAAoB;AAAA,EACxB;AACF;AAOO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AACF,GAA4B;AAC1B,SACE;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACC,OAAO;AAAA,QACL;AAAA,MACF;AAAA;AAAA,IAEC;AAAA,EACH;AAEJ;AAEO,SAAS,gBAAwC;AACtD,QAAM,UAAU,WAAW,iBAAiB;AAE5C,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;","names":[]}

package/dist/store/useMdSidebarStore.mjs

@@ -0,0 +1,11 @@
+import { create } from "zustand";
+const useMdSidebarStore = create((set) => ({
+  isExpanded: false,
+  toggle: () => set((state) => ({ isExpanded: !state.isExpanded })),
+  expand: () => set({ isExpanded: true }),
+  collapse: () => set({ isExpanded: false })
+}));
+export {
+  useMdSidebarStore
+};
+//# sourceMappingURL=useMdSidebarStore.mjs.map

package/dist/store/useMdSidebarStore.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/store/useMdSidebarStore.ts"],"sourcesContent":["import { create } from \"zustand\";\r\n\r\ntype MdSidebarStore = {\r\n    isExpanded: boolean;\r\n    toggle: () => void;\r\n    expand: () => void;\r\n    collapse: () => void;\r\n};\r\n\r\nexport const useMdSidebarStore = create<MdSidebarStore>((set) => ({\r\n    isExpanded: false,\r\n    toggle: () => set((state) => ({ isExpanded: !state.isExpanded })),\r\n    expand: () => set({ isExpanded: true }),\r\n    collapse: () => set({ isExpanded: false }),\r\n}));\r\n"],"mappings":"AAAA,SAAS,cAAc;AAShB,MAAM,oBAAoB,OAAuB,CAAC,SAAS;AAAA,EAC9D,YAAY;AAAA,EACZ,QAAQ,MAAM,IAAI,CAAC,WAAW,EAAE,YAAY,CAAC,MAAM,WAAW,EAAE;AAAA,EAChE,QAAQ,MAAM,IAAI,EAAE,YAAY,KAAK,CAAC;AAAA,EACtC,UAAU,MAAM,IAAI,EAAE,YAAY,MAAM,CAAC;AAC7C,EAAE;","names":[]}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@greatapps/common",
+  "version": "1.0.0",
+  "description": "Shared library for GreatApps frontend applications",
+  "main": "./dist/index.mjs",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./src/index.ts"
+    }
+  },
+  "files": ["dist", "src"],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@greatapps/cache": "^2.0.1",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "axios": "^1.13.5",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.575.0",
+    "react-day-picker": "^9.14.0",
+    "sonner": ">=2.0.0",
+    "tailwind-merge": "^3.5.0",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "^5.90.5",
+    "@tanstack/react-query-devtools": "^5.90.2",
+    "@types/node": "^25.3.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "glob": "^13.0.6",
+    "next": "15.5.9",
+    "react": "19.1.4",
+    "react-dom": "19.1.4",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "zustand": "^5.0.11"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": ">=5.0.0",
+    "next": ">=15.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
+    "sonner": ">=2.0.0",
+    "zustand": ">=4.0.0"
+  }
+}

package/src/components/handlers/SearchParamsHandler.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { Suspense, useEffect } from "react";
+import { useSearchParams } from "next/navigation";
+
+interface SearchParamsHandlerProps {
+  handlers: {
+    [key: string]: () => void;
+  };
+}
+
+/**
+ * SearchParamsHandler
+ *
+ * Este componente é responsável por ler os parâmetros da URL e executar callbacks
+ * correspondentes a cada parâmetro encontrado.
+ *
+ * Por que precisamos deste componente?
+ * - O Next.js 16 exige que useSearchParams() seja envolvido em um <Suspense> boundary
+ * - Isso evita erros de prerendering durante o build
+ * - Permite que URLs como "/page?tab=performance" naveguem diretamente para uma aba específica
+ *
+ * Exemplo de como funciona
+ * 1. Usa useSearchParams() para ler o parâmetro "tab" da URL
+ * 2. Monitora mudanças nos parâmetros com useEffect
+ * 3. Quando encontra um parâmetro "tab", chama onTabChange com o valor
+ * 4. Retorna null porque não renderiza nada na tela
+ *
+ * Exemplo de uso:
+ * <Suspense fallback={null}>
+ *   <SearchParamsHandler handlers={{ tab: () => console.log("Tab changed") }} />
+ * </Suspense>
+ *
+ * Exemplos de URL:
+ * - /greatpages/123?tab=performance → abre a aba "performance"
+ * - /greatpages/123?tab=leads → abre a aba "leads"
+ */
+export function SearchParamsHandler(options: SearchParamsHandlerProps) {
+  return (
+    <Suspense fallback={null}>
+      <SearchParamsHandlerChildren {...options} />
+    </Suspense>
+  );
+}
+
+export function SearchParamsHandlerChildren(options: SearchParamsHandlerProps) {
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    Object.keys(options.handlers).forEach((key) => {
+      const value = searchParams.get(key);
+
+      if (value) {
+        options.handlers[key]();
+      }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchParams]);
+
+  return null;
+}

package/src/components/layouts/MainLayout.tsx

@@ -0,0 +1,59 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../infra/utils/clsx"
+
+function MainLayout({ className, children, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="main-layout"
+            className={cn(
+                "h-dvh md:h-screen lg:h-screen flex flex-col md:flex-row lg:flex-row md:overflow-hidden lg:overflow-hidden",
+                className
+            )}
+            {...props}
+        >
+            {children}
+        </div>
+    )
+}
+
+function MainLayoutContent({ className, children, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="main-layout-content"
+            className={cn("flex flex-col flex-1 min-h-0 md:overflow-hidden lg:overflow-hidden", className)}
+            {...props}
+        >
+            {children}
+        </div>
+    )
+}
+
+function MainLayoutSpacer({ className, height, ...props }: React.ComponentProps<"div"> & { height: string }) {
+    return (
+        <div
+            data-slot="main-layout-spacer"
+            className={cn("md:hidden lg:hidden shrink-0", className)}
+            style={{ height }}
+            {...props}
+        />
+    )
+}
+
+function MainLayoutMain({ className, children, ...props }: React.ComponentProps<"main">) {
+    return (
+        <main
+            data-slot="main-layout-main"
+            className={cn(
+                "flex-1 min-h-0 overflow-y-auto overscroll-none md:overscroll-auto lg:overscroll-auto bg-(--color-base-light)",
+                className
+            )}
+            {...props}
+        >
+            {children}
+        </main>
+    )
+}
+
+export { MainLayout, MainLayoutContent, MainLayoutSpacer, MainLayoutMain }

package/src/components/layouts/MdSideBarNavigation.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import * as React from "react"
+import { useMdSidebarStore } from "../../store/useMdSidebarStore"
+import { cn } from "../../infra/utils/clsx"
+
+function MdSideBarNavigation({
+    className,
+    children,
+    ...props
+}: React.ComponentProps<"div">) {
+    const { isExpanded, collapse } = useMdSidebarStore()
+
+    return (
+        <>
+            <div
+                className={`hidden md:block lg:hidden fixed inset-0 bg-black/50 z-20 transition-opacity duration-300 ${
+                    isExpanded ? "opacity-100" : "opacity-0 pointer-events-none"
+                }`}
+                onClick={collapse}
+            />
+            <div
+                className={`hidden md:flex lg:hidden fixed top-0 bottom-0 left-[73px] z-30 transition-transform duration-300 ease-in-out overflow-visible ${
+                    isExpanded ? "translate-x-0" : "-translate-x-full"
+                }`}
+            >
+                <div
+                    data-slot="md-sidebar-navigation"
+                    className={cn("w-[273px] h-full flex flex-col p-4 bg-white border-r border-gray-200", className)}
+                    {...props}
+                >
+                    {children}
+                </div>
+            </div>
+        </>
+    )
+}
+
+export { MdSideBarNavigation };