From 85c4f6ffac91fc375da8d238e77866daf0dba176 Mon Sep 17 00:00:00 2001
From: nicosammito <nico@sammito.de>
Date: Tue, 11 Nov 2025 14:13:09 +0100
Subject: [PATCH 1/2] feat: update DOrganizationCard layout and styling for
 improved presentation

---
 src/components/card/Card.style.scss           |  2 +-
 .../DOrganizationCard.stories.tsx             | 20 ++++---
 .../d-organization/DOrganizationCard.tsx      | 55 ++++++++-----------
 3 files changed, 35 insertions(+), 42 deletions(-)

diff --git a/src/components/card/Card.style.scss b/src/components/card/Card.style.scss
index e865249a..0d1aeb59 100644
--- a/src/components/card/Card.style.scss
+++ b/src/components/card/Card.style.scss
@@ -3,7 +3,7 @@
 @use "../../styles/variables";
 @use "sass:math";
 
-$padding: variables.$xs;
+$padding: variables.$xl;
 
 .card {
 
diff --git a/src/components/d-organization/DOrganizationCard.stories.tsx b/src/components/d-organization/DOrganizationCard.stories.tsx
index 216b26f9..ef2ad5e8 100644
--- a/src/components/d-organization/DOrganizationCard.stories.tsx
+++ b/src/components/d-organization/DOrganizationCard.stories.tsx
@@ -6,23 +6,26 @@ import {useReactiveArrayService} from "../../utils/reactiveArrayService"
 import {DOrganizationView} from "./DOrganization.view"
 import {DOrganizationReactiveService} from "./DOrganization.service"
 import {
-    NamespacesLicensesCreateInput, NamespacesLicensesCreatePayload,
-    NamespacesLicensesDeleteInput, NamespacesLicensesDeletePayload,
+    NamespacesLicensesCreateInput,
+    NamespacesLicensesCreatePayload,
+    NamespacesLicensesDeleteInput,
+    NamespacesLicensesDeletePayload,
     NamespacesProjectsAssignRuntimesInput,
     NamespacesProjectsCreateInput,
     NamespacesProjectsDeleteInput,
     OrganizationsCreateInput,
     OrganizationsCreatePayload,
-    OrganizationsDeleteInput, OrganizationsDeletePayload,
+    OrganizationsDeleteInput,
+    OrganizationsDeletePayload,
     OrganizationsUpdateInput,
     OrganizationsUpdatePayload
 } from "@code0-tech/sagittarius-graphql-types"
-import {DNamespaceProjectReactiveService} from "../d-namespace/project/DNamespaceProject.service"
 import {DNamespaceProjectView} from "../d-namespace/project/DNamespaceProject.view"
 import {DNamespaceLicenseReactiveService} from "../d-namespace/license/DNamespaceLicense.service"
 import {DNamespaceLicenseView} from "../d-namespace/license/DNamespaceLicense.view"
 import {DNamespaceView} from "../d-namespace/DNamespace.view"
 import {DNamespaceReactiveService} from "../d-namespace/DNamespace.service"
+import {Container} from "../container/Container";
 
 const meta: Meta = {
     title: "DOrganizationCard",
@@ -124,10 +127,11 @@ export const DOrganizationCardExample: DOrganizationCardStory = {
         ])
 
         return (
-            <ContextStoreProvider services={[[organizationStore, organizationService], [namespaceStore, namespaceService], [licenseStore, licenseService]]}>
-                {React.useMemo(() => {
-                    return <DOrganizationCard organizationId={"gid://sagittarius/Organization/1"}/>
-                }, [])}
+            <ContextStoreProvider
+                services={[[organizationStore, organizationService], [namespaceStore, namespaceService], [licenseStore, licenseService]]}>
+                <Container>
+                    <DOrganizationCard organizationId={"gid://sagittarius/Organization/1"}/>
+                </Container>
             </ContextStoreProvider>
         )
     }
diff --git a/src/components/d-organization/DOrganizationCard.tsx b/src/components/d-organization/DOrganizationCard.tsx
index 08ccb749..bb568ba8 100644
--- a/src/components/d-organization/DOrganizationCard.tsx
+++ b/src/components/d-organization/DOrganizationCard.tsx
@@ -14,6 +14,7 @@ import {Button} from "../button/Button";
 import CardSection from "../card/CardSection";
 import {DNamespaceReactiveService} from "../d-namespace/DNamespace.service"
 import {DNamespaceLicenseReactiveService} from "../d-namespace/license/DNamespaceLicense.service"
+import {Spacing} from "../spacing/Spacing";
 
 export interface DOrganizationCardProps extends Code0Component<HTMLDivElement> {
     organizationId: Scalars['OrganizationID']['output']
@@ -43,45 +44,33 @@ const DOrganizationCard: React.FC<DOrganizationCardProps> = props => {
 
     return React.useMemo(() => {
         return (
-            <Card maw={"400px"}>
+            <Card>
                 <Flex align={"center"} style={{gap: "0.7rem"}} justify={"space-between"}>
-                    <Text size={"lg"} hierarchy={"primary"} display={"block"}>
-                        {organization?.name}
-                    </Text>
+                    <Flex style={{flexDirection: "column"}}>
+                        <Text size={"lg"} hierarchy={"primary"} display={"block"}>
+                            {organization?.name}
+                        </Text>
+                        <Spacing spacing={"md"}/>
+                        <Flex align={"center"} style={{gap: "1.3rem", flexWrap: "wrap"}}>
+                            <Flex align={"center"} style={{gap: "0.35rem"}}>
+                                <IconFolder size={18}/>
+                                <Text size={"xs"} hierarchy={"tertiary"}>{`${projectCount ?? 0} project${(projectCount ?? 0) !== 1 ? "s" : ""}`}</Text>
+                            </Flex>
+                            <Flex align={"center"} style={{gap: "0.35rem"}}>
+                                <IconUser size={18}/>
+                                <Text size={"xs"} hierarchy={"tertiary"}> {`${memberCount ?? 0} member${(memberCount ?? 0) !== 1 ? "s" : ""}`}</Text>
+                            </Flex>
+                            <Flex align={"center"} style={{gap: "0.35rem"}}>
+                                <IconServer size={18}/>
+                                <Text size={"xs"} hierarchy={"tertiary"}>{`${runtimeCount ?? 0} runtime${(runtimeCount ?? 0) !== 1 ? "s" : ""}`}</Text>
+                            </Flex>
+                        </Flex>
+                    </Flex>
                     <Flex align={"center"} style={{gap: "0.35rem"}}>
                         <Button color={"secondary"} onClick={() => onSettingsClick(organizationId)}><IconSettings size={16}/></Button>
                         <Button color={"error"} onClick={() => onLeaveClick(organizationId)}><IconLogout size={16}/> Leave</Button>
                     </Flex>
                 </Flex>
-                <Text size={"sm"} hierarchy={"tertiary"} display={"block"}>
-                    {organization?.name}
-                </Text>
-                <CardSection border>
-                    <Flex align={"center"} style={{gap: "0.35rem", flexWrap: "wrap"}}>
-                        {/* Project count */}
-                        <Badge color={"info"}>
-                            <IconFolder size={18}/>
-                            <Text size={"xs"}>{`${projectCount ?? 0} project${(projectCount ?? 0) !== 1 ? "s" : ""}`}</Text>
-                        </Badge>
-                        {/* Members count */}
-                        <Badge color={"info"}>
-                            <IconUser size={18}/>
-                            <Text size={"xs"}>{`${memberCount ?? 0} member${(memberCount ?? 0) !== 1 ? "s" : ""}`}</Text>
-                        </Badge>
-                        {/* Which License (CE / EE) */}
-                        {/*
-                        <Badge color={"info"}>
-                            <IconAward size={18}/>
-                            <Text size={"xs"}>{`${licenseName} license`}</Text>
-                        </Badge>
-                        */}
-                        {/* Runtime Count */}
-                        <Badge color={"info"}>
-                            <IconServer size={18}/>
-                            <Text size={"xs"}>{`${runtimeCount ?? 0} runtime${(runtimeCount ?? 0) !== 1 ? "s" : ""}`}</Text>
-                        </Badge>
-                    </Flex>
-                </CardSection>
             </Card>
         )
     }, [organizationStore, namespaceStore, licenseStore])

From b66d8aeacdd98ab237114e0c8c81919f0257701a Mon Sep 17 00:00:00 2001
From: nicosammito <nico@sammito.de>
Date: Tue, 11 Nov 2025 14:20:43 +0100
Subject: [PATCH 2/2] feat: enhance DOrganizationCard with Avatar component for
 improved user representation

---
 .../d-organization/DOrganizationCard.tsx      | 40 ++++++++++---------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/components/d-organization/DOrganizationCard.tsx b/src/components/d-organization/DOrganizationCard.tsx
index bb568ba8..dc9df9d2 100644
--- a/src/components/d-organization/DOrganizationCard.tsx
+++ b/src/components/d-organization/DOrganizationCard.tsx
@@ -15,6 +15,7 @@ import CardSection from "../card/CardSection";
 import {DNamespaceReactiveService} from "../d-namespace/DNamespace.service"
 import {DNamespaceLicenseReactiveService} from "../d-namespace/license/DNamespaceLicense.service"
 import {Spacing} from "../spacing/Spacing";
+import {Avatar} from "../avatar/Avatar";
 
 export interface DOrganizationCardProps extends Code0Component<HTMLDivElement> {
     organizationId: Scalars['OrganizationID']['output']
@@ -45,24 +46,27 @@ const DOrganizationCard: React.FC<DOrganizationCardProps> = props => {
     return React.useMemo(() => {
         return (
             <Card>
-                <Flex align={"center"} style={{gap: "0.7rem"}} justify={"space-between"}>
-                    <Flex style={{flexDirection: "column"}}>
-                        <Text size={"lg"} hierarchy={"primary"} display={"block"}>
-                            {organization?.name}
-                        </Text>
-                        <Spacing spacing={"md"}/>
-                        <Flex align={"center"} style={{gap: "1.3rem", flexWrap: "wrap"}}>
-                            <Flex align={"center"} style={{gap: "0.35rem"}}>
-                                <IconFolder size={18}/>
-                                <Text size={"xs"} hierarchy={"tertiary"}>{`${projectCount ?? 0} project${(projectCount ?? 0) !== 1 ? "s" : ""}`}</Text>
-                            </Flex>
-                            <Flex align={"center"} style={{gap: "0.35rem"}}>
-                                <IconUser size={18}/>
-                                <Text size={"xs"} hierarchy={"tertiary"}> {`${memberCount ?? 0} member${(memberCount ?? 0) !== 1 ? "s" : ""}`}</Text>
-                            </Flex>
-                            <Flex align={"center"} style={{gap: "0.35rem"}}>
-                                <IconServer size={18}/>
-                                <Text size={"xs"} hierarchy={"tertiary"}>{`${runtimeCount ?? 0} runtime${(runtimeCount ?? 0) !== 1 ? "s" : ""}`}</Text>
+                <Flex align={"center"} style={{gap: "1.3rem"}} justify={"space-between"}>
+                    <Flex align={"center"} style={{gap: "1.3rem"}}>
+                        <Avatar bg={"transparent"} identifier={organization?.name ?? ""}/>
+                        <Flex style={{flexDirection: "column"}}>
+                            <Text size={"lg"} hierarchy={"primary"} display={"block"}>
+                                {organization?.name}
+                            </Text>
+                            <Spacing spacing={"xxs"}/>
+                            <Flex align={"center"} style={{gap: "1.3rem", flexWrap: "wrap"}}>
+                                <Flex align={"center"} style={{gap: "0.35rem"}}>
+                                    <IconFolder size={18}/>
+                                    <Text size={"xs"} hierarchy={"tertiary"}>{`${projectCount ?? 0} project${(projectCount ?? 0) !== 1 ? "s" : ""}`}</Text>
+                                </Flex>
+                                <Flex align={"center"} style={{gap: "0.35rem"}}>
+                                    <IconUser size={18}/>
+                                    <Text size={"xs"} hierarchy={"tertiary"}> {`${memberCount ?? 0} member${(memberCount ?? 0) !== 1 ? "s" : ""}`}</Text>
+                                </Flex>
+                                <Flex align={"center"} style={{gap: "0.35rem"}}>
+                                    <IconServer size={18}/>
+                                    <Text size={"xs"} hierarchy={"tertiary"}>{`${runtimeCount ?? 0} runtime${(runtimeCount ?? 0) !== 1 ? "s" : ""}`}</Text>
+                                </Flex>
                             </Flex>
                         </Flex>
                     </Flex>