Feat(canvas): Add project page

canvas/app/dashboard/_layout/page-container.tsx

@@ -6,7 +6,7 @@ export function PageContainer(props: TPageContainer) {
   const { children } = props;
 
   return (
-    <div className="px-0 py-4 md:px-4 flex flex-col flex-1 overflow-auto">
+    <div className="px-0 py-4 md:px-4 flex flex-col flex-1 overflow-auto relative">
       {children}
     </div>
   );

canvas/app/dashboard/project/[id]/layout.tsx

@@ -0,0 +1,8 @@
+import React, { Suspense } from "react";
+import ProjectLoading from "./loading";
+
+export default function ProjectLayout(props: React.PropsWithChildren) {
+  const { children } = props;
+
+  return <Suspense fallback={<ProjectLoading />}>{children}</Suspense>;
+}

canvas/app/dashboard/project/[id]/loading.tsx

@@ -0,0 +1,5 @@
+import { ProjectSkeleton } from "./skeleton";
+
+export default function ProjectLoading() {
+  return <ProjectSkeleton />;
+}

canvas/app/dashboard/project/[id]/main-content.tsx

@@ -0,0 +1,34 @@
+import { Breadcrumb } from "@/components/custom/breadcrumb";
+import { PageHeading } from "@/components/custom/page-heading";
+import { PROJECTS_LISTING_URL } from "@/constants/routes";
+import { Steps } from "./steps";
+
+export function ProjectMainContent() {
+  return (
+    <div className="flex flex-col flex-1 overflow-auto">
+      <PageHeading heading="Project 1" />
+      <Breadcrumb
+        links={[
+          { title: "All Projects", href: PROJECTS_LISTING_URL },
+          { title: "Project 1" },
+        ]}
+      />
+      <Steps
+        steps={[
+          {
+            title: "01_CP/Illumination correction",
+          },
+          {
+            title: "02_CP/Illumination apply",
+          },
+          {
+            title: "03_CP/Segmentation",
+          },
+          {
+            title: "04_SBS/Illumination correction",
+          },
+        ]}
+      />
+    </div>
+  );
+}

canvas/app/dashboard/project/[id]/page.tsx

@@ -0,0 +1,23 @@
+import { Suspense } from "react";
+import { PageContainer } from "../../_layout/page-container";
+import { ProjectMainContent } from "./main-content";
+import { ProjectSkeleton } from "./skeleton";
+import { getProject } from "@/services/projects";
+
+type TProjectPageProps = {
+  params: {
+    id: string;
+  };
+};
+
+export default async function ProjectPage(props: TProjectPageProps) {
+  const { params } = props;
+
+  return (
+    <PageContainer>
+      <Suspense fallback={<ProjectSkeleton />}>
+        <ProjectMainContent />
+      </Suspense>
+    </PageContainer>
+  );
+}

canvas/app/dashboard/project/[id]/skeleton.tsx

@@ -0,0 +1,28 @@
+import { PageHeading } from "@/components/custom/page-heading";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function ProjectSkeleton() {
+  return (
+    <div className="">
+      <div className="flex mt-3 pb-8 md:mt-6 md:border-b md:border-b-slate-200">
+        <Skeleton className="h-12 w-[400px]" />
+      </div>
+
+      <div className="py-2">
+        <Skeleton className="h-6 w-96" />
+      </div>
+
+      <div className="flex flex-col py-4 gap-4 md:flex-row">
+        <div className="space-y-3">
+          <Skeleton className="h-8 w-64" />
+          <Skeleton className="h-8 w-64" />
+          <Skeleton className="h-8 w-64" />
+          <Skeleton className="h-8 w-64" />
+        </div>
+        <div className="flex-1">
+          <Skeleton className="h-96 w-full" />
+        </div>
+      </div>
+    </div>
+  );
+}

canvas/app/dashboard/project/[id]/steps-main-area.tsx

@@ -0,0 +1,17 @@
+export type TStepContent = {
+  title: string;
+};
+
+export type TStepMainAreaProps = {
+  content: TStepContent;
+};
+
+export function StepsMainArea(props: TStepMainAreaProps) {
+  const { content } = props;
+
+  return (
+    <div className="flex flex-col flex-1 overflow-auto">
+      {content.title} <br />
+    </div>
+  );
+}

canvas/app/dashboard/project/[id]/steps-sidebar.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { Sidebar } from "@/components/custom/sidebar";
+
+export function StepSidebar() {
+  return (
+    <Sidebar
+      items={[
+        {
+          onClick: () => console.log("01_CP/Illumination correction"),
+          title: "01_CP/Illumination correction",
+        },
+        {
+          onClick: () => console.log("02_CP/Illumination apply"),
+          title: "02_CP/Illumination apply",
+        },
+        {
+          onClick: () => console.log("03_CP/Segmentation"),
+          title: "03_CP/Segmentation",
+        },
+        {
+          onClick: () => console.log("04_SBS/Illumination correction"),
+          title: "04_SBS/Illumination correction",
+        },
+      ]}
+    />
+  );
+}

canvas/app/dashboard/project/[id]/steps.tsx

@@ -0,0 +1,29 @@
+"use client";
+import React from "react";
+import { StepsMainArea } from "./steps-main-area";
+import { Sidebar } from "@/components/custom/sidebar";
+
+export type TStep = {
+  title: string;
+};
+
+export type TStepsProps = {
+  steps: TStep[];
+};
+
+export function Steps(props: TStepsProps) {
+  const { steps } = props;
+  const [activeStep, setActiveStep] = React.useState(steps[0]);
+
+  return (
+    <div className="flex flex-col py-4 gap-4 flex-1 md:flex-row md:overflow-auto">
+      <Sidebar
+        items={steps.map((step) => ({
+          title: step.title,
+          onClick: () => setActiveStep(step),
+        }))}
+      />
+      <StepsMainArea content={activeStep} />
+    </div>
+  );
+}

canvas/app/dashboard/project/all/all-projects-cards.tsx

@@ -1,6 +1,8 @@
 "use client";
 import { Card } from "@/components/custom/card";
 import { AllProjectContainer } from "./all-projects-container";
+import { useRouter } from "next/navigation";
+import { PROJECT_URL } from "@/constants/routes";
 
 export type TAllProjectsCardsProps = {
   projects: {
@@ -13,6 +15,7 @@ export type TAllProjectsCardsProps = {
 
 export function AllProjectsCards(props: TAllProjectsCardsProps) {
   const { projects } = props;
+  const { push } = useRouter();
 
   return (
     <AllProjectContainer>
@@ -26,7 +29,7 @@ export function AllProjectsCards(props: TAllProjectsCardsProps) {
           description={description}
           title={title}
           action={{
-            onClick: () => console.log("Opening project" + id),
+            onClick: () => push(`${PROJECT_URL}/${id}`),
           }}
         />
       ))}

canvas/app/dashboard/project/all/all-projects.tsx

@@ -2,17 +2,14 @@ import { AllProjectsCards } from "./all-projects-cards";
 import { NoProjects } from "./no-projects";
 
 async function fetchProject() {
-  const projects =
-    Date.now() % 2
-      ? [
-          {
-            id: "1",
-            description: "This is the description for project 1",
-            title: "Project",
-            imgSrc: "/test.png",
-          },
-        ]
-      : [];
+  const projects = [
+    {
+      id: "1",
+      description: "This is the description for project 1",
+      title: "Project",
+      imgSrc: "/test.png",
+    },
+  ];
 
   await new Promise((resolve) => setTimeout(resolve, 1000));
   return {

canvas/app/dashboard/project/all/create-project-form.tsx

@@ -20,6 +20,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Input } from "@/components/ui/input";
 import {
   TCreateProjectFormData,
   createProjectSchema,
@@ -34,11 +35,10 @@ export type TCreateProjectFormProps = {
   formID: string;
   onSubmit: (data: TCreateProjectFormData) => void;
   parsers: TSelectObject[];
-  datasets: TSelectObject[];
 };
 
 export function CreateProjectForm(props: TCreateProjectFormProps) {
-  const { formID, datasets, parsers, onSubmit } = props;
+  const { formID, parsers, onSubmit } = props;
 
   const createProjectForm = useForm<TCreateProjectFormData>({
     resolver: zodResolver(createProjectSchema),
@@ -58,24 +58,10 @@ export function CreateProjectForm(props: TCreateProjectFormProps) {
             <FormItem>
               <FormLabel>Dataset</FormLabel>
               <FormControl>
-                <Select
-                  onValueChange={field.onChange}
-                  defaultValue={field.value}
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select Dataset" />
-                  </SelectTrigger>
-                  <SelectContent onBlur={field.onBlur}>
-                    {datasets.map(({ value, label }) => (
-                      <SelectItem key={value} value={value}>
-                        {label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                <Input {...field} placeholder="Dataset" />
               </FormControl>
               <FormDescription>
-                The dataset to use to build the project.
+                S3 bucket URL that contains the dataset.
               </FormDescription>
               <FormMessage />
             </FormItem>

canvas/app/dashboard/project/all/create-project.tsx

@@ -27,21 +27,6 @@ export function CreateProject() {
 
   const ref = React.useRef(0);
 
-  const datasets = [
-    {
-      label: "Dataset 1",
-      value: "d1",
-    },
-    {
-      label: "Dataset 2",
-      value: "d2",
-    },
-    {
-      label: "Dataset 3",
-      value: "d3",
-    },
-  ];
-
   const parser = [
     {
       label: "Parser 1",
@@ -104,7 +89,6 @@ export function CreateProject() {
             </Alert>
           )}
           <CreateProjectForm
-            datasets={datasets}
             parsers={parser}
             onSubmit={handleSubmit}
             formID={formID}

canvas/components/custom/breadcrumb.tsx

@@ -0,0 +1,49 @@
+import {
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import Link from "next/link";
+import React from "react";
+
+export type TBreadcrumbLink = {
+  href?: string;
+  title: string;
+};
+
+export type TBreadcrumbProps = {
+  links: TBreadcrumbLink[];
+};
+
+export function Breadcrumb(props: TBreadcrumbProps) {
+  const { links } = props;
+
+  return (
+    <nav aria-label="breadcrumb" className="py-2">
+      <BreadcrumbList>
+        {links.map(({ href, title }) => {
+          if (!href) {
+            return (
+              <BreadcrumbItem key={title}>
+                <BreadcrumbPage>{title}</BreadcrumbPage>
+              </BreadcrumbItem>
+            );
+          }
+
+          return (
+            <React.Fragment key={title}>
+              <BreadcrumbItem>
+                <BreadcrumbLink asChild>
+                  <Link href={href}>{title}</Link>
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+            </React.Fragment>
+          );
+        })}
+      </BreadcrumbList>
+    </nav>
+  );
+}