fix: CSS on "All Applications" Page as well as Tasks Page (#1047)

* Fix CSS on "All Applications" Page as well as Tasks Page

* formatting

---------

Co-authored-by: nikhila-aot <38471389+nikhila-aot@users.noreply.github.com>

Author: jaspalsingh-aot

cats-frontend/src/app/components/common/icon.ts

@@ -45,6 +45,7 @@ import {
   FaPaperPlane,
   FaFilePdf,
   FaPaperclip,
+  FaFileContract,
 } from 'react-icons/fa6';
 
 import {
@@ -117,3 +118,4 @@ export const MessageIcon = FaMessage;
 export const PaperPlaneIcon = FaPaperPlane;
 export const FilePdfIcon = FaFilePdf;
 export const PaperclipIcon = FaPaperclip;
+export const FileContractIcon = FaFileContract;

cats-frontend/src/app/components/navigation/dto/SideNav.ts

@@ -11,6 +11,7 @@ import {
   ListCheckIcon,
   UserTie,
   AddressBookIcon,
+  FileContractIcon,
 } from '../../common/icon';
 import { UserRoleType } from '../../../helpers/utility';
 
@@ -88,6 +89,7 @@ const icons = {
   srReference: ListCheckIcon,
   userTie: UserTie,
   AddressBook: AddressBookIcon,
+  tasks: FileContractIcon,
 };
 
 // Refactored role-based navigation lists using a Record type
@@ -114,7 +116,7 @@ const roleBasedSideBarList: Record<string, SideNav[]> = {
         createSideNav({
           displayText: 'My Tasks',
           hasChildren: false,
-          icon: icons.folios,
+          icon: icons.tasks,
           linkTo: '/mytasks',
         }),
       ],

cats-frontend/src/app/features/applications/search/Search.css

@@ -0,0 +1,76 @@
+.custom-app-container {
+  font-weight: 700;
+  font-style: Bold;
+  font-size: 36px;
+  line-height: 100%;
+  letter-spacing: 0%;
+  vertical-align: middle;
+  color: var(--typography-color-primary, #2d2d2d);
+}
+.custom-app-childern-container {
+  border-bottom: 1px solid var(--surface-border-light, #d8d8d8);
+}
+
+.custom-applications-input-txt {
+  font-size: 12px !important;
+  font-weight: 400 !important;
+  line-height: 16px !important;
+  text-align: left !important;
+}
+
+a.custom-applications-input-txt:hover {
+  color: var(--typography-color-link-hover, #1a3f6b) !important;
+}
+
+a.custom-applications-input-txt {
+  color: var(--typography-color-link, #255a90) !important;
+  text-decoration: underline !important;
+  justify-content: left !important;
+}
+
+.custom-applications-link-wrapper:hover .custom-applications-input-txt,
+.custom-applications-link-wrapper:hover .custom-applications-external-link {
+  color: var(--typography-color-link-hover, #1a3f6b) !important;
+}
+
+.custom-applications-header {
+  font-family: Noto Sans !important;
+  vertical-align: middle !important;
+  min-width: 100px !important;
+}
+
+.custom-applications-edit-lbl {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  color: var(--typography-color-primary, #2d2d2d);
+}
+
+a.custom-applications-edit-lbl {
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 16px;
+  gap: var(--layout-margin-xsmall);
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  color: var(--surface-color-primary-default, #053662);
+}
+
+.custom-applications-tbl-header {
+  font-family: Noto Sans;
+  text-align: center;
+  vertical-align: middle;
+  min-width: 100px;
+}
+
+@media (max-width: 1360px) {
+  .custom-applications-column-position {
+    position: sticky;
+    right: 0;
+    z-index: 1;
+    box-shadow:
+      -3px 0 3px 0 #00000021,
+      -0.6px 0 1.8px 0 #0000001a !important;
+  }
+}

cats-frontend/src/app/features/applications/search/Search.tsx

@@ -3,9 +3,7 @@ import debounce from 'lodash/debounce';
 import PageContainer from '../../../components/simple/PageContainer';
 import SearchInput from '../../../components/search/SearchInput';
 import { RequestStatus } from '../../../helpers/requests/status';
-import ApplicationResultsTable from './applicationResults/table';
 import { TableColumn } from '../../../components/table/TableColumn';
-import { applicationResultColumns } from './applicationResults/tableColumnConfig';
 import {
   Filter,
   ApplicationResultDto,
@@ -15,6 +13,12 @@ import {
 import { useSearchApplicationsQuery } from './hooks/SearchApplications.generated';
 import ModalDialog from '../../../components/modaldialog/ModalDialog';
 import Assignment from '../../assignment/Assignment';
+import Widget from '@cats/components/widget/Widget';
+import FilterControls from '@cats/components/filter/FilterControls';
+import { IFilterOption } from '@cats/components/filter/IFilterControls';
+import { TableColumnsIcon } from '@cats/components/common/icon';
+import { applicationResultColumns } from './SearchConfig';
+import './Search.css';
 
 interface SearchProps {
   filterMyTasks?: boolean;
@@ -40,7 +44,7 @@ const Search: React.FC<SearchProps> = ({ filterMyTasks = false }) => {
   const [sortByDir, setSortByDir] = useState<ApplicationSortByDirection>(
     ApplicationSortByDirection.Asc,
   );
-
+  const [showColumnSelect, setShowColumnSelect] = useState(false);
   const [searchParams, setSearchParams] = useState({
     searchTerm: '',
     page: 1,
@@ -168,32 +172,108 @@ const Search: React.FC<SearchProps> = ({ filterMyTasks = false }) => {
     debouncedSearch(searchTerm, page, pageSize, filter, sortBy, sortByDir);
   };
 
+  const sharedOptions: IFilterOption[] = [
+    {
+      label: 'Columns',
+      value: Filter.Assigned, // Or use a custom string if needed
+      onClick: () => setShowColumnSelect(!showColumnSelect),
+      icon: <TableColumnsIcon />,
+    },
+    // You can add more shared items here (e.g., Filter icon toggle)
+    // {
+    //   label: 'Filter',
+    //   value: 'filter',
+    //   onClick: () => setShowFilterSelect(prev => !prev),
+    //   icon: <FilterIcon />,
+    // },
+  ];
+
+  const tasksOptions: IFilterOption[] = [
+    {
+      label: 'Action Required',
+      value: Filter.All,
+      onClick: () => handleFilterChange(Filter.All),
+      isSelected: filter === Filter.All,
+    },
+    {
+      label: 'Assigned to Me',
+      value: Filter.Assigned,
+      onClick: () => handleFilterChange(Filter.Assigned),
+      isSelected: filter === Filter.Assigned,
+    },
+  ];
+
+  const generalOptions: IFilterOption[] = [
+    {
+      label: 'All',
+      value: Filter.All,
+      onClick: () => handleFilterChange(Filter.All),
+      isSelected: filter === Filter.All,
+    },
+    {
+      label: 'Unassigned',
+      value: Filter.Unassigned,
+      onClick: () => handleFilterChange(Filter.Unassigned),
+      isSelected: filter === Filter.Unassigned,
+    },
+    {
+      label: 'Overcapacity',
+      value: Filter.Overcapacity,
+      onClick: () => handleFilterChange(Filter.Overcapacity),
+      isSelected: filter === Filter.Overcapacity,
+    },
+  ];
+
+  const options: IFilterOption[] = [
+    ...(filterMyTasks ? tasksOptions : generalOptions),
+    // ...sharedOptions, uncomment once filter and columns are implemented
+  ];
+
   return (
     <PageContainer role="Search">
-      <h1> {filterMyTasks ? 'My Tasks' : ' All Applications'}</h1>
+      <div className="custom-app-container">
+        {' '}
+        {filterMyTasks ? 'My Tasks' : ' All Applications'}
+      </div>
       <SearchInput
         searchTerm={searchTerm}
         handleSearchChange={handleSearchChange}
         clearSearch={() => setSearchTerm('')}
         placeHolderText="Search"
       />
-      <ApplicationResultsTable
-        columns={columns}
-        results={results}
-        requestStatus={requestStatus}
+      {/* Widget for applications and tasks */}
+      <Widget
+        customWidgetCss="gap-4"
+        widgetLabelContainerCss={`${showColumnSelect ? '' : ''}`}
+        title="Applications"
+        aria-label="Applications Widget"
+        tableIsLoading={requestStatus}
+        tableColumns={columns}
+        tableData={results}
+        sortHandler={handleSortChange}
         changeHandler={handleChangeEventHandler}
-        handleColumnChange={setColumns}
-        handleFilterChange={handleFilterChange}
-        page={page}
-        pageSize={pageSize}
-        handlePageChange={handlePageChange}
-        handlePageSizeChange={handlePageSizeChange}
+        currentPage={page}
+        allowRowsSelect={false}
+        primaryKeycolumnName="id"
         showPageOptions={true}
+        selectPage={handlePageChange}
+        changeResultsPerPage={handlePageSizeChange}
+        resultsPerPage={pageSize}
         totalResults={totalResults}
-        filter={filter}
-        sortHandler={handleSortChange}
-        filterMyTasks={filterMyTasks}
-      />
+        filter={<FilterControls options={options} />}
+      >
+        {/* uncomment it once the column and filter design is created */}
+        {/* { 
+        showColumnSelect && 
+          <div className="custom-app-childern-container">
+              <ColumnSelect
+                columns={columns}
+                handleColumnChange={setColumns}
+              />
+          </div>
+        } */}
+      </Widget>
+
       {assignStaffModalOpen && (
         <ModalDialog
           headerLabel="Assign Application to Staff"

…applicationResults/tableColumnConfig.tsx …res/applications/search/SearchConfig.tsxcats-frontend/src/app/features/applications/search/applicationResults/tableColumnConfig.tsx renamed to cats-frontend/src/app/features/applications/search/SearchConfig.tsx cats-frontend/src/app/features/applications/search/applicationResults/tableColumnConfig.tsx renamed to cats-frontend/src/app/features/applications/search/SearchConfig.tsx

@@ -1,15 +1,9 @@
-import {
-  ExternalLink,
-  FileLinesIcon,
-} from '../../../../components/common/icon';
-import { FormFieldType } from '../../../../components/input-controls/IFormField';
-import {
-  TableColumn,
-  ColumnSize,
-} from '../../../../components/table/TableColumn';
-import { formatDateUTC } from '../../../../helpers/utility';
-import StaffAssigned from './staffAssigned';
-import './table.css';
+import { ExternalLink, FileLinesIcon } from '@cats/components/common/icon';
+import { FormFieldType } from '@cats/components/input-controls/IFormField';
+import { ColumnSize } from '@cats/components/table/TableColumn';
+import { formatDateUTC } from '@cats/helpers/utility';
+import StaffAssigned from './StaffAssigned';
+
 export const applicationResultColumns = (fromMyTasks: boolean = false) => [
   {
     id: 1,
@@ -185,11 +179,11 @@ export const applicationResultColumns = (fromMyTasks: boolean = false) => [
       customLinkValue: 'View',
       customIcon: <FileLinesIcon />,
       componentName: fromMyTasks ? 'My Tasks' : 'Applications',
-      customInputTextCss: 'application-results__view-link',
+      customInputTextCss: 'custom-applications-edit-lbl',
     },
-    dynamicColumn: false,
+    dynamicColumn: true,
     columnSize: ColumnSize.Default,
-    customHeaderCss: '',
+    customHeaderCss: 'custom-applications-tbl-header',
   },
   {
     id: 9,
@@ -202,19 +196,21 @@ export const applicationResultColumns = (fromMyTasks: boolean = false) => [
     sortOrder: 10,
     isChecked: true,
     displayType: {
-      type: FormFieldType.IconButton,
+      type: FormFieldType.Link,
       label: 'Manage Staff',
       graphQLPropertyName: 'assignStaff',
       value: '',
       tableMode: true,
-      href: '/applications/',
+      href: '#',
       customLinkValue: 'Manage Staff',
       customIcon: <FileLinesIcon />,
       componentName: 'Applications',
-      customInputTextCss: 'application-results__view-link',
+      customInputTextCss: 'custom-applications-edit-lbl',
+      customContainerCss: 'custom-applications-column-position',
     },
-    dynamicColumn: false,
+    dynamicColumn: true,
     columnSize: ColumnSize.Default,
-    customHeaderCss: '',
+    customHeaderCss:
+      'custom-applications-tbl-header custom-applications-column-position',
   },
 ];

…rch/applicationResults/staffAssigned.css …es/applications/search/StaffAssigned.csscats-frontend/src/app/features/applications/search/applicationResults/staffAssigned.css renamed to cats-frontend/src/app/features/applications/search/StaffAssigned.css cats-frontend/src/app/features/applications/search/applicationResults/staffAssigned.css renamed to cats-frontend/src/app/features/applications/search/StaffAssigned.css

@@ -70,3 +70,13 @@
   align-items: center;
   margin-left: auto; /* Pushes the element to the far right */
 }
+
+/* Hide the arrow entirely */
+.popover .popover-arrow {
+  display: none !important;
+}
+
+.popover .popover-arrow::before,
+.popover .popover-arrow::after {
+  display: none !important;
+}