Merge pull request #62 from SwiichyCode/projects

Projects

.eslintrc.cjs

@@ -28,6 +28,7 @@ const config = {
     "@typescript-eslint/no-unsafe-assignment": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/dot-notation": "off",
     "@typescript-eslint/no-misused-promises": [
       "error",
       {

package.json

@@ -37,6 +37,7 @@
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
@@ -46,6 +47,7 @@
     "@tanstack/react-query": "^5.24.1",
     "@tanstack/react-query-devtools": "^5.24.8",
     "@tanstack/react-query-next-experimental": "^5.24.1",
+    "@tanstack/react-table": "^8.14.0",
     "@tiptap/extension-heading": "^2.2.4",
     "@tiptap/react": "^2.2.4",
     "@tiptap/starter-kit": "^2.2.4",

prisma/schema.prisma

@@ -78,6 +78,9 @@ model User {
     likes                    Like[]
     Comment                  Comment[]
     Resource                 Resource[]
+    Project                  Project[]
+    Column                   Column[]
+    Task                     Task[]
     githubProfile            GithubProfile?
 }
 
@@ -133,6 +136,46 @@ model Repository {
     @@index([url])
 }
 
+model Project {
+    id          String    @id @default(uuid())
+    name        String
+    description String
+    createdAt   DateTime  @default(now())
+    updatedAt   DateTime  @updatedAt
+    createdBy   User      @relation(fields: [createdById], references: [id])
+    createdById String
+    closed      Boolean   @default(false)
+    closedAt    DateTime?
+    columns     Column[]
+}
+
+model Column {
+    id          String      @id @default(uuid())
+    name        String
+    description String
+    color       ColumnColor
+    maxSize     Int         @default(99)
+    createdAt   DateTime    @default(now())
+    updatedAt   DateTime    @updatedAt
+    createdBy   User        @relation(fields: [createdById], references: [id])
+    createdById String
+    project     Project     @relation(fields: [projectId], references: [id])
+    projectId   String
+    tasks       Task[]
+}
+
+model Task {
+    id          String   @id @default(uuid())
+    name        String
+    description String
+    createdAt   DateTime @default(now())
+    updatedAt   DateTime @updatedAt
+    createdBy   User     @relation(fields: [createdById], references: [id])
+    createdById String
+    column      Column   @relation(fields: [columnId], references: [id])
+    columnId    String
+}
+
 model Resource {
     id          Int      @id @default(autoincrement())
     url         String   @unique
@@ -198,3 +241,14 @@ enum ResourceType {
     COURSE
     BOOK
 }
+
+enum ColumnColor {
+    GRAY
+    BLUE
+    GREEN
+    YELLOW
+    ORANGE
+    RED
+    PINK
+    PURPLE
+}

src/app/(app)/projects/[id]/error.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+export default function ProjectError() {
+  return <div>Error occured</div>;
+}

src/app/(app)/projects/[id]/layout.tsx

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from "react";
+
+export default function ProjectLayout({ children }: PropsWithChildren) {
+  return (
+    <div className="h-[calc(100vh-73px)] max-w-full bg-[#0D1117] p-6">
+      {children}
+    </div>
+  );
+}

src/app/(app)/projects/[id]/page.tsx

@@ -0,0 +1,39 @@
+import { useFetchProjectPage } from "@/modules/projects/hooks/use-fetch-project-page";
+import { Column } from "@/modules/projects/components/Column/_index";
+import { ProjectProvider } from "@/modules/projects/context/projectContext";
+import { ColumnProvider } from "@/modules/projects/context/columnContext";
+import { ColumnsLayout } from "@/modules/projects/components/Column/_layout";
+import { DeleteColumnDialog } from "@/modules/projects/components/DeleteColumnDialog";
+
+import {
+  useQueryParserProjectPage,
+  type SearchParamsType,
+} from "@/modules/projects/hooks/use-query-parser-project-page";
+
+type PageProps = {
+  params: {
+    id: string;
+  };
+} & SearchParamsType;
+
+export default async function ProjectPage({ params, searchParams }: PageProps) {
+  const { project } = await useFetchProjectPage({ projectId: params.id });
+  const { projectId, columnId } = useQueryParserProjectPage({ searchParams });
+
+  if (!project) return null;
+
+  return (
+    <ProjectProvider project={project}>
+      <ColumnsLayout>
+        {project?.columns.map((column) => (
+          <ColumnProvider key={column.id} column={column}>
+            <Column key={column.id} />
+          </ColumnProvider>
+        ))}
+      </ColumnsLayout>
+
+      {/* All dialog action  */}
+      <DeleteColumnDialog projectId={projectId} columnId={columnId} />
+    </ProjectProvider>
+  );
+}

src/app/(app)/projects/error.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+export default function ProjectsError() {
+  return <div>Error occured</div>;
+}

src/app/(app)/projects/layout.tsx

@@ -0,0 +1,5 @@
+import type { PropsWithChildren } from "react";
+
+export default function ProjectsLayout({ children }: PropsWithChildren) {
+  return <div>{children}</div>;
+}

src/app/(app)/projects/page.tsx

@@ -0,0 +1,29 @@
+import { useFetchProjectsPage } from "@/modules/projects/hooks/use-fetch-projects-page";
+import { PresentationalCard } from "@/modules/projects/components/PresentationalCard";
+import { ProjectsTable } from "@/modules/projects/components/_tables/projects-table";
+import { AddProjectForm } from "@/modules/projects/components/_forms/add-project-form";
+import { ProjectsNavigation } from "@/modules/projects/components/ProjectsNavigation";
+
+export default async function ProjectsPage({
+  searchParams,
+}: {
+  searchParams: Record<string, string | string[] | undefined>;
+}) {
+  const { query } = searchParams;
+
+  const { projects } = await useFetchProjectsPage();
+
+  return (
+    <div className="m-auto max-w-3xl space-y-8 p-14">
+      <PresentationalCard />
+      <AddProjectForm />
+
+      {projects && (
+        <div className="flex flex-col gap-6">
+          <ProjectsNavigation />
+          <ProjectsTable projects={projects} />
+        </div>
+      )}
+    </div>
+  );
+}

src/components/layouts/SharingFilter/_index.tsx

@@ -2,7 +2,7 @@
 import { usePathname } from "next/navigation";
 import { SharingFilterMobile } from "./SharingFilterMobile";
 import { SharingFilterDesktop } from "./SharingFilterDesktop";
-import { URL } from "@/config/constants";
+import type { URL } from "@/config/constants";
 
 export type PathnameType = typeof URL.REPOSITORIES | typeof URL.RESOURCES;
 

src/components/layouts/Sidebar/SidebarNavigation.tsx

@@ -3,6 +3,7 @@ import {
   PersonIcon,
   RepoIcon,
   FileDirectoryIcon,
+  ProjectIcon,
 } from "@primer/octicons-react";
 import { Separator } from "@/components/ui/separator";
 import { SidebarNavigationLink } from "./SidebarNavigationLink";
@@ -31,6 +32,11 @@ const SidebarNavigationItems = [
     href: URL.RESOURCES,
     icon: FileDirectoryIcon,
   },
+  {
+    name: "Projects",
+    href: URL.PROJECTS,
+    icon: ProjectIcon,
+  },
   {
     name: "Settings",
     href: URL.SETTINGS,