johnnygear/gear-orders
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Order Sets - Grid layout

Browse source
This commit is contained in:
Johnny Gear 2026-03-08 18:47:28 -05:00
parent bcee02a222
commit 30b92ba9d4
1 changed files with 87 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

172
web/vite/src/OrderSets.tsx
View file

@ -8,6 +8,7 @@ import {
Box,
RingProgress,
Alert,
Grid,
} from "@mantine/core";
import { IconAlertTriangle } from "@tabler/icons-react";
import { TimeValue } from "@mantine/dates";
@ -119,7 +120,7 @@ export const OrderSets: React.FC<OrderSetProps> = ({
}
}}
>
<Flex gap="md" wrap="wrap">
<Grid gutter="md">
{orderSets
? orderSets.map(
({
@ -133,95 +134,96 @@ export const OrderSets: React.FC<OrderSetProps> = ({
probability,
punishment_pool_name,
}) => (
<Card
key={id}
shadow="sm"
padding="lg"
radius="md"
withBorder
bg="gray.2"
w="400px"
mb="0"
>
<Flex direction="column" gap="md" h="100%">
<Title order={4}>{name}</Title>
{scheduled ? (
<>
<Flex gap="xs">
<Text>
<b>Scheduled:</b>
</Text>
{time.split(",").map((time) => (
<div key={time}>
<TimeValue
key={time}
value={time}
format="12h"
/>
</div>
))}
</Flex>
<Flex gap="md" align="center">
{weekdays ? (
<Badge color="blue">Weekdays</Badge>
) : null}
{weekends ? (
<Badge color="blue">Weekends</Badge>
) : null}
<RingProgress
size={30}
thickness={5}
label={
<Text size="xs" ml="lg">
{probability * 100}%
</Text>
}
sections={[
{ color: "cyan", value: probability * 100 },
]}
/>
</Flex>
</>
) : null}
{punishment_pool_name ? (
<Text flex={1}>
<b>Punishments:</b> {punishment_pool_name}
</Text>
) : null}
<Flex justify="end" align="flex-end" gap="md">
{orders.length > 0 ? (
<DonutChart
flex={1}
size={130}
thickness={30}
data={orders.map(({ name, weight }, idx) => ({
name,
value: weight,
color:
COLORS_ROTATION[idx % COLORS_ROTATION.length],
}))}
tooltipDataSource="segment"
/>
<Grid.Col span={{ base: 12, sm: 6 }}>
<Card
key={id}
shadow="sm"
padding="lg"
radius="md"
withBorder
bg="gray.2"
mb="0"
>
<Flex direction="column" gap="md" h="100%">
<Title order={4}>{name}</Title>
{scheduled ? (
<>
<Flex gap="xs">
<Text>
<b>Scheduled:</b>
</Text>
{time.split(",").map((time) => (
<div key={time}>
<TimeValue
key={time}
value={time}
format="12h"
/>
</div>
))}
</Flex>
<Flex gap="md" align="center">
{weekdays ? (
<Badge color="blue">Weekdays</Badge>
) : null}
{weekends ? (
<Badge color="blue">Weekends</Badge>
) : null}
<RingProgress
size={30}
thickness={5}
label={
<Text size="xs" ml="lg">
{probability * 100}%
</Text>
}
sections={[
{ color: "cyan", value: probability * 100 },
]}
/>
</Flex>
</>
) : null}
<ConfirmDialogButton
buttonColor="red.8"
buttonText="Delete"
text={`Are you sure you want to delete ${name}?`}
onConfirm={() => handleDelete(id)}
>
<IconTrash />
</ConfirmDialogButton>
<NavigateButton to={`/orders/${username}/${id}`}>
<IconPencil style={{ marginRight: "0.5rem" }} />
Edit
</NavigateButton>
{punishment_pool_name ? (
<Text flex={1}>
<b>Punishments:</b> {punishment_pool_name}
</Text>
) : null}
<Flex justify="end" align="flex-end" gap="md">
{orders.length > 0 ? (
<DonutChart
flex={1}
size={130}
thickness={30}
data={orders.map(({ name, weight }, idx) => ({
name,
value: weight,
color:
COLORS_ROTATION[idx % COLORS_ROTATION.length],
}))}
tooltipDataSource="segment"
/>
) : null}
<ConfirmDialogButton
buttonColor="red.8"
buttonText="Delete"
text={`Are you sure you want to delete ${name}?`}
onConfirm={() => handleDelete(id)}
>
<IconTrash />
</ConfirmDialogButton>
<NavigateButton to={`/orders/${username}/${id}`}>
<IconPencil style={{ marginRight: "0.5rem" }} />
Edit
</NavigateButton>
</Flex>
</Flex>
</Flex>
</Card>
</Card>
</Grid.Col>
),
)
: null}
</Flex>
</Grid>
</div>
<Box my="lg">
<NavigateButton to={`/orders/${username}/new`}>