feat: add ability to create/delete ugs from interface

apps/api/src/services/orgs/invites.py

@@ -215,11 +215,7 @@ async def get_invite_codes(
     # Get invite codes
     invite_codes = r.keys(f"org_invite_code_*:org:{org.org_uuid}:code:*")
 
-    if not invite_codes:
+
-        raise HTTPException(
-            status_code=404,
-            detail="Invite codes not found",
-        )
 
     invite_codes_list = []
 

apps/api/src/services/users/usergroups.py

@@ -99,11 +99,7 @@ async def read_usergroups_by_org_id(
     statement = select(UserGroup).where(UserGroup.org_id == org_id)
     usergroups = db_session.exec(statement).all()
 
-    if not usergroups:
+
-        raise HTTPException(
-            status_code=404,
-            detail="UserGroups not found",
-        )
 
     # RBAC check
     await rbac_check(

apps/web/app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page.tsx

@@ -27,7 +27,7 @@ function CourseOverviewPage({ params }: { params: CourseOverviewParams }) {
       <CourseProvider courseuuid={getEntireCourseUUID(params.courseuuid)}>
         <div className="pl-10 pr-10 text-sm tracking-tight bg-[#fcfbfc] z-10 shadow-[0px_4px_16px_rgba(0,0,0,0.06)]">
           <CourseOverviewTop params={params} />
-          <div className="flex space-x-3 font-black text-xs">
+          <div className="flex space-x-3 font-black text-sm">
             <Link
               href={
                 getUriWithOrg(params.orgslug, '') +

apps/web/app/orgs/[orgslug]/dash/users/settings/[subpage]/page.tsx

@@ -3,13 +3,14 @@ import React, { useEffect } from 'react'
 import { motion } from 'framer-motion'
 import Link from 'next/link'
 import { getUriWithOrg } from '@services/config/config'
-import { ScanEye, UserPlus, Users } from 'lucide-react'
+import { ScanEye, SquareUserRound, UserPlus, Users } from 'lucide-react'
 import BreadCrumbs from '@components/Dashboard/UI/BreadCrumbs'
 import { useSession } from '@components/Contexts/SessionContext'
 import { useOrg } from '@components/Contexts/OrgContext'
 import OrgUsers from '@components/Dashboard/Users/OrgUsers/OrgUsers'
 import OrgAccess from '@components/Dashboard/Users/OrgAccess/OrgAccess'
 import OrgUsersAdd from '@components/Dashboard/Users/OrgUsersAdd/OrgUsersAdd'
+import OrgUserGroups from '@components/Dashboard/Users/OrgUserGroups/OrgUserGroups'
 
 export type SettingsParams = {
   subpage: string
@@ -35,6 +36,10 @@ function UsersSettingsPage({ params }: { params: SettingsParams }) {
       setH1Label('Invite users')
       setH2Label('Invite users to join your organization')
     }
+    if (params.subpage == 'usergroups') {
+      setH1Label('UserGroups')
+      setH2Label('Create and manage user groups')
+    }
   }
 
   useEffect(() => {
@@ -62,8 +67,7 @@ function UsersSettingsPage({ params }: { params: SettingsParams }) {
             }
           >
             <div
-              className={`py-2 w-fit text-center border-black transition-all ease-linear ${
+              className={`py-2 w-fit text-center border-black transition-all ease-linear ${params.subpage.toString() === 'users'
-                params.subpage.toString() === 'users'
                   ? 'border-b-4'
                   : 'opacity-50'
                 } cursor-pointer`}
@@ -74,14 +78,30 @@ function UsersSettingsPage({ params }: { params: SettingsParams }) {
               </div>
             </div>
           </Link>
+          <Link
+            href={
+              getUriWithOrg(params.orgslug, '') + `/dash/users/settings/usergroups`
+            }
+          >
+            <div
+              className={`py-2 w-fit text-center border-black transition-all ease-linear ${params.subpage.toString() === 'usergroups'
+                  ? 'border-b-4'
+                  : 'opacity-50'
+                } cursor-pointer`}
+            >
+              <div className="flex items-center space-x-2.5 mx-2">
+                <SquareUserRound size={16} />
+                <div>UserGroups</div>
+              </div>
+            </div>
+          </Link>
           <Link
             href={
               getUriWithOrg(params.orgslug, '') + `/dash/users/settings/add`
             }
           >
             <div
-              className={`py-2 w-fit text-center border-black transition-all ease-linear ${
+              className={`py-2 w-fit text-center border-black transition-all ease-linear ${params.subpage.toString() === 'add'
-                params.subpage.toString() === 'add'
                   ? 'border-b-4'
                   : 'opacity-50'
                 } cursor-pointer`}
@@ -98,8 +118,7 @@ function UsersSettingsPage({ params }: { params: SettingsParams }) {
             }
           >
             <div
-              className={`py-2 w-fit text-center border-black transition-all ease-linear ${
+              className={`py-2 w-fit text-center border-black transition-all ease-linear ${params.subpage.toString() === 'signups'
-                params.subpage.toString() === 'signups'
                   ? 'border-b-4'
                   : 'opacity-50'
                 } cursor-pointer`}
@@ -122,6 +141,7 @@ function UsersSettingsPage({ params }: { params: SettingsParams }) {
         {params.subpage == 'users' ? <OrgUsers /> : ''}
         {params.subpage == 'signups' ? <OrgAccess /> : ''}
         {params.subpage == 'add' ? <OrgUsersAdd /> : ''}
+        {params.subpage == 'usergroups' ? <OrgUserGroups /> : ''}
       </motion.div>
     </div>
   )

apps/web/components/Dashboard/Course/EditCourseAccess/EditCourseAccess.tsx

@@ -5,7 +5,7 @@ import Modal from '@components/StyledElements/Modal/Modal'
 import { getAPIUrl } from '@services/config/config'
 import { unLinkResourcesToUserGroup } from '@services/usergroups/usergroups'
 import { swrFetcher } from '@services/utils/ts/requests'
-import { Globe, Users, UsersRound, X } from 'lucide-react'
+import { Globe, SquareUserRound, Users, UsersRound, X } from 'lucide-react'
 import React from 'react'
 import toast from 'react-hot-toast'
 import useSWR, { mutate } from 'swr'
@@ -198,13 +198,14 @@ function UserGroupsSection({ usergroups }: { usergroups: any[] }) {
                         <button
                             className=" flex space-x-2 hover:cursor-pointer p-1 px-3 bg-green-700 rounded-md font-bold items-center text-sm text-green-100"
                         >
-                            <UsersRound className="w-4 h-4" />
+                            <SquareUserRound className="w-4 h-4" />
                             <span>Link to a UserGroup</span>
                         </button>
                     }
                 />
 
-            </div></>
+            </div>
+        </>
     )
 }
 

apps/web/components/Dashboard/Users/OrgAccess/OrgAccess.tsx

@@ -74,7 +74,6 @@ function OrgAccess() {
 
   return (
     <>
-      <Toast></Toast>
       {!isLoading ? (
         <>
           <div className="h-6"></div>

apps/web/components/Dashboard/Users/OrgUserGroups/OrgUserGroups.tsx

@@ -0,0 +1,154 @@
+'use client'
+import { useOrg } from '@components/Contexts/OrgContext'
+import AddUserGroup from '@components/Objects/Modals/Dash/OrgUserGroups/AddUserGroup'
+import ManageUsers from '@components/Objects/Modals/Dash/OrgUserGroups/ManageUsers'
+import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
+import Modal from '@components/StyledElements/Modal/Modal'
+import { getAPIUrl } from '@services/config/config'
+import { deleteUserGroup } from '@services/usergroups/usergroups'
+import { swrFetcher } from '@services/utils/ts/requests'
+import { SquareUserRound, Users, X } from 'lucide-react'
+import React from 'react'
+import toast from 'react-hot-toast'
+import useSWR, { mutate } from 'swr'
+
+function OrgUserGroups() {
+    const org = useOrg() as any
+    const [userGroupManagementModal, setUserGroupManagementModal] = React.useState(false)
+    const [createUserGroupModal, setCreateUserGroupModal] = React.useState(false)
+    const [selectedUserGroup, setSelectedUserGroup] = React.useState(null) as any
+
+    const { data: usergroups } = useSWR(
+        org ? `${getAPIUrl()}usergroups/org/${org.id}` : null,
+        swrFetcher
+    )
+
+    const deleteUserGroupUI = async (usergroup_id: any) => {
+        const res = await deleteUserGroup(usergroup_id)
+        if (res.status == 200) {
+            mutate(`${getAPIUrl()}usergroups/org/${org.id}`)
+        }
+        else {
+            toast.error('Error ' + res.status + ': ' + res.data.detail)
+        }
+
+    }
+
+    const handleUserGroupManagementModal = (usergroup_id: any) => {
+        setSelectedUserGroup(usergroup_id)
+        setUserGroupManagementModal(!userGroupManagementModal)
+    }
+
+    return (
+        <>
+            <div className="h-6"></div>
+            <div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-4 py-4">
+                <div className="flex flex-col bg-gray-50 -space-y-1  px-5 py-3 rounded-md mb-3 ">
+                    <h1 className="font-bold text-xl text-gray-800">Manage UserGroups & Users</h1>
+                    <h2 className="text-gray-500 text-sm">
+                        {' '}
+                        UserGroups are a way to group users together to manage their access to the resources (Courses) in your organization.{' '}
+                    </h2>
+                </div>
+                <table className="table-auto w-full text-left whitespace-nowrap rounded-md overflow-hidden">
+                    <thead className="bg-gray-100 text-gray-500 rounded-xl uppercase">
+                        <tr className="font-bolder text-sm">
+                            <th className="py-3 px-4">UserGroup</th>
+                            <th className="py-3 px-4">Description</th>
+                            <th className="py-3 px-4">Manage Users</th>
+                            <th className="py-3 px-4">Actions</th>
+                        </tr>
+                    </thead>
+                    <>
+                        <tbody className="mt-5 bg-white rounded-md">
+                            {usergroups?.map((usergroup: any) => (
+                                <tr key={usergroup.id} className="border-b border-gray-100 text-sm">
+                                    <td className="py-3 px-4">{usergroup.name}</td>
+                                    <td className="py-3 px-4 ">{usergroup.description}</td>
+                                    <td className="py-3 px-4 ">
+                                        <Modal
+                                            isDialogOpen={
+                                                userGroupManagementModal &&
+                                                selectedUserGroup === usergroup.id
+                                            }
+                                            onOpenChange={() =>
+                                                handleUserGroupManagementModal(usergroup.id)
+                                            }
+                                            minHeight="no-min"
+                                            dialogContent={
+                                                <ManageUsers
+                                                />
+                                            }
+                                            dialogTitle="Manage UserGroup Users"
+                                            dialogDescription={
+                                                'Manage the users in this UserGroup'
+                                            }
+                                            dialogTrigger={
+                                                <button className="flex space-x-2 hover:cursor-pointer p-1 px-3 bg-yellow-700 rounded-md font-bold items-center text-sm text-yellow-100">
+                                                    <Users className="w-4 h-4" />
+                                                    <span> Manage Users</span>
+                                                </button>
+                                            }
+                                        />
+                                    </td>
+                                    <td className="py-3 px-4 ">
+
+                                        <ConfirmationModal
+                                            confirmationButtonText="Delete UserGroup"
+                                            confirmationMessage="Access to all resources will be removed for all users in this UserGroup. Are you sure you want to delete this UserGroup ?"
+                                            dialogTitle={'Delete UserGroup ?'}
+                                            dialogTrigger={
+                                                <button className="flex space-x-2 hover:cursor-pointer p-1 px-3 bg-rose-700 rounded-md font-bold items-center text-sm text-rose-100">
+                                                    <X className="w-4 h-4" />
+                                                    <span> Delete</span>
+                                                </button>
+                                            }
+                                            functionToExecute={() => {
+                                                deleteUserGroupUI(usergroup.id)
+                                            }}
+                                            status="warning"
+                                        ></ConfirmationModal>
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </>
+                </table>
+                <div className='flex justify-end mt-3 mr-2'>
+                    <Modal
+                        isDialogOpen={
+                            createUserGroupModal
+                        }
+                        onOpenChange={() =>
+                            setCreateUserGroupModal(!createUserGroupModal)
+                        }
+                        minHeight="no-min"
+                        dialogContent={
+                            <AddUserGroup
+                                setCreateUserGroupModal={setCreateUserGroupModal}
+                            />
+                        }
+                        dialogTitle="Create a UserGroup"
+                        dialogDescription={
+                            'Create a new UserGroup to manage users'
+                        }
+                        dialogTrigger={
+                            <button
+                                className=" flex space-x-2 hover:cursor-pointer p-1 px-3 bg-green-700 rounded-md font-bold items-center text-sm text-green-100"
+                            >
+                                <SquareUserRound className="w-4 h-4" />
+                                <span>Create a UserGroup</span>
+                            </button>
+                        }
+                    />
+                </div>
+
+            </div>
+
+
+
+        </>
+    )
+}
+
+export default OrgUserGroups

apps/web/components/Objects/Modals/Dash/OrgUserGroups/AddUserGroup.tsx

@@ -0,0 +1,99 @@
+'use client'
+import FormLayout, {
+    ButtonBlack,
+    Flex,
+    FormField,
+    FormLabel,
+    FormMessage,
+    Input,
+} from '@components/StyledElements/Form/Form'
+import * as Form from '@radix-ui/react-form'
+import { useOrg } from '@components/Contexts/OrgContext'
+import React from 'react'
+import { BarLoader } from 'react-spinners'
+import { createUserGroup } from '@services/usergroups/usergroups'
+import { mutate } from 'swr'
+import { getAPIUrl } from '@services/config/config'
+
+type AddUserGroupProps = {
+    setCreateUserGroupModal: any
+}
+
+function AddUserGroup(props: AddUserGroupProps) {
+    const org = useOrg() as any
+    const [userGroupName, setUserGroupName] = React.useState('')
+    const [userGroupDescription, setUserGroupDescription] = React.useState('')
+    const [isSubmitting, setIsSubmitting] = React.useState(false)
+
+    const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setUserGroupName(event.target.value)
+    }
+
+    const handleDescriptionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setUserGroupDescription(event.target.value)
+    }
+
+    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault()
+        setIsSubmitting(true)
+
+        const obj = {
+            name: userGroupName,
+            description: userGroupDescription,
+            org_id: org.id
+        }
+        const res = await createUserGroup(obj)
+        if (res.status == 200) {
+            setIsSubmitting(false)
+            mutate(`${getAPIUrl()}usergroups/org/${org.id}`)
+            props.setCreateUserGroupModal(false)
+
+        } else {
+            setIsSubmitting(false)
+        }
+    }
+
+    return (
+        <FormLayout onSubmit={handleSubmit}>
+            <FormField name="name">
+                <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
+                    <FormLabel>Name</FormLabel>
+                    <FormMessage match="valueMissing">
+                        Please provide a ug name
+                    </FormMessage>
+                </Flex>
+                <Form.Control asChild>
+                    <Input onChange={handleNameChange} type="text" required />
+                </Form.Control>
+            </FormField>
+            <FormField name="description">
+                <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
+                    <FormLabel>Description</FormLabel>
+                    <FormMessage match="valueMissing">
+                        Please provide a ug description
+                    </FormMessage>
+                </Flex>
+                <Form.Control asChild>
+                    <Input onChange={handleDescriptionChange} type="text" required />
+                </Form.Control>
+            </FormField>
+            <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
+                <Form.Submit asChild>
+                    <ButtonBlack type="submit" css={{ marginTop: 10 }}>
+                        {isSubmitting ? (
+                            <BarLoader
+                                cssOverride={{ borderRadius: 60 }}
+                                width={60}
+                                color="#ffffff"
+                            />
+                        ) : (
+                            'Create UserGroup'
+                        )}
+                    </ButtonBlack>
+                </Form.Submit>
+            </Flex>
+        </FormLayout>
+    )
+}
+
+export default AddUserGroup

apps/web/components/Objects/Modals/Dash/OrgUserGroups/ManageUsers.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function ManageUsers() {
+  return (
+    <div>ManageUsers</div>
+  )
+}
+
+export default ManageUsers

apps/web/services/usergroups/usergroups.ts

@@ -10,6 +10,24 @@ export async function getUserGroups(org_id: any) {
   return res
 }
 
+export async function createUserGroup(body: any) {
+  const result: any = await fetch(
+    `${getAPIUrl()}usergroups`,
+    RequestBody('POST', body, null)
+  )
+  const res = await getResponseMetadata(result)
+  return res
+}
+
+export async function deleteUserGroup(usergroup_id: number) {
+  const result: any = await fetch(
+    `${getAPIUrl()}usergroups/${usergroup_id}`,
+    RequestBody('DELETE', null, null)
+  )
+  const res = await getResponseMetadata(result)
+  return res
+}
+
 export async function linkResourcesToUserGroup(
   usergroup_id: any,
   resource_uuids: any