pages

src/views/home/groups/Groups.tsx

@@ -0,0 +1,71 @@
+import { useEffect } from "react";
+import { SecondaryButton } from "../../../components/button/SecondaryButton";
+import { cn } from "../../../lib/cn";
+import { useAppDispatch } from "../../../redux/hooks";
+import GroupsBlock from "./GroupsBlock";
+import { setMenuActivePage } from "../../../redux/slices/store";
+
+
+export interface Group {
+    id: number;
+    role: "menager" | "member" | "owner" | "viewer";
+    visible: boolean;
+    name: string;
+}
+
+
+const Groups = () => {
+
+    const dispatch = useAppDispatch();
+
+    const groups: Group[] = [
+        { id: 1, role: "owner", name: "Main Administration", visible: true },
+        { id: 2, role: "menager", name: "Project Managers", visible: true },
+        { id: 3, role: "member", name: "Developers", visible: true },
+        { id: 4, role: "viewer", name: "QA Viewers", visible: true },
+        { id: 5, role: "member", name: "Design Team", visible: true },
+        { id: 6, role: "owner", name: "Executive Board", visible: true },
+        { id: 7, role: "menager", name: "HR Managers", visible: true },
+        { id: 8, role: "viewer", name: "Marketing Reviewers", visible: false },
+        { id: 9, role: "member", name: "Content Creators", visible: false },
+        { id: 10, role: "menager", name: "Support Managers", visible: true },
+        { id: 11, role: "viewer", name: "External Auditors", visible: false },
+        { id: 12, role: "member", name: "Frontend Developers", visible: true },
+        { id: 13, role: "member", name: "Backend Developers", visible: true },
+        { id: 14, role: "viewer", name: "Guest Access", visible: false },
+        { id: 15, role: "menager", name: "Operations", visible: true },
+    ];
+
+    useEffect(() => {
+        dispatch(setMenuActivePage("groups"))
+    }, []);
+
+    return (
+        <div className=" h-full w-[calc(100%+250px)] box-border p-[20px] pt-[20p]">
+            <div className="h-full box-border">
+
+                <div className="relative flex items-center mb-[20px]">
+                    <div className={cn("h-[50px] text-[40px] font-bold text-liquid-white flex items-center")}>
+                        Группы
+                    </div>
+                    <SecondaryButton
+                        onClick={() => { }}
+                        text="Создать группу"
+                        className="absolute right-0"
+                    />
+                </div>
+
+                <div className="bg-liquid-lighter h-[50px] mb-[20px]">
+
+                </div>
+
+
+                <GroupsBlock className="mb-[20px]" title="Управляемые" groups={groups.filter((v) => v.visible && (v.role == "owner" || v.role == "menager"))} />
+                <GroupsBlock className="mb-[20px]" title="Текущие" groups={groups.filter((v) => v.visible && (v.role == "member" || v.role == "viewer"))} />
+                <GroupsBlock className="mb-[20px]" title="Скрытые" groups={groups.filter((v) => v.visible == false)} />
+            </div>
+        </div>
+    );
+};
+
+export default Groups;