74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
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, 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;
|
|
}
|
|
|
|
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);
|
|
try {
|
|
await axios({ url: `${API_URL.LOGOUT}`, method: 'delete' });
|
|
setLoadingLogout(false);
|
|
await handleLogout();
|
|
} catch (err: any) {
|
|
setLoadingLogout(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Layout>
|
|
<Header
|
|
style={{
|
|
position: 'sticky',
|
|
top: 0,
|
|
zIndex: 1,
|
|
width: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
// background: token.colorPrimary,
|
|
background: '#fff',
|
|
borderBottom: '1px solid #ddd',
|
|
}}
|
|
>
|
|
<Flex style={{ width: '100%' }} align="center">
|
|
<Flex>
|
|
<Image src={Logo} width={50} preview={false} />
|
|
{/* <div style={{ fontWeight: 800, fontSize: 16 }}>WE POS</div> */}
|
|
</Flex>
|
|
<Flex style={{ marginLeft: 'auto' }}>
|
|
<Popconfirm
|
|
title="Are you sure want to logout?"
|
|
placement="bottomRight"
|
|
onConfirm={() => handleClickLogout()}
|
|
>
|
|
<Tooltip title="Logout" placement="bottom">
|
|
<Avatar size={35}>
|
|
{initialName ? (
|
|
<div style={{ fontSize: 13 }}>{initialName?.toUpperCase()}</div>
|
|
) : (
|
|
<FaUser style={{ fontSize: 14 }} />
|
|
)}
|
|
</Avatar>
|
|
</Tooltip>
|
|
</Popconfirm>
|
|
</Flex>
|
|
</Flex>
|
|
</Header>
|
|
<Content style={{ overflow: 'initial', background: '#fff', padding: 10 }}>{children}</Content>
|
|
</Layout>
|
|
);
|
|
}
|