get groups

src/views/home/groups/Group.tsx

@@ -0,0 +1,26 @@
+import { FC } from "react";
+import { cn } from "../../../lib/cn";
+import { useParams, Navigate } from "react-router-dom";
+
+interface GroupsBlockProps {}
+
+const Group: FC<GroupsBlockProps> = () => {
+  const { groupId } = useParams<{ groupId: string }>();
+  const groupIdNumber = Number(groupId);
+
+  if (!groupId || isNaN(groupIdNumber) || !groupIdNumber) {
+    return <Navigate to="/home/groups" replace />;
+  }
+
+  return (
+    <div
+      className={cn(
+        "border-b-[1px] border-b-liquid-lighter rounded-[10px]"
+      )}
+    >
+      {groupIdNumber}
+    </div>
+  );
+};
+
+export default Group;

src/views/home/groups/GroupItem.tsx

@@ -1,5 +1,6 @@
 import { cn } from "../../../lib/cn";
 import { Book, UserAdd, Edit, EyeClosed, EyeOpen } from "../../../assets/icons/groups";
+import { useNavigate } from "react-router-dom";
 
 export interface GroupItemProps {
     id: number;
@@ -26,9 +27,13 @@ const IconComponent: React.FC<IconComponentProps> = ({
 const GroupItem: React.FC<GroupItemProps> = ({
     id, name, visible, role
 }) => {
+    const navigate = useNavigate();
+
     return (
-        <div className={cn("w-full h-[120px] box-border relative rounded-[10px] p-[10px] text-liquid-white bg-liquid-lighter",
-        )}>
+        <div className={cn("w-full h-[120px] box-border relative rounded-[10px] p-[10px] text-liquid-white bg-liquid-lighter cursor-pointer",
+        )}
+            onClick={() => navigate(`/group/${id}`)}
+        >
             <div className="grid grid-cols-[100px,1fr] gap-[20px]">
                 <img src={Book} className="bg-liquid-brightmain rounded-[10px]"/>
                 <div className="grid grid-flow-row grid-rows-[1fr,24px]">

src/views/home/groups/Groups.tsx

@@ -1,68 +1,84 @@
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { SecondaryButton } from "../../../components/button/SecondaryButton";
 import { cn } from "../../../lib/cn";
-import { useAppDispatch } from "../../../redux/hooks";
+import { useAppDispatch, useAppSelector } 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;
-}
-
+import { fetchMyGroups } from "../../../redux/slices/groups";
 
 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 },
-    ];
+    // Берём группы из стора
+    const groups = useAppSelector((store) => store.groups.groups);
+
+    // Берём текущего пользователя
+    const currentUserName = useAppSelector((store) => store.auth.username);
 
     useEffect(() => {
-        dispatch(setMenuActivePage("groups"))
-    }, []);
+        dispatch(setMenuActivePage("groups"));
+        dispatch(fetchMyGroups())
+    }, [dispatch]);
+
+    // Разделяем группы
+    const { managedGroups, currentGroups, hiddenGroups } = useMemo(() => {
+        if (!groups || !currentUserName) {
+            return { managedGroups: [], currentGroups: [], hiddenGroups: [] };
+        }
+
+        const managed: typeof groups = [];
+        const current: typeof groups = [];
+        const hidden: typeof groups = []; // пока пустые, без логики
+
+        groups.forEach((group) => {
+            const me = group.members.find((m) => m.username === currentUserName);
+            if (!me) return;
+
+            if (me.role === "Administrator") {
+                managed.push(group);
+            } else {
+                current.push(group);
+            }
+        });
+
+        return { managedGroups: managed, currentGroups: current, hiddenGroups: hidden };
+    }, [groups, currentUserName]);
 
     return (
-        <div className=" h-full w-[calc(100%+250px)] box-border p-[20px] pt-[20p]">
+        <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
+                        className={cn(
+                            "h-[50px] text-[40px] font-bold text-liquid-white flex items-center"
+                        )}
+                    >
                         Группы
                     </div>
                     <SecondaryButton
-                        onClick={() => { }}
+                        onClick={() => {}}
                         text="Создать группу"
                         className="absolute right-0"
                     />
                 </div>
 
-                <div className="bg-liquid-lighter h-[50px] mb-[20px]">
+                <div className="bg-liquid-lighter h-[50px] mb-[20px]"></div>
 
-                </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)} />
+                <GroupsBlock
+                    className="mb-[20px]"
+                    title="Управляемые"
+                    groups={managedGroups}
+                />
+                <GroupsBlock
+                    className="mb-[20px]"
+                    title="Текущие"
+                    groups={currentGroups}
+                />
+                <GroupsBlock
+                    className="mb-[20px]"
+                    title="Скрытые"
+                    groups={hiddenGroups} // пока пусто
+                />
             </div>
         </div>
     );

src/views/home/groups/GroupsBlock.tsx

@@ -2,14 +2,7 @@ import { useState, FC } from "react";
 import GroupItem from "./GroupItem";
 import { cn } from "../../../lib/cn";
 import { ChevroneDown } from "../../../assets/icons/groups";
-
-
-export interface Group {
-    id: number;
-    role: "menager" | "member" | "owner" | "viewer";
-    visible: boolean;
-    name: string;
-}
+import { Group } from "../../../redux/slices/groups";
 
 interface GroupsBlockProps {
     groups: Group[];
@@ -47,7 +40,7 @@ const GroupsBlock: FC<GroupsBlockProps> = ({ groups, title, className }) => {
 
                     <div className="grid grid-cols-3 gap-[20px] pt-[20px] pb-[20px] box-border">
                         {
-                            groups.map((v, i) => <GroupItem key={i} {...v} />)
+                            groups.map((v, i) => <GroupItem key={i} id={v.id} visible={true} role={"owner"} name={v.name}/>)
                         }
                     </div>
                 </div>