All views and pages on the instance level

package.json

@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@apollo/client": "^4.0.9",
-    "@code0-tech/pictor": "^0.0.0-mvp.14",
+    "@code0-tech/pictor": "^0.0.0-mvp.21",
     "graphql": "^16.12.0",
     "graphql-tag": "^2.12.6",
     "next": "16.0.1",

src/app/(auth)/layout.tsx

@@ -1,25 +1,17 @@
 "use client"
 
-import {
-    Col,
-    Container,
-    ContextStoreProvider,
-    DFullScreen,
-    DUserView,
-    Flex,
-    Text,
-    useReactiveArrayService
-} from "@code0-tech/pictor";
-import {UserService} from "@core/user/User.service";
+import {Col, Container, ContextStoreProvider, DFullScreen, DUserView, Flex, Text} from "@code0-tech/pictor";
+import {UserService} from "@edition/user/User.service";
 import {useApolloClient} from "@apollo/client/react";
 import {GraphqlClient} from "@core/util/graphql-client";
 import Image from "next/image";
 import React from "react";
+import {usePersistentReactiveArrayService} from "@/hooks/usePersistentReactiveArrayService";
 
 export default function AuthLayout({children}: Readonly<{ children: React.ReactNode }>) {
 
     const client = useApolloClient()
-    const [store, service] = useReactiveArrayService<DUserView, UserService>((store) => new UserService(new GraphqlClient(client), store))
+    const [store, service] = usePersistentReactiveArrayService<DUserView, UserService>("auth-users", (store) => new UserService(new GraphqlClient(client), store))
 
     return (
         <DFullScreen>
@@ -48,7 +40,7 @@ export default function AuthLayout({children}: Readonly<{ children: React.ReactN
                     gap: "1.3rem"
                 }}>
                     <Text>All rights reserved &copy; Code0 UG (haftungsbeschränkt)</Text>
-                    <Image src={"/CodeZero_Banner_Transparent.png"} alt={"CodeZero Banner"} width={150} height={0}
+                    <Image src={"/CodeZero_Banner_MVP.png"} alt={"CodeZero Banner"} width={150} height={0}
                            style={{width: '150px', height: 'auto'}}/>
                 </div>
             </div>

src/app/(dashboard)/@bar/default.tsx

@@ -3,20 +3,23 @@
 import {
     Badge,
     Breadcrumb,
-    Button, Container,
+    Button,
+    Container,
     Flex,
     MenuItem,
     MenuSeparator,
     Text,
-    TextInput, useService,
+    TextInput,
+    useService,
     useUserSession
 } from "@code0-tech/pictor";
 import DUserMenu from "@code0-tech/pictor/dist/components/d-user/DUserMenu";
 import {IconBuilding, IconInbox, IconLogout, IconSearch, IconSettings} from "@tabler/icons-react";
 import React from "react";
 import Image from "next/image";
-import {UserService} from "@core/user/User.service";
+import {UserService} from "@edition/user/User.service";
 import {useRouter} from "next/navigation";
+import Link from "next/link";
 
 const Page = () => {
 
@@ -44,12 +47,11 @@ const Page = () => {
         }
 
         return <DUserMenu userId={currentSession.user?.id!!}>
-            <MenuItem>
-                <IconBuilding size={16}/>Organizations
-            </MenuItem>
-            <MenuItem>
-                <IconSettings size={16}/>Settings
-            </MenuItem>
+            <Link href={"/organizations"}>
+                <MenuItem>
+                    <IconBuilding size={16}/>Organizations
+                </MenuItem>
+            </Link>
             <MenuSeparator/>
             <MenuItem onSelect={userLogout}>
                 <IconLogout size={16}/>Logout
@@ -61,7 +63,7 @@ const Page = () => {
         <Flex style={{gap: "0.7rem", flexDirection: "column"}} py={0.7} w={"100%"}>
             <Flex align={"center"} justify={"space-between"}>
                 <Flex align={"center"} style={{gap: "1.3rem"}}>
-                    <Image src={"/CodeZero_App_Background_Colorful.png"} alt={"CodeZero Banner"} width={160} height={0}
+                    <Image src={"/CodeZero_App_MVP.png"} alt={"CodeZero Banner"} width={160} height={0}
                            style={{width: '42px', height: 'auto'}}/>
                     <Breadcrumb>
                         <Text>Application</Text>

src/app/(dashboard)/@tab/default.ts

@@ -1,3 +1,5 @@
+"use client"
+
 export default function Page() {
     return null
 }

src/app/(dashboard)/@tab/runtimes/default.tsx

@@ -0,0 +1,10 @@
+"use client"
+
+import React from "react";
+import {ApplicationTabView} from "@edition/dashboard/application/ApplicationTabView";
+
+const Page: React.FC = () => {
+    return <ApplicationTabView/>
+}
+
+export default Page

src/app/(dashboard)/layout.tsx

@@ -6,13 +6,22 @@ import {
     Container,
     ContextStoreProvider,
     DLayout,
+    DNamespaceMemberView, DNamespaceProjectView,
+    DNamespaceView,
+    DOrganizationView, DRuntimeView,
     DUserView,
-    useReactiveArrayService,
+    ReactiveArrayStore,
     useUserSession
 } from "@code0-tech/pictor";
-import {UserService} from "@core/user/User.service";
+import {UserService} from "@edition/user/User.service";
 import {GraphqlClient} from "@core/util/graphql-client";
 import {useRouter} from "next/navigation";
+import {OrganizationService} from "@edition/organization/Organization.service";
+import {MemberService} from "@edition/member/Member.service";
+import {NamespaceService} from "@edition/namespace/Namespace.service";
+import {usePersistentReactiveArrayService} from "@/hooks/usePersistentReactiveArrayService";
+import {RuntimeService} from "@edition/runtime/Runtime.service";
+import {ProjectService} from "@edition/project/Project.service";
 
 interface ApplicationLayoutProps {
     children: React.ReactNode
@@ -23,22 +32,30 @@ interface ApplicationLayoutProps {
 const ApplicationLayout: React.FC<ApplicationLayoutProps> = ({children, bar, tab}) => {
 
     const client = useApolloClient()
-    const [store, service] = useReactiveArrayService<DUserView, UserService>((store) => new UserService(new GraphqlClient(client), store))
     const router = useRouter()
     const currentSession = useUserSession()
 
+    const graphqlClient = React.useMemo(() => new GraphqlClient(client), [client])
+
+    const user = usePersistentReactiveArrayService<DUserView, UserService>(`dashboard::users::${currentSession?.id}`, (store: ReactiveArrayStore<DUserView>) => new UserService(graphqlClient, store))
+    const organization = usePersistentReactiveArrayService<DOrganizationView, OrganizationService>(`dashboard::organizations::${currentSession?.id}`, (store: ReactiveArrayStore<DOrganizationView>) => new OrganizationService(graphqlClient, store))
+    const member = usePersistentReactiveArrayService<DNamespaceMemberView, MemberService>(`dashboard::members::${currentSession?.id}`, (store: ReactiveArrayStore<DNamespaceMemberView>) => new MemberService(graphqlClient, store))
+    const namespace = usePersistentReactiveArrayService<DNamespaceView, NamespaceService>(`dashboard::namespaces::${currentSession?.id}`, (store: ReactiveArrayStore<DNamespaceView>) => new NamespaceService(graphqlClient, store))
+    const runtime = usePersistentReactiveArrayService<DRuntimeView, RuntimeService>(`dashboard::global_runtimes::${currentSession?.id}`, (store: ReactiveArrayStore<DRuntimeView>) => new RuntimeService(graphqlClient, store))
+    const project = usePersistentReactiveArrayService<DNamespaceProjectView, ProjectService>(`dashboard::projects::${currentSession?.id}`, (store: ReactiveArrayStore<DNamespaceProjectView>) => new ProjectService(graphqlClient, store))
+
     if (currentSession === null) router.push("/login")
 
-    return <ContextStoreProvider services={[[store, service]]}>
-        <DLayout topContent={
+    return <ContextStoreProvider services={[user, organization, member, namespace, runtime, project]}>
+        <DLayout style={{zIndex: 0}} topContent={
             <>
                 <div style={{background: "rgba(255,2552,255,.1)", borderBottom: "1px solid rgba(255,2552,255,.1)"}}>
                     {bar}
                     {tab}
                 </div>
             </>
         }>
-            <Container>
+            <Container h={"100%"} w={"100%"}>
                 {children}
             </Container>
         </DLayout>

src/app/(dashboard)/namespace/[namespaceId]/layout.tsx

@@ -6,9 +6,7 @@ interface NamespaceLayoutProps {
 }
 
 const NamespaceLayout: React.FC<NamespaceLayoutProps> = ({children}) => {
-    return <div>
-        {children}
-    </div>
+    return children
 }
 
 export default NamespaceLayout

src/app/(dashboard)/organizations/create/page.tsx

@@ -0,0 +1,5 @@
+import {OrganizationCreatePage} from "@edition/dashboard/application/OrganizationCreatePage";
+
+export default function Page() {
+    return <OrganizationCreatePage/>
+}

src/app/(dashboard)/organizations/page.tsx

@@ -1,3 +1,5 @@
+import {OrganizationsPage} from "@edition/dashboard/application/OrganizationsPage";
+
 export default function Page() {
-    return null
+    return <OrganizationsPage/>
 }

src/app/(dashboard)/page.tsx

@@ -1,43 +1,10 @@
 "use client"
 
-import {Button, Flex, Text} from "@code0-tech/pictor";
-import {IconChevronDown, IconPlus} from "@tabler/icons-react";
 import React from "react";
+import {ApplicationPage} from "@edition/dashboard/application/ApplicationPage";
 
 const Page = () => {
-
-    return <Flex style={{flexDirection: "column", gap: "1.3rem"}}>
-        <Flex justify={"space-between"} align={"center"}>
-            <Text size={"xl"} hierarchy={"primary"}>
-                Personal projects
-            </Text>
-            <Flex style={{gap: ".7rem"}} align={"center"}>
-                <Button>
-                    Sort
-                    <IconChevronDown size={16}/>
-                </Button>
-                <Button color={"success"}>
-                    Create project
-                    <IconPlus size={16}/>
-                </Button>
-            </Flex>
-        </Flex>
-        <Flex justify={"space-between"} align={"center"}>
-            <Text size={"xl"} hierarchy={"primary"}>
-                Organizations you joined
-            </Text>
-            <Flex style={{gap: ".7rem"}} align={"center"}>
-                <Button>
-                    Sort
-                    <IconChevronDown size={16}/>
-                </Button>
-                <Button color={"success"}>
-                    Create organization
-                    <IconPlus size={16}/>
-                </Button>
-            </Flex>
-        </Flex>
-    </Flex>
+    return <ApplicationPage/>
 }
 
 export default React.memo(Page);

src/app/(dashboard)/runtimes/[runtimeId]/settings/page.tsx

@@ -0,0 +1,5 @@
+import {RuntimeSettingPage} from "@edition/dashboard/application/RuntimeSettingPage";
+
+export default function Page() {
+    return <RuntimeSettingPage/>
+}

src/app/(dashboard)/runtimes/create/page.tsx

@@ -0,0 +1,5 @@
+import {RuntimeCreatePage} from "@edition/dashboard/application/RuntimeCreatePage";
+
+export default function Page() {
+    return <RuntimeCreatePage/>
+}

src/app/(dashboard)/runtimes/page.tsx

@@ -0,0 +1,7 @@
+"use client"
+
+import {RuntimesPage} from "@edition/dashboard/application/RuntimesPage";
+
+export default function Page() {
+    return <RuntimesPage/>
+}