From 10e5ba7b3e052c804b279c97f3032419259d2578 Mon Sep 17 00:00:00 2001
From: Saheb Giri <47132373+iamsahebgiri@users.noreply.github.com>
Date: Thu, 23 Mar 2023 11:01:06 +0530
Subject: [PATCH] feat: add pages and page blocks (#495)

* chore: add page types and page api service

* chore: add create, list, update and delete on pages

* chore: add create, delete and patch page blocks

* feat: add and remove pages to favorite

* fix: made neccessary changes

- used tailwind for hover events
- add error toast alert
- used partial for patch request

* fix: replace absolute positiong with a flex box
---
 .../pages/create-update-page-modal.tsx        | 136 ++++++++++++
 .../components/pages/delete-page-modal.tsx    | 138 ++++++++++++
 apps/app/components/pages/index.ts            |   5 +
 apps/app/components/pages/page-form.tsx       |  97 +++++++++
 apps/app/components/pages/pages-list.tsx      |  67 ++++++
 .../pages/single-page-list-item.tsx           | 161 ++++++++++++++
 .../project/single-sidebar-project.tsx        |   5 +
 apps/app/constants/fetch-keys.ts              |   6 +
 .../projects/[projectId]/pages/[pageId].tsx   | 199 ++++++++++++++++++
 .../projects/[projectId]/pages/index.tsx      | 121 +++++++++++
 apps/app/services/pages.service.ts            | 158 ++++++++++++++
 apps/app/types/index.d.ts                     |   1 +
 apps/app/types/pages.d.ts                     |  74 +++++++
 13 files changed, 1168 insertions(+)
 create mode 100644 apps/app/components/pages/create-update-page-modal.tsx
 create mode 100644 apps/app/components/pages/delete-page-modal.tsx
 create mode 100644 apps/app/components/pages/index.ts
 create mode 100644 apps/app/components/pages/page-form.tsx
 create mode 100644 apps/app/components/pages/pages-list.tsx
 create mode 100644 apps/app/components/pages/single-page-list-item.tsx
 create mode 100644 apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
 create mode 100644 apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
 create mode 100644 apps/app/services/pages.service.ts
 create mode 100644 apps/app/types/pages.d.ts

diff --git a/apps/app/components/pages/create-update-page-modal.tsx b/apps/app/components/pages/create-update-page-modal.tsx
new file mode 100644
index 000000000..e96c41e36
--- /dev/null
+++ b/apps/app/components/pages/create-update-page-modal.tsx
@@ -0,0 +1,136 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import pagesService from "services/pages.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { PageForm } from "./page-form";
+// types
+import { IPage, IPageForm } from "types";
+// fetch-keys
+import { PAGE_LIST } from "constants/fetch-keys";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  data?: IPage;
+};
+
+export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, data }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const onClose = () => {
+    handleClose();
+  };
+
+  const createPage = async (payload: IPageForm) => {
+    await pagesService
+      .createPage(workspaceSlug as string, projectId as string, payload)
+      .then(() => {
+        mutate(PAGE_LIST(projectId as string));
+        onClose();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Page created successfully.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Page could not be created. Please try again.",
+        });
+      });
+  };
+
+  const updatePage = async (payload: IPageForm) => {
+    await pagesService
+      .patchPage(workspaceSlug as string, projectId as string, data?.id ?? "", payload)
+      .then((res) => {
+        mutate<IPage[]>(
+          PAGE_LIST(projectId as string),
+          (prevData) =>
+            prevData?.map((p) => {
+              if (p.id === res.id) return { ...p, ...payload };
+
+              return p;
+            }),
+          false
+        );
+        onClose();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Page updated successfully.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Page could not be updated. Please try again.",
+        });
+      });
+  };
+
+  const handleFormSubmit = async (formData: IPageForm) => {
+    if (!workspaceSlug || !projectId) return;
+
+    if (!data) await createPage(formData);
+    else await updatePage(formData);
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform rounded-lg bg-white px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <PageForm
+                  handleFormSubmit={handleFormSubmit}
+                  handleClose={handleClose}
+                  status={data ? true : false}
+                  data={data}
+                />
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/apps/app/components/pages/delete-page-modal.tsx b/apps/app/components/pages/delete-page-modal.tsx
new file mode 100644
index 000000000..f78b5f36e
--- /dev/null
+++ b/apps/app/components/pages/delete-page-modal.tsx
@@ -0,0 +1,138 @@
+import React, { useState } from "react";
+// next
+import { useRouter } from "next/router";
+// swr
+import { mutate } from "swr";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import pagesService from "services/pages.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { DangerButton, SecondaryButton } from "components/ui";
+// icons
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+// types
+import type { IPage } from "types";
+type TConfirmPageDeletionProps = {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  data?: IPage;
+};
+// fetch-keys
+import { PAGE_LIST } from "constants/fetch-keys";
+
+export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
+  isOpen,
+  setIsOpen,
+  data,
+}) => {
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const handleClose = () => {
+    setIsOpen(false);
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    setIsDeleteLoading(true);
+    if (!data || !workspaceSlug) return;
+
+    await pagesService
+      .deletePage(workspaceSlug as string, data.project, data.id)
+      .then(() => {
+        mutate<IPage[]>(
+          PAGE_LIST(data.project),
+          (prevData) => prevData?.filter((page) => page.id !== data?.id),
+          false
+        );
+        handleClose();
+
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Page deleted successfully",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Page could not be deleted. Please try again.",
+        });
+      })
+      .finally(() => {
+        setIsDeleteLoading(false);
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+                <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                      <ExclamationTriangleIcon
+                        className="h-6 w-6 text-red-600"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+                        Delete Page
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-sm text-gray-500">
+                          Are you sure you want to delete Page - {`"`}
+                          <span className="italic">{data?.name}</span>
+                          {`"`} ? All of the data related to the page will be permanently removed.
+                          This action cannot be undone.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-end gap-2 bg-gray-50 p-4 sm:px-6">
+                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
+                    {isDeleteLoading ? "Deleting..." : "Delete"}
+                  </DangerButton>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/apps/app/components/pages/index.ts b/apps/app/components/pages/index.ts
new file mode 100644
index 000000000..d9700fc66
--- /dev/null
+++ b/apps/app/components/pages/index.ts
@@ -0,0 +1,5 @@
+export * from "./create-update-page-modal";
+export * from "./delete-page-modal";
+export * from "./page-form";
+export * from "./pages-list";
+export * from "./single-page-list-item";
diff --git a/apps/app/components/pages/page-form.tsx b/apps/app/components/pages/page-form.tsx
new file mode 100644
index 000000000..452fa35db
--- /dev/null
+++ b/apps/app/components/pages/page-form.tsx
@@ -0,0 +1,97 @@
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+// ui
+import { Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+// types
+import { IPageForm } from "types";
+
+type Props = {
+  handleFormSubmit: (values: IPageForm) => Promise<void>;
+  handleClose: () => void;
+  status: boolean;
+  data?: IPageForm;
+};
+
+const defaultValues: IPageForm = {
+  name: "",
+  description: "",
+};
+
+export const PageForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status, data }) => {
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+  } = useForm<IPageForm>({
+    defaultValues,
+  });
+
+  const handleCreateUpdatePage = async (formData: IPageForm) => {
+    await handleFormSubmit(formData);
+
+    reset({
+      ...defaultValues,
+    });
+  };
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...data,
+    });
+  }, [data, reset]);
+
+  return (
+    <form onSubmit={handleSubmit(handleCreateUpdatePage)}>
+      <div className="space-y-5">
+        <h3 className="text-lg font-medium leading-6 text-gray-900">
+          {status ? "Update" : "Create"} Page
+        </h3>
+        <div className="space-y-3">
+          <div>
+            <Input
+              id="name"
+              label="Name"
+              name="name"
+              type="name"
+              placeholder="Enter name"
+              autoComplete="off"
+              error={errors.name}
+              register={register}
+              validations={{
+                required: "Name is required",
+                maxLength: {
+                  value: 255,
+                  message: "Name should be less than 255 characters",
+                },
+              }}
+            />
+          </div>
+          <div>
+            <TextArea
+              id="description"
+              name="description"
+              label="Description"
+              placeholder="Enter description"
+              error={errors.description}
+              register={register}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="mt-5 flex justify-end gap-2">
+        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+        <PrimaryButton type="submit" loading={isSubmitting}>
+          {status
+            ? isSubmitting
+              ? "Updating Page..."
+              : "Update Page"
+            : isSubmitting
+            ? "Creating Page..."
+            : "Create Page"}
+        </PrimaryButton>
+      </div>
+    </form>
+  );
+};
diff --git a/apps/app/components/pages/pages-list.tsx b/apps/app/components/pages/pages-list.tsx
new file mode 100644
index 000000000..8bfc2b069
--- /dev/null
+++ b/apps/app/components/pages/pages-list.tsx
@@ -0,0 +1,67 @@
+import { useState } from "react";
+// components
+import { DeletePageModal } from "components/pages";
+import { Loader } from "components/ui";
+// types
+import { IPage } from "types";
+import { SinglePageListItem } from "./single-page-list-item";
+type TPagesListProps = {
+  pages: IPage[] | undefined;
+  setCreateUpdatePageModal: React.Dispatch<React.SetStateAction<boolean>>;
+  setSelectedPage: React.Dispatch<React.SetStateAction<any>>;
+};
+
+export const PagesList: React.FC<TPagesListProps> = ({
+  pages,
+  setCreateUpdatePageModal,
+  setSelectedPage,
+}) => {
+  const [pageDeleteModal, setPageDeleteModal] = useState(false);
+  const [selectedPageForDelete, setSelectedPageForDelete] = useState<any>();
+
+  const handleDeletePage = (page: IPage) => {
+    setSelectedPageForDelete({ ...page, actionType: "delete" });
+    setPageDeleteModal(true);
+  };
+
+  const handleEditPage = (page: IPage) => {
+    setSelectedPage({ ...page, actionType: "edit" });
+    setCreateUpdatePageModal(true);
+  };
+
+  return (
+    <>
+      <DeletePageModal
+        isOpen={
+          pageDeleteModal &&
+          !!selectedPageForDelete &&
+          selectedPageForDelete.actionType === "delete"
+        }
+        setIsOpen={setPageDeleteModal}
+        data={selectedPageForDelete}
+      />
+      {pages ? (
+        pages.length > 0 ? (
+          <div className="border border-gray-200 bg-white sm:rounded-[10px] ">
+            <ul role="list" className="divide-y divide-gray-200">
+              {pages.map((page) => (
+                <SinglePageListItem
+                  page={page}
+                  key={page.id}
+                  handleDeletePage={() => handleDeletePage(page)}
+                  handleEditPage={() => handleEditPage(page)}
+                />
+              ))}
+            </ul>
+          </div>
+        ) : (
+          "No Pages found"
+        )
+      ) : (
+        <Loader className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
+          <Loader.Item height="200px" />
+        </Loader>
+      )}
+    </>
+  );
+};
diff --git a/apps/app/components/pages/single-page-list-item.tsx b/apps/app/components/pages/single-page-list-item.tsx
new file mode 100644
index 000000000..93fecd66b
--- /dev/null
+++ b/apps/app/components/pages/single-page-list-item.tsx
@@ -0,0 +1,161 @@
+import React from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { mutate } from "swr";
+
+// services
+import pagesService from "services/pages.service";
+// ui
+import { CustomMenu } from "components/ui";
+// icons
+import { PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
+// helpers
+import { truncateText } from "helpers/string.helper";
+// hooks
+import useToast from "hooks/use-toast";
+// types
+import { IPage } from "types";
+// fetch keys
+import { PAGE_LIST } from "constants/fetch-keys";
+
+type TSingleStatProps = {
+  page: IPage;
+  handleEditPage: () => void;
+  handleDeletePage: () => void;
+};
+
+const Label: React.FC<any> = (props) => {
+  let color = "bg-green-100 text-green-800";
+  if (props.variant === "red") {
+    color = "bg-red-100 text-red-800";
+  } else if (props.variant === "blue") {
+    color = "bg-blue-100 text-blue-800";
+  }
+  return (
+    <p className={`inline-flex rounded-full px-2 text-xs font-semibold leading-5 ${color}`}>
+      {props.children}
+    </p>
+  );
+};
+
+export const SinglePageListItem: React.FC<TSingleStatProps> = (props) => {
+  const { page, handleEditPage, handleDeletePage } = props;
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const handleAddToFavorites = () => {
+    if (!workspaceSlug && !projectId && !page) return;
+
+    pagesService
+      .addPageToFavorites(workspaceSlug as string, projectId as string, {
+        page: page.id,
+      })
+      .then(() => {
+        mutate<IPage[]>(
+          PAGE_LIST(projectId as string),
+          (prevData) =>
+            (prevData ?? []).map((m) => ({
+              ...m,
+              is_favorite: m.id === page.id ? true : m.is_favorite,
+            })),
+          false
+        );
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Successfully added the page to favorites.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't add the page to favorites. Please try again.",
+        });
+      });
+  };
+
+  const handleRemoveFromFavorites = () => {
+    if (!workspaceSlug || !page) return;
+
+    pagesService
+      .removePageFromFavorites(workspaceSlug as string, projectId as string, page.id)
+      .then(() => {
+        mutate<IPage[]>(
+          PAGE_LIST(projectId as string),
+          (prevData) =>
+            (prevData ?? []).map((m) => ({
+              ...m,
+              is_favorite: m.id === page.id ? false : m.is_favorite,
+            })),
+          false
+        );
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Successfully removed the page from favorites.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't remove the page from favorites. Please try again.",
+        });
+      });
+  };
+
+  return (
+    <div>
+      <li>
+        <div className="relative px-4 py-4 hover:bg-gray-50 sm:px-6">
+          <div className="flex items-center justify-between">
+            <div className="flex gap-2">
+              <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
+                <a className="after:absolute after:inset-0">
+                  <p className="mr-2 truncate text-sm font-medium">{truncateText(page.name, 75)}</p>
+                </a>
+              </Link>
+              <Label variant="green">Meetings</Label>
+              <Label variant="red">Standup</Label>
+              <Label variant="blue">Plans</Label>
+            </div>
+            <div className="ml-2 flex flex-shrink-0">
+              <div className="flex items-center gap-2">
+                <p className="text-sm text-gray-400">
+                  {new Date(page.updated_at).toLocaleTimeString()}
+                </p>
+                {page.is_favorite ? (
+                  <button onClick={handleRemoveFromFavorites} className="z-10">
+                    <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                  </button>
+                ) : (
+                  <button onClick={handleAddToFavorites} type="button" className="z-10">
+                    <StarIcon className="h-4 w-4 " color="#858E96" />
+                  </button>
+                )}
+                <CustomMenu width="auto" verticalEllipsis>
+                  <CustomMenu.MenuItem onClick={handleEditPage}>
+                    <span className="flex items-center justify-start gap-2 text-gray-800">
+                      <PencilIcon className="h-4 w-4" />
+                      <span>Edit Page</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={handleDeletePage}>
+                    <span className="flex items-center justify-start gap-2 text-gray-800">
+                      <TrashIcon className="h-4 w-4" />
+                      <span>Delete Page</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                </CustomMenu>
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  );
+};
diff --git a/apps/app/components/project/single-sidebar-project.tsx b/apps/app/components/project/single-sidebar-project.tsx
index 60a03b14d..380852ff9 100644
--- a/apps/app/components/project/single-sidebar-project.tsx
+++ b/apps/app/components/project/single-sidebar-project.tsx
@@ -49,6 +49,11 @@ const navigation = (workspaceSlug: string, projectId: string) => [
     href: `/${workspaceSlug}/projects/${projectId}/views`,
     icon: ViewListIcon,
   },
+  {
+    name: "Pages",
+    href: `/${workspaceSlug}/projects/${projectId}/pages`,
+    icon: ViewListIcon,
+  },
   {
     name: "Settings",
     href: `/${workspaceSlug}/projects/${projectId}/settings`,
diff --git a/apps/app/constants/fetch-keys.ts b/apps/app/constants/fetch-keys.ts
index c01052afe..cfdcaccf5 100644
--- a/apps/app/constants/fetch-keys.ts
+++ b/apps/app/constants/fetch-keys.ts
@@ -99,3 +99,9 @@ export const VIEW_DETAILS = (viewId: string) => `VIEW_DETAILS_${viewId}`;
 // Issues
 export const ISSUE_DETAILS = (issueId: string) => `ISSUE_DETAILS_${issueId}`;
 export const SUB_ISSUES = (issueId: string) => `SUB_ISSUES_${issueId}`;
+
+// Pages
+export const PAGE_LIST = (pageId: string) => `PAGE_LIST_${pageId}`;
+export const PAGE_DETAILS = (pageId: string) => `PAGE_DETAILS_${pageId}`;
+export const PAGE_BLOCK_LIST = (pageId: string) => `PAGE_BLOCK_LIST_${pageId}`;
+export const PAGE_BLOCK_DETAILS = (pageId: string) => `PAGE_BLOCK_DETAILS_${pageId}`;
\ No newline at end of file
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
new file mode 100644
index 000000000..6ecaaf980
--- /dev/null
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -0,0 +1,199 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// lib
+import { requiredAuth } from "lib/auth";
+
+// services
+import projectService from "services/project.service";
+
+// layouts
+import AppLayout from "layouts/app-layout";
+// ui
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+
+// fetching keys
+import { PAGE_BLOCK_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+// components
+import { CustomMenu } from "components/ui";
+
+// types
+import { IPageBlock, IView } from "types";
+import type { NextPage, GetServerSidePropsContext } from "next";
+import pagesService from "services/pages.service";
+import useToast from "hooks/use-toast";
+
+const PageBlock: React.FC<any> = ({ pageBlock }: { pageBlock: IPageBlock }) => {
+  const [name, setName] = useState(pageBlock.name);
+  const { setToastAlert } = useToast();
+  const {
+    query: { workspaceSlug, projectId, pageId },
+  } = useRouter();
+
+  const updatePageBlock = async () => {
+    const pageBlockId = pageBlock.id;
+    await pagesService
+      .patchPageBlock(
+        workspaceSlug as string,
+        projectId as string,
+        pageId as string,
+        pageBlockId as string,
+        {
+          name,
+        }
+      )
+      .then(() => {
+        mutate(PAGE_BLOCK_LIST(pageId as string));
+        console.log("Updated block");
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Page could not be updated. Please try again.",
+        });
+      });
+  };
+
+  const deletePageBlock = async () => {
+    const pageBlockId = pageBlock.id;
+    await pagesService
+      .deletePageBlock(
+        workspaceSlug as string,
+        projectId as string,
+        pageId as string,
+        pageBlockId as string
+      )
+      .then(() => {
+        mutate(PAGE_BLOCK_LIST(pageId as string));
+        console.log("deleted block");
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Page could not be deleted. Please try again.",
+        });
+      });
+  };
+
+  return (
+    <li className="group flex justify-between rounded p-2 hover:bg-slate-100">
+      <input
+        type="text"
+        value={name}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            console.log("Updating...");
+            updatePageBlock();
+          }
+        }}
+        onChange={(e) => {
+          setName(e.target.value);
+        }}
+        className="border-none bg-transparent outline-none"
+      />
+      <div className="hidden group-hover:block">
+        <CustomMenu>
+          <CustomMenu.MenuItem>Convert to issue</CustomMenu.MenuItem>
+          <CustomMenu.MenuItem onClick={deletePageBlock}>Delete block</CustomMenu.MenuItem>
+        </CustomMenu>
+      </div>
+    </li>
+  );
+};
+
+const ProjectPages: NextPage = () => {
+  const { setToastAlert } = useToast();
+  const {
+    query: { workspaceSlug, projectId, pageId },
+  } = useRouter();
+
+  const { data: activeProject } = useSWR(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: pageBlocks } = useSWR(
+    workspaceSlug && projectId && pageId ? PAGE_BLOCK_LIST(pageId as string) : null,
+    workspaceSlug && projectId
+      ? () =>
+          pagesService.listPageBlocks(
+            workspaceSlug as string,
+            projectId as string,
+            pageId as string
+          )
+      : null
+  );
+
+  const createPageBlock = async () => {
+    await pagesService
+      .createPageBlock(workspaceSlug as string, projectId as string, pageId as string, {
+        name: "New block",
+      })
+      .then(() => {
+        mutate(PAGE_BLOCK_LIST(pageId as string));
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Page could not be created. Please try again.",
+        });
+      });
+  };
+
+  return (
+    <AppLayout
+      meta={{
+        title: "Plane - Pages",
+      }}
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+          <BreadcrumbItem title={`${activeProject?.name ?? "Project"} Pages`} />
+        </Breadcrumbs>
+      }
+    >
+      <div className="flex space-x-4 px-2">
+        <button onClick={createPageBlock}>Li</button>
+        <button onClick={() => {}}>P</button>
+      </div>
+      <div className="rounded border border-slate-200 bg-white p-4 ">
+        {pageBlocks
+          ? pageBlocks.length === 0
+            ? "Write something..."
+            : pageBlocks.map((pageBlock) => <PageBlock key={pageBlock.id} pageBlock={pageBlock} />)
+          : "Loading..."}
+      </div>
+    </AppLayout>
+  );
+};
+
+export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
+  const user = await requiredAuth(ctx.req?.headers.cookie);
+
+  const redirectAfterSignIn = ctx.resolvedUrl;
+
+  if (!user) {
+    return {
+      redirect: {
+        destination: `/signin?next=${redirectAfterSignIn}`,
+        permanent: false,
+      },
+    };
+  }
+
+  return {
+    props: {
+      user,
+    },
+  };
+};
+
+export default ProjectPages;
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
new file mode 100644
index 000000000..e8d6c74de
--- /dev/null
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -0,0 +1,121 @@
+import { useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
+import type { GetServerSidePropsContext, NextPage } from "next";
+
+import useSWR from "swr";
+
+// lib
+import { requiredAuth } from "lib/auth";
+
+// services
+import projectService from "services/project.service";
+import pagesService from "services/pages.service";
+// icons
+import { PlusIcon } from "components/icons";
+// layouts
+import AppLayout from "layouts/app-layout";
+// ui
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// fetching keys
+import { PAGE_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+// components
+import { HeaderButton } from "components/ui";
+import { CreateUpdatePageModal } from "components/pages/create-update-page-modal";
+import { PagesList } from "components/pages/pages-list";
+import { IPage } from "types";
+
+const ProjectPages: NextPage = () => {
+  const [isCreateUpdatePageModalOpen, setIsCreateUpdatePageModalOpen] = useState(false);
+  const [selectedPage, setSelectedPage] = useState<IPage>();
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: activeProject } = useSWR(
+    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  const { data: pages } = useSWR(
+    workspaceSlug && projectId ? PAGE_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => pagesService.listPages(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  useEffect(() => {
+    if (isCreateUpdatePageModalOpen) return;
+    const timer = setTimeout(() => {
+      setSelectedPage(undefined);
+      clearTimeout(timer);
+    }, 500);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [isCreateUpdatePageModalOpen]);
+
+  return (
+    <AppLayout
+      meta={{
+        title: "Plane - Pages",
+      }}
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+          <BreadcrumbItem title={`${activeProject?.name ?? "Project"} Pages`} />
+        </Breadcrumbs>
+      }
+      right={
+        <HeaderButton
+          Icon={PlusIcon}
+          label="Create Page"
+          onClick={() => setIsCreateUpdatePageModalOpen(true)}
+        />
+      }
+    >
+      <CreateUpdatePageModal
+        isOpen={isCreateUpdatePageModalOpen}
+        handleClose={() => setIsCreateUpdatePageModalOpen(false)}
+        data={selectedPage}
+      />
+      <div className="space-y-2 pb-8">
+        <h3 className="text-3xl font-semibold text-black">Pages</h3>
+        <p className="text-sm text-gray-500">
+          Note down all the important and minor details in the way you want to.
+        </p>
+      </div>
+      <PagesList
+        setSelectedPage={setSelectedPage}
+        setCreateUpdatePageModal={setIsCreateUpdatePageModalOpen}
+        pages={pages}
+      />
+    </AppLayout>
+  );
+};
+
+export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
+  const user = await requiredAuth(ctx.req?.headers.cookie);
+
+  const redirectAfterSignIn = ctx.resolvedUrl;
+
+  if (!user) {
+    return {
+      redirect: {
+        destination: `/signin?next=${redirectAfterSignIn}`,
+        permanent: false,
+      },
+    };
+  }
+
+  return {
+    props: {
+      user,
+    },
+  };
+};
+
+export default ProjectPages;
diff --git a/apps/app/services/pages.service.ts b/apps/app/services/pages.service.ts
new file mode 100644
index 000000000..ef9979d5c
--- /dev/null
+++ b/apps/app/services/pages.service.ts
@@ -0,0 +1,158 @@
+// services
+import APIService from "services/api.service";
+// types
+import { IPage, IPageBlock, IPageBlockForm, IPageFavorite, IPageForm } from "types/pages";
+
+const { NEXT_PUBLIC_API_BASE_URL } = process.env;
+
+class PageServices extends APIService {
+  constructor() {
+    super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
+  }
+
+  async createPage(workspaceSlug: string, projectId: string, data: IPageForm): Promise<IPage> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchPage(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string,
+    data: Partial<IPageForm>
+  ): Promise<IPage> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deletePage(workspaceSlug: string, projectId: string, pageId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addPageToFavorites(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      page: string;
+    }
+  ): Promise<IPageFavorite> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-pages/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removePageFromFavorites(workspaceSlug: string, projectId: string, pageId: string) {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-pages/${pageId}`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async listPages(workspaceSlug: string, projectId: string): Promise<IPage[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createPageBlock(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string,
+    data: IPageBlockForm
+  ): Promise<IPage> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getPageBlock(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string,
+    pageBlockId: string
+  ): Promise<IPageBlock[]> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/${pageBlockId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchPageBlock(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string,
+    pageBlockId: string,
+    data: Partial<IPageBlockForm>
+  ): Promise<IPage> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/${pageBlockId}/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deletePageBlock(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string,
+    pageBlockId: string
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/${pageBlockId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async listPageBlocks(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string
+  ): Promise<IPageBlock[]> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+export default new PageServices();
diff --git a/apps/app/types/index.d.ts b/apps/app/types/index.d.ts
index 324f35d1c..684fc3a3d 100644
--- a/apps/app/types/index.d.ts
+++ b/apps/app/types/index.d.ts
@@ -7,6 +7,7 @@ export * from "./invitation";
 export * from "./issues";
 export * from "./modules";
 export * from "./views";
+export * from "./pages";
 
 export type NestedKeyOf<ObjectType extends object> = {
   [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object
diff --git a/apps/app/types/pages.d.ts b/apps/app/types/pages.d.ts
new file mode 100644
index 000000000..09f0f8d3c
--- /dev/null
+++ b/apps/app/types/pages.d.ts
@@ -0,0 +1,74 @@
+export interface LabelDetail {
+  id: string;
+  created_at: Date;
+  updated_at: Date;
+  name: string;
+  description: string;
+  color: string;
+  created_by: string;
+  updated_by: string;
+  project: string;
+  workspace: string;
+  parent: string | null;
+}
+
+export interface IPage {
+  id: string;
+  is_favorite: boolean;
+  created_at: Date;
+  updated_at: Date;
+  name: string;
+  labels: string[];
+  label_details: LabelDetail[];
+  description: string;
+  description_html: string;
+  description_stripped: string | null;
+  access: number;
+  created_by: string;
+  updated_by: string;
+  project: string;
+  workspace: string;
+  owned_by: string;
+}
+
+export interface IPageForm {
+  name: string;
+  description?: string;
+  labels_list?: string[];
+}
+
+export interface IPageBlock {
+  id: string;
+  issue_detail: string | null;
+  created_at: Date;
+  updated_at: Date;
+  name: string;
+  description: string;
+  description_html: string;
+  description_stripped: string | null;
+  completed_at: Date | null;
+  created_by: string;
+  updated_by: string;
+  project: string;
+  workspace: string;
+  page: string;
+  issue: string | null;
+}
+
+export interface IPageBlockForm {
+  name: string;
+  description?: string;
+}
+
+export interface IPageFavorite {
+  id: string;
+  page_detail: IPage;
+  created_at: Date;
+  updated_at: Date;
+  created_by: string;
+  updated_by: string;
+  project: string;
+  workspace: string;
+  user: string;
+  page: string;
+}