✨ Create an organization (#20)

fastapi · Apr 8, 2024 · be49827 · be49827
1 parent 0bd9d4a
commit be49827
Show file tree

Hide file tree

Showing 28 changed files with 503 additions and 144 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Full Stack FastAPI Project</title>
+    <title>FastAPI Cloud</title>
     <link rel="icon" type="image/x-icon" href="./src/assets/images/favicon.png" />
   </head>
   <body>

diff --git a/frontend/src/components/Admin/AddUser.tsx b/frontend/src/components/Admin/AddUser.tsx
@@ -166,10 +166,10 @@ const AddUser = ({ isOpen, onClose }: AddUserProps) => {
             </Flex>
           </ModalBody>
           <ModalFooter gap={3}>
+            <Button onClick={onClose}>Cancel</Button>
             <Button variant="primary" type="submit" isLoading={isSubmitting}>
               Save
             </Button>
-            <Button onClick={onClose}>Cancel</Button>
           </ModalFooter>
         </ModalContent>
       </Modal>

diff --git a/frontend/src/components/Admin/EditUser.tsx b/frontend/src/components/Admin/EditUser.tsx
@@ -166,6 +166,7 @@ const EditUser = ({ user, isOpen, onClose }: EditUserProps) => {
           </ModalBody>
 
           <ModalFooter gap={3}>
+            <Button onClick={onCancel}>Cancel</Button>
             <Button
               variant="primary"
               type="submit"
@@ -174,7 +175,6 @@ const EditUser = ({ user, isOpen, onClose }: EditUserProps) => {
             >
               Save
             </Button>
-            <Button onClick={onCancel}>Cancel</Button>
           </ModalFooter>
         </ModalContent>
       </Modal>

diff --git a/frontend/src/components/Billing/Plans.tsx b/frontend/src/components/Billing/Plans.tsx
@@ -1,74 +1,65 @@
 import {
   Box,
+  Button,
   Flex,
+  Icon,
   List,
-  Radio,
-  RadioGroup,
   Stack,
   Text,
   VStack,
 } from "@chakra-ui/react"
 import { FaCheckCircle } from "react-icons/fa"
 
-const items = [
-  {
-    value: "1",
-    title: "Basic",
-    description: "For small teams and early-stage startups.",
-    price: "5",
-  },
-  {
-    value: "2",
-    title: "Advanced",
-    description: "For larger teams and established companies.",
-    price: "18",
-  },
-  {
-    value: "3",
-    title: "Enterprise",
-    description: "For large organizations with advanced needs.",
-    price: "32",
-  },
-]
+import { FaCircleXmark } from "react-icons/fa6"
+import { items } from "./PlansData"
 
 const Plans = () => {
-  const listItems = items.map(({ value, title, description, price }) => (
-    <Box border="1px solid lightgray" p={4} borderRadius="16px" key={value}>
-      <VStack spacing={4}>
-        <Radio value={value} colorScheme="teal">
-          {title}
-        </Radio>
-        <Text fontSize="sm">{description}</Text>
-        <Flex textAlign="center" flexDir="column">
-          <Text fontSize="xl" color="ui.main">
-            $ {price}
+  const listItems = items.map(
+    ({ value, title, description, price, features }) => (
+      <Box border="1px solid lightgray" p={4} borderRadius="lg" key={value}>
+        <VStack spacing={4}>
+          <Text textTransform="uppercase" fontWeight="bold">
+            {title}
           </Text>
-          <Text fontSize="sm">per user/month</Text>
-        </Flex>
-        <List>
-          <Text fontSize="sm" display="flex" gap={2}>
-            <FaCheckCircle />
-            Up to 10 users
-          </Text>
-          <Text fontSize="sm" display="flex" gap={2}>
-            <FaCheckCircle />
-            Basic support
-          </Text>
-          <Text fontSize="sm" display="flex" gap={2}>
-            <FaCheckCircle />
-            Unlimited projects
-          </Text>
-        </List>
-      </VStack>
-    </Box>
-  ))
+          <Text fontSize="sm">{description}</Text>
+          <Flex textAlign="center" flexDir="column">
+            <Text fontSize="4xl" fontWeight="bold" color="ui.main">
+              $ {price}
+            </Text>
+            <Text fontSize="sm">per month</Text>
+          </Flex>
+          <List>
+            {Object.values(features).map((feature, index) => (
+              <Text
+                key={index}
+                fontSize="sm"
+                display="flex"
+                alignItems="center"
+                textDecoration={feature.value ? "none" : "line-through"}
+                gap={2}
+              >
+                {feature.value ? (
+                  <Icon as={FaCheckCircle} color="ui.main" />
+                ) : (
+                  <Icon as={FaCircleXmark} color="ui.dim" />
+                )}
+
+                {feature.name}
+              </Text>
+            ))}
+          </List>
+          <Button variant="outline" size="sm">
+            Choose Plan
+          </Button>
+        </VStack>
+      </Box>
+    ),
+  )
   return (
     <>
-      <RadioGroup>
-        <Stack direction={{ base: "column", md: "row" }} gap={10}>
-          {listItems}
-        </Stack>
-      </RadioGroup>
+      <Stack direction={{ base: "column", md: "row" }} gap={10}>
+        {listItems}
+      </Stack>
     </>
   )
 }

diff --git a/frontend/src/components/Billing/PlansData.ts b/frontend/src/components/Billing/PlansData.ts
@@ -0,0 +1,86 @@
+export const items = [
+  {
+    value: "1",
+    title: "Team",
+    description: "For small teams and early-stage startups.",
+    price: "50",
+    features: {
+      users: {
+        name: "Up to 10 users",
+        value: true,
+      },
+      bandwidth: {
+        name: "500 GB in free bandwidth",
+        value: true,
+      },
+      migration: {
+        name: "Migration support",
+        value: false,
+      },
+      support: {
+        name: "Dedicated support",
+        value: false,
+      },
+      hibba: {
+        name: "HIPAA/BAA support",
+        value: false,
+      },
+    },
+  },
+  {
+    value: "2",
+    title: "Organization",
+    description: "For larger teams and established companies.",
+    price: "180",
+    features: {
+      users: {
+        name: "Up to 50 users",
+        value: true,
+      },
+      bandwidth: {
+        name: "1 TB in free bandwidth",
+        value: true,
+      },
+      migration: {
+        name: "Migration support",
+        value: false,
+      },
+      support: {
+        name: "Dedicated support",
+        value: false,
+      },
+      hibba: {
+        name: "HIPAA/BAA support",
+        value: false,
+      },
+    },
+  },
+  {
+    value: "300",
+    title: "Enterprise",
+    description: "For large organizations with advanced needs.",
+    price: "320",
+    features: {
+      users: {
+        name: "Unlimited users",
+        value: true,
+      },
+      bandwidth: {
+        name: "Custom bandwidth usage",
+        value: true,
+      },
+      migration: {
+        name: "Migration support",
+        value: true,
+      },
+      support: {
+        name: "Dedicated support",
+        value: true,
+      },
+      hibba: {
+        name: "HIPAA/BAA support",
+        value: true,
+      },
+    },
+  },
+]
diff --git a/frontend/src/components/Common/ActionsMenu.tsx b/frontend/src/components/Common/ActionsMenu.tsx
@@ -7,8 +7,8 @@ import {
   useDisclosure,
 } from "@chakra-ui/react"
 import { BsThreeDotsVertical } from "react-icons/bs"
-import { FiEdit, FiTrash } from "react-icons/fi"
 
+import { FaEdit, FaTrash } from "react-icons/fa"
 import type { ItemPublic, UserPublic } from "../../client"
 import EditUser from "../Admin/EditUser"
 import EditItem from "../Items/EditItem"
@@ -36,13 +36,13 @@ const ActionsMenu = ({ type, value, disabled }: ActionsMenuProps) => {
         <MenuList>
           <MenuItem
             onClick={editUserModal.onOpen}
-            icon={<FiEdit fontSize="16px" />}
+            icon={<FaEdit fontSize="16px" />}
           >
             Edit {type}
           </MenuItem>
           <MenuItem
             onClick={deleteModal.onOpen}
-            icon={<FiTrash fontSize="16px" />}
+            icon={<FaTrash fontSize="16px" />}
             color="ui.danger"
           >
             Delete {type}

diff --git a/frontend/src/components/Common/DeleteAlert.tsx b/frontend/src/components/Common/DeleteAlert.tsx
@@ -92,16 +92,16 @@ const Delete = ({ type, id, isOpen, onClose }: DeleteProps) => {
             </AlertDialogBody>
 
             <AlertDialogFooter gap={3}>
-              <Button variant="danger" type="submit" isLoading={isSubmitting}>
-                Delete
-              </Button>
               <Button
                 ref={cancelRef}
                 onClick={onClose}
                 isDisabled={isSubmitting}
               >
                 Cancel
               </Button>
+              <Button variant="danger" type="submit" isLoading={isSubmitting}>
+                Delete
+              </Button>
             </AlertDialogFooter>
           </AlertDialogContent>
         </AlertDialogOverlay>

diff --git a/frontend/src/components/Common/Searchbar.tsx b/frontend/src/components/Common/Searchbar.tsx
@@ -0,0 +1,23 @@
+import { Icon, Input, InputGroup, InputRightElement } from "@chakra-ui/react"
+import { FaSearch } from "react-icons/fa"
+
+const Searchbar = () => {
+  return (
+    <>
+      <InputGroup mx={8}>
+        <Input
+          variant="filled"
+          type="text"
+          placeholder="Search"
+          fontSize={{ base: "sm", md: "inherit" }}
+          borderRadius="8px"
+        />
+        <InputRightElement pointerEvents="none">
+          <Icon as={FaSearch} color="ui.dim" />
+        </InputRightElement>
+      </InputGroup>
+    </>
+  )
+}
+
+export default Searchbar
diff --git a/frontend/src/components/Common/Sidebar.tsx b/frontend/src/components/Common/Sidebar.tsx
@@ -69,10 +69,11 @@ const Sidebar = () => {
       <Box
         position="sticky"
         display={{ base: "none", md: "flex" }}
+        boxShadow="md"
         minW="250px"
         h="100vh"
         top="0"
-        p={4}
+        p={6}
       >
         <Box justifyContent="center" w="100%">
           <Center>

diff --git a/frontend/src/components/Common/Navbar.tsx → ...components/Common/TableActionsButtons.tsx b/frontend/src/components/Common/Navbar.tsx → ...components/Common/TableActionsButtons.tsx
@@ -1,5 +1,5 @@
 import { Button, Flex, Icon, useDisclosure } from "@chakra-ui/react"
-import { FaPlus } from "react-icons/fa"
+import { FaEdit, FaPlus } from "react-icons/fa"
 
 import AddUser from "../Admin/AddUser"
 import AddItem from "../Items/AddItem"
@@ -8,33 +8,33 @@ interface NavbarProps {
   type: string
 }
 
-const Navbar = ({ type }: NavbarProps) => {
+const TableActionsButtons = ({ type }: NavbarProps) => {
   const addUserModal = useDisclosure()
   const addItemModal = useDisclosure()
 
   return (
     <>
-      <Flex py={8} gap={4}>
-        {/* TODO: Complete search functionality */}
-        {/* <InputGroup w={{ base: '100%', md: 'auto' }}>
-                    <InputLeftElement pointerEvents='none'>
-                        <Icon as={FaSearch} color='ui.dim' />
-                    </InputLeftElement>
-                    <Input type='text' placeholder='Search' fontSize={{ base: 'sm', md: 'inherit' }} borderRadius='8px' />
-                </InputGroup> */}
+      <Flex py={8} gap={4} justify="end">
         <Button
           variant="primary"
-          gap={1}
-          fontSize={{ base: "sm", md: "inherit" }}
+          gap={2}
           onClick={type === "User" ? addUserModal.onOpen : addItemModal.onOpen}
         >
           <Icon as={FaPlus} /> Add {type}
         </Button>
+        {type === "User" && (
+          <>
+            <Button variant="primary" gap={2}>
+              <Icon as={FaEdit} />
+              Edit Organization
+            </Button>
+          </>
+        )}
         <AddUser isOpen={addUserModal.isOpen} onClose={addUserModal.onClose} />
         <AddItem isOpen={addItemModal.isOpen} onClose={addItemModal.onClose} />
       </Flex>
     </>
   )
 }
 
-export default Navbar
+export default TableActionsButtons