@campxdev/shared 1.9.0 → 1.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/ApplicationProfile/ApplicationProfile.tsx

@@ -28,10 +28,12 @@ import { axiosErrorToast } from '../../config/axios'
 import { ValidateAccess } from '../../permissions'
 import { Permission, PermissionsStore } from '../../shared-state'
 import ActionButton from '../ActionButton'
+import FilterButton from '../FilterComponents/FilterButton'
 import SearchBar from '../FilterComponents/SearchBar'
 import { SingleSelect } from '../Input'
-import { DialogButton } from '../ModalButtons'
+import { DialogButton, DrawerButton } from '../ModalButtons'
 import Table from '../Tables/BasicTable/Table'
+import DeprartmentFilter from './DepartmentFilter'
 
 interface ApplicationProfileProps {
   application: 'exams' | 'square' | 'payments' | 'enroll_x' | 'hostels'
@@ -49,10 +51,14 @@ function ApplicationProfile({
   permissions,
 }: ApplicationProfileProps) {
   const { isConfirmed } = useConfirm()
-  const [filters, setFilters] = useImmer(defaultFilterObj)
+  const [state, setState] = useImmer(defaultFilterObj)
+
   const { data, isLoading, refetch } = useQuery(
-    ['application-users', filters],
-    () => fetchApplicationUsers({ application, ...filters }),
+    [
+      'application-users',
+      ...Object.keys(state.filters).map((key) => state.filters[key]),
+    ],
+    () => fetchApplicationUsers({ application, ...state.filters }),
   )
 
   const { data: profiles, isLoading: profilesLoading } = useQuery(
@@ -63,7 +69,7 @@ function ApplicationProfile({
   const { mutate, isLoading: removingUserProfile } = useMutation(
     removeUserApplicationProfile,
     {
-      onSuccess: (res) => {
+      onSuccess: () => {
         refetch()
         toast.success('User profile removed from application')
       },
@@ -77,6 +83,7 @@ function ApplicationProfile({
     if (!confirmed) return
     mutate({ userId: data.id, application: application })
   }
+
   const columns = [
     {
       title: 'User',
@@ -122,15 +129,15 @@ function ApplicationProfile({
     },
   ]
   const handleLimitChange = (value: number) => {
-    setFilters((s) => {
-      s.limit = value
-      s.offset = 0
+    setState((s) => {
+      s.filters.limit = value
+      s.filters.offset = 0
     })
   }
 
   const handlePagination = (value: number) => {
-    setFilters((s) => {
-      s.offset = value * s.limit - s.limit
+    setState((s) => {
+      s.filters.offset = value * s.filters.limit - s.filters.limit
     })
   }
 
@@ -168,29 +175,56 @@ function ApplicationProfile({
       />
       <PageContent sx={{ marginTop: '25px' }}>
         <StyledTableContainer>
-          <SearchBar
-            onSearch={(value) => {
-              setFilters((s) => {
-                s.search = value
-              })
+          <Box
+            sx={{
+              display: 'flex',
+              gap: '10px',
+              alignItems: 'center',
+              marginBottom: '10px',
             }}
-            textFieldProps={{
-              placeholder: 'Search by Name',
-              title: 'Search by Name',
-              sx: { width: '300px', marginBottom: '25px' },
-              size: 'small',
-            }}
-          />
+          >
+            <Box>
+              <SearchBar
+                onSearch={(value) =>
+                  setState((s) => {
+                    s.filters.search = value
+                  })
+                }
+                textFieldProps={{
+                  placeholder: 'Search by Name',
+                  title: 'Search by Name',
+                  sx: { width: '300px' },
+                  size: 'medium',
+                }}
+              />
+            </Box>
+            <DrawerButton
+              anchor={({ open }) => (
+                <FilterButton
+                  onClick={open}
+                  filtersApplied={state.filtersApplied}
+                />
+              )}
+              content={({ close }) => (
+                <DeprartmentFilter
+                  close={close}
+                  setAppliedFilters={setState}
+                  appliedFilters={state}
+                />
+              )}
+              title="People Filters"
+            />
+          </Box>
           <Table
             columns={columns}
             dataSource={data?.result ?? []}
             loading={isLoading || removingUserProfile}
             pagination={{
-              limit: filters.limit,
+              limit: state.filters.limit,
               onChangeLimit: handleLimitChange,
               onChange: handlePagination,
               totalCount: data?.count,
-              page: filters.offset / filters.limit,
+              page: state.filters.offset / state.filters.limit,
             }}
           />
         </StyledTableContainer>
@@ -218,14 +252,14 @@ export const RenderProfileDropDown = ({
   })
 
   useEffect(() => {
-    setState((pre) => ({
+    setState(() => ({
       userId: data.id,
       profileId: data?.profiles?.find((p) => p.application === application)?.id,
     }))
   }, [data])
 
   const { mutate, isLoading } = useMutation(updateUserApplicationProfile, {
-    onSuccess: (res) => {
+    onSuccess: () => {
       refetchFn()
       toast.success('User application profile updated successfully')
     },
@@ -333,7 +367,7 @@ export const StyledTableContainer = styled(Box)(({ theme }) => ({
   },
 }))
 
-export const StyledDropDownContainer = styled(Box)(({ theme }) => ({
+export const StyledDropDownContainer = styled(Box)(() => ({
   width: '200px',
   '& .MuiTypography-root': {
     display: 'none',

package/src/components/ApplicationProfile/DepartmentFilter.tsx

@@ -0,0 +1,77 @@
+import { Button, Stack } from '@mui/material'
+import { useEffect } from 'react'
+import { useQuery } from 'react-query'
+import { useImmer } from 'use-immer'
+import axios from '../../config/axios'
+import { SingleSelect } from '../Input'
+import Spinner from '../Spinner'
+
+const defaultState = {
+  departmentId: '',
+}
+
+const getDepartments = () => {
+  return axios.get('/square/departments').then((res) => res.data)
+}
+
+export default function DeprartmentFilter({
+  close,
+  appliedFilters,
+  setAppliedFilters,
+}) {
+  const [filter, setFilter] = useImmer(defaultState)
+
+  const { data, isLoading } = useQuery('department', () => getDepartments())
+
+  useEffect(() => {
+    setFilter({ departmentId: appliedFilters.filters.departmentId })
+  }, [])
+
+  const applyFilter = () => {
+    close()
+    setAppliedFilters((s) => {
+      s.filters.departmentId = filter.departmentId
+      s.filtersApplied = filter.departmentId ? true : false
+    })
+  }
+  const clearFilter = () => {
+    setAppliedFilters((s) => {
+      s.filters.departmentId = ''
+      s.filtersApplied = false
+    })
+    close()
+  }
+
+  if (isLoading) return <Spinner />
+  return (
+    <>
+      <Stack gap={3}>
+        <SingleSelect
+          label="Select Program"
+          onChange={(e) => {
+            setFilter((s) => {
+              s.departmentId = e.target.value
+            })
+          }}
+          value={filter.departmentId}
+          options={
+            data &&
+            data?.map((item) => ({
+              label: item?.name,
+              value: item?.id,
+            }))
+          }
+        />
+
+        <Stack direction="row" gap={2} mt={0.5}>
+          <Button fullWidth onClick={applyFilter}>
+            Apply Filters
+          </Button>
+          <Button variant="outlined" fullWidth onClick={clearFilter}>
+            Clear Filters
+          </Button>
+        </Stack>
+      </Stack>
+    </>
+  )
+}

package/src/components/ApplicationProfile/services.ts

@@ -1,9 +1,12 @@
 import * as yup from 'yup'
 import axios from '../../config/axios'
 export const defaultFilterObj = {
-  search: null,
-  limit: 10,
-  offset: 0,
+  filters: {
+    search: null,
+    limit: 10,
+    offset: 0,
+  },
+  filtersApplied: false,
 }
 
 export const userProfileSchema = yup.object().shape({

package/src/components/Institutions/InsititutionsDialog.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography } from '@mui/material'
+import { Box, Stack, Typography, styled } from '@mui/material'
 import { InsititutionsStore } from '../../shared-state/InstitutionsStore'
 import Image from '../Image/Image'
 
@@ -6,30 +6,23 @@ export default function InsititutionsDialog({ close }) {
   const { institutions } = InsititutionsStore.useState((s) => s)
 
   return (
-    <Box
+    <Stack
+      gap={4}
       sx={{
         padding: '20px',
+        alignItems: 'center',
       }}
     >
       <Typography variant="h3" textAlign={'center'}>
         Select an Instituition
       </Typography>
-      <Box>
-        <Box
-          sx={{
-            marginTop: '30px',
-            display: 'flex',
-            gap: '30px',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          {institutions?.map((item, index) => (
-            <InstitutionCard institution={item} key={index} />
-          ))}
-        </Box>
-      </Box>
-    </Box>
+
+      <StyledInstitutionContainer>
+        {institutions?.map((item, index) => (
+          <InstitutionCard institution={item} key={index} />
+        ))}
+      </StyledInstitutionContainer>
+    </Stack>
   )
 }
 
@@ -68,3 +61,26 @@ const InstitutionCard = ({ institution }) => {
     </Box>
   )
 }
+
+export const StyledInstitutionContainer = styled(Box)(({ theme }) => ({
+  width: '87%',
+  overflowX: 'auto',
+  display: 'flex',
+  flex: 1,
+  justifyContent: 'flex-start',
+  padding: '20px',
+  gap: '20px',
+  '&::-webkit-scrollbar': {
+    width: '0.5em',
+    height: '0.5em',
+    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+  },
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: 'rgba(0, 0, 0, 0.2)',
+    borderRadius: '3px',
+
+    '&:hover': {
+      background: 'rgba(0, 0, 0, 0.3)',
+    },
+  },
+}))

package/src/components/Layout/Header/applications.ts

@@ -81,13 +81,13 @@ export const applications = [
     icon: hostelSmall,
     description: 'Manage Hostels in the Campus',
   },
-  {
-    title: 'CommuteX',
-    key: 'commute',
-    path: isDevelopment ? origins.commute.dev : origins.commute.prod,
-    icon: commuteSmall,
-    description: 'Manage Commute in the Campus',
-  },
+  // {
+  //   title: 'CommuteX',
+  //   key: 'commute',
+  //   path: isDevelopment ? origins.commute.dev : origins.commute.prod,
+  //   icon: commuteSmall,
+  //   description: 'Manage Commute in the Campus',
+  // },
   ...(isDevelopment
     ? [
         {

package/src/shared-state/PermissionsStore.ts

@@ -349,7 +349,10 @@ export enum EnrollPermissions {
   ADMISSIONS_CONFIRM = 'can_admissions_confirm',
   CAN_ADMISSION_REJECT = 'can_admissions_reject',
   CAN_ADMISSIONS_DASHBOARD_VIEW = 'can_admission_dashboard_view',
-
+  CAN_ADMISSIONS_GRAPH_VIEW = 'can_admission_graph_view',
+  CAN_ADMISSIONS_LEAD_REMARKS = 'can_admission_lead_remarks',
+  CAN_ENROLL_X_AUDIT_LOGS = 'can_enroll_x_view_audit_logs',
+  CAN_ADMISSION_APPROVAL = 'can_admission_approvals',
   // CET & PHD
   CAN_PHD_FORM_VIEW = 'can_admissions_view_phd_applications',
   CAN_PHD_FORM_DOWNLOAD = 'can_admissions_download_phd_applications',
@@ -850,6 +853,7 @@ export enum Permission {
   CAN_COUNSELLOR_VIEW = 'can_counsellor_view',
   CAN_COUNSELLOR_ADD = 'can_counsellor_add',
   CAN_COUNSELLOR_DELETE = 'can_counsellor_delete',
+  CAN_COUNSELLOR_REPORT_VIEW = 'can_counsellor_report_view',
 
   // Notifications
   CAN_NOTIFICATION_ADD = 'can_notification_add',
@@ -868,6 +872,10 @@ export enum Permission {
   ADMISSIONS_CONFIRM = 'can_admissions_confirm',
   CAN_ADMISSION_REJECT = 'can_admissions_reject',
   CAN_ADMISSIONS_DASHBOARD_VIEW = 'can_admission_dashboard_view',
+  CAN_ADMISSIONS_LEAD_REMARKS = 'can_admission_lead_remarks',
+  CAN_ADMISSIONS_GRAPH_VIEW = 'can_admission_graph_view',
+  CAN_ENROLL_X_AUDIT_LOGS = 'can_enroll_x_view_audit_logs',
+  CAN_ADMISSION_APPROVAL = 'can_admission_approvals',
 
   // CET & PHD
   CAN_PHD_FORM_VIEW = 'can_admissions_view_phd_applications',