feat(platform): Workspace integrate (keyshade-xyz#241)

apps/platform/package.json

@@ -24,6 +24,7 @@
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-switch": "^1.0.3",
         "@tanstack/react-table": "^8.16.0",
+        "avvvatars-react": "^0.4.2",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
         "cmdk": "^1.0.0",

apps/platform/src/app/(main)/page.tsx

@@ -1,5 +1,9 @@
 'use client'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import { z } from 'zod'
+import { toast } from 'sonner'
+import { useRouter } from 'next/navigation'
+import { AddSVG } from '@public/svg/shared'
 import ProjectCard from '@/components/dashboard/projectCard'
 import {
   Sheet,
@@ -15,45 +19,197 @@ import { Button } from '@/components/ui/button'
 import { Label } from '@/components/ui/label'
 import { Input } from '@/components/ui/input'
 import { Switch } from '@/components/ui/switch'
+import { apiClient } from '@/lib/api-client'
+import type { NewProject, ProjectWithoutKeys, Workspace } from '@/types'
+import { zProjectWithoutKeys } from '@/types'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTrigger
+} from '@/components/ui/dialog'
+
+async function getProjects(
+  currentWorkspaceID: string
+): Promise<ProjectWithoutKeys[] | [] | undefined> {
+  try {
+    const projectData = await apiClient.get<ProjectWithoutKeys[] | []>(
+      `/project/all/${currentWorkspaceID}`
+    )
+    const zProjectWithoutKeysArray = z.array(zProjectWithoutKeys)
+    const { success, data } = zProjectWithoutKeysArray.safeParse(projectData)
+    if (!success) {
+      throw new Error('Invalid data')
+    }
+    return data
+  } catch (error) {
+    // eslint-disable-next-line no-console -- we need to log the error
+    console.error(error)
+  }
+}
 
-const details = [
-  {
-    title: 'backend-server',
-    description: 'This a description for your project',
-    environment: 2,
-    config: 10,
-    secret: 5
-  },
-  {
-    title: 'frontend-server',
-    description: 'This a description for your project',
-    environment: 2,
-    config: 10,
-    secret: 5
+async function createProject(
+  newProjectData: NewProject,
+  currentWorkspaceID: string
+): Promise<void> {
+  try {
+    await apiClient.post<NewProject>(`/project/${currentWorkspaceID}`, {
+      newProjectData
+    })
+  } catch (error) {
+    // eslint-disable-next-line no-console -- we need to log the error
+    console.error(error)
   }
-]
+}
 
 export default function Index(): JSX.Element {
   const [isSheetOpen, setIsSheetOpen] = useState<boolean>(false)
+  const [projects, setProjects] = useState<ProjectWithoutKeys[] | []>([])
+  const [newProjectData, setNewProjectData] = useState<NewProject>({
+    name: '',
+    description: '',
+    storePrivateKey: false,
+    environments: [
+      {
+        name: 'Dev',
+        description: 'Development environment',
+        isDefault: true
+      },
+      {
+        name: 'Stage',
+        description: 'Staging environment',
+        isDefault: false
+      },
+      {
+        name: 'Prod',
+        description: 'Production environment',
+        isDefault: false
+      }
+    ]
+  })
+
+  const router = useRouter()
+
+  const currentWorkspace = JSON.parse(
+    localStorage.getItem('currentWorkspace') ?? '{}'
+  ) as Workspace
+
+  useEffect(() => {
+    getProjects(currentWorkspace.id)
+      .then((data: ProjectWithoutKeys[] | [] | undefined) => {
+        if (data) {
+          setProjects(data)
+        }
+      })
+      .catch((error) => {
+        // eslint-disable-next-line no-console -- we need to log the error
+        console.error(error)
+      })
+  }, [currentWorkspace.id])
+
   return (
     <div className="flex flex-col gap-4">
-      <h1 className="text-[1.75rem] font-semibold ">My Projects</h1>
-      <div className="grid h-[70vh] gap-6 overflow-y-auto scroll-smooth p-2 md:grid-cols-2 2xl:grid-cols-3">
-        {details.map((projectDetails, index) => {
-          return (
-            <ProjectCard
-              config={projectDetails.config}
-              description={projectDetails.description}
-              environment={projectDetails.environment}
-              // eslint-disable-next-line react/no-array-index-key -- key is not used as a prop
-              key={index}
-              secret={projectDetails.secret}
-              setIsSheetOpen={setIsSheetOpen}
-              title={projectDetails.title}
-            />
-          )
-        })}
+      <div className="flex items-center justify-between">
+        <h1 className="text-[1.75rem] font-semibold ">My Projects</h1>
+
+        <Dialog>
+          <DialogTrigger>
+            <Button>
+              {' '}
+              <AddSVG /> Create a new Project
+            </Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>Create a new project</DialogHeader>
+            <DialogDescription>
+              Fill in the details to create a new project
+            </DialogDescription>
+            <div className="flex flex-col gap-y-8">
+              <div className="flex w-full flex-col gap-y-4">
+                <div className="flex flex-col items-start gap-4">
+                  <Label className="text-right" htmlFor="name">
+                    Name
+                  </Label>
+                  <Input
+                    className="col-span-3"
+                    id="name"
+                    onChange={(e) => {
+                      setNewProjectData((prev) => ({
+                        ...prev,
+                        name: e.target.value
+                      }))
+                    }}
+                    placeholder="Enter the name"
+                  />
+                </div>
+                <div className="flex flex-col items-start gap-4">
+                  <Label className="text-right" htmlFor="name">
+                    Description
+                  </Label>
+                  <Input
+                    className="col-span-3"
+                    id="name"
+                    onChange={(e) => {
+                      setNewProjectData((prev) => ({
+                        ...prev,
+                        description: e.target.value
+                      }))
+                    }}
+                    placeholder="Enter the name"
+                  />
+                </div>
+                {/* {isNameEmpty ? (
+                  <span className="ml-[3.5rem] mt-1 text-red-500">
+                    Name cannot be empty
+                  </span>
+                ) : null} */}
+              </div>
+            </div>
+            <div className="flex w-full justify-end">
+              <Button
+                onClick={() => {
+                  createProject(newProjectData, currentWorkspace.id)
+                    .then(() => {
+                      toast.success('New project added successfully')
+                      router.refresh()
+                    })
+                    .catch(() => {
+                      toast.error('Failed to add new project')
+                    })
+                }}
+                variant="secondary"
+              >
+                Add project
+              </Button>
+            </div>
+          </DialogContent>
+        </Dialog>
       </div>
+
+      {projects.length !== 0 ? (
+        <div className="grid h-[70vh] gap-6 overflow-y-auto scroll-smooth p-2 md:grid-cols-2 2xl:grid-cols-3">
+          {projects.map((project: ProjectWithoutKeys) => {
+            return (
+              <ProjectCard
+                config={10}
+                description={project.description ?? ''}
+                environment={2}
+                idForImage={project.id}
+                key={project.id}
+                secret={5}
+                setIsSheetOpen={setIsSheetOpen}
+                title={project.name}
+              />
+            )
+          })}
+        </div>
+      ) : (
+        <div className="mt-[10vh] flex justify-center">
+          <div>No projects yet? Get started by creating a new project.</div>
+        </div>
+      )}
+
       <Sheet
         onOpenChange={(open) => {
           setIsSheetOpen(open)

apps/platform/src/app/(main)/settings/@profile/page.tsx

@@ -109,10 +109,11 @@ function ProfilePage(): React.JSX.Element {
           <InputLoading />
         ) : (
           <Input
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              setIsModified(true)
-              setUserData((prev) => ({ ...prev, email: e.target.value }))
-            }}
+            disabled
+            // onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            //   setIsModified(true)
+            //   setUserData((prev) => ({ ...prev, email: e.target.value }))
+            // }}
             placeholder="email"
             value={userData.email}
           />

apps/platform/src/app/auth/page.tsx

@@ -95,12 +95,29 @@ export default function AuthPage(): React.JSX.Element {
             {isLoading ? <LoadingSVG className="w-10" /> : 'Get Started'}
           </Button>
         </form>
-        <Button className="w-full" variant="outline">
+        {/* <Button className="w-full" variant="outline">
           Already have an account? Sign In
-        </Button>
+        </Button> */}
         <div className="text-center text-xs text-[#808080]">
           By continueing, you acknowledge and agree to our <br />
-          Legal Terms and Privacy Policy.
+          <a
+            className="underline"
+            href="https://keyshade.xyz/terms_and_condition"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Legal Terms
+          </a>{' '}
+          and{' '}
+          <a
+            className="underline"
+            href="https://keyshade.xyz/privacy"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Privacy Policy
+          </a>{' '}
+          .
         </div>
       </div>
     </main>

apps/platform/src/components/dashboard/projectCard/index.tsx

@@ -3,6 +3,7 @@
 import Link from 'next/link'
 import type { Dispatch, SetStateAction } from 'react'
 import { toast } from 'sonner'
+import Avvvatars from 'avvvatars-react'
 import { ConfigSVG, EnvironmentSVG, SecretSVG } from '@public/svg/dashboard'
 import {
   ContextMenu,
@@ -22,7 +23,8 @@ import {
 // } from '@/components/ui/menubar'
 
 interface ProjectCardProps {
-  key: number
+  idForImage: string
+  key: number | string
   title: string
   description: string
   environment: number
@@ -32,6 +34,7 @@ interface ProjectCardProps {
 }
 
 function ProjectCard({
+  idForImage,
   key,
   title,
   description,
@@ -74,14 +77,15 @@ function ProjectCard({
 
   return (
     <ContextMenu>
-      <ContextMenuTrigger>
+      <ContextMenuTrigger className="flex h-[7rem]">
         <Link
           className="flex h-[7rem] max-w-[30.25rem] justify-between rounded-xl bg-white/5 px-5 py-4 shadow-lg hover:bg-white/10"
           href={`/project/${title}`}
           key={key}
         >
           <div className="flex items-center gap-x-5">
-            <div className="aspect-square h-14 w-14 rounded-full bg-white/35" />
+            {/* <div className="aspect-square h-14 w-14 rounded-full bg-white/35" /> */}
+            <Avvvatars size={56} style="shape" value={idForImage} />
             <div>
               <div className="font-semibold">{title}</div>
               <span className="text-xs font-semibold text-white/60">

apps/platform/src/components/shared/navbar/searchModel/index.tsx

@@ -55,20 +55,25 @@ function SearchModel({
         <CommandGroup heading="Settings">
           <CommandItem
             onSelect={() => {
-              router.push('/profile')
+              router.push('/settings?tab=profile')
               setIsOpen(false)
             }}
           >
             <User className="mr-2 h-4 w-4" />
             <span>Profile</span>
           </CommandItem>
-          <CommandItem>
+          <CommandItem
+            onSelect={() => {
+              router.push('/settings?tab=billing')
+              setIsOpen(false)
+            }}
+          >
             <CreditCard className="mr-2 h-4 w-4" />
             <span>Billing</span>
           </CommandItem>
           <CommandItem
             onSelect={() => {
-              router.push('/settings')
+              router.push('/settings?tab=workspace')
               setIsOpen(false)
             }}
           >