v1.1.0

frontend/src/components/charts/StatusDonutChart.tsx

@@ -39,7 +39,6 @@ const chartConfig = {
 } satisfies ChartConfig
 
 export const StatusDonutChart = ({ data }: any) => {
-    console.log(data)
     const totalQuickdos = data.reduce((acc: any, curr: any) => acc + curr.quickdo, 0)
 
     return (

frontend/src/components/layout/filters.tsx

@@ -1,123 +1,244 @@
-import React from "react";
+"use client"
+
+import type React from "react"
+import { useState } from "react"
 import {
     DropdownMenu,
     DropdownMenuCheckboxItem,
     DropdownMenuContent,
     DropdownMenuGroup,
+    DropdownMenuItem,
     DropdownMenuLabel,
     DropdownMenuPortal,
     DropdownMenuSeparator,
     DropdownMenuSub,
     DropdownMenuSubContent,
     DropdownMenuSubTrigger,
     DropdownMenuTrigger,
-    DropdownMenuItem
 } from "@/components/ui/dropdown-menu"
-import { IoClose } from "react-icons/io5";
-import { Button } from "../ui/button";
+import { Calendar } from "@/components/ui/calendar"
+import { X, Check } from "lucide-react"
+import { Button } from "@/components/ui/button"
+
+// ? IMPORT ALL UTILITY FUNCTIONS FROM SINGLE FILE
+import {
+    getSelectedDate,
+    getFormattedDate,
+    isSameDay,
+    isDateFilterActive,
+    isStatusFilterActive,
+    isCategoryFilterActive,
+    isImportanceFilterActive,
+    isReminderFilterActive,
+    type useStatusFiltersItems,
+} from "@/utils/filter-utils"
 
 interface FiltersProps {
-    filters: any[];
-    useStatusFilterData: any[];
-    getAllCategories: any[];
-    defaultFilter: any[];
-    handleFilters: (type: string, value: string, label?: string) => void;
-    handleClearFilters: () => void;
-    setRefreshState: (state: boolean) => void;
+    filters: any[]
+    useStatusFilterData: useStatusFiltersItems[]
+    getAllCategories: any[]
+    defaultFilter?: any[]
+    handleFilters: (key: string, value: string, filter_type?: "single" | "multi", child_table?: string) => void
+    handleClearFilters: () => void
+    setRefreshState: (state: boolean) => void
 }
 
-const Filters: React.FC<FiltersProps> = ({ filters, useStatusFilterData, getAllCategories, handleFilters, handleClearFilters, setRefreshState, defaultFilter = null }) => {
+const Filters: React.FC<FiltersProps> = ({
+    filters,
+    useStatusFilterData,
+    getAllCategories,
+    handleFilters,
+    handleClearFilters,
+    setRefreshState,
+    defaultFilter = [],
+}) => {
+    const [dropdownOpen, setDropdownOpen] = useState<boolean>(false)
+
+    // ? HANDLE DATE SELECTION - SINGLE DATE ONLY WITH PROPER HIGHLIGHTING
+    const handleDateSelect = (selectedDate: Date | undefined) => {
+        const currentSelectedDate = getSelectedDate(filters)
+
+        // ? If clicking on the same date that's already selected, remove the filter
+        if (selectedDate && currentSelectedDate && isSameDay(selectedDate, currentSelectedDate)) {
+            handleFilters("date", "", "single")
+            setDropdownOpen(false)
+            return
+        }
+
+        // ? If no date selected, remove filter
+        if (!selectedDate) {
+            handleFilters("date", "", "single")
+            setDropdownOpen(false)
+            return
+        }
+
+        // ? Apply filter for the selected date only
+        const formattedDate = getFormattedDate(selectedDate)
+        handleFilters("date", formattedDate, "single")
+
+        // ? Close dropdown after selection
+        setDropdownOpen(false)
+    }
+
+    // ? HANDLE IMPORTANCE FILTER WITH DROPDOWN CLOSE
+    const handleImportanceFilter = () => {
+        handleFilters("is_important", "1", "single")
+        setDropdownOpen(false)
+    }
+
+    // ? HANDLE REMINDER FILTER WITH DROPDOWN CLOSE
+    const handleReminderFilter = () => {
+        handleFilters("send_reminder", "1", "single")
+        setDropdownOpen(false)
+    }
 
     return (
         <div className="filters-quickdo flex border-neutral-200 border rounded-md w-fit shadow-sm sm:order-2">
-            <DropdownMenu>
+            <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
                 <DropdownMenuTrigger asChild>
-                    <Button variant="outline" className="font-normal">Filters</Button>
+                    <Button variant="outline" className="font-normal bg-transparent">
+                        Filters
+                        {/* // ? ALWAYS SHOW COUNTER BADGE - EMPTY SPACE WHEN NO FILTERS */}
+                        <span
+                            className={`ml-2 rounded-full px-2 py-0.5 text-xs min-w-[20px] text-center ${filters.length > 0 ? "bg-primary text-primary-foreground" : "bg-transparent text-transparent"
+                                }`}
+                        >
+                            {filters.length > 0 ? filters.length : "0"}
+                        </span>
+                    </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="start" className="w-56">
                     <DropdownMenuLabel>Filters</DropdownMenuLabel>
                     <DropdownMenuSeparator />
-
                     <DropdownMenuGroup>
-                        {/* STATUS FILTERS */}
+                        {/* // ? STATUS FILTERS - MULTI-VALUE WITH RIGHT-SIDE CHECKBOX */}
                         <DropdownMenuSub>
-                            <DropdownMenuSubTrigger>Status</DropdownMenuSubTrigger>
+                            <DropdownMenuSubTrigger className={isStatusFilterActive(filters) ? "bg-accent" : ""}>
+                                <div className="flex items-center justify-between w-full">
+                                    <span>Status</span>
+                                    <div className="flex items-center gap-1">
+                                        {isStatusFilterActive(filters) && <Check className="h-4 w-4 text-primary" />}
+                                    </div>
+                                </div>
+                            </DropdownMenuSubTrigger>
                             <DropdownMenuPortal>
                                 <DropdownMenuSubContent>
-                                    {useStatusFilterData.length > 0 && useStatusFilterData.map((data, index) => (
-                                        <DropdownMenuCheckboxItem
-                                            key={index}
-                                            checked={filters.some(filter => filter[0] === "status" && filter[2]?.includes(data.name))}
-                                            onCheckedChange={() => handleFilters("status", data.name)}
-                                        >
-                                            {data.name}
-                                        </DropdownMenuCheckboxItem>
-                                    ))}
+                                    {useStatusFilterData.length > 0 &&
+                                        useStatusFilterData.map((data, index) => (
+                                            <DropdownMenuCheckboxItem
+                                                key={index}
+                                                checked={filters.some((filter) => filter[0] === "status" && filter[2]?.includes(data.name))}
+                                                onCheckedChange={() => handleFilters("status", data.name, "multi")}
+                                            >
+                                                {data.name}
+                                            </DropdownMenuCheckboxItem>
+                                        ))}
                                 </DropdownMenuSubContent>
                             </DropdownMenuPortal>
                         </DropdownMenuSub>
 
-                        {/* CATEGORY FILTERS */}
+                        {/* // ? CATEGORY FILTERS - MULTI-VALUE WITH RIGHT-SIDE CHECKBOX */}
                         <DropdownMenuSub>
-                            <DropdownMenuSubTrigger>
-                                Category
+                            <DropdownMenuSubTrigger className={isCategoryFilterActive(filters) ? "bg-accent" : ""}>
+                                <div className="flex items-center justify-between w-full">
+                                    <span>Category</span>
+                                    <div className="flex items-center gap-1">
+                                        {isCategoryFilterActive(filters) && <Check className="h-4 w-4 text-primary" />}
+                                    </div>
+                                </div>
                             </DropdownMenuSubTrigger>
                             <DropdownMenuPortal>
                                 <DropdownMenuSubContent className="categories-items max-h-[240px] w-[200px] overflow-x-hidden whitespace-nowrap text-ellipsis overflow-y-auto">
-                                    {getAllCategories.length > 0 && getAllCategories.map((data, index) => (
-                                        <DropdownMenuCheckboxItem
-                                            key={index}
-                                            title={data.category}
-                                            checked={filters.some(filter => filter[0] === "QuickDo Categories" && filter[3]?.includes(data.category))}
-                                            onCheckedChange={() => handleFilters("category", data.category, "QuickDo Categories")}
-                                        >
-                                            {data.category}
-                                        </DropdownMenuCheckboxItem>
-                                    ))}
+                                    {getAllCategories.length > 0 &&
+                                        getAllCategories.map((data, index) => (
+                                            <DropdownMenuCheckboxItem
+                                                key={index}
+                                                title={data.category}
+                                                checked={filters.some(
+                                                    (filter) => filter[0] === "QuickDo Categories" && filter[3]?.includes(data.category),
+                                                )}
+                                                onCheckedChange={() => handleFilters("category", data.category, "multi", "QuickDo Categories")}
+                                            >
+                                                {data.category}
+                                            </DropdownMenuCheckboxItem>
+                                        ))}
                                 </DropdownMenuSubContent>
                             </DropdownMenuPortal>
                         </DropdownMenuSub>
 
-                        {/* DUE DATE FILTER */}
-                        <DropdownMenuItem>
-                            Due Date
-                        </DropdownMenuItem>
+                        {/* // ? DUE DATE FILTER - SINGLE DATE SELECTION WITH RIGHT-SIDE CHECKBOX */}
+                        <DropdownMenuSub>
+                            <DropdownMenuSubTrigger className={isDateFilterActive(filters) ? "bg-accent" : ""}>
+                                <div className="flex items-center justify-between w-full">
+                                    <span>Due Date</span>
+                                    <div className="flex items-center gap-1">
+                                        {isDateFilterActive(filters) && <Check className="h-4 w-4 text-primary" />}
+                                    </div>
+                                </div>
+                            </DropdownMenuSubTrigger>
+                            <DropdownMenuPortal>
+                                <DropdownMenuSubContent>
+                                    <Calendar
+                                        mode="single"
+                                        selected={getSelectedDate(filters)}
+                                        onSelect={handleDateSelect}
+                                        initialFocus
+                                    />
+                                </DropdownMenuSubContent>
+                            </DropdownMenuPortal>
+                        </DropdownMenuSub>
                     </DropdownMenuGroup>
 
                     <DropdownMenuSeparator />
 
                     <DropdownMenuGroup>
-                        {/* IMPORTANCE FILTER */}
-                        <DropdownMenuCheckboxItem
-                            checked={filters.some(filter => filter[0] === "is_important" && filter[2]?.includes("1"))}
-                            onCheckedChange={() => handleFilters("is_important", "1")}
+                        {/* // ? IMPORTANCE FILTER - SINGLE-VALUE WITH RIGHT-SIDE CHECKBOX AND DROPDOWN CLOSE */}
+                        <DropdownMenuItem
+                            className={`flex items-center justify-between w-full ${isImportanceFilterActive(filters) ? "bg-accent" : ""}`}
+                            onClick={handleImportanceFilter}
                         >
-                            Importance
-                        </DropdownMenuCheckboxItem>
+                            <span>Importance</span>
+                            <div className="flex items-center gap-1">
+                                {isImportanceFilterActive(filters) && <Check className="h-4 w-4 text-primary" />}
+                            </div>
+                        </DropdownMenuItem>
 
-                        {/* REMINDER FILTER */}
-                        <DropdownMenuCheckboxItem
-                            checked={filters.some(filter => filter[0] === "send_reminder" && filter[2]?.includes("1"))}
-                            onCheckedChange={() => handleFilters("send_reminder", "1")}
+                        {/* // ? REMINDER FILTER - SINGLE-VALUE WITH RIGHT-SIDE CHECKBOX AND DROPDOWN CLOSE */}
+                        <DropdownMenuItem
+                            className={`flex items-center justify-between w-full ${isReminderFilterActive(filters) ? "bg-accent" : ""}`}
+                            onClick={handleReminderFilter}
                         >
-                            Reminder
-                        </DropdownMenuCheckboxItem>
+                            <span>Reminder</span>
+                            <div className="flex items-center gap-1">
+                                {isReminderFilterActive(filters) && <Check className="h-4 w-4 text-primary" />}
+                            </div>
+                        </DropdownMenuItem>
                     </DropdownMenuGroup>
                 </DropdownMenuContent>
             </DropdownMenu>
 
-            {/* CLEAR FILTERS */}
+            {/* // ? CLEAR FILTERS */}
             <button
-                className="clear-filters px-3 py-2 text-[20px]"
+                className="clear-filters px-3 py-2 text-[20px] hover:bg-accent rounded-r-md transition-colors"
                 onClick={() => {
-                    handleClearFilters();
-                    setRefreshState(true);
+                    handleClearFilters()
+                    setRefreshState(true)
                 }}
+                title="Clear Filters"
             >
-                <IoClose title="Clear Filters" className={`text-xl transition-transform duration-300 ${defaultFilter ? filters.length == defaultFilter.length ? "rotate-45" : "rotate-180" : filters.length === 0 ? "rotate-45" : "rotate-180"}`} />
+                <X
+                    className={`h-5 w-5 transition-transform duration-300 ${defaultFilter
+                        ? filters.length === defaultFilter.length
+                            ? "rotate-45"
+                            : "rotate-180"
+                        : filters.length === 0
+                            ? "rotate-45"
+                            : "rotate-180"
+                        }`}
+                />
             </button>
         </div>
-    );
-};
+    )
+}
 
-export default Filters;
+export default Filters

frontend/src/components/layout/navbar.tsx

@@ -18,8 +18,10 @@ import {
 const userProfileItems: UserProfileItem[] = [
     { name: "Frappe Dashboard", link: "/app/quickdos" },
     { name: "Apps", link: "/apps/" },
-    { name: "My Profile", link: "/app/user-profile" },
-    { name: "My Settings", link: "/app/user" },
+    // TODO : CREATE A USER PROFILE PAGE IN REACT
+    { name: "My Profile", link: "/me" },
+    // TODO : CREATE A USER SETTINGS PAGE IN REACT WITH BACKEND
+    // { name: "My Settings", link: "/app/user" },
     { name: "Logout", link: "/quickdo/auth/logout" },
 ];