213 feature UI changes for logon onboarding and create/upload signature

apps/server/prisma/migrations/20241201022321_/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - Added the required column `signatureLink` to the `Employee` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "Employee" ADD COLUMN     "signatureLink" VARCHAR(255) NOT NULL;

apps/server/prisma/schema.prisma

@@ -38,6 +38,7 @@ model Employee {
   firstName    String   @db.VarChar(255)
   lastName     String   @db.VarChar(255)
   email        String   @unique @db.VarChar(255)
+  signatureLink String  @db.VarChar(255)
   isAdmin      Boolean  @default(false) @db.Boolean
   pswdHash     String?  @db.VarChar(255)
   createdAt    DateTime @default(now())

apps/server/prisma/seed.ts

@@ -39,6 +39,7 @@ const DIGITAL_MFA_ID_BADGE_REQUEST_UUID = uuidv4();
 const TRAVEL_AUTHORIZATION_UUID = uuidv4();
 
 const DEV_FORM_DOC_LINK = 'http://localhost:3002/test.pdf';
+const DEV_SIGNATURE_LINK = 'http://localhost:3002/signature.png';
 
 // type definition for employee data used in upsertEmployee
 type EmployeeData = {
@@ -47,6 +48,7 @@ type EmployeeData = {
   lastName: string;
   email: string;
   positionId: string;
+  signatureLink: string;
 };
 
 // update or insert employee to database based on the employee id
@@ -59,6 +61,7 @@ async function upsertEmployee(empData: EmployeeData) {
       firstName: empData.firstName,
       lastName: empData.lastName,
       email: empData.email,
+      signatureLink: empData.signatureLink,
       position: {
         connect: { id: empData.positionId },
       },
@@ -383,27 +386,31 @@ async function main() {
       lastName: 'Zhang',
       email: '[email protected]',
       positionId: CHIEF_OF_STAFF_UUID,
+      signatureLink: DEV_SIGNATURE_LINK,
     },
     {
       id: KAI_ZHENG_UUID,
       firstName: 'Kai',
       lastName: 'Zheng',
       email: '[email protected]',
       positionId: CHIEF_FIN_OFFICER_UUID,
+      signatureLink: DEV_SIGNATURE_LINK,
     },
     {
       id: ANGELA_WEIGL_UUID,
       firstName: 'Angela',
       lastName: 'Weigl',
       email: '[email protected]',
       positionId: AGG_DIR_UUID,
+      signatureLink: DEV_SIGNATURE_LINK,
     },
     {
       id: ANSHUL_SHIRUDE_UUID,
       firstName: 'Anshul',
       lastName: 'Shirude',
       email: '[email protected]',
       positionId: CHIEF_LEARNING_ENGAGEMENT_UUID,
+      signatureLink: DEV_SIGNATURE_LINK,
     },
   ];
 

apps/server/src/app.controller.ts

@@ -133,6 +133,7 @@ export class AppController {
       lastName: employeeDto.lastName,
       email: employeeDto.email,
       password: employeeDto.password,
+      signatureLink: employeeDto.signatureLink,
       positionId: '',
     };
 

apps/server/src/auth/auth.service.spec.ts

@@ -44,6 +44,7 @@ describe('AuthService', () => {
       firstName: 'First',
       lastName: 'Last',
       positionId: 'positionId',
+      signatureLink: 'signatureLink',
       position: {
         id: 'positionId',
         name: 'Manager',
@@ -72,6 +73,7 @@ describe('AuthService', () => {
         firstName: 'First',
         lastName: 'Last',
         positionId: 'positionId',
+        signatureLink: 'signatureLink',
         position: {
           id: 'positionId',
           name: 'Manager',
@@ -150,6 +152,7 @@ describe('AuthService', () => {
         createdAt: new Date(0),
         updatedAt: new Date(0),
         refreshToken: null,
+        signatureLink: 'signatureLink',
       };
       const result = await service.login(user);
       const decodedAccessToken = jwtService.decode(result.accessToken);

apps/server/src/auth/dto/register-employee.dto.ts

@@ -32,4 +32,9 @@ export class RegisterEmployeeDto {
   @IsNotEmpty()
   @ApiProperty()
   departmentName: string;
+
+  @IsString()
+  @IsNotEmpty()
+  @ApiProperty()
+  signatureLink: string;
 }

apps/server/src/employees/dto/create-employee.dto.ts

@@ -33,4 +33,9 @@ export class CreateEmployeeDto {
   @MinLength(5)
   @ApiProperty()
   password: string;
+
+  @IsString()
+  @IsNotEmpty()
+  @ApiProperty()
+  signatureLink: string;
 }

apps/server/src/employees/employees.controller.spec.ts

@@ -31,6 +31,7 @@ describe('EmployeesController', () => {
           firstName: 'John',
           lastName: 'Doe',
           positionId: 'position-id',
+          signatureLink: 'signature-link',
           position: {
             id: 'position-id',
             name: 'position-name',
@@ -57,6 +58,7 @@ describe('EmployeesController', () => {
           firstName: 'Bilbo',
           lastName: 'Baggins',
           positionId: 'position-id',
+          signatureLink: 'signature-link',
           position: {
             id: 'position-id',
             name: 'position-name',
@@ -86,6 +88,7 @@ describe('EmployeesController', () => {
           firstName: 'John',
           lastName: 'Doe',
           positionId: 'position-id',
+          signatureLink: 'signature-link',
           position: {
             id: 'position-id',
             name: 'position-name',
@@ -112,6 +115,7 @@ describe('EmployeesController', () => {
           firstName: 'Bilbo',
           lastName: 'Baggins',
           positionId: 'position-id',
+          signatureLink: 'signature-link',
           position: {
             id: 'position-id',
             name: 'position-name',

apps/server/src/employees/employees.service.ts

@@ -20,6 +20,7 @@ export class EmployeesService {
         lastName: createEmployeeDto.lastName,
         email: createEmployeeDto.email,
         positionId: createEmployeeDto.positionId,
+        signatureLink: createEmployeeDto.signatureLink,
         pswdHash: await bcrypt.hash(
           createEmployeeDto.password,
           await bcrypt.genSalt(),

apps/server/src/employees/entities/employee.entity.ts

@@ -22,6 +22,9 @@ export class EmployeeBaseEntity implements Employee {
   @ApiProperty()
   isAdmin: boolean;
 
+  @ApiProperty()
+  signatureLink: string;
+
   @Exclude()
   pswdHash: string | null;
 

apps/web/package.json

@@ -43,10 +43,12 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.3.5",
+    "react-icons": "^5.3.0",
     "react-pdf": "^7.7.0",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.8.1",
     "react-scripts": "^5.0.1",
+    "react-signature-canvas": "^1.0.6",
     "typescript": "^5.2.2",
     "uuid": "^9.0.0"
   },
@@ -56,6 +58,7 @@
     "@babel/plugin-syntax-flow": "^7.22.5",
     "@babel/plugin-transform-react-jsx": "^7.22.5",
     "@babel/preset-env": "^7.22.10",
+    "@types/react-signature-canvas": "^1.0.6",
     "@typescript-eslint/eslint-plugin": "^6.4.1",
     "@typescript-eslint/parser": "^6.4.1",
     "prettier": "^3.0.3"

apps/web/src/client/models/CreateEmployeeDto.ts

@@ -9,5 +9,6 @@ export type CreateEmployeeDto = {
     positionId: string;
     email: string;
     password: string;
+    signatureLink: string;
 };
 

apps/web/src/client/models/EmployeeBaseEntity.ts

@@ -9,6 +9,7 @@ export type EmployeeBaseEntity = {
     lastName: string;
     email: string;
     isAdmin: boolean;
+    signatureLink: string;
     positionId: string;
     pswdHash: string | null;
     createdAt: string;

apps/web/src/client/models/EmployeeEntity.ts

@@ -11,6 +11,7 @@ export type EmployeeEntity = {
     lastName: string;
     email: string;
     isAdmin: boolean;
+    signatureLink: string;
     position: PositionBaseEntity;
     positionId: string;
     pswdHash: string | null;

apps/web/src/client/models/RegisterEmployeeDto.ts

@@ -10,5 +10,6 @@ export type RegisterEmployeeDto = {
     password: string;
     positionName: string;
     departmentName: string;
+    signatureLink: string;
 };
 

apps/web/src/client/models/UpdateEmployeeDto.ts

@@ -7,5 +7,6 @@ export type UpdateEmployeeDto = {
     firstName?: string;
     lastName?: string;
     positionId?: string;
+    signatureLink?: string;
 };
 

apps/web/src/components/ButtonSwitch.tsx

@@ -0,0 +1,63 @@
+import { Box } from '@chakra-ui/react';
+
+export const ButtonSwitch = ({
+  isToggleLeft,
+  onClickLeft,
+  onClickRight,
+  activeColor,
+  leftLabel,
+  rightLabel,
+}: {
+  isToggleLeft: boolean;
+  onClickLeft: () => void;
+  onClickRight: () => void;
+  activeColor: string;
+  leftLabel: string;
+  rightLabel: string;
+}) => {
+  const Button = ({
+    label,
+    side,
+    isActive,
+    onToggle,
+  }: {
+    label: string;
+    side: 'left' | 'right';
+    isActive: boolean;
+    onToggle: () => void;
+  }) => {
+    return (
+      <Box
+        as="button"
+        flex="1"
+        borderWidth="1px"
+        borderRadius={side === 'left' ? '4px 0 0 4px' : '0 4px 4px 0'}
+        padding="6px 12px"
+        fontWeight="500"
+        fontSize="15px"
+        borderColor={isActive ? activeColor : '#C0C0C0'}
+        color={isActive ? activeColor : '#63646B'}
+        onClick={onToggle}
+      >
+        {label}
+      </Box>
+    );
+  };
+
+  return (
+    <Box display="inline-flex">
+      <Button
+        label={leftLabel}
+        isActive={isToggleLeft}
+        side="left"
+        onToggle={onClickLeft}
+      />
+      <Button
+        label={rightLabel}
+        isActive={!isToggleLeft}
+        side="right"
+        onToggle={onClickRight}
+      />
+    </Box>
+  );
+};

apps/web/src/components/SignaturePad.tsx

@@ -0,0 +1,98 @@
+import { Box, Flex, Input, Link } from '@chakra-ui/react';
+import { useRef } from 'react';
+import SignatureCanvas from 'react-signature-canvas';
+import { ButtonSwitch } from '@web/components/ButtonSwitch';
+
+interface SignaturePadProps {
+  createSignatureType: string;
+  setCreateSignatureType: (type: string) => void;
+  signature: string;
+  setSignature: (signature: string) => void;
+  signatureCanvas: React.RefObject<SignatureCanvas>;
+  onClear?: () => void;
+}
+
+export const SignaturePad = ({
+  createSignatureType,
+  setCreateSignatureType,
+  signature,
+  setSignature,
+  signatureCanvas,
+  onClear,
+}: SignaturePadProps) => {
+  const clearSignature = () => {
+    if (signatureCanvas.current) {
+      signatureCanvas.current.clear();
+    }
+    setSignature('');
+    onClear?.();
+  };
+
+  return (
+    <>
+      <Box width="100%" display="flex" flexDirection="column">
+        <label htmlFor="signature">Create Signature</label>
+        <Flex marginTop="8px" display="flex" justifyContent={'space-between'}>
+          <Flex flex="1" flexDirection="column">
+            <ButtonSwitch
+              isToggleLeft={createSignatureType === 'draw'}
+              onClickLeft={() => setCreateSignatureType('draw')}
+              onClickRight={() => setCreateSignatureType('type')}
+              activeColor="#1367EA"
+              leftLabel="Draw"
+              rightLabel="Type"
+            />
+          </Flex>
+          <Flex flex="1" justifyContent="flex-end" alignItems="flex-end">
+            <Link
+              as="button"
+              color="#1367EA"
+              fontSize="14px"
+              onClick={clearSignature}
+            >
+              Clear
+            </Link>
+          </Flex>
+        </Flex>
+        <Box
+          borderRadius="6px"
+          border="1px solid #C0C0C0"
+          marginTop="8px"
+          position="relative"
+        >
+          {createSignatureType === 'draw' ? (
+            <>
+              <SignatureCanvas
+                penColor="black"
+                canvasProps={{
+                  width: 500,
+                  height: 120,
+                }}
+                ref={signatureCanvas}
+              />
+              <Box
+                position="absolute"
+                bottom="16px"
+                width="90%"
+                height="1px"
+                bg="#7C7F86"
+                left="50%"
+                transform="translateX(-50%)"
+              />
+            </>
+          ) : (
+            <Input
+              type="text"
+              placeholder="Type your signature here"
+              padding="8px"
+              borderRadius="6px"
+              border="1px solid #C0C0C0"
+              onChange={(e) => setSignature(e.target.value)}
+              value={signature}
+            />
+          )}
+        </Box>
+      </Box>
+    </>
+  );
+};