Admin Features (#114)

* Show Admin Link in Mobile Nav

* Create all Available Actions

* Delete admin store page

* Update src/pages/admin/milestone.tsx

Co-authored-by: Alex Zhang <[email protected]>

---------

Co-authored-by: Alex Zhang <[email protected]>

src/components/auth/SignInTitle/index.tsx

@@ -2,10 +2,16 @@ import styles from './style.module.scss';
 
 interface SignInTitleProps {
   text: string;
+  description?: string;
 }
 
-const SignInTitle = ({ text }: SignInTitleProps) => {
-  return <h1 className={styles.title}>{text}</h1>;
+const SignInTitle = ({ text, description }: SignInTitleProps) => {
+  return (
+    <>
+      <h1 className={styles.title}>{text}</h1>
+      {description ? <h2 className={styles.subtitle}>{description}</h2> : null}
+    </>
+  );
 };
 
 export default SignInTitle;

src/components/auth/SignInTitle/style.module.scss

@@ -8,3 +8,13 @@
   margin: 0.5rem 0;
   text-align: center;
 }
+
+.subtitle {
+  align-items: center;
+  color: var(--theme-text-on-background-1);
+  font-size: 1.25rem;
+  font-style: normal;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  text-align: center;
+}

src/components/auth/SignInTitle/style.module.scss.d.ts

@@ -1,4 +1,5 @@
 export type Styles = {
+  subtitle: string;
   title: string;
 };
 

src/components/common/LinkButton/index.tsx

@@ -0,0 +1,29 @@
+import type { URL } from '@/lib/types';
+import Link from 'next/link';
+import { PropsWithChildren } from 'react';
+import style from './style.module.scss';
+
+interface IProps {
+  variant?: 'primary' | 'secondary';
+  destructive?: boolean;
+  href: URL;
+  size?: 'default' | 'small';
+}
+
+const LinkButton = (props: PropsWithChildren<IProps>) => {
+  const { variant = 'primary', destructive = false, href, size = 'default', children } = props;
+
+  return (
+    <Link
+      className={style.button}
+      data-variant={variant}
+      data-destructive={destructive}
+      data-size={size}
+      href={href}
+    >
+      {children}
+    </Link>
+  );
+};
+
+export default LinkButton;

src/components/common/LinkButton/style.module.scss

@@ -0,0 +1,62 @@
+@use '../../../styles/vars.scss' as vars;
+
+.button {
+  align-items: center;
+  background-color: #62b0ff;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  height: 2rem;
+  justify-content: center;
+  padding: 4px 1rem;
+  transition: 0.3s ease-in-out transform;
+
+  width: fit-content;
+
+  &[data-size='default'] {
+    height: 2.5rem;
+  }
+
+  &[data-size='small'] {
+    height: 2rem;
+  }
+
+  &[data-variant='primary'] {
+    background-color: #62b0ff;
+    border: 1px solid #fff;
+    color: #fff;
+
+    &[data-destructive='true'] {
+      background-color: #ef626c;
+      border: 1px solid #fff;
+      color: #fff;
+    }
+  }
+
+  &[data-variant='secondary'] {
+    background-color: #fff;
+    border: 1px solid #62b0ff;
+    color: #62b0ff;
+
+    &[data-destructive='true'] {
+      background-color: #fff;
+      border: 1px solid #ef626c;
+      color: #ef626c;
+    }
+  }
+
+  &:hover {
+    transform: scale(1.04);
+
+    &:disabled {
+      cursor: wait;
+      transform: scale(1);
+    }
+  }
+
+  &:disabled {
+    background-color: vars.$disabled !important;
+  }
+}

src/components/common/LinkButton/style.module.scss.d.ts

@@ -0,0 +1,9 @@
+export type Styles = {
+  button: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

src/components/common/index.ts

@@ -3,6 +3,7 @@ export { default as Carousel } from './Carousel';
 export { default as CommunityLogo } from './CommunityLogo';
 export { default as Cropper } from './Cropper';
 export { default as Dropdown } from './Dropdown';
+export { default as LinkButton } from './LinkButton';
 export { default as Modal } from './Modal';
 export { default as PaginationControls } from './PaginationControls';
 export { default as SEO } from './SEO';

src/components/layout/Navbar/index.tsx

@@ -62,7 +62,7 @@ const Navbar = ({ user }: NavbarProps) => {
     );
   }
 
-  const isAdmin = PermissionService.canViewAdminPage().includes(user.accessType);
+  const isAdmin = PermissionService.canViewAdminPage.includes(user.accessType);
 
   return (
     <header className={styles.header} ref={headerRef}>
@@ -126,11 +126,17 @@ const Navbar = ({ user }: NavbarProps) => {
           <ShopIcon className={styles.iconLink} />
           Store
         </Link>
+        {isAdmin ? (
+          <Link className={styles.mobileNavItem} href={config.admin.homeRoute}>
+            <SettingsIcon color="var(--theme-text-on-background-1)" className={styles.iconLink} />
+            Admin Settings
+          </Link>
+        ) : null}
         <div>
           <ThemeToggle />
         </div>
+        <hr className={styles.wainbow} />
       </div>
-      <hr className={styles.wainbow} />
     </header>
   );
 };

src/components/layout/Navbar/style.module.scss

@@ -1,7 +1,5 @@
 @use 'src/styles/vars.scss' as vars;
 
-$wainbow-height: 20rem;
-
 .header {
   background-color: var(--theme-background);
   height: vars.$header-height;
@@ -119,19 +117,19 @@ $wainbow-height: 20rem;
     font-size: 20px;
     font-weight: 700;
     gap: 0.25rem;
-    height: $wainbow-height;
+    height: fit-content;
     justify-content: center;
     line-height: 300%;
-    margin-top: #{$wainbow-height * -1};
 
-    padding: 0 1rem 1rem;
+    padding: 0 1rem;
     position: relative;
-    transition: margin-top 0.3s cubic-bezier(0, 0.4, 0.1, 1), background-color 0.3s ease;
+    transform: translateY(calc(-100% + 0.25rem));
+    transition: transform 0.3s cubic-bezier(0, 0.4, 0.1, 1), background-color 0.3s ease;
     width: 100vw;
     z-index: -1;
 
     &[data-open='true'] {
-      margin-top: 0;
+      transform: translateY(0%);
     }
 
     .mobileNavItem {
@@ -158,7 +156,8 @@ $wainbow-height: 20rem;
   .wainbow {
     background: vars.$wainbow;
     height: 0.25rem;
-    width: 100vw;
+    margin: 0 -1rem;
+    width: calc(100% + 2rem);
   }
 }
 

src/lib/config.ts

@@ -88,6 +88,15 @@ const config = {
   },
   admin: {
     homeRoute: '/admin',
+    awardPoints: '/admin/points',
+    grantPastAttendance: '/admin/attendance',
+    awardMilestone: '/admin/milestone',
+    viewResumes: '/admin/resumes',
+    store: {
+      items: '/admin/store/items',
+      pickupEvents: '/admin/store/pickupEvents',
+      homeRoute: '/admin/store',
+    },
     events: {
       homeRoute: '/admin/event',
       editRoute: '/admin/event/edit',

src/lib/services/PermissionService.ts

@@ -3,30 +3,26 @@ import { UserAccessType } from '@/lib/types/enums';
 /**
  * Wrapper class to manage permissions by helping setting restrictions and validating permissions across the application
  */
-export const canEditMerchItems = (): UserAccessType[] => {
-  return [UserAccessType.ADMIN, UserAccessType.MERCH_STORE_MANAGER];
-};
+export const canEditMerchItems = [UserAccessType.ADMIN, UserAccessType.MERCH_STORE_MANAGER];
 
-export const canManageEvents = (): UserAccessType[] => {
-  return [UserAccessType.ADMIN, UserAccessType.MARKETING];
-};
+export const canManageEvents = [UserAccessType.ADMIN, UserAccessType.MARKETING];
 
-export const canViewAdminPage = (): UserAccessType[] => {
-  return [
-    UserAccessType.ADMIN,
-    UserAccessType.MARKETING,
-    UserAccessType.MERCH_STORE_MANAGER,
-    UserAccessType.MERCH_STORE_DISTRIBUTOR,
-  ];
-};
+export const canAwardPoints = [UserAccessType.ADMIN];
+
+// will add sponsorship role here soon
+export const canViewResumes = [UserAccessType.ADMIN];
+
+export const canViewAdminPage = [
+  UserAccessType.ADMIN,
+  UserAccessType.MARKETING,
+  UserAccessType.MERCH_STORE_MANAGER,
+  UserAccessType.MERCH_STORE_DISTRIBUTOR,
+];
 
 /**
  * @returns Array of all possible user access types
  */
-export const allUserTypes = (): UserAccessType[] => {
-  const values = Object.values(UserAccessType) as UserAccessType[];
-  return values;
-};
+export const allUserTypes = () => Object.values(UserAccessType) as UserAccessType[];
 
 /**
  * @param types to exclude from array

src/pages/admin/attendance.tsx

@@ -0,0 +1,89 @@
+import { SignInButton, SignInFormItem, SignInTitle } from '@/components/auth';
+import { VerticalForm } from '@/components/common';
+import { config } from '@/lib';
+import withAccessType from '@/lib/hoc/withAccessType';
+import { PermissionService, ValidationService } from '@/lib/services';
+import type { GetServerSideProps, NextPage } from 'next';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { AiOutlineMail } from 'react-icons/ai';
+import { VscLock } from 'react-icons/vsc';
+
+interface FormValues {
+  email: string;
+  description: string;
+  points: number;
+}
+const AwardPointsPage: NextPage = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormValues>();
+
+  const onSubmit: SubmitHandler<FormValues> = () => {
+    // TODO
+  };
+
+  return (
+    <VerticalForm onEnterPress={handleSubmit(onSubmit)}>
+      <SignInTitle
+        text="Retroactive Attendance"
+        description="Mark members as attended for past events"
+      />
+      <SignInFormItem
+        icon={<AiOutlineMail />}
+        element="input"
+        name="email"
+        type="email"
+        placeholder="User Email ([email protected])"
+        formRegister={register('email', {
+          validate: email => {
+            const validation = ValidationService.isValidEmail(email);
+            return validation.valid || validation.error;
+          },
+        })}
+        error={errors.email}
+      />
+      <SignInFormItem
+        icon={<AiOutlineMail />}
+        element="input"
+        name="description"
+        type="text"
+        placeholder="Description"
+        formRegister={register('description', {
+          required: 'Required',
+        })}
+        error={errors.description}
+      />
+      <SignInFormItem
+        icon={<VscLock />}
+        name="points"
+        element="input"
+        type="number"
+        placeholder="Point Value"
+        formRegister={register('points', {
+          required: 'Required',
+        })}
+        error={errors.points}
+      />
+      <SignInButton
+        type="button"
+        display="button1"
+        text="Award Points"
+        onClick={handleSubmit(onSubmit)}
+      />
+    </VerticalForm>
+  );
+};
+
+export default AwardPointsPage;
+
+const getServerSidePropsFunc: GetServerSideProps = async () => ({
+  props: {},
+});
+
+export const getServerSideProps = withAccessType(
+  getServerSidePropsFunc,
+  PermissionService.canAwardPoints,
+  config.admin.homeRoute
+);

src/pages/admin/event/create.tsx

@@ -31,6 +31,6 @@ const getServerSidePropsFunc: GetServerSideProps = async ({ req, res, query }) =
 
 export const getServerSideProps = withAccessType(
   getServerSidePropsFunc,
-  PermissionService.canManageEvents(),
+  PermissionService.canManageEvents,
   config.admin.homeRoute
 );

src/pages/admin/event/edit/[uuid].tsx

@@ -43,6 +43,6 @@ const getServerSidePropsFunc: GetServerSideProps = async ({ params, req, res })
 
 export const getServerSideProps = withAccessType(
   getServerSidePropsFunc,
-  PermissionService.canManageEvents(),
+  PermissionService.canManageEvents,
   config.admin.homeRoute
 );

src/pages/admin/event/index.tsx

@@ -93,6 +93,6 @@ const getServerSidePropsFunc: GetServerSideProps = async () => {
 
 export const getServerSideProps = withAccessType(
   getServerSidePropsFunc,
-  PermissionService.canManageEvents(),
+  PermissionService.canManageEvents,
   config.admin.homeRoute
 );