Have to introduce Zustand

open-sql-schema/org.sql

@@ -1,17 +1,15 @@
 create table org
 (
-    id                   serial primary key,
-    created_by           bigint references profiles (id),
-    logo_url             varchar(200),
-    name                 varchar(100) unique,
-    description          varchar,
-    created              timestamptz default now() not null,
-    updated              timestamptz,
-    joined_student_count int         default 1,
-    social_websites      varchar[]
+    id              serial primary key,
+    created_by      bigint,
+    logo_url        varchar(200),
+    name            varchar(100) unique,
+    description     varchar,
+    created         timestamptz default now() not null,
+    updated         timestamptz,
+    social_websites varchar[]
 );
 
-alter table org add column updated timestamptz;
 
 create or replace function public.handle_new_org()
     returns trigger
@@ -20,9 +18,10 @@ create or replace function public.handle_new_org()
 as
 $$
 begin
-    insert into org_member(org_id, profiles_id, class) values (new.id, new.created_by, '"Creator"=>"0"');
+    insert into org_member(org_id, profiles_id, status)
+    values (new.id, new.created_by, 'admin');
     return new;
-end;
+end
 $$;
 
 create or replace trigger on_new_org_created
@@ -33,8 +32,8 @@ EXECUTE procedure handle_new_org();
 
 create table org_member
 (
-    profiles_id bigint primary key references profiles (id),
-    org_id      bigint references org (id),
-    class       hstore
+    org_id      bigint primary key references org (id),
+    profiles_id bigint references profiles (id),
+    status      varchar(20) default 'pending' not null
 );
 

open-sql-schema/profiles.sql

@@ -10,6 +10,7 @@ create table profiles
     updated         timestamptz,
     social_websites varchar[],
     visit_history   hstore
+
 );
 
 alter table public.profiles

open-sql-schema/university.sql

@@ -0,0 +1,15 @@
+create table university
+(
+    university_id           serial primary key,
+    university_name         varchar(50),
+    university_address      varchar(200),
+    university_phone        varchar(20),
+    university_email        varchar(64),
+    university_website      varchar(64),
+    university_logo         varchar(200),
+    university_description  varchar,
+    university_created_date timestamptz default now() not null,
+    university_created_by   bigint                    not null references profiles (id),
+    university_updated_date timestamptz default now(),
+    university_updated_by   bigint references profiles (id)
+);

src/Pages/Home/ChangeProfileData/ChangeProfileData.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import {Card, TextInput, Title, Button} from "@mantine/core";
+import {Button, Card, TextInput, Title} from "@mantine/core";
 import {useInputState} from '@mantine/hooks';
-import {Database, Dots, School, Send, User} from "tabler-icons-react";
-import Change from "../../../Components/Change/Change";
+import {School, User} from "tabler-icons-react";
 
 const ChangeProfileData = (props: any) => {
 

src/Pages/Home/Home.tsx

@@ -1,12 +1,9 @@
-import React, {useEffect, useRef, useState} from 'react';
-import {Text, Card, Image, Button, Title, createStyles, TextInput} from "@mantine/core";
+import React, {useState} from 'react';
+import {Button, Card, createStyles, Image, Text, Title} from "@mantine/core";
 import {Profile} from "../../SupaBase/SupabseUni";
 import JoinedOrg from "./JoinedOrg/JoinedOrg";
-
-import Change from "../../Components/Change/Change";
 import Login from "../Login/Login";
 import ChangeProfileData from "./ChangeProfileData/ChangeProfileData";
-import {Edit, EditCircle} from "tabler-icons-react";
 
 
 const useStyles = createStyles((theme) => ({

src/Pages/Home/JoinedOrg/JoinedOrg.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Text, Card} from "@mantine/core";
+import {Card, Text} from "@mantine/core";
 
 const JoinedOrg = () => {
     return (

src/Pages/Login/Login.tsx

@@ -1,7 +1,6 @@
-import React, {useRef, useState} from 'react'
-import {supabase} from '../../SupaBase/SupabseUni'
+import React, {useRef} from 'react'
 import {Button, Card, createStyles, TextInput, Title} from "@mantine/core";
-import {Edit, Mail, Settings} from "tabler-icons-react";
+import {Mail} from "tabler-icons-react";
 
 const useStyles = createStyles((theme) => ({
     inner: {

src/Pages/Org/Org.tsx

@@ -1,32 +1,98 @@
 import React, {useEffect, useState} from 'react';
 import {Profile} from "../../SupaBase/SupabseUni";
-import {Text} from "@mantine/core";
+import {ActionIcon, Anchor, Avatar, Badge, Group, ScrollArea, Table, Text, useMantineTheme} from "@mantine/core";
+import {Edit, Eraser} from "tabler-icons-react";
+import {org, org_member} from '../../SupaBase/Org';
+import orgData from "./Org/OrgData";
 
+interface UsersTableProps {
+    data: { avatar: string; name: string; job: string; email: string; phone: string }[];
+}
+
+const jobColors: Record<string, string> = {
+    admin: 'blue',
+    pending: 'cyan',
+    member: 'pink',
+};
 let isLoading = false;
 const Org = (props: any) => {
-    const [orgsData, setOrgsData] = useState<Profile>(props.profile);
-    const [joinedOrgs, setJoinedOrgs] = useState([]);
-
+    const [orgsData] = useState<Profile>(props.profile);
+    const [joinedOrgs, setJoinedOrgs] = useState<Map<number, string>>();
 
     const handleFatchJoinedOrg = () => {
-        orgsData._org.fetch_joined_org_list(orgsData.profile).then(data => {
-            console.log(data);
-            isLoading= false;
+        orgsData._org.fetch_joined_org_list(orgsData.profile).then(() => {
+            setJoinedOrgs(orgsData._org.orgId);
         })
     }
 
     useEffect(() => {
         if (!isLoading) {
-            isLoading=true;
+            isLoading = true;
             handleFatchJoinedOrg();
         }
     }, []);
 
+    const theme = useMantineTheme();
+    let rows=[] as any ;
+    joinedOrgs?.forEach((status,id) => {rows.push(<tr key={id}>
+        <td>
+            <Group spacing="sm">
+                <Avatar size={30} src={""} radius={30} />
+                <Text size="sm" weight={500}>
+                    {id}
+                </Text>
+            </Group>
+        </td>
+
+        <td>
+            <Badge
+                color={jobColors[status]}
+                variant={theme.colorScheme === 'dark' ? 'light' : 'outline'}
+            >
+                {status}
+            </Badge>
+        </td>
+        <td>
+            <Anchor<'a'> size="sm" href="#" onClick={(event) => event.preventDefault()}>
+                {orgsData._org.org.get(id)?.name}
+            </Anchor>
+        </td>
+        <td>
+            <Text size="sm" color="dimmed">
+                {orgsData._org.org.get(id)?.description}
+            </Text>
+        </td>
+        <td>
+            <Group spacing={0} position="right">
+                <ActionIcon>
+                    <Edit size={16} />
+                </ActionIcon>
+                <ActionIcon color="red">
+                    <Eraser size={16} />
+                </ActionIcon>
+            </Group>
+        </td>
+    </tr>)});
+
+
     return (
-        <div>
-            <Text>{}</Text>
-        </div>
+        <>
+            <Table sx={{minWidth: 800}} verticalSpacing="sm">
+                <thead>
+                <tr>
+                    <th>Organization Name</th>
+                    <th>Title</th>
+                    <th>Name</th>
+                    <th>Description</th>
+                </tr>
+                </thead>
+                <tbody>{rows}</tbody>
+            </Table>
+        </>
+
+
     );
 };
 
 export default Org;
+

src/Pages/Org/Org/CreateNewOrg/CreateNewOrg.tsx

@@ -1,6 +1,7 @@
-import React, {useRef, useState} from 'react';
-import {Button, Card, Title, Textarea, TextInput} from "@mantine/core";
+import React from 'react';
+import {Button, Card, Textarea, TextInput, Title} from "@mantine/core";
 import {useInputState} from "@mantine/hooks";
+import {profile} from "../../../../SupaBase/SupabseUni";
 
 interface org {
     logo_url?: string,
@@ -10,10 +11,10 @@ interface org {
 }
 
 const CreateNewOrg = (props: any) => {
-    const [orgName, setOrgName] = useInputState(  props.profile.profile.name + "'s org");
+    const [orgName, setOrgName] = useInputState(props.profile.profile.name + "'s org");
     const [orgDescription, setOrgDescription] = useInputState("");
     const handleCreateNewOrg = async () => {
-        props.profile.create_org({name: orgName, description: orgDescription});
+        props.profile._org.create_org(props.profile.profile as profile, {name: orgName, orgDescription} as org);
     }
 
     return (

src/Pages/Page404/Page404.tsx

@@ -1,4 +1,4 @@
-import {createStyles, Title, Text, Button, Container, Group} from '@mantine/core';
+import {Button, Container, createStyles, Group, Text, Title} from '@mantine/core';
 import {NavLink} from "react-router-dom";
 
 const useStyles = createStyles((theme) => ({

src/Pages/Tasks/Tasks.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {createStyles, Text, Card, RingProgress, Group} from '@mantine/core';
+import {Card, createStyles, Group, RingProgress, Text} from '@mantine/core';
 
 const useStyles = createStyles((theme) => ({
     card: {

src/Pages/University/Universities/Universities.tsx

@@ -1,4 +1,4 @@
-import {MultiSelect, Card, Paper, useMantineTheme, TextInput, Code, ScrollArea} from '@mantine/core';
+import {Code, MultiSelect, Paper, ScrollArea, TextInput} from '@mantine/core';
 import COUNTRY_NAMES from "../Data/countryNames";
 import {useState} from "react";
 import {Search} from "tabler-icons-react";

src/Pages/University/Universities/University.tsx

@@ -1,18 +1,4 @@
-import {
-    Card,
-    Grid,
-    Text,
-    Image,
-    Paper,
-    Skeleton,
-    useMantineTheme,
-    createStyles,
-    Code,
-    Title,
-    Group, Button
-} from '@mantine/core';
-import {Car, Icon as TablerIcon} from "tabler-icons-react";
-import {NavLink} from "react-router-dom";
+import {Card, createStyles, Image, Text, Title, useMantineTheme} from '@mantine/core';
 import React from "react";