feat: change label avatar

src/apps/admin/layout/index.tsx

@@ -1,10 +1,11 @@
 import { Avatar, Flex, Image, Layout, Popconfirm, Tooltip } from 'antd';
 import { ReactNode, useState } from 'react';
 import { Content, Header } from 'antd/es/layout/layout';
-import { API_URL, handleLogout } from '@pos/base';
+import { API_URL, getInitialName, handleLogout, UserDataState } from '@pos/base';
 import { FaUser } from 'react-icons/fa';
 import axios from 'axios';
 import Logo from '../../../base/presentation/assets/images/we-logo.png';
+import { useRecoilValue } from 'recoil';
 
 interface AdminLayoutProps {
   children: ReactNode;
@@ -13,6 +14,8 @@ interface AdminLayoutProps {
 export default function AdminLayout(props: AdminLayoutProps) {
   const { children } = props;
   const [loadingLogout, setLoadingLogout] = useState(false);
+  const user = useRecoilValue(UserDataState);
+  const initialName = getInitialName(user.name);
 
   async function handleClickLogout() {
     setLoadingLogout(true);
@@ -53,7 +56,11 @@ export default function AdminLayout(props: AdminLayoutProps) {
             >
               <Tooltip title="Logout" placement="bottom">
                 <Avatar size={35}>
-                  <FaUser style={{ fontSize: 14 }} />
+                  {initialName ? (
+                    <div style={{ fontSize: 13 }}>{initialName?.toUpperCase()}</div>
+                  ) : (
+                    <FaUser style={{ fontSize: 14 }} />
+                  )}
                 </Avatar>
               </Tooltip>
             </Popconfirm>

src/base/infrastructure/helpers/formatter/get-initial-name.ts

@@ -0,0 +1,14 @@
+export function getInitialName(name: string) {
+  if (!name) return;
+
+  const arrName = name.trim().split(' '); // Split the name into words
+
+  if (arrName.length === 1) {
+    return arrName[0].split('').slice(0, 2).join(''); // Take at most the first 3 initials
+  }
+
+  return arrName
+    .map((word) => word[0]?.toUpperCase()) // Take the first letter of each word and make it uppercase
+    .slice(0, 2) // Take at most the first 3 initials
+    .join(''); // Join them together to form initials
+}

src/base/infrastructure/helpers/formatter/index.ts

@@ -1,2 +1,3 @@
 export * from './string.formatter';
 export * from './currency.formatter';
+export * from './get-initial-name';