Skip to content

Commit 330f1d5

Browse files
alejsdevalejsdev
committed
Update
1 parent cade198 commit 330f1d5

File tree

6 files changed

+67
-59
lines changed

6 files changed

+67
-59
lines changed

‎frontend/src/components/Common/Navbar.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
1-
import { Flex, Image } from "@chakra-ui/react"
1+
import { Flex, Image, useBreakpointValue } from "@chakra-ui/react"
22
import { Link } from "@tanstack/react-router"
33
import Logo from "/assets/images/fastapi-logo.svg"
44
import UserMenu from "./UserMenu"
55

66
function Navbar() {
7+
const display = useBreakpointValue({ base: "none", md: "flex" })
8+
79
return (
810
<Flex
9-
w="100%"
10-
p={4}
11-
color="white"
12-
align="center"
11+
display={display}
1312
justify="space-between"
1413
position="sticky"
15-
top="0"
16-
zIndex="1000"
14+
color="white"
15+
align="center"
1716
bg="bg.muted"
17+
w="100%"
18+
top={0}
19+
p={4}
1820
>
1921
<Link to="/">
2022
<Image src={Logo} alt="Logo" w="180px" maxW="2xs" px={2} />

‎frontend/src/components/Common/Sidebar.tsx‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
1+
import { Box, Flex, IconButton, Text } from "@chakra-ui/react"
2+
import { useQueryClient } from "@tanstack/react-query"
3+
import { useState } from "react"
4+
import { FaBars } from "react-icons/fa"
5+
6+
import { FiLogOut } from "react-icons/fi"
7+
import type { UserPublic } from "../../client"
8+
import useAuth from "../../hooks/useAuth"
19
import {
2-
Box,
310
DrawerBackdrop,
411
DrawerBody,
512
DrawerCloseTrigger,
613
DrawerContent,
714
DrawerRoot,
815
DrawerTrigger,
9-
Flex,
10-
IconButton,
11-
Text,
12-
} from "@chakra-ui/react"
13-
import { useQueryClient } from "@tanstack/react-query"
14-
15-
import { FaBars, FaSignOutAlt } from "react-icons/fa"
16-
import type { UserPublic } from "../../client"
17-
import useAuth from "../../hooks/useAuth"
16+
} from "../ui/drawer"
1817
import SidebarItems from "./SidebarItems"
1918

2019
const Sidebar = () => {
2120
const queryClient = useQueryClient()
2221
const currentUser = queryClient.getQueryData<UserPublic>(["currentUser"])
2322
const { logout } = useAuth()
23+
const [open, setOpen] = useState(false)
2424

2525
const handleLogout = async () => {
2626
logout()
@@ -29,7 +29,11 @@ const Sidebar = () => {
2929
return (
3030
<>
3131
{/* Mobile */}
32-
<DrawerRoot size="sm" placement="start">
32+
<DrawerRoot
33+
placement="start"
34+
open={open}
35+
onOpenChange={(e) => setOpen(e.open)}
36+
>
3337
<DrawerBackdrop />
3438
<DrawerTrigger asChild>
3539
<IconButton
@@ -38,7 +42,7 @@ const Sidebar = () => {
3842
display={{ base: "flex", md: "none" }}
3943
aria-label="Open Menu"
4044
position="absolute"
41-
fontSize="20px"
45+
zIndex="100"
4246
m={4}
4347
>
4448
<FaBars />
@@ -58,7 +62,7 @@ const Sidebar = () => {
5862
px={4}
5963
py={2}
6064
>
61-
<FaSignOutAlt />
65+
<FiLogOut />
6266
<Text>Log Out</Text>
6367
</Flex>
6468
</Box>
@@ -79,7 +83,7 @@ const Sidebar = () => {
7983
display={{ base: "none", md: "flex" }}
8084
position="sticky"
8185
bg="bg.subtle"
82-
top="0"
86+
top={0}
8387
minW="280px"
8488
h="100vh"
8589
p={4}

‎frontend/src/components/Pending/PendingItems.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,26 @@ const PendingItems = () => (
44
<Table.Root size={{ base: "sm", md: "md" }}>
55
<Table.Header>
66
<Table.Row>
7-
<Table.ColumnHeader>ID</Table.ColumnHeader>
8-
<Table.ColumnHeader>Title</Table.ColumnHeader>
9-
<Table.ColumnHeader>Description</Table.ColumnHeader>
10-
<Table.ColumnHeader>Actions</Table.ColumnHeader>
7+
<Table.ColumnHeader w="30%">ID</Table.ColumnHeader>
8+
<Table.ColumnHeader w="30%">Title</Table.ColumnHeader>
9+
<Table.ColumnHeader w="30%">Description</Table.ColumnHeader>
10+
<Table.ColumnHeader w="10%">Actions</Table.ColumnHeader>
1111
</Table.Row>
1212
</Table.Header>
1313
<Table.Body>
1414
{[...Array(5)].map((_, index) => (
1515
<Table.Row key={index}>
1616
<Table.Cell>
17-
<Skeleton h="20px" w="100px" />
17+
<Skeleton h="20px" />
1818
</Table.Cell>
1919
<Table.Cell>
20-
<Skeleton h="20px" w="300px" />
20+
<Skeleton h="20px" />
2121
</Table.Cell>
2222
<Table.Cell>
23-
<Skeleton h="20px" w="300px" />
23+
<Skeleton h="20px" />
2424
</Table.Cell>
2525
<Table.Cell>
26-
<Skeleton h="20px" w="100px" />
26+
<Skeleton h="20px" />
2727
</Table.Cell>
2828
</Table.Row>
2929
))}

‎frontend/src/components/Pending/PendingUsers.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,30 @@ const PendingUsers = () => (
44
<Table.Root size={{ base: "sm", md: "md" }}>
55
<Table.Header>
66
<Table.Row>
7-
<Table.ColumnHeader w="200px">Full name</Table.ColumnHeader>
8-
<Table.ColumnHeader w="300px">Email</Table.ColumnHeader>
9-
<Table.ColumnHeader w="200px">Role</Table.ColumnHeader>
10-
<Table.ColumnHeader w="200px">Status</Table.ColumnHeader>
11-
<Table.ColumnHeader w="100px">Actions</Table.ColumnHeader>
7+
<Table.ColumnHeader w="20%">Full name</Table.ColumnHeader>
8+
<Table.ColumnHeader w="25%">Email</Table.ColumnHeader>
9+
<Table.ColumnHeader w="15%">Role</Table.ColumnHeader>
10+
<Table.ColumnHeader w="20%">Status</Table.ColumnHeader>
11+
<Table.ColumnHeader w="20%">Actions</Table.ColumnHeader>
1212
</Table.Row>
1313
</Table.Header>
1414
<Table.Body>
1515
{[...Array(5)].map((_, index) => (
1616
<Table.Row key={index}>
1717
<Table.Cell>
18-
<Skeleton h="20px" w="200px" />
18+
<Skeleton h="20px" />
1919
</Table.Cell>
2020
<Table.Cell>
21-
<Skeleton h="20px" w="300px" />
21+
<Skeleton h="20px" />
2222
</Table.Cell>
2323
<Table.Cell>
24-
<Skeleton h="20px" w="200px" />
24+
<Skeleton h="20px" />
2525
</Table.Cell>
2626
<Table.Cell>
27-
<Skeleton h="20px" w="200px" />
27+
<Skeleton h="20px" />
2828
</Table.Cell>
2929
<Table.Cell>
30-
<Skeleton h="20px" w="100px" />
30+
<Skeleton h="20px" />
3131
</Table.Cell>
3232
</Table.Row>
3333
))}

‎frontend/src/routes/_layout/admin.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -61,30 +61,32 @@ function UsersTable() {
6161
<Table.Root size={{ base: "sm", md: "md" }}>
6262
<Table.Header>
6363
<Table.Row>
64-
<Table.ColumnHeader w="200px">Full name</Table.ColumnHeader>
65-
<Table.ColumnHeader w="300px">Email</Table.ColumnHeader>
66-
<Table.ColumnHeader w="200px">Role</Table.ColumnHeader>
67-
<Table.ColumnHeader w="200px">Status</Table.ColumnHeader>
68-
<Table.ColumnHeader w="100px">Actions</Table.ColumnHeader>
64+
<Table.ColumnHeader w="20%">Full name</Table.ColumnHeader>
65+
<Table.ColumnHeader w="25%">Email</Table.ColumnHeader>
66+
<Table.ColumnHeader w="15%">Role</Table.ColumnHeader>
67+
<Table.ColumnHeader w="20%">Status</Table.ColumnHeader>
68+
<Table.ColumnHeader w="20%">Actions</Table.ColumnHeader>
6969
</Table.Row>
7070
</Table.Header>
7171
<Table.Body>
7272
{users?.map((user) => (
7373
<Table.Row key={user.id} opacity={isPlaceholderData ? 0.5 : 1}>
74-
<Table.Cell color={!user.full_name ? "gray" : "inherit"}>
74+
<Table.Cell w="20%" color={!user.full_name ? "gray" : "inherit"}>
7575
{user.full_name || "N/A"}
7676
{currentUser?.id === user.id && (
7777
<Badge ml="1" colorScheme="teal">
7878
You
7979
</Badge>
8080
)}
8181
</Table.Cell>
82-
<Table.Cell>{user.email}</Table.Cell>
83-
<Table.Cell>
82+
<Table.Cell w="25%">{user.email}</Table.Cell>
83+
<Table.Cell w="15%">
8484
{user.is_superuser ? "Superuser" : "User"}
8585
</Table.Cell>
86-
<Table.Cell>{user.is_active ? "Active" : "Inactive"}</Table.Cell>
87-
<Table.Cell>
86+
<Table.Cell w="20%">
87+
{user.is_active ? "Active" : "Inactive"}
88+
</Table.Cell>
89+
<Table.Cell w="20%">
8890
<UserActionsMenu
8991
user={user}
9092
disabled={currentUser?.id === user.id}
@@ -114,7 +116,7 @@ function UsersTable() {
114116
function Admin() {
115117
return (
116118
<Container maxW="full">
117-
<Heading size="lg" textAlign={{ base: "center", md: "left" }} pt={12}>
119+
<Heading size="lg" pt={12}>
118120
Users Management
119121
</Heading>
120122

‎frontend/src/routes/_layout/items.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -85,29 +85,29 @@ function ItemsTable() {
8585
<Table.Root size={{ base: "sm", md: "md" }}>
8686
<Table.Header>
8787
<Table.Row>
88-
<Table.ColumnHeader w="100px">ID</Table.ColumnHeader>
89-
<Table.ColumnHeader w="300px">Title</Table.ColumnHeader>
90-
<Table.ColumnHeader w="300px">Description</Table.ColumnHeader>
91-
<Table.ColumnHeader w="100px">Actions</Table.ColumnHeader>
88+
<Table.ColumnHeader w="30%">ID</Table.ColumnHeader>
89+
<Table.ColumnHeader w="30%">Title</Table.ColumnHeader>
90+
<Table.ColumnHeader w="30%">Description</Table.ColumnHeader>
91+
<Table.ColumnHeader w="10%">Actions</Table.ColumnHeader>
9292
</Table.Row>
9393
</Table.Header>
9494
<Table.Body>
9595
{items?.map((item) => (
9696
<Table.Row key={item.id} opacity={isPlaceholderData ? 0.5 : 1}>
97-
<Table.Cell truncate maxW="100px">
97+
<Table.Cell truncate maxW="30%">
9898
{item.id}
9999
</Table.Cell>
100-
<Table.Cell truncate maxW="300px">
100+
<Table.Cell truncate maxW="30%">
101101
{item.title}
102102
</Table.Cell>
103103
<Table.Cell
104104
color={!item.description ? "gray" : "inherit"}
105105
truncate
106-
maxW="300px"
106+
maxW="30%"
107107
>
108108
{item.description || "N/A"}
109109
</Table.Cell>
110-
<Table.Cell width="100px">
110+
<Table.Cell width="10%">
111111
<ItemActionsMenu item={item} />
112112
</Table.Cell>
113113
</Table.Row>
@@ -134,7 +134,7 @@ function ItemsTable() {
134134
function Items() {
135135
return (
136136
<Container maxW="full">
137-
<Heading size="lg" textAlign={{ base: "center", md: "left" }} pt={12}>
137+
<Heading size="lg" pt={12}>
138138
Items Management
139139
</Heading>
140140
<AddItem />

0 commit comments

Comments
 (0)