chore: revamp the API tokens workflow (#2880)

* chore: added getLayout method to api tokens pages * revamp: api tokens workflow * chore: add title validation and update types * chore: minor UI updates * chore: update route
2024-06-14 14:31:34 +00:00 · 2023-11-27 12:14:06 +05:30 · 2023-11-27 12:14:06 +05:30 · 7ad0360920
commit 7ad0360920
parent 7b5eea8722
25 changed files with 711 additions and 747 deletions
--- a/packages/editor/document-editor/src/ui/components/summary-popover.tsx
+++ b/packages/editor/document-editor/src/ui/components/summary-popover.tsx
@ -44,7 +44,7 @@ export const SummaryPopover: React.FC<Props> = (props) => {
      </button>
      {!sidePeekVisible && (
        <div
-          className="hidden group-hover/summary-popover:block z-10 max-h-80 w-64 shadow-custom-shadow-rg rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3"
+          className="hidden group-hover/summary-popover:block z-10 max-h-80 w-64 shadow-custom-shadow-rg rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3 overflow-y-auto"
          ref={setPopperElement}
          style={summaryPopoverStyles.popper}
          {...summaryPopoverAttributes.popper}
--- a/packages/ui/src/dropdowns/custom-select.tsx
+++ b/packages/ui/src/dropdowns/custom-select.tsx
@ -51,11 +51,11 @@ const CustomSelect = (props: ICustomSelectProps) => {
            <button
              ref={setReferenceElement}
              type="button"
-              className={`flex items-center justify-between gap-1 w-full text-xs ${
+              className={`flex items-center justify-between gap-1 text-xs ${
                disabled
                  ? "cursor-not-allowed text-custom-text-200"
                  : "cursor-pointer hover:bg-custom-background-80"
-              }  ${customButtonClassName}`}
+              } ${customButtonClassName}`}
            >
              {customButton}
            </button>
--- a/web/components/api-token/delete-token-modal.tsx
+++ b/web/components/api-token/delete-token-modal.tsx
@ -1,61 +1,71 @@
-//react
 import { useState, Fragment, FC } from "react";
-//next
 import { useRouter } from "next/router";
-//ui
-import { Button } from "@plane/ui";
-//hooks
-import useToast from "hooks/use-toast";
-//services
-import { APITokenService } from "services/api_token.service";
-//headless ui
+import { mutate } from "swr";
 import { Dialog, Transition } from "@headlessui/react";
+// services
+import { APITokenService } from "services/api_token.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button } from "@plane/ui";
+// types
+import { IApiToken } from "types/api_token";
+// fetch-keys
+import { API_TOKENS_LIST } from "constants/fetch-keys";

 type Props = {
  isOpen: boolean;
-  handleClose: () => void;
-  tokenId?: string;
+  onClose: () => void;
+  tokenId: string;
 };

 const apiTokenService = new APITokenService();

-export const DeleteTokenModal: FC<Props> = (props) => {
-  const { isOpen, handleClose, tokenId } = props;
+export const DeleteApiTokenModal: FC<Props> = (props) => {
+  const { isOpen, onClose, tokenId } = props;
  // states
  const [deleteLoading, setDeleteLoading] = useState<boolean>(false);
  // hooks
  const { setToastAlert } = useToast();
  // router
  const router = useRouter();
-  const { workspaceSlug, tokenId: tokenIdFromQuery } = router.query;
+  const { workspaceSlug } = router.query;
+
+  const handleClose = () => {
+    onClose();
+    setDeleteLoading(false);
+  };

  const handleDeletion = () => {
-    if (!workspaceSlug || (!tokenIdFromQuery && !tokenId)) return;
-
-    const token = tokenId || tokenIdFromQuery;
+    if (!workspaceSlug) return;

    setDeleteLoading(true);
+
    apiTokenService
-      .deleteApiToken(workspaceSlug.toString(), token!.toString())
+      .deleteApiToken(workspaceSlug.toString(), tokenId)
      .then(() => {
        setToastAlert({
-          message: "Token deleted successfully",
          type: "success",
-          title: "Success",
+          title: "Success!",
+          message: "Token deleted successfully.",
        });
-        router.replace(`/${workspaceSlug}/settings/api-tokens/`);
+
+        mutate<IApiToken[]>(
+          API_TOKENS_LIST(workspaceSlug.toString()),
+          (prevData) => (prevData ?? []).filter((token) => token.id !== tokenId),
+          false
+        );
+
+        handleClose();
      })
-      .catch((err) => {
+      .catch((err) =>
        setToastAlert({
-          message: err?.message,
          type: "error",
          title: "Error",
-        });
-      })
-      .finally(() => {
-        setDeleteLoading(false);
-        handleClose();
-      });
+          message: err?.message ?? "Something went wrong. Please try again.",
+        })
+      )
+      .finally(() => setDeleteLoading(false));
  };

  return (
@ -85,22 +95,24 @@ export const DeleteTokenModal: FC<Props> = (props) => {
              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            >
              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
-                <div className="flex flex-col gap-3 p-6">
+                <div className="flex flex-col gap-3 p-4">
                  <div className="flex w-full items-center justify-start">
-                    <h3 className="text-xl font-semibold 2xl:text-2xl">Are you sure you want to revoke access?</h3>
+                    <h3 className="text-lg font-medium leading-6 text-custom-text-100">
+                      Are you sure you want to delete the token?
+                    </h3>
                  </div>
                  <span>
-                    <p className="text-base font-normal text-custom-text-400">
-                      Any applications Using this developer key will no longer have the access to Plane Data. This
-                      Action cannot be undone.
+                    <p className="text-sm text-custom-text-400">
+                      Any application using this token will no longer have the access to Plane data. This action cannot
+                      be undone.
                    </p>
                  </span>
                  <div className="flex justify-end mt-2 gap-2">
-                    <Button variant="neutral-primary" onClick={handleClose} disabled={deleteLoading}>
+                    <Button variant="neutral-primary" onClick={handleClose} size="sm">
                      Cancel
                    </Button>
-                    <Button variant="primary" onClick={handleDeletion} loading={deleteLoading} disabled={deleteLoading}>
-                      {deleteLoading ? "Revoking..." : "Revoke"}
+                    <Button variant="danger" onClick={handleDeletion} loading={deleteLoading} size="sm">
+                      {deleteLoading ? "Deleting..." : "Delete"}
                    </Button>
                  </div>
                </div>
--- a/web/components/api-token/empty-state.tsx
+++ b/web/components/api-token/empty-state.tsx
@ -1,15 +1,16 @@
-// react
 import React from "react";
-// next
 import Image from "next/image";
-import { useRouter } from "next/router";
 // ui
 import { Button } from "@plane/ui";
 // assets
 import emptyApiTokens from "public/empty-state/api-token.svg";

-export const APITokenEmptyState = () => {
-  const router = useRouter();
+type Props = {
+  onClick: () => void;
+};
+
+export const ApiTokenEmptyState: React.FC<Props> = (props) => {
+  const { onClick } = props;

  return (
    <div
@ -17,19 +18,12 @@ export const APITokenEmptyState = () => {
    >
      <div className="text-center flex flex-col items-center w-full">
        <Image src={emptyApiTokens} className="w-52 sm:w-60" alt="empty" />
-        <h6 className="text-xl font-semibold mt-6 sm:mt-8 mb-3">No API Tokens</h6>
-        {
-          <p className="text-custom-text-300 mb-7 sm:mb-8">
-            Create API tokens for safe and easy data sharing with external apps, maintaining control and security
-          </p>
-        }
-        <Button
-          className="flex items-center gap-1.5"
-          onClick={() => {
-            router.push(`${router.asPath}/create/`);
-          }}
-        >
-          Add Token
+        <h6 className="text-xl font-semibold mt-6 sm:mt-8 mb-3">No API tokens</h6>
+        <p className="text-custom-text-300 mb-7 sm:mb-8">
+          Create API tokens for safe and easy data sharing with external apps, maintaining control and security.
+        </p>
+        <Button className="flex items-center gap-1.5" onClick={onClick}>
+          Add token
        </Button>
      </div>
    </div>
--- a/web/components/api-token/form/index.tsx
+++ b/web/components/api-token/form/index.tsx
@ -1,160 +0,0 @@
-import { Dispatch, SetStateAction, useState, FC } from "react";
-import { useForm } from "react-hook-form";
-import { useRouter } from "next/router";
-// helpers
-import { addDays, renderDateFormat } from "helpers/date-time.helper";
-import { csvDownload } from "helpers/download.helper";
-// types
-import { IApiToken } from "types/api_token";
-// hooks
-import { useMobxStore } from "lib/mobx/store-provider";
-import useToast from "hooks/use-toast";
-// services
-import { APITokenService } from "services/api_token.service";
-// components
-import { APITokenTitle } from "./token-title";
-import { APITokenDescription } from "./token-description";
-import { APITokenExpiry, EXPIRY_OPTIONS } from "./token-expiry";
-import { APITokenKeySection } from "./token-key-section";
-// ui
-import { Button } from "@plane/ui";
-
-interface APITokenFormProps {
-  generatedToken: IApiToken | null | undefined;
-  setGeneratedToken: Dispatch<SetStateAction<IApiToken | null | undefined>>;
-  setDeleteTokenModal: Dispatch<SetStateAction<boolean>>;
-}
-
-export interface APIFormFields {
-  never_expires: boolean;
-  title: string;
-  description: string;
-}
-
-const apiTokenService = new APITokenService();
-
-export const APITokenForm: FC<APITokenFormProps> = (props) => {
-  const { generatedToken, setGeneratedToken, setDeleteTokenModal } = props;
-  // states
-  const [loading, setLoading] = useState<boolean>(false);
-  const [neverExpires, setNeverExpire] = useState<boolean>(false);
-  const [focusTitle, setFocusTitle] = useState<boolean>(false);
-  const [focusDescription, setFocusDescription] = useState<boolean>(false);
-  const [selectedExpiry, setSelectedExpiry] = useState<number>(1);
-  // hooks
-  const { setToastAlert } = useToast();
-  // store
-  const {
-    theme: { sidebarCollapsed },
-  } = useMobxStore();
-  // router
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const {
-    control,
-    handleSubmit,
-    formState: { errors },
-  } = useForm({
-    defaultValues: {
-      never_expires: false,
-      title: "",
-      description: "",
-    },
-  });
-
-  const getExpiryDate = (): string | null => {
-    if (neverExpires === true) return null;
-    return addDays({ date: new Date(), days: EXPIRY_OPTIONS[selectedExpiry].days }).toISOString();
-  };
-
-  function renderExpiry(): string {
-    return renderDateFormat(addDays({ date: new Date(), days: EXPIRY_OPTIONS[selectedExpiry].days }), true);
-  }
-
-  const downloadSecretKey = (token: IApiToken) => {
-    const csvData = {
-      Label: token.label,
-      Description: token.description,
-      Expiry: renderDateFormat(token.expired_at ?? null),
-      "Secret Key": token.token,
-    };
-    csvDownload(csvData, `Secret-key-${Date.now()}`);
-  };
-
-  const generateToken = async (data: any) => {
-    if (!workspaceSlug) return;
-    setLoading(true);
-    await apiTokenService
-      .createApiToken(workspaceSlug.toString(), {
-        label: data.title,
-        description: data.description,
-        expired_at: getExpiryDate(),
-      })
-      .then((res) => {
-        setGeneratedToken(res);
-        downloadSecretKey(res);
-        setLoading(false);
-      })
-      .catch((err) => {
-        setToastAlert({
-          message: err.message,
-          type: "error",
-          title: "Error",
-        });
-      });
-  };
-
-  return (
-    <form
-      onSubmit={handleSubmit(generateToken, (err) => {
-        if (err.title) {
-          setFocusTitle(true);
-        }
-      })}
-      className={`${sidebarCollapsed ? "xl:w-[50%] lg:w-[60%] " : "w-[60%]"} mx-auto py-8`}
-    >
-      <div className="border-b border-custom-border-200 pb-4">
-        <APITokenTitle
-          generatedToken={generatedToken}
-          control={control}
-          errors={errors}
-          focusTitle={focusTitle}
-          setFocusTitle={setFocusTitle}
-          setFocusDescription={setFocusDescription}
-        />
-        {errors.title && focusTitle && <p className=" text-red-600">{errors.title.message}</p>}
-        <APITokenDescription
-          generatedToken={generatedToken}
-          control={control}
-          focusDescription={focusDescription}
-          setFocusTitle={setFocusTitle}
-          setFocusDescription={setFocusDescription}
-        />
-      </div>
-
-      {!generatedToken && (
-        <div className="mt-12">
-          <>
-            <APITokenExpiry
-              neverExpires={neverExpires}
-              selectedExpiry={selectedExpiry}
-              setSelectedExpiry={setSelectedExpiry}
-              setNeverExpire={setNeverExpire}
-              renderExpiry={renderExpiry}
-              control={control}
-            />
-            <Button variant="primary" type="submit">
-              {loading ? "generating..." : "Add Api key"}
-            </Button>
-          </>
-        </div>
-      )}
-      <APITokenKeySection
-        generatedToken={generatedToken}
-        renderExpiry={renderExpiry}
-        setDeleteTokenModal={setDeleteTokenModal}
-      />
-    </form>
-  );
-};
--- a/web/components/api-token/form/token-description.tsx
+++ b/web/components/api-token/form/token-description.tsx
@ -1,56 +0,0 @@
-import { Dispatch, FC, SetStateAction } from "react";
-import { Control, Controller } from "react-hook-form";
-// ui
-import { TextArea } from "@plane/ui";
-// types
-import { IApiToken } from "types/api_token";
-import type { APIFormFields } from "./index";
-
-interface APITokenDescriptionProps {
-  generatedToken: IApiToken | null | undefined;
-  control: Control<APIFormFields, any>;
-  focusDescription: boolean;
-  setFocusTitle: Dispatch<SetStateAction<boolean>>;
-  setFocusDescription: Dispatch<SetStateAction<boolean>>;
-}
-
-export const APITokenDescription: FC<APITokenDescriptionProps> = (props) => {
-  const { generatedToken, control, focusDescription, setFocusTitle, setFocusDescription } = props;
-
-  return (
-    <Controller
-      control={control}
-      name="description"
-      render={({ field: { value, onChange } }) =>
-        focusDescription ? (
-          <TextArea
-            id="description"
-            name="description"
-            autoFocus={true}
-            onBlur={() => {
-              setFocusDescription(false);
-            }}
-            value={value}
-            defaultValue={value}
-            onChange={onChange}
-            placeholder="Description"
-            className="mt-3"
-            rows={3}
-          />
-        ) : (
-          <p
-            onClick={() => {
-              if (generatedToken != null) return;
-              setFocusTitle(false);
-              setFocusDescription(true);
-            }}
-            role="button"
-            className={`${value.length === 0 ? "text-custom-text-400/60" : "text-custom-text-300"} text-lg pt-3`}
-          >
-            {value.length != 0 ? value : "Description"}
-          </p>
-        )
-      }
-    />
-  );
-};
--- a/web/components/api-token/form/token-expiry.tsx
+++ b/web/components/api-token/form/token-expiry.tsx
@ -1,111 +0,0 @@
-import { Dispatch, Fragment, SetStateAction, FC } from "react";
-import { Control, Controller } from "react-hook-form";
-import { Menu, Transition } from "@headlessui/react";
-// ui
-import { ToggleSwitch } from "@plane/ui";
-// types
-import { APIFormFields } from "./index";
-
-interface APITokenExpiryProps {
-  neverExpires: boolean;
-  selectedExpiry: number;
-  setSelectedExpiry: Dispatch<SetStateAction<number>>;
-  setNeverExpire: Dispatch<SetStateAction<boolean>>;
-  renderExpiry: () => string;
-  control: Control<APIFormFields, any>;
-}
-
-export const EXPIRY_OPTIONS = [
-  {
-    title: "7 Days",
-    days: 7,
-  },
-  {
-    title: "30 Days",
-    days: 30,
-  },
-  {
-    title: "1 Month",
-    days: 30,
-  },
-  {
-    title: "3 Months",
-    days: 90,
-  },
-  {
-    title: "1 Year",
-    days: 365,
-  },
-];
-
-export const APITokenExpiry: FC<APITokenExpiryProps> = (props) => {
-  const { neverExpires, selectedExpiry, setSelectedExpiry, setNeverExpire, renderExpiry, control } = props;
-
-  return (
-    <>
-      <Menu>
-        <p className="text-sm font-medium mb-2"> Expiration Date</p>
-        <Menu.Button className={"w-[40%]"} disabled={neverExpires}>
-          <div className="py-3 w-full font-medium px-3 flex border border-custom-border-200 rounded-md justify-center items-baseline">
-            <p className={`text-base ${neverExpires ? "text-custom-text-400/40" : ""}`}>
-              {EXPIRY_OPTIONS[selectedExpiry].title.toLocaleLowerCase()}
-            </p>
-            <p className={`text-sm mr-auto ml-2 text-custom-text-400${neverExpires ? "/40" : ""}`}>
-              ({renderExpiry()})
-            </p>
-          </div>
-        </Menu.Button>
-        <Transition
-          as={Fragment}
-          enter="transition ease-out duration-100"
-          enterFrom="transform opacity-0 scale-95"
-          enterTo="transform opacity-100 scale-100"
-          leave="transition ease-in duration-75"
-          leaveFrom="transform opacity-100 scale-100"
-          leaveTo="transform opacity-0 scale-95"
-        >
-          <Menu.Items className="absolute z-10 overflow-y-scroll whitespace-nowrap rounded-sm max-h-36 border origin-top-right mt-1 overflow-auto min-w-[10rem] border-custom-border-100 p-1 shadow-lg focus:outline-none bg-custom-background-100">
-            {EXPIRY_OPTIONS.map((option, index) => (
-              <Menu.Item key={index}>
-                {({ active }) => (
-                  <div className="py-1">
-                    <button
-                      type="button"
-                      onClick={() => {
-                        setSelectedExpiry(index);
-                      }}
-                      className={`w-full text-sm select-none truncate rounded px-3 py-1.5 text-left text-custom-text-300 hover:bg-custom-background-80 ${
-                        active ? "bg-custom-background-80" : ""
-                      }`}
-                    >
-                      {option.title}
-                    </button>
-                  </div>
-                )}
-              </Menu.Item>
-            ))}
-          </Menu.Items>
-        </Transition>
-      </Menu>
-
-      <div className="mt-4 mb-6 flex items-center">
-        <span className="text-sm font-medium"> Never Expires</span>
-        <Controller
-          control={control}
-          name="never_expires"
-          render={({ field: { onChange, value } }) => (
-            <ToggleSwitch
-              className="ml-3"
-              value={value}
-              onChange={(val) => {
-                onChange(val);
-                setNeverExpire(val);
-              }}
-              size="sm"
-            />
-          )}
-        />
-      </div>
-    </>
-  );
-};
--- a/web/components/api-token/form/token-key-section.tsx
+++ b/web/components/api-token/form/token-key-section.tsx
@ -1,59 +0,0 @@
-import { Dispatch, SetStateAction, FC } from "react";
-// icons
-import { Copy } from "lucide-react";
-// ui
-import { Button } from "@plane/ui";
-// hooks
-import useToast from "hooks/use-toast";
-// types
-import { IApiToken } from "types/api_token";
-
-interface APITokenKeySectionProps {
-  generatedToken: IApiToken | null | undefined;
-  renderExpiry: () => string;
-  setDeleteTokenModal: Dispatch<SetStateAction<boolean>>;
-}
-
-export const APITokenKeySection: FC<APITokenKeySectionProps> = (props) => {
-  const { generatedToken, renderExpiry, setDeleteTokenModal } = props;
-  // hooks
-  const { setToastAlert } = useToast();
-
-  return generatedToken ? (
-    <div className={`mt-${generatedToken ? "8" : "16"}`}>
-      <p className="font-medium text-base pb-2">Api key created successfully</p>
-      <p className="text-sm pb-4 w-[80%] text-custom-text-400/60">
-        Save this API key somewhere safe. You will not be able to view it again once you close this page or reload this
-        page.
-      </p>
-      <Button variant="neutral-primary" className="py-3 w-[85%] flex justify-between items-center">
-        <p className="font-medium text-base">{generatedToken.token}</p>
-
-        <Copy
-          size={18}
-          color="#B9B9B9"
-          onClick={() => {
-            navigator.clipboard.writeText(generatedToken.token);
-            setToastAlert({
-              message: "The Secret key has been successfully copied to your clipboard",
-              type: "success",
-              title: "Copied to clipboard",
-            });
-          }}
-        />
-      </Button>
-      <p className="mt-2 text-sm text-custom-text-400/60">
-        {generatedToken.expired_at ? "Expires on " + renderExpiry() : "Never Expires"}
-      </p>
-      <button
-        className="border py-3 px-5 text-custom-primary-100 text-sm mt-8 rounded-md border-custom-primary-100 w-fit font-medium"
-        onClick={(e) => {
-          e.preventDefault();
-          setDeleteTokenModal(true);
-        }}
-      >
-        Revoke
-      </button>
-    </div>
-  ) : null;
-};
--- a/web/components/api-token/form/token-title.tsx
+++ b/web/components/api-token/form/token-title.tsx
@ -1,69 +0,0 @@
-import { Dispatch, FC, SetStateAction } from "react";
-import { Control, Controller, FieldErrors } from "react-hook-form";
-// ui
-import { Input } from "@plane/ui";
-// types
-import { IApiToken } from "types/api_token";
-import type { APIFormFields } from "./index";
-
-interface APITokenTitleProps {
-  generatedToken: IApiToken | null | undefined;
-  errors: FieldErrors<APIFormFields>;
-  control: Control<APIFormFields, any>;
-  focusTitle: boolean;
-  setFocusTitle: Dispatch<SetStateAction<boolean>>;
-  setFocusDescription: Dispatch<SetStateAction<boolean>>;
-}
-
-export const APITokenTitle: FC<APITokenTitleProps> = (props) => {
-  const { generatedToken, errors, control, focusTitle, setFocusTitle, setFocusDescription } = props;
-
-  return (
-    <Controller
-      control={control}
-      name="title"
-      rules={{
-        required: "Title is required",
-        maxLength: {
-          value: 255,
-          message: "Title should be less than 255 characters",
-        },
-      }}
-      render={({ field: { value, onChange, ref } }) =>
-        focusTitle ? (
-          <Input
-            id="title"
-            name="title"
-            type="text"
-            inputSize="md"
-            onBlur={() => {
-              setFocusTitle(false);
-            }}
-            onError={() => {
-              console.log("error");
-            }}
-            autoFocus
-            value={value}
-            onChange={onChange}
-            ref={ref}
-            hasError={!!errors.title}
-            placeholder="Title"
-            className="resize-none text-xl w-full"
-          />
-        ) : (
-          <p
-            onClick={() => {
-              if (generatedToken != null) return;
-              setFocusDescription(false);
-              setFocusTitle(true);
-            }}
-            role="button"
-            className={`${value.length === 0 ? "text-custom-text-400/60" : ""} font-medium text-[24px]`}
-          >
-            {value.length != 0 ? value : "Api Title"}
-          </p>
-        )
-      }
-    />
-  );
-};
--- a/web/components/api-token/index.ts
+++ b/web/components/api-token/index.ts
@ -1,4 +1,4 @@
+export * from "./modal";
 export * from "./delete-token-modal";
 export * from "./empty-state";
 export * from "./token-list-item";
-export * from "./form";
--- a/web/components/api-token/modal/create-token-modal.tsx
+++ b/web/components/api-token/modal/create-token-modal.tsx
@ -0,0 +1,133 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { mutate } from "swr";
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import { APITokenService } from "services/api_token.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { CreateApiTokenForm, GeneratedTokenDetails } from "components/api-token";
+// helpers
+import { csvDownload } from "helpers/download.helper";
+import { renderFormattedDate } from "helpers/date-time.helper";
+// types
+import { IApiToken } from "types/api_token";
+// fetch-keys
+import { API_TOKENS_LIST } from "constants/fetch-keys";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+// services
+const apiTokenService = new APITokenService();
+
+export const CreateApiTokenModal: React.FC<Props> = (props) => {
+  const { isOpen, onClose } = props;
+  // states
+  const [neverExpires, setNeverExpires] = useState<boolean>(false);
+  const [generatedToken, setGeneratedToken] = useState<IApiToken | null | undefined>(null);
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // toast alert
+  const { setToastAlert } = useToast();
+
+  const handleClose = () => {
+    onClose();
+
+    setTimeout(() => {
+      setNeverExpires(false);
+      setGeneratedToken(null);
+    }, 350);
+  };
+
+  const downloadSecretKey = (data: IApiToken) => {
+    const csvData = {
+      Title: data.label,
+      Description: data.description,
+      Expiry: data.expired_at ? renderFormattedDate(data.expired_at) : "Never expires",
+      "Secret key": data.token ?? "",
+    };
+
+    csvDownload(csvData, `secret-key-${Date.now()}`);
+  };
+
+  const handleCreateToken = async (data: Partial<IApiToken>) => {
+    if (!workspaceSlug) return;
+
+    // make the request to generate the token
+    await apiTokenService
+      .createApiToken(workspaceSlug.toString(), data)
+      .then((res) => {
+        setGeneratedToken(res);
+        downloadSecretKey(res);
+
+        mutate<IApiToken[]>(
+          API_TOKENS_LIST(workspaceSlug.toString()),
+          (prevData) => {
+            if (!prevData) return;
+
+            return [res, ...prevData];
+          },
+          false
+        );
+      })
+      .catch((err) => {
+        setToastAlert({
+          message: err.message,
+          type: "error",
+          title: "Error",
+        });
+
+        throw err;
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={() => {}}>
+        <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-custom-backdrop transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="h-full w-full grid place-items-center text-center p-4">
+            <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-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all px-4 sm:w-full sm:max-w-2xl">
+                {generatedToken ? (
+                  <GeneratedTokenDetails handleClose={handleClose} tokenDetails={generatedToken} />
+                ) : (
+                  <CreateApiTokenForm
+                    handleClose={handleClose}
+                    neverExpires={neverExpires}
+                    toggleNeverExpires={() => setNeverExpires((prevData) => !prevData)}
+                    onSubmit={handleCreateToken}
+                  />
+                )}
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
--- a/web/components/api-token/modal/form.tsx
+++ b/web/components/api-token/modal/form.tsx
@ -0,0 +1,247 @@
+import { useState } from "react";
+import { add } from "date-fns";
+import { Controller, useForm } from "react-hook-form";
+import { Calendar } from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { CustomDatePicker } from "components/ui";
+// ui
+import { Button, CustomSelect, Input, TextArea, ToggleSwitch } from "@plane/ui";
+// helpers
+import { renderFormattedDate, renderFormattedPayloadDate } from "helpers/date-time.helper";
+// types
+import { IApiToken } from "types/api_token";
+
+type Props = {
+  handleClose: () => void;
+  neverExpires: boolean;
+  toggleNeverExpires: () => void;
+  onSubmit: (data: Partial<IApiToken>) => Promise<void>;
+};
+
+const EXPIRY_DATE_OPTIONS = [
+  {
+    key: "1_week",
+    label: "1 week",
+    value: { weeks: 1 },
+  },
+  {
+    key: "1_month",
+    label: "1 month",
+    value: { months: 1 },
+  },
+  {
+    key: "3_months",
+    label: "3 months",
+    value: { months: 3 },
+  },
+  {
+    key: "1_year",
+    label: "1 year",
+    value: { years: 1 },
+  },
+];
+
+const defaultValues: Partial<IApiToken> = {
+  label: "",
+  description: "",
+  expired_at: null,
+};
+
+const getExpiryDate = (val: string): string | null => {
+  const today = new Date();
+
+  const dateToAdd = EXPIRY_DATE_OPTIONS.find((option) => option.key === val)?.value;
+
+  if (dateToAdd) {
+    const expiryDate = add(today, dateToAdd);
+
+    return renderFormattedDate(expiryDate);
+  }
+
+  return null;
+};
+
+export const CreateApiTokenForm: React.FC<Props> = (props) => {
+  const { handleClose, neverExpires, toggleNeverExpires, onSubmit } = props;
+  // states
+  const [customDate, setCustomDate] = useState<Date | null>(null);
+  // toast alert
+  const { setToastAlert } = useToast();
+  // form
+  const {
+    control,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+    watch,
+  } = useForm<IApiToken>({ defaultValues });
+
+  const handleFormSubmit = async (data: IApiToken) => {
+    // if never expires is toggled off, and the user has not selected a custom date or a predefined date, show an error
+    if (!neverExpires && (!data.expired_at || (data.expired_at === "custom" && !customDate)))
+      return setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Please select an expiration date.",
+      });
+
+    const payload: Partial<IApiToken> = {
+      label: data.label,
+      description: data.description,
+    };
+
+    // if never expires is toggled on, set expired_at to null
+    if (neverExpires) payload.expired_at = null;
+    // if never expires is toggled off, and the user has selected a custom date, set expired_at to the custom date
+    else if (data.expired_at === "custom") payload.expired_at = renderFormattedPayloadDate(customDate ?? new Date());
+    // if never expires is toggled off, and the user has selected a predefined date, set expired_at to the predefined date
+    else {
+      const expiryDate = getExpiryDate(data.expired_at ?? "");
+
+      if (expiryDate) payload.expired_at = renderFormattedPayloadDate(expiryDate);
+    }
+
+    await onSubmit(payload).then(() => {
+      reset(defaultValues);
+      setCustomDate(null);
+    });
+  };
+
+  const today = new Date();
+  const tomorrow = add(today, { days: 1 });
+
+  return (
+    <form onSubmit={handleSubmit(handleFormSubmit)}>
+      <div className="space-y-4">
+        <h3 className="text-lg font-medium leading-6 text-custom-text-100">Create token</h3>
+        <div className="space-y-3">
+          <div>
+            <Controller
+              control={control}
+              name="label"
+              rules={{
+                required: "Title is required",
+                maxLength: {
+                  value: 255,
+                  message: "Title should be less than 255 characters",
+                },
+                validate: (val) => val.trim() !== "" || "Title is required",
+              }}
+              render={({ field: { value, onChange } }) => (
+                <Input
+                  type="text"
+                  value={value}
+                  onChange={onChange}
+                  hasError={Boolean(errors.label)}
+                  placeholder="Token title"
+                  className="text-sm font-medium w-full"
+                />
+              )}
+            />
+            {errors.label && <span className="text-xs text-red-500">{errors.label.message}</span>}
+          </div>
+          <Controller
+            control={control}
+            name="description"
+            render={({ field: { value, onChange } }) => (
+              <TextArea
+                value={value}
+                onChange={onChange}
+                hasError={Boolean(errors.description)}
+                placeholder="Token description"
+                className="text-sm h-24 w-full"
+              />
+            )}
+          />
+          <div className="flex items-center justify-between gap-2">
+            <div className="flex items-center gap-2">
+              <Controller
+                control={control}
+                name="expired_at"
+                render={({ field: { onChange, value } }) => {
+                  const selectedOption = EXPIRY_DATE_OPTIONS.find((option) => option.key === value);
+
+                  return (
+                    <CustomSelect
+                      customButton={
+                        <div
+                          className={`flex items-center gap-2 border-[0.5px] border-custom-border-200 rounded py-1 px-2 ${
+                            neverExpires ? "text-custom-text-400" : ""
+                          }`}
+                        >
+                          <Calendar className="h-3 w-3" />
+                          {value === "custom"
+                            ? "Custom date"
+                            : selectedOption
+                            ? selectedOption.label
+                            : "Set expiration date"}
+                        </div>
+                      }
+                      value={value}
+                      onChange={onChange}
+                      disabled={neverExpires}
+                    >
+                      {EXPIRY_DATE_OPTIONS.map((option) => (
+                        <CustomSelect.Option key={option.key} value={option.key}>
+                          {option.label}
+                        </CustomSelect.Option>
+                      ))}
+                      <CustomSelect.Option value="custom">Custom</CustomSelect.Option>
+                    </CustomSelect>
+                  );
+                }}
+              />
+              {watch("expired_at") === "custom" && (
+                <CustomDatePicker
+                  value={customDate}
+                  onChange={(date) => setCustomDate(date ? new Date(date) : null)}
+                  minDate={tomorrow}
+                  customInput={
+                    <div
+                      className={`flex items-center gap-2 py-1 px-2 text-xs cursor-pointer !rounded border-[0.5px] border-custom-border-200 !shadow-none !duration-0 ${
+                        customDate ? "w-[7.5rem]" : ""
+                      } ${neverExpires ? "text-custom-text-400 !cursor-not-allowed" : "hover:bg-custom-background-80"}`}
+                    >
+                      <Calendar className="h-3 w-3" />
+                      {customDate ? renderFormattedDate(customDate) : "Set date"}
+                    </div>
+                  }
+                  disabled={neverExpires}
+                />
+              )}
+            </div>
+            {!neverExpires && (
+              <span className="text-xs text-custom-text-400">
+                {watch("expired_at") === "custom"
+                  ? customDate
+                    ? `Expires ${renderFormattedDate(customDate)}`
+                    : null
+                  : watch("expired_at")
+                  ? `Expires ${getExpiryDate(watch("expired_at") ?? "")}`
+                  : null}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="mt-5 flex items-center justify-between gap-2">
+        <div className="flex cursor-pointer items-center gap-1.5" onClick={toggleNeverExpires}>
+          <div className="flex cursor-pointer items-center justify-center">
+            <ToggleSwitch value={neverExpires} onChange={() => {}} size="sm" />
+          </div>
+          <span className="text-xs">Never expires</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+            Discard
+          </Button>
+          <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
+            {isSubmitting ? "Generating..." : "Generate token"}
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+};
--- a/web/components/api-token/modal/generated-token-details.tsx
+++ b/web/components/api-token/modal/generated-token-details.tsx
@ -0,0 +1,61 @@
+import { Copy } from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Button, Tooltip } from "@plane/ui";
+// helpers
+import { renderFormattedDate } from "helpers/date-time.helper";
+import { copyTextToClipboard } from "helpers/string.helper";
+// types
+import { IApiToken } from "types/api_token";
+
+type Props = {
+  handleClose: () => void;
+  tokenDetails: IApiToken;
+};
+
+export const GeneratedTokenDetails: React.FC<Props> = (props) => {
+  const { handleClose, tokenDetails } = props;
+
+  const { setToastAlert } = useToast();
+
+  const copyApiToken = (token: string) => {
+    copyTextToClipboard(token).then(() =>
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Token copied to clipboard.",
+      })
+    );
+  };
+
+  return (
+    <div>
+      <div className="space-y-3">
+        <h3 className="text-lg font-medium leading-6 text-custom-text-100">Key created</h3>
+        <p className="text-sm text-custom-text-400">
+          Copy and save this secret key in Plane Pages. You can{"'"}t see this key after you hit Close. A CSV file
+          containing the key has been downloaded.
+        </p>
+      </div>
+      <button
+        type="button"
+        onClick={() => copyApiToken(tokenDetails.token ?? "")}
+        className="mt-4 w-full border-[0.5px] border-custom-border-200 py-2 px-3 flex items-center justify-between font-medium rounded-md text-sm outline-none"
+      >
+        {tokenDetails.token}
+        <Tooltip tooltipContent="Copy secret key">
+          <Copy className="h-4 w-4 text-custom-text-400" />
+        </Tooltip>
+      </button>
+      <div className="mt-6 flex items-center justify-between">
+        <p className="text-custom-text-400 text-xs">
+          {tokenDetails.expired_at ? `Expires ${renderFormattedDate(tokenDetails.expired_at)}` : "Never expires"}
+        </p>
+        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+          Close
+        </Button>
+      </div>
+    </div>
+  );
+};
--- a/web/components/api-token/modal/index.ts
+++ b/web/components/api-token/modal/index.ts
@ -0,0 +1,3 @@
+export * from "./create-token-modal";
+export * from "./form";
+export * from "./generated-token-details";
--- a/web/components/api-token/token-list-item.tsx
+++ b/web/components/api-token/token-list-item.tsx
@ -1,43 +1,58 @@
-import Link from "next/link";
-// helpers
-import { formatLongDateDistance, timeAgo } from "helpers/date-time.helper";
-// icons
+import { useState } from "react";
 import { XCircle } from "lucide-react";
+// components
+import { DeleteApiTokenModal } from "components/api-token";
+// ui
+import { Tooltip } from "@plane/ui";
+// helpers
+import { renderFormattedDate, timeAgo } from "helpers/date-time.helper";
+// types
 import { IApiToken } from "types/api_token";

-interface IApiTokenListItem {
-  workspaceSlug: string | string[] | undefined;
+type Props = {
  token: IApiToken;
-}
+};

-export const APITokenListItem = ({ token, workspaceSlug }: IApiTokenListItem) => (
-  <Link href={`/${workspaceSlug}/settings/api-tokens/${token.id}`} key={token.id}>
-    <div className="border-b flex flex-col relative justify-center items-start border-custom-border-200 py-5 hover:cursor-pointer">
-      <XCircle className="absolute right-5 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto justify-self-center stroke-custom-text-400 h-[15px] w-[15px]" />
-      <div className="flex items-center px-4">
-        <span className="text-sm font-medium leading-6">{token.label}</span>
-        <span
-          className={`${
-            token.is_active ? "bg-green-600/10 text-green-600" : "bg-custom-text-400/20 text-custom-text-400"
-          }  flex items-center px-2 h-4 rounded-sm max-h-fit ml-2 text-xs font-medium`}
-        >
-          {token.is_active ? "Active" : "Expired"}
-        </span>
-      </div>
-      <div className="flex items-center px-4 w-full">
-        {token.description.length != 0 && (
-          <p className="text-sm mb-1 mr-3 font-medium leading-6 truncate max-w-[50%]">{token.description}</p>
-        )}
-        {
+export const ApiTokenListItem: React.FC<Props> = (props) => {
+  const { token } = props;
+  // states
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+
+  return (
+    <>
+      <DeleteApiTokenModal isOpen={deleteModalOpen} onClose={() => setDeleteModalOpen(false)} tokenId={token.id} />
+      <div className="group relative border-b border-custom-border-200 flex flex-col justify-center py-3 px-4">
+        <Tooltip tooltipContent="Delete token">
+          <button
+            onClick={() => setDeleteModalOpen(true)}
+            className="hidden group-hover:grid absolute right-4 place-items-center"
+          >
+            <XCircle className="h-4 w-4 text-red-500" />
+          </button>
+        </Tooltip>
+        <div className="flex items-center w-4/5">
+          <h5 className="text-sm font-medium truncate">{token.label}</h5>
+          <span
+            className={`${
+              token.is_active ? "bg-green-500/10 text-green-500" : "bg-custom-background-80 text-custom-text-400"
+            } flex items-center px-2 h-4 rounded-sm max-h-fit ml-2 text-xs font-medium`}
+          >
+            {token.is_active ? "Active" : "Expired"}
+          </span>
+        </div>
+        <div className="flex flex-col justify-center w-full mt-1">
+          {token.description.trim() !== "" && (
+            <p className="text-sm mb-1 break-words max-w-[70%]">{token.description}</p>
+          )}
          <p className="text-xs mb-1 leading-6 text-custom-text-400">
            {token.is_active
-              ? token.expired_at === null
-                ? "Never Expires"
-                : `Expires in ${formatLongDateDistance(token.expired_at!)}`
-              : timeAgo(token.expired_at)}
+              ? token.expired_at
+                ? `Expires ${renderFormattedDate(token.expired_at!)}`
+                : "Never expires"
+              : `Expired ${timeAgo(token.expired_at)}`}
          </p>
-        }
+        </div>
      </div>
-    </div>
-  </Link>
-);
+    </>
+  );
+};
--- a/web/components/pages/pages-list/recent-pages-list.tsx
+++ b/web/components/pages/pages-list/recent-pages-list.tsx
@ -37,11 +37,13 @@ export const RecentPagesList: FC = observer(() => {
      {Object.keys(recentProjectPages).length > 0 && !isEmpty ? (
        <>
          {Object.keys(recentProjectPages).map((key) => {
-            if (recentProjectPages[key].length === 0) return null;
+            if (recentProjectPages[key]?.length === 0) return null;

            return (
-              <div key={key} className="overflow-hidden">
-                <h2 className="text-xl font-semibold capitalize mb-2">{replaceUnderscoreIfSnakeCase(key)}</h2>
+              <div key={key}>
+                <h2 className="sticky top-0 bg-custom-background-100 z-[1] text-xl font-semibold capitalize mb-2">
+                  {replaceUnderscoreIfSnakeCase(key)}
+                </h2>
                <PagesListView pages={recentProjectPages[key]} />
              </div>
            );
--- a/web/helpers/date-time.helper.ts
+++ b/web/helpers/date-time.helper.ts
@ -1,3 +1,5 @@
+import { format } from "date-fns";
+
 export const addDays = ({ date, days }: { date: Date; days: number }): Date => {
  date.setDate(date.getDate() + days);
  return date;
@ -458,3 +460,39 @@ export const getFirstDateOfWeek = (date: Date): Date => {

  return firstDateOfWeek;
 };
+
+/**
+ * @returns {string} formatted date in the format of MMM dd, yyyy
+ * @description Returns date in the formatted format
+ * @param {Date | string} date
+ * @example renderFormattedDate("2023-01-01") // Jan 01, 2023
+ */
+export const renderFormattedDate = (date: string | Date): string => {
+  if (!date) return "";
+
+  date = new Date(date);
+
+  const formattedDate = format(date, "MMM dd, yyyy");
+
+  return formattedDate;
+};
+
+/**
+ * @returns {string | null} formatted date in the format of yyyy-mm-dd to be used in payload
+ * @description Returns date in the formatted format to be used in payload
+ * @param {Date | string} date
+ * @example renderFormattedPayloadDate("2023-01-01") // "2023-01-01"
+ */
+export const renderFormattedPayloadDate = (date: Date | string): string | null => {
+  if (!date) return null;
+
+  var d = new Date(date),
+    month = "" + (d.getMonth() + 1),
+    day = "" + d.getDate(),
+    year = d.getFullYear();
+
+  if (month.length < 2) month = "0" + month;
+  if (day.length < 2) day = "0" + day;
+
+  return [year, month, day].join("-");
+};
--- a/web/helpers/download.helper.ts
+++ b/web/helpers/download.helper.ts
@ -1,17 +1,14 @@
 export const csvDownload = (data: Array<Array<string>> | { [key: string]: string }, name: string) => {
-  let rows = [];
+  const rows = Array.isArray(data) ? [...data] : [Object.keys(data), Object.values(data)];

-  if (Array.isArray(data)) {
-    rows = [...data];
-  } else {
-    rows = [Object.keys(data), Object.values(data)];
-  }
+  const csvContent = "data:text/csv;charset=utf-8," + rows.map((e) => e.join(",")).join("\n");
+  const encodedUri = encodeURI(csvContent);
+
+  const link = document.createElement("a");
+  link.href = encodedUri;
+  link.download = `${name}.csv`;

-  let csvContent = "data:text/csv;charset=utf-8," + rows.map((e) => e.join(",")).join("\n");
-  var encodedUri = encodeURI(csvContent);
-  var link = document.createElement("a");
-  link.setAttribute("href", encodedUri);
-  link.setAttribute("download", `${name}.csv`);
  document.body.appendChild(link);
  link.click();
+  document.body.removeChild(link); // Cleanup after the download link is clicked
 };
--- a/web/layouts/settings-layout/workspace/sidebar.tsx
+++ b/web/layouts/settings-layout/workspace/sidebar.tsx
@ -33,7 +33,7 @@ export const WorkspaceSettingsSidebar = () => {
      access: EUserWorkspaceRoles.GUEST,
    },
    {
-      label: "Billing & Plans",
+      label: "Billing and plans",
      href: `/${workspaceSlug}/settings/billing`,
      access: EUserWorkspaceRoles.ADMIN,
    },
@ -45,12 +45,12 @@ export const WorkspaceSettingsSidebar = () => {
    {
      label: "Imports",
      href: `/${workspaceSlug}/settings/imports`,
-      access: EUserWorkspaceRoles.GUEST,
+      access: EUserWorkspaceRoles.ADMIN,
    },
    {
      label: "Exports",
      href: `/${workspaceSlug}/settings/exports`,
-      access: EUserWorkspaceRoles.GUEST,
+      access: EUserWorkspaceRoles.ADMIN,
    },
    {
      label: "Webhooks",
@ -58,9 +58,9 @@ export const WorkspaceSettingsSidebar = () => {
      access: EUserWorkspaceRoles.ADMIN,
    },
    {
-      label: "API Tokens",
+      label: "API tokens",
      href: `/${workspaceSlug}/settings/api-tokens`,
-      access: EUserWorkspaceRoles.GUEST,
+      access: EUserWorkspaceRoles.ADMIN,
    },
  ];

--- a/web/pages/[workspaceSlug]/settings/api-tokens.tsx
+++ b/web/pages/[workspaceSlug]/settings/api-tokens.tsx
@ -0,0 +1,86 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+import { WorkspaceSettingLayout } from "layouts/settings-layout";
+// component
+import { WorkspaceSettingHeader } from "components/headers";
+import { ApiTokenEmptyState, ApiTokenListItem, CreateApiTokenModal } from "components/api-token";
+// ui
+import { Button, Spinner } from "@plane/ui";
+// services
+import { APITokenService } from "services/api_token.service";
+// types
+import { NextPageWithLayout } from "types/app";
+// constants
+import { API_TOKENS_LIST } from "constants/fetch-keys";
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+const apiTokenService = new APITokenService();
+
+const ApiTokensPage: NextPageWithLayout = observer(() => {
+  // states
+  const [isCreateTokenModalOpen, setIsCreateTokenModalOpen] = useState(false);
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // mobx store
+  const {
+    user: { currentWorkspaceRole },
+  } = useMobxStore();
+
+  const { data: tokens } = useSWR(
+    workspaceSlug && currentWorkspaceRole === 20 ? API_TOKENS_LIST(workspaceSlug.toString()) : null,
+    () => (workspaceSlug && currentWorkspaceRole === 20 ? apiTokenService.getApiTokens(workspaceSlug.toString()) : null)
+  );
+
+  if (currentWorkspaceRole !== 20)
+    return (
+      <div className="h-full w-full flex justify-center mt-10 p-4">
+        <p className="text-custom-text-300 text-sm">You are not authorized to access this page.</p>
+      </div>
+    );
+
+  return (
+    <>
+      <CreateApiTokenModal isOpen={isCreateTokenModalOpen} onClose={() => setIsCreateTokenModalOpen(false)} />
+      {tokens ? (
+        tokens.length > 0 ? (
+          <section className="pr-9 py-8 w-full overflow-y-auto">
+            <div className="flex items-center justify-between py-3.5 border-b border-custom-border-200 mb-2">
+              <h3 className="text-xl font-medium">API tokens</h3>
+              <Button variant="primary" onClick={() => setIsCreateTokenModalOpen(true)}>
+                Add API token
+              </Button>
+            </div>
+            <div>
+              {tokens.map((token) => (
+                <ApiTokenListItem key={token.id} token={token} />
+              ))}
+            </div>
+          </section>
+        ) : (
+          <div className="mx-auto py-8">
+            <ApiTokenEmptyState onClick={() => setIsCreateTokenModalOpen(true)} />
+          </div>
+        )
+      ) : (
+        <div className="h-full w-full grid place-items-center p-4">
+          <Spinner />
+        </div>
+      )}
+    </>
+  );
+});
+
+ApiTokensPage.getLayout = function getLayout(page: React.ReactElement) {
+  return (
+    <AppLayout header={<WorkspaceSettingHeader title="API Tokens" />}>
+      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default ApiTokensPage;
--- a/web/pages/[workspaceSlug]/settings/api-tokens/[tokenId].tsx
+++ b/web/pages/[workspaceSlug]/settings/api-tokens/[tokenId].tsx
@ -1,69 +0,0 @@
-import { useState } from "react";
-import { NextPage } from "next";
-import { useRouter } from "next/router";
-// layouts
-import { AppLayout } from "layouts/app-layout";
-import { WorkspaceSettingLayout } from "layouts/settings-layout";
-// components
-import { DeleteTokenModal } from "components/api-token";
-import { WorkspaceSettingHeader } from "components/headers";
-// ui
-import { Spinner } from "@plane/ui";
-// mobx
-import { useMobxStore } from "lib/mobx/store-provider";
-// services
-import { APITokenService } from "services/api_token.service";
-// helpers
-import { renderDateFormat } from "helpers/date-time.helper";
-// constants
-import { API_TOKEN_DETAILS } from "constants/fetch-keys";
-// swr
-import useSWR from "swr";
-
-const apiTokenService = new APITokenService();
-
-const APITokenDetail: NextPage = () => {
-  const { theme: themStore } = useMobxStore();
-  const [deleteTokenModal, setDeleteTokenModal] = useState<boolean>(false);
-  const router = useRouter();
-  const { workspaceSlug, tokenId } = router.query;
-
-  const { data: token } = useSWR(
-    workspaceSlug && tokenId ? API_TOKEN_DETAILS(workspaceSlug.toString(), tokenId.toString()) : null,
-    () =>
-      workspaceSlug && tokenId ? apiTokenService.retrieveApiToken(workspaceSlug.toString(), tokenId.toString()) : null
-  );
-
-  return (
-    <AppLayout header={<WorkspaceSettingHeader title="Api Tokens" />}>
-      <WorkspaceSettingLayout>
-        <DeleteTokenModal isOpen={deleteTokenModal} handleClose={() => setDeleteTokenModal(false)} />
-        {token ? (
-          <div className={`${themStore.sidebarCollapsed ? "xl:w-[50%] lg:w-[60%] " : "w-[60%]"} mx-auto py-8`}>
-            <p className={"font-medium text-[24px]"}>{token.label}</p>
-            <p className={"text-custom-text-300 text-lg pt-2"}>{token.description}</p>
-            <div className="bg-custom-border-100 h-[1px] w-full mt-4" />
-            <p className="mt-2 text-sm text-custom-text-400/60">
-              {token.expired_at ? "Expires on " + renderDateFormat(token.expired_at, true) : "Never Expires"}
-            </p>
-
-            <button
-              className="border py-3 px-5 text-custom-primary-100 text-sm mt-6 rounded-md border-custom-primary-100 w-fit font-medium"
-              onClick={() => {
-                setDeleteTokenModal(true);
-              }}
-            >
-              Revoke
-            </button>
-          </div>
-        ) : (
-          <div className="flex justify-center pr-9 py-8  w-full min-h-full items-center">
-            <Spinner />
-          </div>
-        )}
-      </WorkspaceSettingLayout>
-    </AppLayout>
-  );
-};
-
-export default APITokenDetail;
--- a/web/pages/[workspaceSlug]/settings/api-tokens/create.tsx
+++ b/web/pages/[workspaceSlug]/settings/api-tokens/create.tsx
@ -1,36 +0,0 @@
-import { useState } from "react";
-import { NextPage } from "next";
-// layouts
-import { AppLayout } from "layouts/app-layout/layout";
-import { WorkspaceSettingLayout } from "layouts/settings-layout";
-//types
-import { IApiToken } from "types/api_token";
-//Mobx
-import { observer } from "mobx-react-lite";
-// components
-import { WorkspaceSettingHeader } from "components/headers";
-import { APITokenForm, DeleteTokenModal } from "components/api-token";
-
-const CreateApiToken: NextPage = () => {
-  const [generatedToken, setGeneratedToken] = useState<IApiToken | null>();
-  const [deleteTokenModal, setDeleteTokenModal] = useState<boolean>(false);
-
-  return (
-    <AppLayout header={<WorkspaceSettingHeader title="Api Tokens" />}>
-      <WorkspaceSettingLayout>
-        <DeleteTokenModal
-          isOpen={deleteTokenModal}
-          handleClose={() => setDeleteTokenModal(false)}
-          tokenId={generatedToken?.id}
-        />
-        <APITokenForm
-          generatedToken={generatedToken}
-          setGeneratedToken={setGeneratedToken}
-          setDeleteTokenModal={setDeleteTokenModal}
-        />
-      </WorkspaceSettingLayout>
-    </AppLayout>
-  );
-};
-
-export default observer(CreateApiToken);
--- a/web/pages/[workspaceSlug]/settings/api-tokens/index.tsx
+++ b/web/pages/[workspaceSlug]/settings/api-tokens/index.tsx
@ -1,65 +0,0 @@
-import React from "react";
-import type { NextPage } from "next";
-import { useRouter } from "next/router";
-import useSWR from "swr";
-// layouts
-import { AppLayout } from "layouts/app-layout";
-import { WorkspaceSettingLayout } from "layouts/settings-layout";
-// component
-import { WorkspaceSettingHeader } from "components/headers";
-import { APITokenEmptyState, APITokenListItem } from "components/api-token";
-// ui
-import { Spinner, Button } from "@plane/ui";
-// services
-import { APITokenService } from "services/api_token.service";
-// constants
-import { API_TOKENS_LIST } from "constants/fetch-keys";
-
-const apiTokenService = new APITokenService();
-
-const Api: NextPage = () => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { data: tokens, isLoading } = useSWR(workspaceSlug ? API_TOKENS_LIST(workspaceSlug.toString()) : null, () =>
-    workspaceSlug ? apiTokenService.getApiTokens(workspaceSlug.toString()) : null
-  );
-
-  return (
-    <AppLayout header={<WorkspaceSettingHeader title="Api Tokens" />}>
-      <WorkspaceSettingLayout>
-        {!isLoading ? (
-          tokens && tokens.length > 0 ? (
-            <section className="pr-9 py-8 w-full overflow-y-auto">
-              <div className="flex items-center justify-between py-3.5 border-b border-custom-border-200 mb-2">
-                <h3 className="text-xl font-medium">Api Tokens</h3>
-                <Button
-                  variant="primary"
-                  onClick={() => {
-                    router.push(`${router.asPath}/create/`);
-                  }}
-                >
-                  Add Api Token
-                </Button>
-              </div>
-              <div>
-                {tokens?.map((token) => (
-                  <APITokenListItem token={token} workspaceSlug={workspaceSlug} />
-                ))}
-              </div>
-            </section>
-          ) : (
-            <div className="mx-auto py-8">
-              <APITokenEmptyState />
-            </div>
-          )
-        ) : (
-          <div className="flex justify-center pr-9 py-8  w-full min-h-full items-center">
-            <Spinner />
-          </div>
-        )}
-      </WorkspaceSettingLayout>
-    </AppLayout>
-  );
-};
-export default Api;
--- a/web/services/api_token.service.ts
+++ b/web/services/api_token.service.ts
@ -23,13 +23,14 @@ export class APITokenService extends APIService {
      });
  }

-  async createApiToken(workspaceSlug: string, data: any): Promise<IApiToken> {
+  async createApiToken(workspaceSlug: string, data: Partial<IApiToken>): Promise<IApiToken> {
    return this.post(`/api/workspaces/${workspaceSlug}/api-tokens/`, data)
      .then((response) => response?.data)
      .catch((error) => {
        throw error?.response?.data;
      });
  }
+
  async deleteApiToken(workspaceSlug: string, tokenId: String): Promise<IApiToken> {
    return this.delete(`/api/workspaces/${workspaceSlug}/api-tokens/${tokenId}`)
      .then((response) => response?.data)
--- a/web/types/api_token.d.ts
+++ b/web/types/api_token.d.ts
@ -1,16 +1,16 @@
 export interface IApiToken {
-  id: string;
  created_at: string;
-  updated_at: string;
-  label: string;
-  description: string;
-  is_active: boolean;
-  last_used?: string;
-  token: string;
-  user_type: number;
-  expired_at?: string;
  created_by: string;
+  description: string;
+  expired_at: string | null;
+  id: string;
+  is_active: boolean;
+  label: string;
+  last_used: string | null;
+  updated_at: string;
  updated_by: string;
  user: string;
+  user_type: number;
+  token?: string;
  workspace: string;
 }