Added permission to codes

2024-08-07 10:03:17 +01:00
parent cf91f1812d
commit 0fc2df1070
6 changed files with 97 additions and 67 deletions
--- a/src/pages/(admin)/BatchCodeGenerator.tsx
+++ b/src/pages/(admin)/BatchCodeGenerator.tsx
@@ -297,7 +297,12 @@ export default function BatchCodeGenerator({ user }: { user: User }) {
          {filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
        </Button>
        {user &&
-          checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
+          checkAccess(user, [
+            "developer",
+            "admin",
+            "corporate",
+            "mastercorporate",
+          ]) && (
            <>
              <div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
                <label className="text-mti-gray-dim text-base font-normal">
@@ -352,14 +357,20 @@ export default function BatchCodeGenerator({ user }: { user: User }) {
              ))}
          </select>
        )}
-        <Button
-          onClick={generateAndInvite}
-          disabled={
-            infos.length === 0 || (isExpiryDateEnabled ? !expiryDate : false)
-          }
-        >
-          Generate & Send
-        </Button>
+        {checkAccess(
+          user,
+          ["developer", "admin", "corporate", "mastercorporate"],
+          "createCodes"
+        ) && (
+          <Button
+            onClick={generateAndInvite}
+            disabled={
+              infos.length === 0 || (isExpiryDateEnabled ? !expiryDate : false)
+            }
+          >
+            Generate & Send
+          </Button>
+        )}
      </div>
    </>
  );
--- a/src/pages/(admin)/CodeGenerator.tsx
+++ b/src/pages/(admin)/CodeGenerator.tsx
@@ -130,47 +130,48 @@ export default function CodeGenerator({ user }: { user: User }) {
            ))}
        </select>
      )}
-      {user &&
-        checkAccess(user, ["developer", "admin", "corporate"]) && (
-          <>
-            <div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
-              <label className="text-mti-gray-dim text-base font-normal">
-                Expiry Date
-              </label>
-              <Checkbox
-                isChecked={isExpiryDateEnabled}
-                onChange={setIsExpiryDateEnabled}
-                disabled={!!user.subscriptionExpirationDate}
-              >
-                Enabled
-              </Checkbox>
-            </div>
-            {isExpiryDateEnabled && (
-              <ReactDatePicker
-                className={clsx(
-                  "flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
-                  "hover:border-mti-purple tooltip",
-                  "transition duration-300 ease-in-out"
-                )}
-                filterDate={(date) =>
-                  moment(date).isAfter(new Date()) &&
-                  (user.subscriptionExpirationDate
-                    ? moment(date).isBefore(user.subscriptionExpirationDate)
-                    : true)
-                }
-                dateFormat="dd/MM/yyyy"
-                selected={expiryDate}
-                onChange={(date) => setExpiryDate(date)}
-              />
-            )}
-          </>
-        )}
-      <Button
-        onClick={() => generateCode(type)}
-        disabled={isExpiryDateEnabled ? !expiryDate : false}
-      >
-        Generate
-      </Button>
+      {user && checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
+        <>
+          <div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
+            <label className="text-mti-gray-dim text-base font-normal">
+              Expiry Date
+            </label>
+            <Checkbox
+              isChecked={isExpiryDateEnabled}
+              onChange={setIsExpiryDateEnabled}
+              disabled={!!user.subscriptionExpirationDate}
+            >
+              Enabled
+            </Checkbox>
+          </div>
+          {isExpiryDateEnabled && (
+            <ReactDatePicker
+              className={clsx(
+                "flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
+                "hover:border-mti-purple tooltip",
+                "transition duration-300 ease-in-out"
+              )}
+              filterDate={(date) =>
+                moment(date).isAfter(new Date()) &&
+                (user.subscriptionExpirationDate
+                  ? moment(date).isBefore(user.subscriptionExpirationDate)
+                  : true)
+              }
+              dateFormat="dd/MM/yyyy"
+              selected={expiryDate}
+              onChange={(date) => setExpiryDate(date)}
+            />
+          )}
+        </>
+      )}
+      {checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"], 'createCodes') && (
+        <Button
+          onClick={() => generateCode(type)}
+          disabled={isExpiryDateEnabled ? !expiryDate : false}
+        >
+          Generate
+        </Button>
+      )}
      <label className="font-normal text-base text-mti-gray-dim">
        Generated Code:
      </label>
--- a/src/pages/(admin)/Lists/CodeList.tsx
+++ b/src/pages/(admin)/Lists/CodeList.tsx
@@ -19,6 +19,7 @@ import { BsTrash } from "react-icons/bs";
 import { toast } from "react-toastify";
 import ReactDatePicker from "react-datepicker";
 import clsx from "clsx";
+import { checkAccess } from "@/utils/permissions";

 const columnHelper = createColumnHelper<Code>();

@@ -147,6 +148,12 @@ export default function CodeList({ user }: { user: User }) {
      .finally(reload);
  };

+  const allowedToDelete = checkAccess(
+    user,
+    ["developer", "admin", "corporate", "mastercorporate"],
+    "deleteCodes"
+  );
+
  const defaultColumns = [
    columnHelper.accessor("code", {
      id: "codeCheckbox",
@@ -209,7 +216,7 @@ export default function CodeList({ user }: { user: User }) {
      cell: ({ row }: { row: { original: Code } }) => {
        return (
          <div className="flex gap-4">
-            {!row.original.userId && (
+            {allowedToDelete && !row.original.userId && (
              <div
                data-tip="Delete"
                className="cursor-pointer tooltip"
@@ -308,6 +315,7 @@ export default function CodeList({ user }: { user: User }) {
            }}
          />
        </div>
+        {allowedToDelete && (
        <div className="flex gap-4 items-center">
          <span>{selectedCodes.length} code(s) selected</span>
          <Button
@@ -320,6 +328,7 @@ export default function CodeList({ user }: { user: User }) {
            Delete
          </Button>
        </div>
+        )}
      </div>
      <table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
        <thead>
--- a/src/pages/(admin)/Lists/index.tsx
+++ b/src/pages/(admin)/Lists/index.tsx
@@ -7,6 +7,7 @@ import ExamList from "./ExamList";
 import GroupList from "./GroupList";
 import PackageList from "./PackageList";
 import UserList from "./UserList";
+import { checkAccess } from "@/utils/permissions";

 export default function Lists({ user }: { user: User }) {
  return (
@@ -20,13 +21,13 @@ export default function Lists({ user }: { user: User }) {
              "transition duration-300 ease-in-out",
              selected
                ? "bg-white shadow"
-                : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+                : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
            )
          }
        >
          User List
        </Tab>
-        {user?.type === "developer" && (
+        {checkAccess(user, ["developer"]) && (
          <Tab
            className={({ selected }) =>
              clsx(
@@ -35,7 +36,7 @@ export default function Lists({ user }: { user: User }) {
                "transition duration-300 ease-in-out",
                selected
                  ? "bg-white shadow"
-                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
              )
            }
          >
@@ -50,13 +51,13 @@ export default function Lists({ user }: { user: User }) {
              "transition duration-300 ease-in-out",
              selected
                ? "bg-white shadow"
-                : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+                : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
            )
          }
        >
          Group List
        </Tab>
-        {user && ["developer", "admin", "corporate"].includes(user.type) && (
+        {checkAccess(user, ["developer", "admin", "corporate"]) && (
          <Tab
            className={({ selected }) =>
              clsx(
@@ -65,14 +66,14 @@ export default function Lists({ user }: { user: User }) {
                "transition duration-300 ease-in-out",
                selected
                  ? "bg-white shadow"
-                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
              )
            }
          >
            Code List
          </Tab>
        )}
-        {user && ["developer", "admin"].includes(user.type) && (
+        {checkAccess(user, ["developer", "admin"]) && (
          <Tab
            className={({ selected }) =>
              clsx(
@@ -81,14 +82,14 @@ export default function Lists({ user }: { user: User }) {
                "transition duration-300 ease-in-out",
                selected
                  ? "bg-white shadow"
-                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
              )
            }
          >
            Package List
          </Tab>
        )}
-        {user && ["developer", "admin"].includes(user.type) && (
+        {checkAccess(user, ["developer", "admin"]) && (
          <Tab
            className={({ selected }) =>
              clsx(
@@ -97,7 +98,7 @@ export default function Lists({ user }: { user: User }) {
                "transition duration-300 ease-in-out",
                selected
                  ? "bg-white shadow"
-                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
+                  : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
              )
            }
          >
@@ -109,7 +110,7 @@ export default function Lists({ user }: { user: User }) {
        <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
          <UserList user={user} />
        </Tab.Panel>
-        {user?.type === "developer" && (
+        {checkAccess(user, ["developer"]) && (
          <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
            <ExamList user={user} />
          </Tab.Panel>
@@ -117,17 +118,21 @@ export default function Lists({ user }: { user: User }) {
        <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
          <GroupList user={user} />
        </Tab.Panel>
-        {user && ["developer", "admin", "corporate"].includes(user.type) && (
+        {checkAccess(
+          user,
+          ["developer", "admin", "corporate", "mastercorporate"],
+          "viewCodes"
+        ) && (
          <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
            <CodeList user={user} />
          </Tab.Panel>
        )}
-        {user && ["developer", "admin"].includes(user.type) && (
+        {checkAccess(user, ["developer", "admin"]) && (
          <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
            <PackageList user={user} />
          </Tab.Panel>
        )}
-        {user && ["developer", "admin"].includes(user.type) && (
+        {checkAccess(user, ["developer", "admin"]) && (
          <Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
            <DiscountList user={user} />
          </Tab.Panel>