Milestone 1

.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# environment variables
+**/*.env

README.md

@@ -1,34 +1,83 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# LongKenKaiMy PSA Code Sprint
 
-## Getting Started
+[[_TOC_]]
 
-First, run the development server:
 
-```bash
-npm run dev
-# or
-yarn dev
-```
+This is the repository for the LongKenKaiMy PSA Code Sprint. The code sprint is a 2-day event where participants will work on a project of their choice. The project can be anything from a simple script to a full-fledged application. Our goal is to have fun and learn something new.
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Team Members
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+- [Yu Long](https://github.com/yulonglim)
+- [Kenneth Chow](https://github.com/reignnz)
+- [Kai Jun](https://github.com/nujiak)
+- [Myron](https://github.com/meerian)
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+## Project
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+### Project Name: 
 
-## Learn More
+__PSAccess__ - A website to digitize the process of using Pass Out Note (PON) system in PSA.
 
-To learn more about Next.js, take a look at the following resources:
+### Problem Statement
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+Currently, the process of using POS system in PSA is not environmentally sustainable and error-prone. The process involves the following steps:
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+1. Request for PON from a designated officer.
+2. Fill up the PON and 2 carbon copies are also required.
+3. Submit the PON to a counter signing officer (CSO) for verification and signing.
+4. Submit the PON to an AETOS officer for a final verification and archival of the PON
 
-## Deploy on Vercel
+The process is error-prone because the PON is a physical document that can be lost or tampered with. The process is also not environmentally sustainable because the PON is a physical document that is printed.
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+### Proposed Solution
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+We propose to digitize the process of using POS system in PSA. The proposed solution involves the following steps:
+
+1. Request for PON from a designated officer on the website.
+2. Designated officer will approve the request and the PON will be generated.
+3. The PON can be filled up on the website.
+4. The PON can be shared to a CSO for verification and signing.
+5. The PON can be shared to an AETOS officer for a final verification and archival of the PON.
+
+The proposed solution is less error-prone because the PON is a digital document that can be easily edited and shared. The proposed solution is also more environmentally sustainable because the PON is a digital document that is not printed.
+
+# How To Use
+
+## Prerequisites
+- Internet connection is required to use the website.
+- Initial setup requires an admin account to be created with sufficiently strong password.
+
+## Initial Setup
+1. Got to [PSAccess]() to create an admin account.
+2. An admin account is required to create other accounts.
+3. Roles of the accounts are as follows:
+    - Admin: Can create other accounts and view system metrics.
+    - Staff: Can request for PON or verify and sign PONs.
+    - Designated Officer (DO): Can issue PONs.
+    - AETOS Officer (AO): Can verify and archive PONs.
+
+## Requesting for PON
+1. Staff can login to the website.
+2. Click on the `Request PON` button.
+3. Wait for the designated officer to approve the request.
+
+## Issuing PON
+1. Designated officer can login to the website.
+2. A list of PON requests will be shown.
+3. Click on the `Issue PON` button beside the request to issue the PON.
+
+## Filling up the PON
+1. Staff can login to the website.
+2. The staff can access the issued PON by clicking on the item.
+3. There will be text fields for the staff to fill up the PON.
+4. Once the PON is filled up, the staff can click on the `Submit` button to submit the PON and wait for the CSO to verify and sign the PON.
+
+## Verifying and Signing PON
+1. CSO (another staff) can login to the website.
+2. The CSO can access the PON by clicking on the item.
+3. The CSO would be able to verify the PON and sign the PON.
+
+## Verifying and Archiving PON
+1. AETOS officer can login to the website.
+2. The AETOS officer can access the PON by clicking on the item.
+3. The AETOS officer would be able to verify the PON and archive the PON.

components/BackButton.tsx

@@ -0,0 +1,21 @@
+// Make a custom back button component
+import React from "react";
+import { IoIosArrowBack } from "react-icons/io";
+import Link from "next/link";
+import { ActionIcon } from "@mantine/core";
+
+export default function BackButton() {
+  return (
+    <ActionIcon
+      type="submit"
+      variant="transparent"
+      size="xl"
+      className="flex items-left justify-left pt-4 mt-4 hover:scale-110 duration-125"
+      sx={{}}
+    >
+      <Link href="/" passHref>
+        <IoIosArrowBack size={50} className="" color={"black"} />
+      </Link>
+    </ActionIcon>
+  );
+}

components/CsoActionChip.tsx

@@ -0,0 +1,30 @@
+import { Group, Text } from "@mantine/core"
+import { HiOutlineCheck, HiOutlineX } from "react-icons/hi"
+import { TiArrowBackOutline } from "react-icons/ti"
+
+export enum CsoActionType {
+    REJECT,
+    SIGN,
+    BACK
+}
+
+interface CsoActionChipProps {
+    onClick: () => void,
+    action: CsoActionType
+    className?: string
+}
+
+export function CsoActionChip({ onClick, action, className }: CsoActionChipProps) {
+    const mapActionToIcon = (action: CsoActionType) => (
+      action == CsoActionType.REJECT ? <HiOutlineX /> : 
+      action == CsoActionType.SIGN ? <HiOutlineCheck /> :
+      <TiArrowBackOutline />)
+
+
+    return (
+      <Group className={`bg-contain rounded-full text-white px-8 py-3 hover:cursor-pointer ${className}`} onClick={onClick}>
+        {mapActionToIcon(action)}
+        <Text>{CsoActionType[action]}</Text>
+      </Group>      
+    )
+}

components/StaffActionChip.tsx

@@ -0,0 +1,32 @@
+import { AiOutlinePrinter } from "react-icons/ai"
+import { BsFillPersonCheckFill, BsJournalCheck, BsShare } from "react-icons/bs"
+import { TiArrowBackOutline } from "react-icons/ti"
+import { ActionIcon } from "@mantine/core"
+
+export enum staffActionType {
+    PRINT,
+    SHARE,
+    SUBMIT
+}
+
+interface StaffActionChipProps {
+    onClick: () => void,
+    action: staffActionType,
+    size?: number
+}
+
+export function StaffActionChip({ onClick, action }: StaffActionChipProps) {
+
+    const mapActionToIcon = (action: staffActionType) => (
+        action == staffActionType.PRINT ? <AiOutlinePrinter size={24} /> :
+        action == staffActionType.SHARE ? <BsShare size={24}/> :
+        action == staffActionType.SUBMIT ? <BsJournalCheck size={24}/> :
+        <TiArrowBackOutline size={24}/>
+        )
+
+    return (
+      <ActionIcon className='bg-white bg-contain rounded-full hover:cursor-pointer drop-shadow-md font-bold' size="xl" onClick={onClick}>
+        {mapActionToIcon(action)}
+      </ActionIcon>
+    )
+  }

components/progressBar.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import zxcvbn from "zxcvbn";
+import { Progress } from "@mantine/core";
+
+const getPasswordAttrs = (score: number) => {
+  if (score == 2)
+    return {
+      desc: "Fair",
+      color: "yellow",
+    };
+  if (score == 3)
+    return {
+      desc: "Good",
+      color: "green",
+    };
+  if (score == 4)
+    return {
+      desc: "Strong",
+      color: "green",
+    };
+  return {
+    desc: "Weak",
+    color: "red",
+  };
+};
+
+export type PasswordStrengthMeterType = {
+  password: string;
+};
+
+const PasswordStrengthMeter: React.FC<PasswordStrengthMeterType> = ({
+  password,
+}: {
+  password: string;
+}) => {
+  const { score } = zxcvbn(password); // score: 0 - 4
+  const { desc, color } = getPasswordAttrs(score);
+  if (password.length === 0) return null; // don't render if password id empty
+
+  return (
+    <div>
+      <Progress value={(score / 4) * 100} color={color} />
+    </div>
+  );
+};
+
+export default PasswordStrengthMeter;

global.d.ts

@@ -0,0 +1,5 @@
+import { PrismaClient } from "@prisma/client";
+
+declare global {
+  var prisma: PrismaClient;
+}

lib/color.ts

@@ -0,0 +1,25 @@
+import { createHash } from "crypto";
+
+export function mapToHsl(id:number) {
+    const hash = createHash('sha256');
+    hash.update(String(id));
+    const output = hash.digest().toString('hex'); 
+    return (
+      "hsl(" +
+      (parseInt(output.slice(0,2), 16) * 360 / 255) + "deg" +
+      " " +
+      (parseInt(output.slice(2,3), 16) + 84) + "%" +
+      " " +
+      "40%" +
+      ")"
+    );
+  }
+
+export enum statusToColor {
+  REQUESTED = "#0E80EACC",
+  ISSUED = "#430198CC",
+  PENDING = "#EA9F0ECC",
+  SIGNED = "#439801CC",
+  VERIFIED = "#90730ACC",
+  ARCHIVED = "#90730ACC",
+}

lib/hash.ts

@@ -0,0 +1,5 @@
+import bcrypt from "bcrypt";
+
+export default function hashPassword(password: string): string {
+  return bcrypt.hashSync(password, 10);
+}

lib/password_check.ts

@@ -0,0 +1,7 @@
+import zxcvbn from "zxcvbn";
+
+const MIN_STRENGTH = parseInt(process.env.PASSWORD_MIN_STRENGTH!, 10);
+
+export default function validatePassword(password: string): boolean {
+    return zxcvbn(password).score >= MIN_STRENGTH;
+}

lib/prisma.ts

@@ -0,0 +1,14 @@
+import { PrismaClient } from "@prisma/client";
+
+let prisma: PrismaClient;
+
+if (process.env.NODE_ENV === "production") {
+  prisma = new PrismaClient();
+} else {
+  if (!global.prisma) {
+    global.prisma = new PrismaClient();
+  }
+  prisma = global.prisma;
+}
+
+export default prisma;

lib/session.ts

@@ -0,0 +1,15 @@
+import type { IronSessionOptions } from "iron-session";
+
+export const sessionOptions: IronSessionOptions = {
+  cookieName: process.env.SESSION_COOKIE_NAME as string,
+  password: process.env.SESSION_COOKIE_SECRET as string,
+  cookieOptions: {
+    secure: process.env.NODE_ENV === "production",
+  },
+};
+// This is where we specify the typings of req.session.*
+declare module "iron-session" {
+  interface IronSessionData {
+    id: number;
+  }
+}

next.config.js

@@ -2,6 +2,16 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
-}
+  experimental: {
+    swcPlugins: [
+      [
+        "next-superjson-plugin",
+        {
+          excluded: [],
+        },
+      ],
+    ],
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;