feat: Add components and update global styles

tasker-client/src/app/(components)/Header/index.tsx

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+
+type Props = {
+  name: string;
+  buttonComponent?: any;
+  isSmallText?: boolean;
+};
+
+const Header = ({ name, buttonComponent, isSmallText = false }: Props) => {
+  return (
+    <div className="mb-5 flex w-full items-center justify-between">
+      <h1
+        className={`${isSmallText ? "text-lg" : "text-2xl"} font-semibold dark:text-white`}
+      >
+        {name}
+      </h1>
+      {buttonComponent}
+    </div>
+  );
+};
+
+export default Header;

tasker-client/src/app/globals.css

@@ -15,6 +15,6 @@ body,
   height: 100%;
   width: 100%;
   @apply text-sm;
-  @apply bg-gray-500;
-  @apply text-gray-900;
+  @apply bg-white;
+  @apply dark:bg-black;
 }

tasker-client/src/app/projects/BoardView/index.tsx

@@ -0,0 +1,263 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+import { useGetTasksQuery, useUpdateTaskStatusMutation } from "@/state/api";
+import { DndProvider, useDrag, useDrop } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { Task as TaskType } from "@/state/api";
+import { EllipsisVertical, MessageSquareMore, Plus } from "lucide-react";
+import { format } from "date-fns";
+import Image from "next/image";
+
+type BoardProps = {
+  id: string;
+  setIsModalNewTaskOpen: (isOpen: boolean) => void;
+};
+
+const taskStatuses = ["Backlog", "In Progress", "Test/Review", "Done"];
+
+function BoardView({ id, setIsModalNewTaskOpen }: BoardProps) {
+  const {
+    data: tasks,
+    isLoading,
+    error,
+  } = useGetTasksQuery({ projectId: Number(id) });
+
+  const [updateTaskStatus] = useUpdateTaskStatusMutation();
+
+  const moveTask = (taskId: number, status: string) => {
+    updateTaskStatus({ taskId, status });
+  };
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>Error fetching tasks</div>;
+
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <div className="grid grid-cols-1 gap-4 p-4 md:grid-cols-2 xl:grid-cols-4">
+        {taskStatuses.map((status) => (
+          <TaskColumn
+            key={status}
+            status={status}
+            tasks={tasks || []}
+            moveTask={moveTask}
+            setIsModalNewTaskOpen={setIsModalNewTaskOpen}
+          />
+        ))}
+      </div>
+    </DndProvider>
+  );
+}
+
+type TaskColumnProps = {
+  status: string;
+  tasks: TaskType[];
+  moveTask: (taskId: number, toStatus: string) => void;
+  setIsModalNewTaskOpen: (isOpen: boolean) => void;
+};
+
+const TaskColumn = ({
+  status,
+  tasks,
+  moveTask,
+  setIsModalNewTaskOpen,
+}: TaskColumnProps) => {
+  const [{ isOver }, drop] = useDrop(() => ({
+    accept: "task",
+    drop: (item: { id: number }) => {
+      moveTask(item.id, status);
+    },
+    collect: (monitor) => ({
+      isOver: !!monitor.isOver(),
+    }),
+  }));
+
+  const tasksCount = tasks.filter((task) => task.status === status).length;
+
+  const statusColors: any = {
+    Backlog: "#800000",
+    "In Progress": "#efcc00",
+    "Test/Review": "#00008b",
+    Done: "#006400",
+  };
+
+  return (
+    <div
+      ref={(instance) => {
+        drop(instance);
+      }}
+      className={`sl:py-4 rounded-lg py-2 xl:px-2 ${isOver ? "bg-blue-100 dark:bg-neutral-950" : ""}`}
+    >
+      <div className="mb-3 flex w-full">
+        <div
+          className={`w-2 !bg-[${statusColors[status]}] rounded-s-lg`}
+          style={{ backgroundColor: statusColors[status] }}
+        />
+        <div className="flex w-full items-center justify-between rounded-e-lg bg-white px-5 py-4 dark:bg-dark-secondary">
+          <h3 className="flex items-center text-lg font-semibold dark:text-white">
+            {status}{" "}
+            <span
+              className="ml-2 inline-block rounded-full bg-gray-200 p-1 text-center text-sm leading-none dark:bg-dark-tertiary"
+              style={{ width: "1.5rem", height: "1.5rem" }}
+            >
+              {tasksCount}
+            </span>
+          </h3>
+          <div className="flex items-center gap-1">
+            <button className="flex h-6 w-5 items-center justify-center dark:text-neutral-500">
+              <EllipsisVertical size={26} />
+            </button>
+            <button
+              className="flex h-6 w-6 items-center justify-center rounded bg-gray-200 dark:bg-dark-tertiary dark:text-white"
+              onClick={() => setIsModalNewTaskOpen(true)}
+            >
+              <Plus size={16} />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {tasks
+        .filter((task) => task.status === status)
+        .map((task) => (
+          <Task key={task.id} task={task} />
+        ))}
+    </div>
+  );
+};
+
+type TaskProps = {
+  task: TaskType;
+};
+
+const Task = ({ task }: TaskProps) => {
+  const [{ isDragging }, drag] = useDrag(() => ({
+    type: "task",
+    item: { id: task.id },
+    collect: (monitor: any) => ({
+      isDragging: !!monitor.isDragging(),
+    }),
+  }));
+
+  const taskTagsSplit = task.tags ? task.tags.split(",") : [];
+
+  const formattedStartDate = task.startDate
+    ? format(new Date(task.startDate), "P")
+    : "";
+  const formattedDueDate = task.dueDate
+    ? format(new Date(task.dueDate), "P")
+    : "";
+
+  const numberOfComments = (task.comments && task.comments.length) || 0;
+
+  const PriorityTag = ({ priority }: { priority: TaskType["priority"] }) => (
+    <div
+      className={`rounded-full px-2 py-1 text-xs font-semibold ${
+        priority === "Urgent"
+          ? "bg-red-200 text-red-700"
+          : priority === "High"
+            ? "bg-yellow-200 text-yellow-700"
+            : priority === "Medium"
+              ? "bg-green-200 text-green-700"
+              : priority === "Low"
+                ? "bg-blue-200 text-blue-700"
+                : "bg-gray-200 text-gray-700"
+      }`}
+    >
+      {priority}
+    </div>
+  );
+
+  return (
+    <div
+      ref={(instance) => {
+        drag(instance);
+      }}
+      className={`mb-4 rounded-md bg-white shadow dark:bg-dark-secondary ${
+        isDragging ? "opacity-50" : "opacity-100"
+      }`}
+    >
+      {task.attachments && task.attachments.length > 0 && (
+        <Image
+          src={`${task.attachments[0].fileURL}`}
+          alt={task.attachments[0].fileName}
+          width={400}
+          height={200}
+          className="h-auto w-full rounded-t-md"
+        />
+      )}
+      <div className="p-4 md:p-6">
+        <div className="flex items-start justify-between">
+          <div className="flex flex-1 flex-wrap items-center gap-2">
+            {task.priority && <PriorityTag priority={task.priority} />}
+            <div className="flex gap-2">
+              {taskTagsSplit.map((tag) => (
+                <div
+                  key={tag}
+                  className="rounded-full bg-blue-100 px-2 py-1 text-xs"
+                >
+                  {" "}
+                  {tag}
+                </div>
+              ))}
+            </div>
+          </div>
+          <button className="flex h-6 w-4 flex-shrink-0 items-center justify-center dark:text-neutral-500">
+            <EllipsisVertical size={26} />
+          </button>
+        </div>
+
+        <div className="my-3 flex justify-between">
+          <h4 className="text-md font-bold dark:text-white">{task.title}</h4>
+          {typeof task.points === "number" && (
+            <div className="text-xs font-semibold dark:text-white">
+              {task.points} pts
+            </div>
+          )}
+        </div>
+
+        <div className="text-xs text-gray-500 dark:text-neutral-500">
+          {formattedStartDate && <span>{formattedStartDate} - </span>}
+          {formattedDueDate && <span>{formattedDueDate}</span>}
+        </div>
+        <p className="text-sm text-gray-600 dark:text-neutral-500">
+          {task.description}
+        </p>
+        <div className="mt-4 border-t border-gray-200 dark:border-stroke-dark" />
+
+        {/* Users */}
+        <div className="mt-3 flex items-center justify-between">
+          <div className="flex -space-x-[6px] overflow-hidden">
+            {task.assignee && (
+              <Image
+                key={task.assignee.userId}
+                src={`${task.assignee.profilePictureUrl!}`}
+                alt={task.assignee.username}
+                width={30}
+                height={30}
+                className="h-8 w-8 rounded-full border-2 border-white object-cover dark:border-dark-secondary"
+              />
+            )}
+            {task.author && (
+              <Image
+                key={task.author.userId}
+                src={`${task.author.profilePictureUrl!}`}
+                alt={task.author.username}
+                width={30}
+                height={30}
+                className="h-8 w-8 rounded-full border-2 border-white object-cover dark:border-dark-secondary"
+              />
+            )}
+          </div>
+          <div className="flex items-center text-gray-500 dark:text-neutral-500">
+            <MessageSquareMore size={20} />
+            <span className="ml-1 text-sm dark:text-neutral-400">
+              {numberOfComments}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BoardView;

tasker-client/src/app/projects/ProjectHeader.tsx

@@ -0,0 +1,109 @@
+import {
+  Clock,
+  Filter,
+  Grid3x3,
+  List,
+  PlusSquare,
+  Share2,
+  Table,
+} from "lucide-react";
+import React, { useState } from "react";
+import Header from "../(components)/Header";
+
+type Props = {
+  activeTab: string;
+  setActiveTab: (tab: string) => void;
+};
+
+const ProjectHeader = ({ activeTab, setActiveTab }: Props) => {
+  const [isModalNewProjectOpen, setIsModalNewProjectOpen] = useState(false);
+
+  return (
+    <div className="px-4 xl:px-6">
+      <div className="pb-6 pt-6 lg:pb-4 lg:pt-8">
+        <Header
+          name="Product Design Development"
+          buttonComponent={
+            <button
+              className="flex items-center rounded-md bg-blue-primary px-3 py-2 text-white hover:bg-blue-600"
+              onClick={() => setIsModalNewProjectOpen(true)}
+            >
+              <PlusSquare className="mr-2 h-5 w-5" /> New Boards
+            </button>
+          }
+        />
+      </div>
+
+      {/* TABS */}
+      <div className="flex flex-wrap-reverse gap-2 border-y border-gray-200 pb-[8px] pt-2 dark:border-stroke-dark md:items-center">
+        <div className="flex flex-1 items-center gap-2 md:gap-4">
+          <TabButton
+            name="Board"
+            icon={<Grid3x3 className="h-5 w-5" />}
+            setActiveTab={setActiveTab}
+            activeTab={activeTab}
+          />
+          <TabButton
+            name="List"
+            icon={<List className="h-5 w-5" />}
+            setActiveTab={setActiveTab}
+            activeTab={activeTab}
+          />
+          <TabButton
+            name="Timeline"
+            icon={<Clock className="h-5 w-5" />}
+            setActiveTab={setActiveTab}
+            activeTab={activeTab}
+          />
+          <TabButton
+            name="Table"
+            icon={<Table className="h-5 w-5" />}
+            setActiveTab={setActiveTab}
+            activeTab={activeTab}
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <button className="text-gray-500 hover:text-gray-600 dark:text-neutral-500 dark:hover:text-gray-300">
+            <Filter className="h-5 w-5" />
+          </button>
+          <button className="text-gray-500 hover:text-gray-600 dark:text-neutral-500 dark:hover:text-gray-300">
+            <Share2 className="h-5 w-5" />
+          </button>
+          <div className="relative">
+            <input
+              type="text"
+              placeholder="Search for Task"
+              className="rounded-md border py-1 pl-10 pr-4 focus:outline-none dark:border-dark-secondary dark:bg-dark-secondary dark:text-white"
+            />
+            <Grid3x3 className="absolute left-3 top-2 h-4 w-4 text-gray-400 dark:text-neutral-500" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+type TabButtonProps = {
+  name: string;
+  icon: React.ReactNode;
+  setActiveTab: (tabName: string) => void;
+  activeTab: string;
+};
+
+const TabButton = ({ name, icon, setActiveTab, activeTab }: TabButtonProps) => {
+  const isActive = activeTab === name;
+
+  return (
+    <button
+      className={`relative flex items-center gap-2 px-1 py-2 text-gray-500 after:absolute after:-bottom-[9px] after:left-0 after:h-[1px] after:w-full hover:text-blue-600 dark:text-neutral-500 dark:hover:text-white sm:px-2 lg:px-4 ${
+        isActive ? "text-blue-600 after:bg-blue-600 dark:text-white" : ""
+      }`}
+      onClick={() => setActiveTab(name)}
+    >
+      {icon}
+      {name}
+    </button>
+  );
+};
+
+export default ProjectHeader;

tasker-client/src/app/projects/[id]/page.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import React, { useState } from "react";
+import ProjectHeader from "@/app/projects/ProjectHeader";
+import BoardView from "@/app/projects/BoardView";
+
+type Props = {
+  params: { id: string };
+};
+
+const Project = ({ params }: Props) => {
+  const { id } = params;
+  const [activeTab, setActiveTab] = useState("Board");
+  const [isModalNewTaskOpen, setIsModalNewTaskOpen] = useState(false);
+
+  return (
+    <div>
+      {/* <ModalNewTask
+        isOpen={isModalNewTaskOpen}
+        onClose={() => setIsModalNewTaskOpen(false)}
+        id={id}
+      /> */}
+      <ProjectHeader activeTab={activeTab} setActiveTab={setActiveTab} />
+      {
+        activeTab === "Board" && (
+          <BoardView id={id} setIsModalNewTaskOpen={setIsModalNewTaskOpen} />
+        )
+        // {activeTab === "List" && (
+        //   <List id={id} setIsModalNewTaskOpen={setIsModalNewTaskOpen} />
+        // )}
+        // {activeTab === "Timeline" && (
+        //   <Timeline id={id} setIsModalNewTaskOpen={setIsModalNewTaskOpen} />
+        // )}
+        // {activeTab === "Table" && (
+        //   <Table id={id} setIsModalNewTaskOpen={setIsModalNewTaskOpen} />
+        // )}
+      }
+    </div>
+  );
+};
+
+export default Project;

tasker-client/src/state/api.ts

@@ -1,10 +1,151 @@
-import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query";
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+
+export interface Project {
+  id: number;
+  name: string;
+  description?: string;
+  startDate?: string;
+  endDate?: string;
+}
+
+export enum Priority {
+  Urgent = "Urgent",
+  High = "High",
+  Medium = "Medium",
+  Low = "Low",
+  Backlog = "Backlog",
+}
+
+export enum Status {
+  Backlog = "Backlog",
+  InProgress = "In Progress",
+  TestReview = "Test/Review",
+  Done = "Done",
+}
+
+export interface User {
+  userId?: number;
+  username: string;
+  email: string;
+  profilePictureUrl?: string;
+  cognitoId?: string;
+  teamId?: number;
+}
+
+export interface Attachment {
+  id: number;
+  fileURL: string;
+  fileName: string;
+  taskId: number;
+  uploadedById: number;
+}
+
+export interface Task {
+  id: number;
+  title: string;
+  description?: string;
+  status?: Status;
+  priority?: Priority;
+  tags?: string;
+  startDate?: string;
+  dueDate?: string;
+  points?: number;
+  projectId: number;
+  authorUserId?: number;
+  assignedUserId?: number;
+
+  author?: User;
+  assignee?: User;
+  comments?: Comment[];
+  attachments?: Attachment[];
+}
+
+export interface SearchResults {
+  tasks?: Task[];
+  projects?: Project[];
+  users?: User[];
+}
+
+export interface Team {
+  teamId: number;
+  teamName: string;
+  productOwnerUserId?: number;
+  projectManagerUserId?: number;
+}
 
 export const api = createApi({
-  baseQuery: fetchBaseQuery({ baseUrl: process.env.NEXT_PUBLIC_API_BASE_URL }),
+  baseQuery: fetchBaseQuery({
+    baseUrl: process.env.NEXT_PUBLIC_API_BASE_URL,
+  }),
   reducerPath: "api",
-  tagTypes: ["Task"],
-  endpoints: (builder) => ({}),
+  tagTypes: ["Projects", "Tasks", "Users", "Teams"],
+  endpoints: (build) => ({
+    getProjects: build.query<Project[], void>({
+      query: () => "projects",
+      providesTags: ["Projects"],
+    }),
+    createProject: build.mutation<Project, Partial<Project>>({
+      query: (project) => ({
+        url: "projects",
+        method: "POST",
+        body: project,
+      }),
+      invalidatesTags: ["Projects"],
+    }),
+    getTasks: build.query<Task[], { projectId: number }>({
+      query: ({ projectId }) => `tasks?projectId=${projectId}`,
+      providesTags: (result) =>
+        result
+          ? result.map(({ id }) => ({ type: "Tasks" as const, id }))
+          : [{ type: "Tasks" as const }],
+    }),
+    getTasksByUser: build.query<Task[], number>({
+      query: (userId) => `tasks/user/${userId}`,
+      providesTags: (result, error, userId) =>
+        result
+          ? result.map(({ id }) => ({ type: "Tasks", id }))
+          : [{ type: "Tasks", id: userId }],
+    }),
+    createTask: build.mutation<Task, Partial<Task>>({
+      query: (task) => ({
+        url: "tasks",
+        method: "POST",
+        body: task,
+      }),
+      invalidatesTags: ["Tasks"],
+    }),
+    updateTaskStatus: build.mutation<Task, { taskId: number; status: string }>({
+      query: ({ taskId, status }) => ({
+        url: `tasks/${taskId}/status`,
+        method: "PATCH",
+        body: { status },
+      }),
+      invalidatesTags: (result, error, { taskId }) => [
+        { type: "Tasks", id: taskId },
+      ],
+    }),
+    getUsers: build.query<User[], void>({
+      query: () => "users",
+      providesTags: ["Users"],
+    }),
+    getTeams: build.query<Team[], void>({
+      query: () => "teams",
+      providesTags: ["Teams"],
+    }),
+    search: build.query<SearchResults, string>({
+      query: (query) => `search?query=${query}`,
+    }),
+  }),
 });
 
-export const {} = api;
+export const {
+  useGetProjectsQuery,
+  useCreateProjectMutation,
+  useGetTasksQuery,
+  useCreateTaskMutation,
+  useUpdateTaskStatusMutation,
+  useSearchQuery,
+  useGetUsersQuery,
+  useGetTeamsQuery,
+  useGetTasksByUserQuery,
+} = api;