From 45c45a897fbf37af7ea6616fd98f9f95ad3ee9cc Mon Sep 17 00:00:00 2001
From: Pardeshi-Aditya <mailadityapardeshi@gmail.com>
Date: Tue, 18 Jun 2024 18:09:54 +0530
Subject: [PATCH 1/6] fix(UI) : display project cards instead of displaying
 them within org lists.

---
 .../Org/{OrgList.tsx => OrgComponent.tsx}     | 19 ++--
 .../features/projects/ProjectCard2.tsx        | 90 +++++++++++++++++++
 .../components/features/projects/Projects.tsx | 88 +++++++++++-------
 .../{ProjectsList.tsx => ProjectCard.tsx}     |  4 +-
 4 files changed, 157 insertions(+), 44 deletions(-)
 rename dashboard/src/components/features/projects/Org/{OrgList.tsx => OrgComponent.tsx} (70%)
 create mode 100644 dashboard/src/components/features/projects/ProjectCard2.tsx
 rename dashboard/src/components/features/projects/Projects/{ProjectsList.tsx => ProjectCard.tsx} (96%)

diff --git a/dashboard/src/components/features/projects/Org/OrgList.tsx b/dashboard/src/components/features/projects/Org/OrgComponent.tsx
similarity index 70%
rename from dashboard/src/components/features/projects/Org/OrgList.tsx
rename to dashboard/src/components/features/projects/Org/OrgComponent.tsx
index 23fe5d4..212959d 100644
--- a/dashboard/src/components/features/projects/Org/OrgList.tsx
+++ b/dashboard/src/components/features/projects/Org/OrgComponent.tsx
@@ -5,7 +5,8 @@ import { KeyedMutator } from "swr";
 import { ProjectData } from "../Projects";
 import DeleteOrgModal from "./DeleteOrgModal";
 import { AlertDialog, AlertDialogTrigger } from "@/components/ui/alert-dialog";
-import { ProjectCard } from "../Projects/ProjectsList";
+import { ProjectCard } from "../Projects/ProjectCard";
+
 
 interface OrgComponentProps {
     org: ProjectData, mutate: KeyedMutator<{ message: ProjectData[]; }>
@@ -20,21 +21,21 @@ export const OrgComponent = ({ org, mutate }: OrgComponentProps) => {
                     {org.organization_name}
                 </h1>
                 {isCreateAccess && <AlertDialog>
-                            <AlertDialogTrigger asChild>
-                                <Button size="icon" variant="outline" className="h-7 w-7">
-                                    <AiOutlineDelete />
-                                </Button>
-                            </AlertDialogTrigger>
-                            <DeleteOrgModal org={org} mutate={mutate} />
+                    <AlertDialogTrigger asChild>
+                        <Button size="icon" variant="outline" className="h-7 w-7">
+                            <AiOutlineDelete />
+                        </Button>
+                    </AlertDialogTrigger>
+                    <DeleteOrgModal org={org} mutate={mutate} />
                 </AlertDialog>}
             </div>
             <div className="pl-4">
-                {org.projects.map((project => {
+                {org.projects.map((project) => {
                     return (
                         <ProjectCard project={project} key={project.name} mutate={mutate} />
                     )
                 }
-                ))}
+                )}
             </div>
         </div>
     )
diff --git a/dashboard/src/components/features/projects/ProjectCard2.tsx b/dashboard/src/components/features/projects/ProjectCard2.tsx
new file mode 100644
index 0000000..685c70a
--- /dev/null
+++ b/dashboard/src/components/features/projects/ProjectCard2.tsx
@@ -0,0 +1,90 @@
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { AiOutlineDelete } from "react-icons/ai";
+import { AlertDialog, AlertDialogTrigger } from "@/components/ui/alert-dialog";
+import { KeyedMutator } from "swr";
+import { ProjectData, ProjectWithBranch } from "./Projects";
+import { useMemo, useState } from "react";
+import DeleteProjectModal from "./Projects/DeleteProjectModal";
+import { isSystemManager } from "@/utils/roles";
+import ManageBranchModal from "./Branch/ManageBranchModal";
+import { Dialog } from "@/components/ui/dialog";
+import { RxDragHandleDots1 } from "react-icons/rx";
+
+
+export interface ProjectCardProps {
+  project: ProjectWithBranch
+  mutate: KeyedMutator<{
+    message: ProjectData[];
+  }>
+
+}
+
+export function ProjectCard2({ project, mutate }: ProjectCardProps) {
+
+  const appNameInitials = useMemo(() => {
+    return project.display_name[0].toUpperCase()
+  }, [project])
+
+  const isCreateAccess = isSystemManager()
+
+  const [openManageModal, setOpenManageModal] = useState(false)
+
+  return (
+    <Card className="w-[300px]">
+      <CardHeader>
+        <div className="flex gap-2">
+          <Avatar className="h-11 w-11 rounded-md border border-gray-100">
+            <AvatarImage src={project.image} />
+            <AvatarFallback className="rounded-md">
+              {appNameInitials}
+            </AvatarFallback>
+          </Avatar>
+          <div>
+            <CardTitle>{project.display_name}</CardTitle>
+            <CardDescription>
+              {project.description}
+            </CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardFooter className="flex justify-between">
+        {isCreateAccess &&
+          <>
+            {project.branches.length > 0 ?
+              <Button
+                variant="ghost"
+                className="w-full h-8 font-normal text-sm left-0 flex justify-start pl-1"
+                onClick={() => {
+                  setOpenManageModal(true)
+                }}>
+                <RxDragHandleDots1 className="h-4 w-4 mr-1" />
+                Manage Branches
+              </Button> :
+              <div></div>}
+          </>
+        }
+        <Dialog open={openManageModal} onOpenChange={setOpenManageModal}>
+          <ManageBranchModal branches={project.branches} mutate={mutate} setOpenManageModal={setOpenManageModal} />
+        </Dialog>
+        <AlertDialog>
+          {isCreateAccess && <AlertDialogTrigger asChild>
+            <Button size='icon' variant='outline' className="h-8 w-8">
+              <AiOutlineDelete />
+            </Button>
+          </AlertDialogTrigger>}
+          <DeleteProjectModal project={project} mutate={mutate} />
+        </AlertDialog>
+      </CardFooter>
+    </Card>
+  );
+}
+
+export default ProjectCard2;
diff --git a/dashboard/src/components/features/projects/Projects.tsx b/dashboard/src/components/features/projects/Projects.tsx
index 98c98c0..a801522 100644
--- a/dashboard/src/components/features/projects/Projects.tsx
+++ b/dashboard/src/components/features/projects/Projects.tsx
@@ -1,44 +1,52 @@
-import { FullPageLoader } from "@/components/common/FullPageLoader/FullPageLoader"
-import { Button } from "@/components/ui/button"
-import { Dialog, DialogTrigger } from "@/components/ui/dialog"
-import { CommitProject } from "@/types/commit/CommitProject"
-import { useFrappeGetCall } from "frappe-react-sdk"
-import { BsDatabase } from "react-icons/bs"
-import { ViewERDDialogContent } from "./ViewERDAppDialog"
-import { isSystemManager } from "@/utils/roles"
-import { CommitProjectBranch } from "@/types/commit/CommitProjectBranch"
-import { OrgComponent } from "./Org/OrgList"
-import { DropdownMenuDemo } from "./AddMenuButton"
-import { APIExplorer } from "./APIExplorer"
+import { FullPageLoader } from "@/components/common/FullPageLoader/FullPageLoader";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogTrigger } from "@/components/ui/dialog";
+import { CommitProject } from "@/types/commit/CommitProject";
+import { useFrappeGetCall } from "frappe-react-sdk";
+import { BsDatabase } from "react-icons/bs";
+import { ViewERDDialogContent } from "./ViewERDAppDialog";
+import { isSystemManager } from "@/utils/roles";
+import { CommitProjectBranch } from "@/types/commit/CommitProjectBranch";
+import { DropdownMenuDemo } from "./AddMenuButton";
+import { APIExplorer } from "./APIExplorer";
+import ProjectCard2 from "./ProjectCard2";
 
 export interface ProjectWithBranch extends CommitProject {
-    branches: CommitProjectBranch[]
+    branches: CommitProjectBranch[];
 }
 export interface ProjectData extends CommitProjectBranch {
-    projects: ProjectWithBranch[]
-    organization_name: string
-    image: string
-    name: string
-    about: string
+    projects: ProjectWithBranch[];
+    organization_name: string;
+    image: string;
+    name: string;
+    about: string;
 }
 export const Projects = () => {
+    const isCreateAccess = isSystemManager();
 
-    const isCreateAccess = isSystemManager()
-
-    const { data, error, isLoading, mutate } = useFrappeGetCall<{ message: ProjectData[] }>('commit.api.commit_project.commit_project.get_project_list_with_branches', {}, 'get_project_list_with_branches', {
-        keepPreviousData: true,
-        revalidateOnFocus: true,
-        revalidateIfStale: false,
-    })
+    const { data, error, isLoading, mutate } = useFrappeGetCall<{
+        message: ProjectData[];
+    }>(
+        "commit.api.commit_project.commit_project.get_project_list_with_branches",
+        {},
+        "get_project_list_with_branches",
+        {
+            keepPreviousData: true,
+            revalidateOnFocus: true,
+            revalidateIfStale: false,
+        }
+    );
 
     if (error) {
-        return <div>Error</div>
+        return <div>Error</div>;
     }
 
     if (isLoading) {
-        return <FullPageLoader />
+        return <FullPageLoader />;
     }
 
+    console.log("data", data?.message);
+
     if (data && data.message) {
         return (
             <div className="mx-auto pl-2 pr-4 h-[calc(100vh-4rem)]">
@@ -48,20 +56,34 @@ export const Projects = () => {
                         <APIExplorer />
                         <Dialog>
                             <DialogTrigger asChild>
-                                <Button size='sm' disabled={data.message.length === 0}>
-                                    <BsDatabase className='mr-2' /> View ERD
+                                <Button size="sm" disabled={data.message.length === 0}>
+                                    <BsDatabase className="mr-2" /> View ERD
                                 </Button>
                             </DialogTrigger>
                             <ViewERDDialogContent data={data.message} />
                         </Dialog>
                     </div>
                     <ul role="list" className="space-y-2 py-2">
-                        {data.message.map((org: ProjectData) => {
+                        {/* {data.message.map((org: ProjectData) => {
                             return <OrgComponent org={org} key={org.organization_name} mutate={mutate} />
-                        })}
+                        })} */}
+
+                        <div className="flex gap-3">
+                            {data.message.map((org: ProjectData) =>
+                                org.projects.map((project) => {
+                                    return (
+                                        <ProjectCard2
+                                            project={project}
+                                            key={project.name}
+                                            mutate={mutate}
+                                        />
+                                    );
+                                })
+                            )}
+                        </div>
                     </ul>
                 </div>
             </div>
-        )
+        );
     }
-}
\ No newline at end of file
+};
diff --git a/dashboard/src/components/features/projects/Projects/ProjectsList.tsx b/dashboard/src/components/features/projects/Projects/ProjectCard.tsx
similarity index 96%
rename from dashboard/src/components/features/projects/Projects/ProjectsList.tsx
rename to dashboard/src/components/features/projects/Projects/ProjectCard.tsx
index 98094d7..85dc3c6 100644
--- a/dashboard/src/components/features/projects/Projects/ProjectsList.tsx
+++ b/dashboard/src/components/features/projects/Projects/ProjectCard.tsx
@@ -76,8 +76,8 @@ export const ProjectCard = ({ project, mutate }: ProjectCardProps) => {
 
                                 {isCreateAccess &&
                                     <>
-                                    {project.branches.length > 0 &&
-                                        <div className="w-full h-[1px] bg-gray-200 shadow-sm my-1" />}
+                                        {project.branches.length > 0 &&
+                                            <div className="w-full h-[1px] bg-gray-200 shadow-sm my-1" />}
                                         {project.branches.length > 0 &&
                                             <Button
                                                 variant="ghost"

From 9db54854b88988b034c3e8811fdc459b687793f8 Mon Sep 17 00:00:00 2001
From: Pardeshi-Aditya <mailadityapardeshi@gmail.com>
Date: Thu, 20 Jun 2024 23:59:41 +0530
Subject: [PATCH 2/6] feat : added project cards and menu button

---
 .../features/projects/ProjectCard2.tsx        | 102 ++++++++++--------
 1 file changed, 59 insertions(+), 43 deletions(-)

diff --git a/dashboard/src/components/features/projects/ProjectCard2.tsx b/dashboard/src/components/features/projects/ProjectCard2.tsx
index 685c70a..9576b81 100644
--- a/dashboard/src/components/features/projects/ProjectCard2.tsx
+++ b/dashboard/src/components/features/projects/ProjectCard2.tsx
@@ -17,7 +17,8 @@ import { isSystemManager } from "@/utils/roles";
 import ManageBranchModal from "./Branch/ManageBranchModal";
 import { Dialog } from "@/components/ui/dialog";
 import { RxDragHandleDots1 } from "react-icons/rx";
-
+import { AiOutlineMenu } from "react-icons/ai";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 
 export interface ProjectCardProps {
   project: ProjectWithBranch
@@ -37,54 +38,69 @@ export function ProjectCard2({ project, mutate }: ProjectCardProps) {
 
   const [openManageModal, setOpenManageModal] = useState(false)
 
+  const handleMenu = () => {
+
+  }
+
   return (
-    <Card className="w-[300px]">
+    <Card className="w-[300px] h-[400px]">
       <CardHeader>
-        <div className="flex gap-2">
-          <Avatar className="h-11 w-11 rounded-md border border-gray-100">
-            <AvatarImage src={project.image} />
-            <AvatarFallback className="rounded-md">
-              {appNameInitials}
-            </AvatarFallback>
-          </Avatar>
-          <div>
-            <CardTitle>{project.display_name}</CardTitle>
-            <CardDescription>
-              {project.description}
-            </CardDescription>
+        <div className="flex gap-3 justify-between items-start">
+          <div className="flex gap-3">
+            <Avatar className="h-11 w-11 rounded-md border border-gray-100">
+              <AvatarImage src={project.image} />
+              <AvatarFallback className="rounded-md">
+                {appNameInitials}
+              </AvatarFallback>
+            </Avatar>
+            <div>
+              <CardTitle>{project.display_name}</CardTitle>
+              <CardDescription>
+                {project.description}
+              </CardDescription>
+            </div>
           </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline"><AiOutlineMenu /></Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56">
+              {isCreateAccess &&
+                <DropdownMenuItem onClick={() => { setOpenManageModal(true) }}>
+                  {project.branches.length > 0 &&
+                    <>
+                      <RxDragHandleDots1 className="h-4 w-4 mr-1" />
+                      <span> Manage Branches</span>
+                    </>
+                  }
+                </DropdownMenuItem>
+              }
+              <DropdownMenuItem>
+                <AlertDialog>
+                  {isCreateAccess && <AlertDialogTrigger asChild>
+                    <Button size='icon' variant='outline' className="h-8 w-8">
+                      <AiOutlineDelete />
+                    </Button>
+                  </AlertDialogTrigger>}
+                  <DeleteProjectModal project={project} mutate={mutate} />
+                </AlertDialog>
+              </DropdownMenuItem>
+
+            </DropdownMenuContent>
+          </DropdownMenu>
         </div>
       </CardHeader>
-      <CardFooter className="flex justify-between">
-        {isCreateAccess &&
-          <>
-            {project.branches.length > 0 ?
-              <Button
-                variant="ghost"
-                className="w-full h-8 font-normal text-sm left-0 flex justify-start pl-1"
-                onClick={() => {
-                  setOpenManageModal(true)
-                }}>
-                <RxDragHandleDots1 className="h-4 w-4 mr-1" />
-                Manage Branches
-              </Button> :
-              <div></div>}
-          </>
-        }
-        <Dialog open={openManageModal} onOpenChange={setOpenManageModal}>
-          <ManageBranchModal branches={project.branches} mutate={mutate} setOpenManageModal={setOpenManageModal} />
-        </Dialog>
-        <AlertDialog>
-          {isCreateAccess && <AlertDialogTrigger asChild>
-            <Button size='icon' variant='outline' className="h-8 w-8">
-              <AiOutlineDelete />
-            </Button>
-          </AlertDialogTrigger>}
-          <DeleteProjectModal project={project} mutate={mutate} />
-        </AlertDialog>
-      </CardFooter>
-    </Card>
+
+      <Dialog open={openManageModal} onOpenChange={setOpenManageModal}>
+        <ManageBranchModal branches={project.branches} mutate={mutate} setOpenManageModal={setOpenManageModal} />
+      </Dialog>
+    </Card >
   );
 }
 
 export default ProjectCard2;
+
+
+// <CardFooter className="flex justify-between">
+//         
+//       </CardFooter>
\ No newline at end of file

From 89a8aabcfee64b3da57844dbb689fd0c3a2efd9b Mon Sep 17 00:00:00 2001
From: Pardeshi-Aditya <mailadityapardeshi@gmail.com>
Date: Fri, 21 Jun 2024 00:15:09 +0530
Subject: [PATCH 3/6] fix : fix menu button on cards

---
 .../features/projects/ProjectCard2.tsx        | 36 +++++++++----------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/dashboard/src/components/features/projects/ProjectCard2.tsx b/dashboard/src/components/features/projects/ProjectCard2.tsx
index 9576b81..885ef9d 100644
--- a/dashboard/src/components/features/projects/ProjectCard2.tsx
+++ b/dashboard/src/components/features/projects/ProjectCard2.tsx
@@ -19,6 +19,7 @@ import { Dialog } from "@/components/ui/dialog";
 import { RxDragHandleDots1 } from "react-icons/rx";
 import { AiOutlineMenu } from "react-icons/ai";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { set } from "react-hook-form";
 
 export interface ProjectCardProps {
   project: ProjectWithBranch
@@ -38,9 +39,7 @@ export function ProjectCard2({ project, mutate }: ProjectCardProps) {
 
   const [openManageModal, setOpenManageModal] = useState(false)
 
-  const handleMenu = () => {
-
-  }
+  const [openDeleteDialogModal, setOpenDeleteDialogModal] = useState(false)
 
   return (
     <Card className="w-[300px] h-[400px]">
@@ -64,33 +63,30 @@ export function ProjectCard2({ project, mutate }: ProjectCardProps) {
             <DropdownMenuTrigger asChild>
               <Button variant="outline"><AiOutlineMenu /></Button>
             </DropdownMenuTrigger>
+            {isCreateAccess && 
             <DropdownMenuContent className="w-56">
-              {isCreateAccess &&
+              {project.branches.length > 0 &&
                 <DropdownMenuItem onClick={() => { setOpenManageModal(true) }}>
-                  {project.branches.length > 0 &&
-                    <>
-                      <RxDragHandleDots1 className="h-4 w-4 mr-1" />
-                      <span> Manage Branches</span>
-                    </>
-                  }
+                  <>
+                    <RxDragHandleDots1 className="h-4 w-4 mr-1" />
+                    <span> Manage Branches</span>
+                  </>
                 </DropdownMenuItem>
               }
-              <DropdownMenuItem>
-                <AlertDialog>
-                  {isCreateAccess && <AlertDialogTrigger asChild>
-                    <Button size='icon' variant='outline' className="h-8 w-8">
-                      <AiOutlineDelete />
-                    </Button>
-                  </AlertDialogTrigger>}
-                  <DeleteProjectModal project={project} mutate={mutate} />
-                </AlertDialog>
+              <DropdownMenuItem onClick={() => setOpenDeleteDialogModal(true)}>
+                <AiOutlineDelete className="h-4 w-4 mr-1" />
+                <span>Delete Project</span>
               </DropdownMenuItem>
 
-            </DropdownMenuContent>
+            </DropdownMenuContent>}
           </DropdownMenu>
         </div>
       </CardHeader>
 
+      <AlertDialog open={openDeleteDialogModal} onOpenChange={setOpenDeleteDialogModal}>
+        <DeleteProjectModal project={project} mutate={mutate} />
+      </AlertDialog>
+
       <Dialog open={openManageModal} onOpenChange={setOpenManageModal}>
         <ManageBranchModal branches={project.branches} mutate={mutate} setOpenManageModal={setOpenManageModal} />
       </Dialog>

From d1c880e03ee79c6215421add7b60e799306017a9 Mon Sep 17 00:00:00 2001
From: Pardeshi-Aditya <mailadityapardeshi@gmail.com>
Date: Fri, 21 Jun 2024 12:41:26 +0530
Subject: [PATCH 4/6] fix : order project cards by creation date.

---
 commit/api/commit_project/commit_project.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/commit/api/commit_project/commit_project.py b/commit/api/commit_project/commit_project.py
index 66000ab..4b45ff5 100644
--- a/commit/api/commit_project/commit_project.py
+++ b/commit/api/commit_project/commit_project.py
@@ -11,7 +11,7 @@ def get_project_list_with_branches():
                                    "name", 'organization_name', 'github_org', 'image', 'about', 'creation'])
     for organization in organizations:
         projects = frappe.get_all("Commit Project", filters={
-                                  "org": organization.get("name")}, fields=["name", "display_name", "repo_name", "app_name", "image", "banner_image", "path_to_folder", 'description'], order_by="modified asc")
+                                  "org": organization.get("name")}, fields=["name", "display_name", "repo_name", "app_name", "image", "banner_image", "path_to_folder", 'description'], order_by="creation desc")
         # organization["projects"] = projects
         for project in projects:
             branches = frappe.get_all("Commit Project Branch", filters={"project": project.get(

From 201ff5c7aa00a6ca608e1ed96ed28842ee0672bc Mon Sep 17 00:00:00 2001
From: Pardeshi-Aditya <mailadityapardeshi@gmail.com>
Date: Fri, 21 Jun 2024 14:00:59 +0530
Subject: [PATCH 5/6] fix : udpate card UI and display org badge on project
 cards

---
 .../features/projects/ProjectCard2.tsx        | 102 ---------
 .../components/features/projects/Projects.tsx |  37 ++--
 .../projects/Projects/ProjectCard.tsx         | 195 +++++++++---------
 3 files changed, 109 insertions(+), 225 deletions(-)
 delete mode 100644 dashboard/src/components/features/projects/ProjectCard2.tsx

diff --git a/dashboard/src/components/features/projects/ProjectCard2.tsx b/dashboard/src/components/features/projects/ProjectCard2.tsx
deleted file mode 100644
index 885ef9d..0000000
--- a/dashboard/src/components/features/projects/ProjectCard2.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { AiOutlineDelete } from "react-icons/ai";
-import { AlertDialog, AlertDialogTrigger } from "@/components/ui/alert-dialog";
-import { KeyedMutator } from "swr";
-import { ProjectData, ProjectWithBranch } from "./Projects";
-import { useMemo, useState } from "react";
-import DeleteProjectModal from "./Projects/DeleteProjectModal";
-import { isSystemManager } from "@/utils/roles";
-import ManageBranchModal from "./Branch/ManageBranchModal";
-import { Dialog } from "@/components/ui/dialog";
-import { RxDragHandleDots1 } from "react-icons/rx";
-import { AiOutlineMenu } from "react-icons/ai";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
-import { set } from "react-hook-form";
-
-export interface ProjectCardProps {
-  project: ProjectWithBranch
-  mutate: KeyedMutator<{
-    message: ProjectData[];
-  }>
-
-}
-
-export function ProjectCard2({ project, mutate }: ProjectCardProps) {
-
-  const appNameInitials = useMemo(() => {
-    return project.display_name[0].toUpperCase()
-  }, [project])
-
-  const isCreateAccess = isSystemManager()
-
-  const [openManageModal, setOpenManageModal] = useState(false)
-
-  const [openDeleteDialogModal, setOpenDeleteDialogModal] = useState(false)
-
-  return (
-    <Card className="w-[300px] h-[400px]">
-      <CardHeader>
-        <div className="flex gap-3 justify-between items-start">
-          <div className="flex gap-3">
-            <Avatar className="h-11 w-11 rounded-md border border-gray-100">
-              <AvatarImage src={project.image} />
-              <AvatarFallback className="rounded-md">
-                {appNameInitials}
-              </AvatarFallback>
-            </Avatar>
-            <div>
-              <CardTitle>{project.display_name}</CardTitle>
-              <CardDescription>
-                {project.description}
-              </CardDescription>
-            </div>
-          </div>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline"><AiOutlineMenu /></Button>
-            </DropdownMenuTrigger>
-            {isCreateAccess && 
-            <DropdownMenuContent className="w-56">
-              {project.branches.length > 0 &&
-                <DropdownMenuItem onClick={() => { setOpenManageModal(true) }}>
-                  <>
-                    <RxDragHandleDots1 className="h-4 w-4 mr-1" />
-                    <span> Manage Branches</span>
-                  </>
-                </DropdownMenuItem>
-              }
-              <DropdownMenuItem onClick={() => setOpenDeleteDialogModal(true)}>
-                <AiOutlineDelete className="h-4 w-4 mr-1" />
-                <span>Delete Project</span>
-              </DropdownMenuItem>
-
-            </DropdownMenuContent>}
-          </DropdownMenu>
-        </div>
-      </CardHeader>
-
-      <AlertDialog open={openDeleteDialogModal} onOpenChange={setOpenDeleteDialogModal}>
-        <DeleteProjectModal project={project} mutate={mutate} />
-      </AlertDialog>
-
-      <Dialog open={openManageModal} onOpenChange={setOpenManageModal}>
-        <ManageBranchModal branches={project.branches} mutate={mutate} setOpenManageModal={setOpenManageModal} />
-      </Dialog>
-    </Card >
-  );
-}
-
-export default ProjectCard2;
-
-
-// <CardFooter className="flex justify-between">
-//         
-//       </CardFooter>
\ No newline at end of file
diff --git a/dashboard/src/components/features/projects/Projects.tsx b/dashboard/src/components/features/projects/Projects.tsx
index a801522..86f57e8 100644
--- a/dashboard/src/components/features/projects/Projects.tsx
+++ b/dashboard/src/components/features/projects/Projects.tsx
@@ -9,7 +9,9 @@ import { isSystemManager } from "@/utils/roles";
 import { CommitProjectBranch } from "@/types/commit/CommitProjectBranch";
 import { DropdownMenuDemo } from "./AddMenuButton";
 import { APIExplorer } from "./APIExplorer";
-import ProjectCard2 from "./ProjectCard2";
+import ProjectCard from "./Projects/ProjectCard";
+import { log } from "console";
+
 
 export interface ProjectWithBranch extends CommitProject {
     branches: CommitProjectBranch[];
@@ -45,8 +47,6 @@ export const Projects = () => {
         return <FullPageLoader />;
     }
 
-    console.log("data", data?.message);
-
     if (data && data.message) {
         return (
             <div className="mx-auto pl-2 pr-4 h-[calc(100vh-4rem)]">
@@ -63,25 +63,20 @@ export const Projects = () => {
                             <ViewERDDialogContent data={data.message} />
                         </Dialog>
                     </div>
-                    <ul role="list" className="space-y-2 py-2">
-                        {/* {data.message.map((org: ProjectData) => {
-                            return <OrgComponent org={org} key={org.organization_name} mutate={mutate} />
-                        })} */}
+                    <div className="flex gap-6 flex-wrap p-4">
+                        {data.message.map((org: ProjectData) => {
+                            const orgName = org.organization_name;
+                            return org.projects.map((project) => (
+                                <ProjectCard
+                                    orgName={orgName}
+                                    project={project}
+                                    key={project.name}
+                                    mutate={mutate}
+                                />
+                            ));
+                        })}
+                    </div>
 
-                        <div className="flex gap-3">
-                            {data.message.map((org: ProjectData) =>
-                                org.projects.map((project) => {
-                                    return (
-                                        <ProjectCard2
-                                            project={project}
-                                            key={project.name}
-                                            mutate={mutate}
-                                        />
-                                    );
-                                })
-                            )}
-                        </div>
-                    </ul>
                 </div>
             </div>
         );
diff --git a/dashboard/src/components/features/projects/Projects/ProjectCard.tsx b/dashboard/src/components/features/projects/Projects/ProjectCard.tsx
index 85dc3c6..44aba9e 100644
--- a/dashboard/src/components/features/projects/Projects/ProjectCard.tsx
+++ b/dashboard/src/components/features/projects/Projects/ProjectCard.tsx
@@ -1,113 +1,104 @@
 import { Button } from "@/components/ui/button";
-import { CardDescription } from "@/components/ui/card";
-import { isSystemManager } from "@/utils/roles";
-import { useState, useMemo } from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardTitle,
+} from "@/components/ui/card";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { AiOutlineDelete } from "react-icons/ai";
-import { RxDragHandleDots1 } from "react-icons/rx";
+import { AlertDialog } from "@/components/ui/alert-dialog";
 import { KeyedMutator } from "swr";
+import { useMemo, useState } from "react";
+import { isSystemManager } from "@/utils/roles";
+import { RxDragHandleDots1 } from "react-icons/rx";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { BsThreeDotsVertical } from "react-icons/bs";
+import { Dialog } from "@radix-ui/react-dialog";
 import ManageBranchModal from "../Branch/ManageBranchModal";
 import { ProjectWithBranch, ProjectData } from "../Projects";
 import DeleteProjectModal from "./DeleteProjectModal";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Dialog } from "@/components/ui/dialog";
-import { AlertDialog, AlertDialogTrigger } from "@/components/ui/alert-dialog";
-import { CommitProjectBranch } from "@/types/commit/CommitProjectBranch"
+import { Badge } from "@/components/ui/badge";
 
 export interface ProjectCardProps {
-    project: ProjectWithBranch
-    mutate: KeyedMutator<{
-        message: ProjectData[];
-    }>
-
+  project: ProjectWithBranch
+  mutate: KeyedMutator<{
+    message: ProjectData[];
+  }>
+  orgName: string
 }
 
-export const ProjectCard = ({ project, mutate }: ProjectCardProps) => {
-
-    const [branch, setBranch] = useState<string>(project.branches[0]?.name)
-
-    const appNameInitials = useMemo(() => {
-        return project.display_name.split('_').map((word) => word[0]).join('').toUpperCase()
-    }, [project])
-
-    const isCreateAccess = isSystemManager()
-
-    const [openManageModal, setOpenManageModal] = useState(false)
-
-    const [selectOpen, setSelectOpen] = useState(false)
-
-    return (
-        <li className="w-full h-auto hover:shadow-sm px-2">
-            <div className="py-2 flex flex-col justify-between">
-                <div className="flex space-x-4 items-center justify-between">
-                    <div className="flex flex-col">
-
-                        <div className="flex space-x-3 items-start">
-                            <Avatar className="h-11 w-11 rounded-md border border-gray-100">
-                                <AvatarImage src={project.image} />
-                                <AvatarFallback className="rounded-md">{appNameInitials}</AvatarFallback>
-                            </Avatar>
-                            <div className="flex flex-col">
-                                <div className="flex space-x-2 items-center">
-                                    <h1 className="text-lg font-medium tracking-normal">{project.display_name}</h1>
-                                </div>
-                                <CardDescription className="text-sm text-gray-500">{project.description}</CardDescription>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="flex items-center space-x-2">
-                        <Select
-                            open={selectOpen}
-                            onOpenChange={setSelectOpen}
-                            onValueChange={(value) => setBranch(value)}
-                            value={branch}
-                            defaultValue={project.branches[0]?.name}
-                        >
-                            <SelectTrigger className="h-8 w-40" onClick={() => setSelectOpen(!selectOpen)}>
-                                <SelectValue placeholder="Select Branch" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                {project.branches.map((branch: CommitProjectBranch) => {
-                                    return (
-                                        <SelectItem value={branch.name} key={branch.name}>{branch.branch_name}</SelectItem>
-                                    )
-                                })}
-
-                                {isCreateAccess &&
-                                    <>
-                                        {project.branches.length > 0 &&
-                                            <div className="w-full h-[1px] bg-gray-200 shadow-sm my-1" />}
-                                        {project.branches.length > 0 &&
-                                            <Button
-                                                variant="ghost"
-                                                className="w-full h-8 font-normal text-sm left-0 flex justify-start pl-1"
-                                                onClick={() => {
-                                                    setOpenManageModal(true)
-                                                    setSelectOpen(false)
-                                                }}>
-                                                <RxDragHandleDots1 className="h-4 w-4 mr-1" />
-                                                Manage Branches
-                                            </Button>}
-                                    </>
-                                }
-                            </SelectContent>
-                        </Select>
-
-                        <Dialog open={openManageModal} onOpenChange={setOpenManageModal}>
-                            <ManageBranchModal branches={project.branches} mutate={mutate} setOpenManageModal={setOpenManageModal} />
-                        </Dialog>
-                        <AlertDialog>
-                            {isCreateAccess && <AlertDialogTrigger asChild>
-                                <Button size='icon' variant='outline' className="h-8 w-8">
-                                    <AiOutlineDelete />
-                                </Button>
-                            </AlertDialogTrigger>}
-                            <DeleteProjectModal project={project} mutate={mutate} />
-                        </AlertDialog>
-                    </div>
-                </div>
-            </div >
-        </li >
-    )
+const ProjectCard = ({ project, mutate, orgName }: ProjectCardProps) => {
+
+  const appNameInitials = useMemo(() => {
+    return project.display_name[0].toUpperCase()
+  }, [project])
+
+  const isCreateAccess = isSystemManager()
+
+  const [openManageModal, setOpenManageModal] = useState(false)
+
+  const [openDeleteDialogModal, setOpenDeleteDialogModal] = useState(false)
+
+  return (
+    <Card className="w-[220px] h-[300px] relative">
+      <CardContent className="p-4">
+        <div className="flex flex-col gap-4 items-start">
+          <Avatar className="h-32 w-full flex items-center rounded-md border border-gray-100">
+            <AvatarImage src={project.image} />
+            <AvatarFallback className="rounded-md text-4xl">
+              {appNameInitials}
+            </AvatarFallback>
+          </Avatar>
+
+          <div className="flex flex-col gap-1 w-full">
+            <div className="flex justify-between items-center">
+              <CardTitle>{project.display_name}</CardTitle>
+              {isCreateAccess && <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline" size='icon' className="h-8 w-8"> <BsThreeDotsVertical /></Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-56">
+                  {project.branches.length > 0 &&
+                    <DropdownMenuItem onClick={() => { setOpenManageModal(true) }}>
+                      <>
+                        <RxDragHandleDots1 className="h-4 w-4 mr-1" />
+                        <span> Manage Branches</span>
+                      </>
+                    </DropdownMenuItem>
+                  }
+                  <DropdownMenuItem onClick={() => setOpenDeleteDialogModal(true)}>
+                    <AiOutlineDelete className="h-4 w-4 mr-1" />
+                    <span>Delete Project</span>
+                  </DropdownMenuItem>
+
+                </DropdownMenuContent>
+              </DropdownMenu>}
+            </div>
+
+            <CardDescription>
+              {project.description}
+            </CardDescription>
+          </div>
+
+
+        </div>
+      </CardContent>
+
+      <AlertDialog open={openDeleteDialogModal} onOpenChange={setOpenDeleteDialogModal}>
+        <DeleteProjectModal project={project} mutate={mutate} />
+      </AlertDialog>
+
+      <Dialog open={openManageModal} onOpenChange={setOpenManageModal}>
+        <ManageBranchModal branches={project.branches} mutate={mutate} setOpenManageModal={setOpenManageModal} />
+      </Dialog>
+
+      <CardFooter className="absolute p-4 bottom-0 mt-2">
+        <Badge variant="secondary">{orgName}</Badge>
+      </CardFooter>
+    </Card>
+  );
 }
+
+export default ProjectCard;

From 09f216ad0b157b85703fceeb4a6e214c2d72ecf8 Mon Sep 17 00:00:00 2001
From: Pardeshi-Aditya <mailadityapardeshi@gmail.com>
Date: Fri, 21 Jun 2024 15:26:27 +0530
Subject: [PATCH 6/6] feat : update card component for 'YourApps' - apps
 installed on system

---
 .../features/meta_apps/YourApps.tsx           | 69 +++++++------------
 .../components/features/projects/Projects.tsx |  1 -
 2 files changed, 24 insertions(+), 46 deletions(-)

diff --git a/dashboard/src/components/features/meta_apps/YourApps.tsx b/dashboard/src/components/features/meta_apps/YourApps.tsx
index 2a62b28..401e4e7 100644
--- a/dashboard/src/components/features/meta_apps/YourApps.tsx
+++ b/dashboard/src/components/features/meta_apps/YourApps.tsx
@@ -1,14 +1,14 @@
 import { FullPageLoader } from "@/components/common/FullPageLoader/FullPageLoader"
 import { Avatar, AvatarFallback } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
-import { CardDescription } from "@/components/ui/card"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Card, CardContent, CardDescription, CardFooter, CardTitle } from "@/components/ui/card"
 import { AvatarImage } from "@radix-ui/react-avatar"
 import { useFrappeGetCall } from "frappe-react-sdk"
 import { useMemo } from "react"
 import { BsDatabase } from "react-icons/bs"
 import { useNavigate } from "react-router-dom"
 import { YourAppAPIExplorer } from "./YourAppAPIExplorer"
+import { Badge } from "@/components/ui/badge"
 
 export interface AppsData {
     app_name: string
@@ -39,9 +39,8 @@ export const YourApps = () => {
     if (data && data.message) {
         return (
             <div className="mx-auto px-4 h-[calc(100vh-4rem)]">
-                <div className="flex flex-row items-center space-x-2 gap-2 justify-between">
-                    <h1 className="scroll-m-20 text-2xl font-semibold tracking-normal">
-                    </h1>
+                <div className="flex flex-row items-center space-x-2 gap-2 justify-end">
+
                     <div className="flex items-center space-x-2">
                         <YourAppAPIExplorer />
                         <Button size='sm' onClick={() => {
@@ -53,12 +52,10 @@ export const YourApps = () => {
                         </Button>
                     </div>
                 </div>
-                <div className="h-full space-y-">
-                    <ul role="list" className="divide-y divide-gray-200">
-                        {data.message.map((app: AppsData) => {
-                            return <ProjectCard key={app.app_name} app={app} />
-                        })}
-                    </ul>
+                <div className="flex gap-6 flex-wrap p-4">
+                    {data.message.map((app: AppsData) => {
+                        return <AppsCard key={app.app_name} app={app} />
+                    })}
                 </div>
             </div>
         )
@@ -66,45 +63,27 @@ export const YourApps = () => {
 }
 
 
-export const ProjectCard = ({ app }: { app: AppsData }) => {
+const AppsCard = ({ app }: { app: AppsData }) => {
 
     const appNameInitials = useMemo(() => {
         return app.app_name.split('_').map((word) => word[0]).join('').toUpperCase()
     }, [app])
 
     return (
-        <li className="w-full h-auto hover:shadow-sm">
-            <div className="py-4 flex flex-col justify-between">
-                <div className="flex space-x-4 items-center justify-between">
-                    <div className="flex space-x-3 items-center">
-                        <Avatar className="h-11 w-11 rounded-md">
-                            <AvatarImage src={app.app_logo_url} />
-                            <AvatarFallback className="h-11 w-11 rounded-md">{appNameInitials}</AvatarFallback>
-                        </Avatar>
-                        <div className="flex flex-col">
-                            <div className="flex space-x-2 items-center">
-                                <h1 className="text-lg font-medium tracking-normal">{app.app_name}</h1>
-                                <span className="text-sm text-gray-500">
-                                    by
-                                </span>
-                                <h1 className="text-md font-normal tracking-normal">{app.app_publisher}</h1>
-                            </div>
-                            <CardDescription className="text-sm text-gray-500">{app.app_description}</CardDescription>
-                        </div>
-                    </div>
-                    <Select
-                            disabled
-                            defaultValue={app.git_branch}
-                        >
-                            <SelectTrigger className="h-8 w-40 truncate">
-                                <SelectValue placeholder="Select Branch" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value={app.git_branch ?? ''} key={app.git_branch} >{app.git_branch}</SelectItem>
-                            </SelectContent>
-                    </Select>
-                </div>
-            </div >
-        </li >
+        <Card className="w-[220px] h-[300px] relative">
+            <CardContent className="flex flex-col gap-4 items-start p-4">
+                <Avatar className="h-32 w-full flex items-center rounded-md border border-gray-100 justify-center">
+                    <AvatarImage src={app.app_logo_url} />
+                    <AvatarFallback className="rounded-md text-4xl">{appNameInitials}</AvatarFallback>
+                </Avatar>
+                <CardTitle>{app.app_name}</CardTitle>
+                <CardDescription>
+                    {app.app_description}
+                </CardDescription>
+            </CardContent>
+            <CardFooter className="absolute mt-2 bottom-0 p-4">
+                <Badge variant="secondary">{app.app_publisher}</Badge>
+            </CardFooter>
+        </Card>
     )
 }
\ No newline at end of file
diff --git a/dashboard/src/components/features/projects/Projects.tsx b/dashboard/src/components/features/projects/Projects.tsx
index 86f57e8..46746d7 100644
--- a/dashboard/src/components/features/projects/Projects.tsx
+++ b/dashboard/src/components/features/projects/Projects.tsx
@@ -10,7 +10,6 @@ import { CommitProjectBranch } from "@/types/commit/CommitProjectBranch";
 import { DropdownMenuDemo } from "./AddMenuButton";
 import { APIExplorer } from "./APIExplorer";
 import ProjectCard from "./Projects/ProjectCard";
-import { log } from "console";
 
 
 export interface ProjectWithBranch extends CommitProject {