uninstalled headless ui & utilized daisy ui for client dropdown menu

.github/CODEOWNERS

@@ -0,0 +1,2 @@
+# Require specific PR reviews for entire repository
+**             @devlarabar

.github/pull_request_template.md

@@ -0,0 +1,19 @@
+### Description
+
+Put a description of your changes here.
+
+### Testing
+
+Put a short description of how you tested your changes here.
+
+### Did you change the schema?
+
+- [ ] Yes
+- [ ] No
+
+### Issue
+
+Closes #ISSUE_NUM
+
+
+

client/app/home/page.jsx

@@ -11,30 +11,56 @@ import { fetchClients } from '@utils/client'
 const Home = () => {
     const auth = useAuthContext()
     const [clients, setClients] = useState(null)
+    const [filteringOptions, setFilteringOptions] = useState([])
 
     useEffect(() => {
-        fetchClients().then(data => setClients(data))
+        fetchClients().then(data => {
+            setClients(data)
+            setFilteringOptions(data)
+        })
     }, [auth?.user])
 
     if (!auth?.checkAuth) return <Spinner />
     if (auth?.isAuthenticated === "unauthenticated") return redirect('/')
 
+    function sortClients(sortingFunction) {
+        // Clone the clients array and sort it using the provided sorting function.
+        const sortedClients = [...clients].sort(sortingFunction)
+        setClients(sortedClients)
+    }
+
+    function filterClients(data) {
+        setClients(data)
+    }
+
+    function clearFilter() {
+        // Reset 'clients' to original data from the server
+        setClients(filteringOptions)
+    }
+
     return (
         <>
             <div className="px-8 pb-4">
-                <ActionMenu />
+                <ActionMenu
+                    sortClients={sortClients}
+                    filterClients={filterClients}
+                    filteringOptions={filteringOptions}
+                    clearFilter={clearFilter}
+                />
             </div>
+
             <div className="flex flex-wrap gap-x-[2%] gap-y-4 justify-center">
                 {clients === null && <Spinner />}
                 {clients && clients.length > 0
                     && clients.map((client, index) => {
                         return <ClientCard client={client} key={index} />
                     })
                 }
+
                 {clients && clients.length === 0 && <p>You have not added any clients!</p>}
             </div>
         </>
     )
 }
 
-export default Home
+export default Home

client/components/client/ClienCardDropdown.jsx

@@ -0,0 +1,32 @@
+"use client";
+import React from "react";
+import { EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
+
+function ClienCardDropdown() {
+  return (
+    <div className="dropdown dropdown-right border text-secondary">
+      <label tabIndex={0} className="">
+        <EllipsisHorizontalIcon className="h-8 w-8 cursor-pointer stroke-1 text-accent hover:stroke-2" />
+      </label>
+      <ul
+        tabIndex={0}
+        className="dropdown-menu menu dropdown-content rounded-box z-[1] w-52 bg-base-100 p-2 shadow"
+      >
+        <li>
+          <a>Add Outreach</a>
+        </li>
+        <li>
+          <a>Edit</a>
+        </li>
+        <li>
+          <a>Archive</a>
+        </li>
+        <li>
+          <a>Delete</a>
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+export default ClienCardDropdown;

client/components/client/ClientCard.jsx

@@ -1,9 +1,7 @@
 import React, { useState } from "react";
-import { Menu } from "@headlessui/react";
-import DropdownCard from "./DropdownCard";
+import ClienCardDropdown from "./ClienCardDropdown";
 
 import {
-  EllipsisHorizontalIcon,
   PhoneIcon,
   EnvelopeIcon,
   MapPinIcon,
@@ -14,14 +12,8 @@ const ClientCard = ({ client }) => {
       <div>
         <div className="relative flex justify-between">
           <h3 className="">{client.name}</h3>
-          <Menu>
-            <Menu.Button>
-              <EllipsisHorizontalIcon className="h-8 w-8 cursor-pointer stroke-1 text-accent hover:stroke-2" />
-            </Menu.Button>
-            <DropdownCard />
-          </Menu>
+          <ClienCardDropdown />
         </div>
-
         <hr />
         <span className="text-sm italic">{client.businessType}</span>
         <div className="client-contact">

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 (
+            <label key={i} className='label '>
+                <span className="label-text capitalize">{option}</span>
+                <input
+                    type='checkbox'
+                    value={option}
+                    checked={currentFilter.includes(option)}
+                    onChange={(e) => handleFiltering(e, option)}
+                    className='checkbox'
+                />
+            </label>
+        )
+
+    })
+
 
-const ActionMenu = () => {
     return (
-        <section className="flex">
-            <ArrowsUpDownIcon className="action-icon" title="Sort By" />
-            <FunnelIcon className="action-icon" title="Filter By" />
+        <section className="flex pl-8">
+            <div className="dropdown dropdown-bottom text-secondary">
+                <label tabIndex={0} className=""><ArrowsUpDownIcon className="action-icon" title="Sort By" /></label>
+                <ul tabIndex={0} className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-primary border border-secondary rounded-box w-16 ">
+                    <li className='cursor-pointer btn-ghost text-sm text-center' onClick={handleSortAZ}>A Z</li>
+                    <li className='cursor-pointer btn-ghost text-sm text-center' onClick={handleSortZA}>Z A</li>
+                </ul>
+            </div>
+            <div className="dropdown dropdown-bottom text-secondary">
+                <label tabIndex={0} className=""><FunnelIcon className="action-icon" title="Filter By" /></label>
+                <ul tabIndex={0} className="dropdown-menu">
+                    {filterOptionElements}
+                </ul>
+            </div>
             <ListBulletIcon className="action-icon" title="List View" />
+            {currentSort &&
+                <div className="badge badge-primary self-center flex justify-center items-center leading-none mx-1">
+                    {currentSort}
+                </div>
+            }
+            {currentFilter &&
+                <section className='flex justify-center items-center'>
+                    {currentFilter.map((filter, i) =>
+                        (<div key={i} className="badge badge-primary self-center flex justify-center items-center gap-1 leading-none cursor-pointer mx-1" onClick={(e) => handleFiltering(e, filter)}>{filter} <XMarkIcon className="w-3 h-3" /></div>))
+                    }
+                    {currentFilter.length > 0 && <div className='border-b-2 text-sm cursor-pointer ml-1' onClick={removeFilter}>Clear</div>}
+                </section>
+            }
         </section>
     )
 }

client/components/ui/Header.jsx

@@ -41,7 +41,7 @@ const Header = ({ ThemeToggle }) => {
                                 />
                             </div>
                         </label>
-                        <ul tabIndex="0" className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-primary border border-secondary rounded-box w-52">
+                        <ul tabIndex="0" className="dropdown-menu">
                             <li><Link href={homeLink}>Home</Link></li>
                             <li>
                                 <Link href={'/profile'} className="justify-between">
@@ -56,9 +56,7 @@ const Header = ({ ThemeToggle }) => {
                                 <li><Link href={'/admin'}>Admin Tools</Link></li>
                             }
                             <li><span className="pointer" onClick={logOut}>Logout</span></li>
-                            <li><div className="form-control flex flex-row gap-1 mr-2">
-                                <ThemeToggle />
-                            </div></li>
+                            <li><ThemeToggle /></li>
                         </ul>
                     </div>