@greatapps/common 1.1.218 → 1.1.221

package/src/components/account/sections/SecuritySection.tsx

@@ -1,160 +1,160 @@
-'use client';
-
-import { useState, useCallback } from 'react';
-import { Lock, Wrench } from 'lucide-react';
-import { Badge } from '../../ui/data-display/Badge';
-import { Button } from '../../ui/buttons/Button';
-import { useAuth } from '../../../providers/auth.provider';
-import { useQueryClient } from '@tanstack/react-query';
-import { USER_QUERY_KEY } from '../../../modules/auth/hooks/useUserQuery';
-import { AccountSectionType } from '../../../enums/AccountSectionType';
-import TwoFactorAuthModal from '../TwoFactorAuthModal';
-import DisableTwoFactorAuthModal from '../DisableTwoFactorAuthModal';
-
-interface SecuritySectionProps {
-  setActiveSection: (section: AccountSectionType) => void;
-  onClose: () => void;
-  hasActiveSubscription?: boolean;
-  onDeleteAccount?: () => void;
-}
-
-export function SecuritySection({
-  setActiveSection,
-  onClose,
-  hasActiveSubscription,
-  onDeleteAccount,
-}: SecuritySectionProps) {
-  const { user } = useAuth();
-  const queryClient = useQueryClient();
-
-  const twoFactorAuth = user?.two_factor_authentication ?? false;
-  const [twoFactorOpen, setTwoFactorOpen] = useState(false);
-  const [disableTwoFactorOpen, setDisableTwoFactorOpen] = useState(false);
-
-  const handleToggleTwoFactor = useCallback(() => {
-    if (twoFactorAuth) {
-      setDisableTwoFactorOpen(true);
-    } else {
-      setTwoFactorOpen(true);
-    }
-  }, [twoFactorAuth]);
-
-  const handleDisableTwoFactorSuccess = useCallback(() => {
-    queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
-    setDisableTwoFactorOpen(false);
-  }, [queryClient]);
-
-  const handleEnableTwoFactorSuccess = useCallback(() => {
-    queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
-    setTwoFactorOpen(false);
-  }, [queryClient]);
-
-  const handleDeleteAccount = useCallback(() => {
-    onDeleteAccount?.();
-  }, [onDeleteAccount]);
-
-  return (
-    <>
-      <div className="h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto">
-        <span className="paragraph-medium-semibold text-gray-950 hidden lg:block">Segurança</span>
-
-        <div className="border border-gray-200 rounded-lg overflow-hidden">
-          <div
-            className="flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 border-b border-gray-200 cursor-pointer hover:bg-gray-25 transition-colors"
-            onClick={handleToggleTwoFactor}
-          >
-            <div className="flex flex-1 items-start lg:items-center gap-4 lg:gap-5">
-              <div className="size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0">
-                <Wrench size={20} className="text-gray-950" />
-              </div>
-              <div className="flex flex-col gap-1.5 flex-1">
-                <div className="flex flex-wrap items-center gap-2">
-                  <span className="paragraph-small-semibold text-gray-950">
-                    Autenticação de dois fatores
-                  </span>
-                  <Badge
-                    className={`paragraph-xsmall-semibold rounded-lg ${twoFactorAuth ? 'text-green-600 bg-green-50' : 'text-gray-600 bg-gray-50'}`}
-                  >
-                    {twoFactorAuth ? 'Habilitado' : 'Desabilitado'}
-                  </Badge>
-                </div>
-                <span className="paragraph-small-regular text-gray-600">
-                  Envio de código de segurança (e-mail ou sms) para o usuário acessar o sistema
-                </span>
-              </div>
-            </div>
-            <Button
-              variant="secondary"
-              className="h-10! shrink-0 w-full lg:w-auto"
-              onClick={(e) => {
-                e.stopPropagation();
-                handleToggleTwoFactor();
-              }}
-            >
-              {twoFactorAuth ? 'Desabilitar' : 'Habilitar'}
-            </Button>
-          </div>
-
-          <div
-            className="flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 cursor-pointer hover:bg-gray-25 transition-colors"
-            onClick={() => setActiveSection(AccountSectionType.CHANGE_PASSWORD)}
-          >
-            <div className="flex flex-1 items-start lg:items-center gap-4 lg:gap-5">
-              <div className="size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0">
-                <Lock size={20} className="text-gray-950" />
-              </div>
-              <div className="flex flex-col gap-1.5 flex-1">
-                <span className="paragraph-small-semibold text-gray-950">
-                  Alterar senha de acesso
-                </span>
-                <span className="paragraph-small-regular text-gray-600">
-                  Atualize sua senha sempre que necessário para manter sua conta segura.
-                </span>
-              </div>
-            </div>
-            <Button
-              variant="secondary"
-              className="h-10! shrink-0 w-full lg:w-auto"
-              onClick={(e) => {
-                e.stopPropagation();
-                setActiveSection(AccountSectionType.CHANGE_PASSWORD);
-              }}
-            >
-              Alterar senha
-            </Button>
-          </div>
-        </div>
-
-        {onDeleteAccount && (
-          <button
-            type="button"
-            className="paragraph-small-semibold text-red-600 bg-red-50 rounded-lg px-3 py-2 cursor-pointer hover:bg-red-100 transition-colors w-fit"
-            onClick={handleDeleteAccount}
-          >
-            Excluir minha conta
-          </button>
-        )}
-      </div>
-
-      <div className="fixed bottom-0 left-0 right-0 lg:absolute flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white z-10">
-        <Button variant="secondary" className="h-10!" type="button" onClick={onClose}>
-          Cancelar
-        </Button>
-        <Button className="h-10!" onClick={onClose}>
-          Salvar alterações
-        </Button>
-      </div>
-
-      <DisableTwoFactorAuthModal
-        open={disableTwoFactorOpen}
-        onClose={() => setDisableTwoFactorOpen(false)}
-        onSuccess={handleDisableTwoFactorSuccess}
-      />
-      <TwoFactorAuthModal
-        open={twoFactorOpen}
-        onClose={() => setTwoFactorOpen(false)}
-        onSuccess={handleEnableTwoFactorSuccess}
-      />
-    </>
-  );
-}
+'use client';
+
+import { useState, useCallback } from 'react';
+import { IconLock, IconTool } from '@tabler/icons-react';
+import { Badge } from '../../ui/data-display/Badge';
+import { Button } from '../../ui/buttons/Button';
+import { useAuth } from '../../../providers/auth.provider';
+import { useQueryClient } from '@tanstack/react-query';
+import { USER_QUERY_KEY } from '../../../modules/auth/hooks/useUserQuery';
+import { AccountSectionType } from '../../../enums/AccountSectionType';
+import TwoFactorAuthModal from '../TwoFactorAuthModal';
+import DisableTwoFactorAuthModal from '../DisableTwoFactorAuthModal';
+
+interface SecuritySectionProps {
+  setActiveSection: (section: AccountSectionType) => void;
+  onClose: () => void;
+  hasActiveSubscription?: boolean;
+  onDeleteAccount?: () => void;
+}
+
+export function SecuritySection({
+  setActiveSection,
+  onClose,
+  hasActiveSubscription,
+  onDeleteAccount,
+}: SecuritySectionProps) {
+  const { user } = useAuth();
+  const queryClient = useQueryClient();
+
+  const twoFactorAuth = user?.two_factor_authentication ?? false;
+  const [twoFactorOpen, setTwoFactorOpen] = useState(false);
+  const [disableTwoFactorOpen, setDisableTwoFactorOpen] = useState(false);
+
+  const handleToggleTwoFactor = useCallback(() => {
+    if (twoFactorAuth) {
+      setDisableTwoFactorOpen(true);
+    } else {
+      setTwoFactorOpen(true);
+    }
+  }, [twoFactorAuth]);
+
+  const handleDisableTwoFactorSuccess = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
+    setDisableTwoFactorOpen(false);
+  }, [queryClient]);
+
+  const handleEnableTwoFactorSuccess = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
+    setTwoFactorOpen(false);
+  }, [queryClient]);
+
+  const handleDeleteAccount = useCallback(() => {
+    onDeleteAccount?.();
+  }, [onDeleteAccount]);
+
+  return (
+    <>
+      <div className="h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto">
+        <span className="paragraph-medium-semibold text-gray-950 hidden lg:block">Segurança</span>
+
+        <div className="border border-gray-200 rounded-lg overflow-hidden">
+          <div
+            className="flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 border-b border-gray-200 cursor-pointer hover:bg-gray-25 transition-colors"
+            onClick={handleToggleTwoFactor}
+          >
+            <div className="flex flex-1 items-start lg:items-center gap-4 lg:gap-5">
+              <div className="size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0">
+                <IconTool size={20} className="text-gray-950" />
+              </div>
+              <div className="flex flex-col gap-1.5 flex-1">
+                <div className="flex flex-wrap items-center gap-2">
+                  <span className="paragraph-small-semibold text-gray-950">
+                    Autenticação de dois fatores
+                  </span>
+                  <Badge
+                    className={`paragraph-xsmall-semibold rounded-lg ${twoFactorAuth ? 'text-green-600 bg-green-50' : 'text-gray-600 bg-gray-50'}`}
+                  >
+                    {twoFactorAuth ? 'Habilitado' : 'Desabilitado'}
+                  </Badge>
+                </div>
+                <span className="paragraph-small-regular text-gray-600">
+                  Envio de código de segurança (e-mail ou sms) para o usuário acessar o sistema
+                </span>
+              </div>
+            </div>
+            <Button
+              variant="secondary"
+              className="h-10! shrink-0 w-full lg:w-auto"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleToggleTwoFactor();
+              }}
+            >
+              {twoFactorAuth ? 'Desabilitar' : 'Habilitar'}
+            </Button>
+          </div>
+
+          <div
+            className="flex flex-col lg:flex-row lg:items-center gap-4 lg:gap-5 p-4 lg:p-5 cursor-pointer hover:bg-gray-25 transition-colors"
+            onClick={() => setActiveSection(AccountSectionType.CHANGE_PASSWORD)}
+          >
+            <div className="flex flex-1 items-start lg:items-center gap-4 lg:gap-5">
+              <div className="size-10 rounded-lg bg-gray-50 flex items-center justify-center shrink-0">
+                <IconLock size={20} className="text-gray-950" />
+              </div>
+              <div className="flex flex-col gap-1.5 flex-1">
+                <span className="paragraph-small-semibold text-gray-950">
+                  Alterar senha de acesso
+                </span>
+                <span className="paragraph-small-regular text-gray-600">
+                  Atualize sua senha sempre que necessário para manter sua conta segura.
+                </span>
+              </div>
+            </div>
+            <Button
+              variant="secondary"
+              className="h-10! shrink-0 w-full lg:w-auto"
+              onClick={(e) => {
+                e.stopPropagation();
+                setActiveSection(AccountSectionType.CHANGE_PASSWORD);
+              }}
+            >
+              Alterar senha
+            </Button>
+          </div>
+        </div>
+
+        {onDeleteAccount && (
+          <button
+            type="button"
+            className="paragraph-small-semibold text-red-600 bg-red-50 rounded-lg px-3 py-2 cursor-pointer hover:bg-red-100 transition-colors w-fit"
+            onClick={handleDeleteAccount}
+          >
+            Excluir minha conta
+          </button>
+        )}
+      </div>
+
+      <div className="fixed bottom-0 left-0 right-0 lg:absolute flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white z-10">
+        <Button variant="secondary" className="h-10!" type="button" onClick={onClose}>
+          Cancelar
+        </Button>
+        <Button className="h-10!" onClick={onClose}>
+          Salvar alterações
+        </Button>
+      </div>
+
+      <DisableTwoFactorAuthModal
+        open={disableTwoFactorOpen}
+        onClose={() => setDisableTwoFactorOpen(false)}
+        onSuccess={handleDisableTwoFactorSuccess}
+      />
+      <TwoFactorAuthModal
+        open={twoFactorOpen}
+        onClose={() => setTwoFactorOpen(false)}
+        onSuccess={handleEnableTwoFactorSuccess}
+      />
+    </>
+  );
+}

package/src/components/layouts/AppMobileNavBar.tsx

@@ -100,7 +100,6 @@ export function AppMobileNavBar({
           side="bottom"
           align="end"
           contentClassName=""
-          onEditProfile={() => openConfigurations()}
           onCreditsClick={onCreditsClick}
           menuItems={menuItems}
         />

package/src/components/layouts/MdSideBarNavigation.tsx

@@ -1,56 +1,56 @@
 'use client';
 
-"use client"
-
-import * as React from "react"
-import { ChevronLeft } from "lucide-react"
-import { useMdSidebarStore } from "../../store/useMdSidebarStore"
-import { cn } from "../../infra/utils/clsx"
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip"
-
-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("relative w-[273px] h-full flex flex-col p-4 bg-white border-r border-gray-200", className)}
-                    {...props}
-                >
-                    {isExpanded && (
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <button
-                                    onClick={collapse}
-                                    className="absolute top-[68px] -right-4 size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-40"
-                                >
-                                    <ChevronLeft size={16} className="text-gray-500" />
-                                </button>
-                            </TooltipTrigger>
-                            <TooltipContent side="right">Recolher menu</TooltipContent>
-                        </Tooltip>
-                    )}
-                    {children}
-                </div>
-            </div>
-        </>
-    )
-}
-
-export { MdSideBarNavigation };
+"use client"
+
+import * as React from "react"
+import { IconChevronLeft } from '@tabler/icons-react'
+import { useMdSidebarStore } from "../../store/useMdSidebarStore"
+import { cn } from "../../infra/utils/clsx"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip"
+
+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("relative w-[273px] h-full flex flex-col p-4 bg-white border-r border-gray-200", className)}
+                    {...props}
+                >
+                    {isExpanded && (
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <button
+                                    onClick={collapse}
+                                    className="absolute top-[68px] -right-4 size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-40"
+                                >
+                                    <IconChevronLeft size={16} className="text-gray-500" />
+                                </button>
+                            </TooltipTrigger>
+                            <TooltipContent side="right">Recolher menu</TooltipContent>
+                        </Tooltip>
+                    )}
+                    {children}
+                </div>
+            </div>
+        </>
+    )
+}
+
+export { MdSideBarNavigation };

package/src/components/layouts/NavBar.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import Image from "next/image";
-import { ChevronRight } from "lucide-react";
+import { IconChevronRight } from '@tabler/icons-react';
 import { Separator } from "../ui/data-display/Separator";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
 import { cn } from "../../infra/utils/clsx";
@@ -68,7 +68,7 @@ function NavBar({
                   onClick={onExpandClick}
                   className="lg:hidden absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10"
                 >
-                  <ChevronRight size={16} className="text-gray-500" />
+                  <IconChevronRight size={16} className="text-gray-500" />
                 </button>
               </TooltipTrigger>
               <TooltipContent side="right">Expandir menu</TooltipContent>