feat: update Authorized component to use rules for group-based access control; enhance CategoryGroup to return null if no availability; improve EventEditor layout and button labels; fix NavItem active state check

Author: Aloento

src/Components/Auth/With.tsx

@@ -6,11 +6,11 @@ import { useAuth } from "react-oidc-context";
  * @since 1.0.0
  * @version 0.2.0
  */
-export function Authorized({ children, role }: { children: ReactNode, role?: string }): ReactNode {
+export function Authorized({ children, rules }: { children: ReactNode, rules?: (groups: string[]) => boolean }): ReactNode {
   const auth = useAuth();
 
   if (auth.isAuthenticated || process.env.NODE_ENV === "development") {
-    if (role && !((auth.user?.profile as any)?.groups as string[])?.includes(role)) {
+    if (rules && !rules((auth.user?.profile as any)?.groups as string[])) {
       return null;
     }
     return children;

src/Components/Availability/CategoryGroup.tsx

@@ -5,7 +5,7 @@ import { Models } from "~/Services/Status.Models";
 /**
  * @author Aloento
  * @since 1.0.0
- * @version 0.1.0
+ * @version 0.2.0
  */
 export function CategoryGroup({ Category }: { Category: Models.ICategory }) {
   const { Availa, Region } = useAvailability();
@@ -26,6 +26,10 @@ export function CategoryGroup({ Category }: { Category: Models.ICategory }) {
     return `bg-${color}-100 hover:bg-${color}-200`;
   }
 
+  if (!avas.length) {
+    return null;
+  }
+
   return <>
     <tr>
       <td rowSpan={avas.length} className="text-lg">

src/Components/Event/EventEditor.tsx

@@ -146,14 +146,20 @@ export function EventEditor({ Event }: { Event: Models.IEvent }) {
           helperText={Validation.update}
         />
 
-        <div className="flex gap-x-3 self-end">
+        <div className="flex justify-between">
           <ScaleButton onClick={setFalse} variant="secondary" type="button">
-            Cancel
+            Delete
           </ScaleButton>
 
-          <ScaleButton type="submit" disabled={Loading}>
-            Submit
-          </ScaleButton>
+          <div className="flex gap-x-3">
+            <ScaleButton onClick={setFalse} variant="secondary" type="button">
+              Cancel
+            </ScaleButton>
+
+            <ScaleButton type="submit" disabled={Loading}>
+              Submit
+            </ScaleButton>
+          </div>
         </div>
       </form>
     </ScaleModal>

src/Components/Layout/NavItem.tsx

@@ -16,7 +16,7 @@ export function NavItem({ Href, Label }: INavItem) {
   const path = Paths.at(0);
 
   return (
-    <ScaleTelekomNavItem aria-label={Label} {...Href.includes(path!) ? { active: true } : {}}>
+    <ScaleTelekomNavItem aria-label={Label} {...Href.startsWith(`/${path}`) ? { active: true } : {}}>
       <a href={Href}>{Label}</a>
     </ScaleTelekomNavItem>
   );