gear-orders/web/vite/src/OrderSets.tsx

import React from "react";
import {
  Title,
  Card,
  Text,
  Flex,
  Badge,
  Box,
  RingProgress,
} from "@mantine/core";
import { TimeValue } from "@mantine/dates";
import { IconPencil, IconPlus, IconTrash } from "@tabler/icons-react";

import { ConfirmDialogButton } from "./ConfirmDialogButton";
import { NavigateButton } from "./NavigateButton";
import { useFetcher } from "react-router";

export interface OrderSetProps {
  orderSets: (Pick<
    OrderSet,
    | "id"
    | "name"
    | "scheduled"
    | "time"
    | "weekends"
    | "weekdays"
    | "orders"
    | "probability"
  > & {
    orders: Pick<OrderSetOrder, "id" | "name">;
    punishment_pool_name: string;
  })[];
  username: string;
  linkBack?: React.ReactNode;
}

export const OrderSets: React.FC<OrderSetProps> = ({
  orderSets,
  username,
  linkBack,
}) => {
  const fetcher = useFetcher();
  const handleDelete = React.useCallback(
    (id: number) => {
      fetcher.submit(null, {
        action: `/orders/${username}/${id}`,
        method: "DELETE",
      });
    },
    [fetcher],
  );

  return (
    <>
      <Box mb="lg">
        <Title order={1}>Order Sets for {username}</Title>
        {linkBack ? linkBack : null}
      </Box>
      <Flex gap="md" wrap="wrap">
        {orderSets
          ? orderSets.map(
              ({
                id,
                name,
                scheduled,
                orders,
                time,
                weekdays,
                weekends,
                probability,
                punishment_pool_name,
              }) => (
                <Card
                  key={id}
                  shadow="sm"
                  padding="lg"
                  radius="md"
                  withBorder
                  bg="gray.2"
                  w="400px"
                >
                  <Flex direction="column" gap="md" h="100%">
                    <Title order={4}>{name}</Title>
                    {scheduled ? (
                      <>
                        <Flex gap="xs">
                          <Text>Scheduled:</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={80}
                            label={<Text size="xs">{probability * 100}%</Text>}
                            sections={[
                              { color: "cyan", value: probability * 100 },
                            ]}
                          />
                        </Flex>
                      </>
                    ) : null}
                    <Text mb="md" flex={1}>
                      Orders: {orders.length}
                      <br />
                      {punishment_pool_name
                        ? `Punishments: ${punishment_pool_name}`
                        : null}
                    </Text>
                    <Flex gap="md" justify="end">
                      <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>
                </Card>
              ),
            )
          : null}
      </Flex>
      <NavigateButton to={`/orders/${username}/new`}>
        <IconPlus style={{ marginRight: "0.5rem" }} />
        New
      </NavigateButton>
      <Box mb="lg"></Box>
    </>
  );
};