diff --git a/client/components/client/DropdownCard.jsx b/client/components/client/DropdownCard.jsx
deleted file mode 100644
index e6e46e1..0000000
--- a/client/components/client/DropdownCard.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-"use client";
-import React from "react";
-import { Menu } from "@headlessui/react";
-
-function DropdownCard() {
- return (
-
-
-
- Add outreach
-
-
-
-
- Edit
-
-
-
-
- Archive
-
-
-
-
- Delete
-
-
-
- );
-}
-
-export default DropdownCard;
diff --git a/client/components/ui/ActionMenu.jsx b/client/components/ui/ActionMenu.jsx
index cab85b7..20b1bea 100644
--- a/client/components/ui/ActionMenu.jsx
+++ b/client/components/ui/ActionMenu.jsx
@@ -1,12 +1,106 @@
-import Link from 'next/link'
-import { FunnelIcon, ArrowsUpDownIcon, ListBulletIcon } from '@heroicons/react/20/solid'
+import { FunnelIcon, ArrowsUpDownIcon, ListBulletIcon, XMarkIcon } from '@heroicons/react/20/solid'
+import { useState } from 'react'
+
+const ActionMenu = ({ sortClients, filterClients, clearFilter, filteringOptions }) => {
+ const [currentSort, setCurrentSort] = useState('')
+ const [currentFilter, setCurrentFilter] = useState([])
+
+ function handleSortAZ() {
+ // Sort from A to Z, case-insensitive comparison
+ sortClients((a, b) => a['businessType'].localeCompare(b['businessType'], "en", { sensitivity: 'base' }))
+ setCurrentSort('Sorted AZ')
+ };
+
+ function handleSortZA() {
+ // Sort from Z to A, case-insensitive comparison
+ sortClients((a, b) => b['businessType'].localeCompare(a['businessType'], "en", { sensitivity: 'base' }))
+ setCurrentSort('Sorted ZA')
+ }
+
+
+ function handleFiltering(event, filterValue) {
+ const filteringValue = filterValue
+ const updateFilters = [...currentFilter]
+
+ // Check if filters array includes new filter value; if it does, remove it, else add to filters array
+ if (updateFilters.includes(filteringValue)) {
+ updateFilters.splice(updateFilters.indexOf(filteringValue), 1)
+ } else {
+ updateFilters.push(filteringValue)
+ }
+
+ let filteredData = filteringOptions.filter((option) =>
+ // We get an array of filteredData based on the filtering values
+ updateFilters.includes(option.businessType.toLowerCase())
+ )
+
+
+ if (filteredData.length == 0) {
+ // important: when all fitlers are cleared, need to reset to original client data
+ filteredData = filteringOptions
+ }
+
+ filterClients(filteredData)
+ setCurrentFilter(updateFilters)
+ }
+
+ function removeFilter() {
+ setCurrentFilter([])
+ clearFilter()
+ }
+
+ const businessTypesList = [...new Set(
+ filteringOptions
+ ?.map((client, i) => client.businessType.toLowerCase())
+ .sort()
+ )]
+
+ const filterOptionElements = businessTypesList?.map((option, i) => {
+ return (
+
+ )
+
+ })
+
-const ActionMenu = () => {
return (
-
-
-
+
+
+
+
+
+ {filterOptionElements}
+
+
+ {currentSort}
+
+ }
+ {currentFilter &&
+
+ {currentFilter.map((filter, i) =>
+ ( handleFiltering(e, filter)}>{filter}
))
+ }
+ {currentFilter.length > 0 && Clear
}
+
+ }
)
}
diff --git a/client/components/ui/Header.jsx b/client/components/ui/Header.jsx
index b749ad2..6b65b06 100644
--- a/client/components/ui/Header.jsx
+++ b/client/components/ui/Header.jsx
@@ -41,7 +41,7 @@ const Header = ({ ThemeToggle }) => {
/>