119 lines
4.4 KiB
TypeScript
119 lines
4.4 KiB
TypeScript
import Button from "../components/ui/Button";
|
||
import FloatingActionButton from "../components/ui/FloatingActionButton";
|
||
import { useMe, useLogout } from "../hooks/useAuth";
|
||
import { useNavigate } from "react-router";
|
||
import ShareFilledIcon from "../components/icons/ShareFilledIcon";
|
||
import usePopupStore from "../store/popupStore";
|
||
import SettingsModal from "../components/modals/SettingsModal";
|
||
import useModalStore from "../store/modalStore";
|
||
import CogFilledIcon from "../components/icons/CogFilledIcon";
|
||
import ParticipantsPopup from "../components/popups/ParticipantsPopup";
|
||
|
||
function HomePage() {
|
||
const { data: user } = useMe();
|
||
const logoutMutation = useLogout();
|
||
const navigate = useNavigate();
|
||
|
||
const handleLogout = async () => {
|
||
await logoutMutation.mutateAsync();
|
||
navigate("/login");
|
||
};
|
||
|
||
const { setPopup } = usePopupStore();
|
||
const { setModal } = useModalStore();
|
||
|
||
return (
|
||
<div className="py-8 min-h-screen bg-gray-50">
|
||
<div className="px-4 mx-auto max-w-4xl">
|
||
<div className="p-8 bg-white rounded-lg shadow-md">
|
||
<h1 className="mb-6 text-3xl font-bold">Главная страница</h1>
|
||
|
||
{/* Потестить модалки */}
|
||
|
||
<FloatingActionButton
|
||
variant="default"
|
||
onClick={() => setPopup(<ParticipantsPopup />)}
|
||
>
|
||
<div className="2xl:size-[1.111vw] size-4 text-white">
|
||
<ShareFilledIcon />
|
||
</div>
|
||
</FloatingActionButton>
|
||
|
||
<FloatingActionButton
|
||
variant="default"
|
||
onClick={() => setModal(<SettingsModal />)}
|
||
>
|
||
<div className="2xl:size-[1.111vw] size-4 text-white">
|
||
<CogFilledIcon />
|
||
</div>
|
||
</FloatingActionButton>
|
||
|
||
<div className="space-y-4">
|
||
<div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
|
||
<h2 className="mb-2 text-xl font-semibold">
|
||
Добро пожаловать, {user?.fullName}!
|
||
</h2>
|
||
<p className="text-gray-600">Email: {user?.email}</p>
|
||
<p className="text-gray-600">Роль: {user?.role}</p>
|
||
</div>
|
||
|
||
{user?.currentCompany && (
|
||
<div className="p-4 bg-green-50 rounded-lg border border-green-200">
|
||
<h3 className="mb-2 text-lg font-semibold">Компания</h3>
|
||
<p className="font-medium text-gray-700">
|
||
{user.currentCompany.name}
|
||
</p>
|
||
{user.currentCompany.description && (
|
||
<p className="mt-1 text-sm text-gray-600">
|
||
{user.currentCompany.description}
|
||
</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{user?.currentBranch && (
|
||
<div className="p-4 bg-purple-50 rounded-lg border border-purple-200">
|
||
<h3 className="mb-2 text-lg font-semibold">Филиал</h3>
|
||
<p className="font-medium text-gray-700">
|
||
{user.currentBranch.name}
|
||
</p>
|
||
{user.currentBranch.address && (
|
||
<p className="mt-1 text-sm text-gray-600">
|
||
Адрес: {user.currentBranch.address}
|
||
</p>
|
||
)}
|
||
{(user.currentBranch.city || user.currentBranch.country) && (
|
||
<p className="text-sm text-gray-600">
|
||
{[user.currentBranch.city, user.currentBranch.country]
|
||
.filter(Boolean)
|
||
.join(", ")}
|
||
</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{!user?.currentBranch && !user?.currentCompany && (
|
||
<div className="p-4 bg-yellow-50 rounded-lg border border-yellow-200">
|
||
<p className="text-yellow-800">
|
||
Вы не привязаны ни к одному филиалу. Обратитесь к
|
||
администратору.
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
<Button
|
||
onClick={handleLogout}
|
||
disabled={logoutMutation.isPending}
|
||
className="hover:bg-red-700 disabled:opacity-50 px-4 py-2 text-white bg-red-600 rounded-md"
|
||
>
|
||
{logoutMutation.isPending ? "Выход..." : "Выйти"}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default HomePage;
|