Certificate Generation for Users

package.json

@@ -32,7 +32,9 @@
     "framer-motion": "^11.2.4",
     "graphql": "^16.8.1",
     "graphql-tag": "^2.12.6",
+    "html2canvas": "^1.4.1",
     "jwt-decode": "^4.0.0",
+    "jspdf": "^2.5.1",
     "libphonenumber-js": "^1.11.1",
     "next": "^14.2.3",
     "next-mdx-remote": "^4.4.1",

src/acl/routes.js

@@ -36,6 +36,10 @@ const routes = {
   "/manage/holidays": ["slo"],
   "/manage/holidays/new": ["slo"], // has to be higher to not conflict with :id
   "/manage/holidays/:id": ["slo"],
+
+  "/certificate-requests": ["cc", "slo"],
+  "/certificate-requests/all": ["cc", "slo"],
+  "/profile/[id]/generate-certificate": ["public"],
 };
 
 export default routes;

src/app/actions/certificates/all/server_action.jsx

@@ -0,0 +1,46 @@
+"use server";
+
+import { getClient } from "gql/client";
+import { GET_ALL_CERTIFICATES } from "gql/queries/members";
+
+export async function getAllCertificates(page = 1, pageSize = 10) {
+  const response = { ok: false, data: null, error: null };
+
+  try {
+    const { error, data } = await getClient().query(GET_ALL_CERTIFICATES, {
+      page,
+      pageSize,
+    });
+
+    if (error) {
+      response.error = {
+        title: error.name,
+        messages: error?.graphQLErrors?.map((ge) => ge?.message) || [
+          "An unknown error occurred",
+        ],
+      };
+
+      return response;
+    }
+
+    if (!data || !data.getAllCertificates) {
+      response.error = {
+        title: "Error",
+        messages: ["No certificate data found"],
+      };
+
+      return response;
+    }
+
+    response.ok = true;
+    response.data = data.getAllCertificates;
+  } catch (err) {
+    console.error("Error fetching all certificates:", err);
+    response.error = {
+      title: "Error",
+      messages: [err.message || "An unexpected error occurred"],
+    };
+  }
+
+  return response;
+}

src/app/actions/certificates/approve/server_action.jsx

@@ -0,0 +1,24 @@
+"use server";
+
+import { getClient } from "gql/client";
+import { APPROVE_CERTIFICATE } from "gql/mutations/members";
+
+export async function approveCertificate(certificateNumber) {
+  const response = { ok: false, error: null };
+
+  const { data, error } = await getClient().mutation(APPROVE_CERTIFICATE, {
+    certificateNumber,
+  });
+
+  if (error) {
+    response.error = {
+      title: error.name,
+      messages: error?.graphQLErrors?.map((ge) => ge?.message),
+    };
+  } else {
+    response.ok = true;
+    response.data = data.approveCertificate;
+  }
+
+  return response;
+}

src/app/actions/certificates/fetch/server_action.jsx

@@ -0,0 +1,54 @@
+"use server";
+
+import { getClient } from "gql/client";
+import { GET_CERTIFICATE_BY_NUMBER } from "gql/queries/members";
+
+export async function fetchCertificate(certificateNumber) {
+  let response = { ok: false, data: null, error: null };
+
+  if (!certificateNumber) {
+    response.error = {
+      title: "Error",
+      messages: ["Certificate number is required"],
+    };
+
+    return response;
+  }
+
+  try {
+    const { error, data } = await getClient().query(GET_CERTIFICATE_BY_NUMBER, {
+      certificateNumber,
+    });
+
+    if (error) {
+      response.error = {
+        title: error.name,
+        messages: error?.graphQLErrors?.map((ge) => ge?.message) || [
+          "An unknown error occurred",
+        ],
+      };
+
+      return response;
+    }
+
+    if (!data || !data.getCertificateByNumber) {
+      response.error = {
+        title: "Error",
+        messages: ["Certificate not found"],
+      };
+
+      return response;
+    }
+
+    response.ok = true;
+    response.data = data.getCertificateByNumber;
+  } catch (err) {
+    console.error("Error fetching certificate:", err);
+    response.error = {
+      title: "Error",
+      messages: [err.message || "An unexpected error occurred"],
+    };
+  }
+
+  return response;
+}

src/app/actions/certificates/pending/server_action.jsx

@@ -0,0 +1,24 @@
+"use server";
+
+import { getClient } from "gql/client";
+import { GET_PENDING_CERTIFICATES } from "gql/queries/members";
+
+export async function getPendingCertificates() {
+  const response = { ok: false, data: null, error: null };
+
+  const {
+    error,
+    data: { getPendingCertificates },
+  } = await getClient().query(GET_PENDING_CERTIFICATES);
+  if (error) {
+    response.error = {
+      title: error.name,
+      messages: error?.graphQLErrors?.map((ge) => ge?.message),
+    };
+  } else {
+    response.ok = true;
+    response.data = [...getPendingCertificates];
+  }
+
+  return response;
+}

src/app/actions/certificates/reject/server_action.jsx

@@ -0,0 +1,24 @@
+"use server";
+
+import { getClient } from "gql/client";
+import { REJECT_CERTIFICATE } from "gql/mutations/members";
+
+export async function rejectCertificate(certificateNumber) {
+  const response = { ok: false, error: null };
+
+  const { data, error } = await getClient().mutation(REJECT_CERTIFICATE, {
+    certificateNumber,
+  });
+
+  if (error) {
+    response.error = {
+      title: error.name,
+      messages: error?.graphQLErrors?.map((ge) => ge?.message),
+    };
+  } else {
+    response.ok = true;
+    response.data = data.rejectCertificate;
+  }
+
+  return response;
+}

src/app/actions/certificates/request/server_action.jsx

@@ -0,0 +1,29 @@
+"use server";
+
+import { getClient } from "gql/client";
+import { REQUEST_CERTIFICATE } from "gql/mutations/members";
+
+export async function requestCertificate(requestReason) {
+  try {
+    const client = getClient();
+
+    const variables = {
+      certificateInput: {
+        requestReason,
+      },
+    };
+
+    const { data, error } = await client.mutation(
+      REQUEST_CERTIFICATE,
+      variables
+    );
+
+    if (error) {
+      return { ok: false, error };
+    } else {
+      return { ok: true, data: data.requestCertificate };
+    }
+  } catch (err) {
+    return { ok: false, error: err };
+  }
+}

src/app/actions/certificates/verify/server_action.jsx

@@ -0,0 +1,37 @@
+"use server";
+
+import { getClient } from "gql/client";
+import { VERIFY_CERTIFICATE } from "gql/queries/members";
+
+export async function verifyCertificate(certificateNumber, key) {
+  const response = { ok: false, data: null, error: null };
+
+  try {
+    const { error, data } = await getClient().query(VERIFY_CERTIFICATE, {
+      certificateNumber,
+      key,
+    });
+
+    if (error) {
+      response.error = {
+        title: error.name,
+        messages: error?.graphQLErrors?.map((ge) => ge?.message) || [
+          "An unknown error occurred",
+        ],
+      };
+    } else if (data && data.verifyCertificate) {
+      response.ok = true;
+      response.data = data.verifyCertificate;
+    } else {
+      throw new Error("No data returned from the server");
+    }
+  } catch (err) {
+    console.error("Error verifying certificate:", err);
+    response.error = {
+      title: "Error",
+      messages: [err.message || "An unexpected error occurred"],
+    };
+  }
+
+  return response;
+}

src/app/actions/users/get/full/server_action.jsx

@@ -0,0 +1,22 @@
+"use server";
+
+import { getClient } from "gql/client";
+import { GET_USER_PROFILE } from "gql/queries/users";
+
+export async function getFullUser(uid) {
+  const response = { ok: false, data: null, error: null };
+
+  const { error, data: { userMeta, userProfile } = {} } =
+    await getClient().query(GET_USER_PROFILE, { userInput: { uid } });
+  if (error) {
+    response.error = {
+      title: error.name,
+      messages: error?.graphQLErrors?.map((ge) => ge?.message),
+    };
+  } else {
+    response.ok = true;
+    response.data = { ...userMeta, ...userProfile };
+  }
+
+  return response;
+}

src/app/certificate-requests/all/page.jsx

@@ -0,0 +1,28 @@
+import { Suspense } from "react";
+import { Box, Button, Grid, Typography } from "@mui/material";
+
+import AllCertificatesTable from "components/certificates/AllCertificatesTable";
+
+export default function AllCertificatesPage() {
+  return (
+    <div>
+      <Grid
+        container
+        item
+        sx={{ display: "flex", justifyContent: "space-between" }}
+      >
+        <Typography variant="h3" gutterBottom mt={2}>
+          All Certificates
+        </Typography>
+        <Box mt={3} mb={4}>
+          <Button variant="contained" color="primary" href="/certificate-requests">
+            View Pending Certificate Requests
+          </Button>
+        </Box>
+      </Grid>
+      <Suspense fallback={<div>Loading...</div>}>
+        <AllCertificatesTable />
+      </Suspense>
+    </div>
+  );
+}

src/app/certificate-requests/page.jsx

@@ -0,0 +1,28 @@
+import { Suspense } from "react";
+import { Box, Button, Grid, Typography } from "@mui/material";
+
+import PendingCertificatesTable from "components/certificates/PendingCertificatesTable";
+
+export default function CertificateRequestsPage() {
+  return (
+    <div className="container mx-auto p-4">
+      <Grid
+        container
+        item
+        sx={{ display: "flex", justifyContent: "space-between" }}
+      >
+        <Typography variant="h3" gutterBottom mt={2}>
+          Pending Certificate Requests
+        </Typography>
+        <Box mt={3} mb={4}>
+          <Button variant="contained" color="primary" href="/certificate-requests/all">
+            View All Certificates
+          </Button>
+        </Box>
+      </Grid>
+      <Suspense fallback={<div>Loading...</div>}>
+        <PendingCertificatesTable />
+      </Suspense>
+    </div>
+  );
+}