📦 EqualifyEverything / equalify

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61import { useNavigate } from "react-router-dom"
import * as Tabs from "@radix-ui/react-tabs";
import { useUser } from "../queries"
import { InvitesTable, UsersTable, CoBrandingInput, LlmSettingsInput, SystemStats } from "../components"
import { SkeletonAccount } from "#src/components/Skeleton.tsx"
import style from "./Account.module.scss";
import { Card } from "#src/components/Card.tsx";
import { StyledButton } from "#src/components/StyledButton.tsx";

export const Account = () => {
    const { data: user, isLoading } = useUser();
    const isAdmin = user?.type === 'admin';
    const navigate = useNavigate();

    return <div className={style.Account}>
        <h1 className="initial-focus-element">Account</h1>
        {isLoading ? (
            <SkeletonAccount />
        ) : user ? (
            <Tabs.Root defaultValue="account" className={style.adminTabs}>
                <Tabs.List aria-label="Account settings" className={style.tabList}>
                    <Tabs.Trigger value="account" className={style.tabTrigger}>Account</Tabs.Trigger>
                    {isAdmin && <Tabs.Trigger value="users" className={style.tabTrigger}>Users</Tabs.Trigger>}
                    {isAdmin && <Tabs.Trigger value="invites" className={style.tabTrigger}>Invites</Tabs.Trigger>}
                    {isAdmin && <Tabs.Trigger value="system" className={style.tabTrigger}>System</Tabs.Trigger>}
                    {isAdmin && <Tabs.Trigger value="statistics" className={style.tabTrigger}>Statistics</Tabs.Trigger>}
                </Tabs.List>
                <Tabs.Content value="account">
                    <div className="cards-50">
                        <Card variant="light">
                                <h2>Account Information</h2>
                                <p><strong>Name:</strong> {user.name}</p>
                                <p><strong>Email:</strong> {user.email}</p>
                                <p><strong>Role:</strong> {user.type ? user.type.charAt(0).toUpperCase() + user.type.slice(1) : 'Member'}</p>
                            <StyledButton label="Logout" variant="light" onClick={() => navigate("/logout")} />
                        </Card>
                    </div>
                </Tabs.Content>
                {isAdmin && (
                    <>
                        <Tabs.Content value="users">
                            <Card variant="light"><UsersTable /></Card>
                        </Tabs.Content>
                        <Tabs.Content value="invites">
                            <Card variant="light"><InvitesTable /></Card>
                        </Tabs.Content>
                        <Tabs.Content value="system">
                            <div className="cards-50">
                                <Card variant="light"><CoBrandingInput /></Card>
                                <Card variant="light"><LlmSettingsInput /></Card>
                            </div>
                        </Tabs.Content>
                        <Tabs.Content value="statistics">
                            <Card variant="light"><SystemStats /></Card>
                        </Tabs.Content>
                    </>
                )}
            </Tabs.Root>
        ) : null}
    </div>
}