feat: add response status filter

apps/dashboard/app/(app)/logs/filters/components/custom-date-filter.tsx

@@ -25,10 +25,10 @@ export function DatePickerWithRange({
   const [finalDate, setFinalDate] = useState<DateRange>();
   const [startTime, setStartTime] = useState({ HH: "09", mm: "00", ss: "00" });
   const [endTime, setEndTime] = useState({ HH: "17", mm: "00", ss: "00" });
-  const [calendarOpen, setCalendarOpen] = useState(false);
+  const [open, setOpen] = useState(false);
 
   const handleFinalDate = (interimDate: DateRange | undefined) => {
-    setCalendarOpen(false);
+    setOpen(false);
 
     if (interimDate?.from) {
       let mergedFrom = setHours(interimDate.from, Number(startTime.HH));
@@ -55,7 +55,7 @@ export function DatePickerWithRange({
 
   return (
     <div className={cn("grid gap-2", className)}>
-      <Popover open={calendarOpen} onOpenChange={setCalendarOpen}>
+      <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
           <div
             id="date"
@@ -125,7 +125,7 @@ export function DatePickerWithRange({
             </div>
             <div className="border-t border-border" />
           </div>
-          <div className="flex gap-2 p-2 w-full justify-end">
+          <div className="flex gap-2 p-2 w-full justify-end bg-background-subtle">
             <Button
               size="sm"
               variant="outline"

apps/dashboard/app/(app)/logs/filters/components/response-status.tsx

@@ -0,0 +1,106 @@
+import React, { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+interface CheckboxItemProps {
+  id: string;
+  label: string;
+  description: string;
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+}
+
+const CheckboxItem = ({
+  id,
+  label,
+  description,
+  checked,
+  onCheckedChange,
+}: CheckboxItemProps) => (
+  <div className="items-top flex space-x-2 p-4">
+    <Checkbox id={id} checked={checked} onCheckedChange={onCheckedChange} />
+    <div className="grid gap-1.5 leading-none">
+      <label
+        htmlFor={id}
+        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
+        {label}
+      </label>
+      <p className="text-xs text-content-subtle">{description}</p>
+    </div>
+  </div>
+);
+
+const checkboxItems = [
+  { id: "error", label: "Error", description: "500 error codes" },
+  { id: "success", label: "Success", description: "200 success codes" },
+  { id: "warning", label: "Warning", description: "400 success codes" },
+];
+
+export const ResponseStatus = () => {
+  const [open, setOpen] = useState(false);
+  const [showChecked, setShowChecked] = useState(false);
+  const [checkedItems, setCheckedItems] = useState<Set<string>>(new Set());
+
+  const handleItemChange = (id: string, checked: boolean) => {
+    setCheckedItems((prev) => {
+      const newSet = new Set(prev);
+      if (checked) {
+        newSet.add(id);
+      } else {
+        newSet.delete(id);
+      }
+      return newSet;
+    });
+  };
+
+  const handleClear = () => {
+    setCheckedItems(new Set());
+    setShowChecked(false);
+  };
+
+  const handleApply = () => {
+    setShowChecked(true);
+    setOpen(false);
+    console.log("Applied filters:", Array.from(checkedItems));
+    // Here you would typically update some parent component state or call an API
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <div>
+          Response Status{" "}
+          {showChecked && checkedItems.size > 0 && `(${checkedItems.size})`}
+        </div>
+      </PopoverTrigger>
+      <PopoverContent className="w-80 bg-background p-0">
+        {checkboxItems.map((item, index) => (
+          <React.Fragment key={item.id}>
+            <CheckboxItem
+              {...item}
+              checked={checkedItems.has(item.id)}
+              onCheckedChange={(checked) => handleItemChange(item.id, checked)}
+            />
+            {index < checkboxItems.length - 1 && (
+              <div className="border-b border-border" />
+            )}
+          </React.Fragment>
+        ))}
+        <div className="flex gap-2 p-2 w-full justify-end bg-background-subtle">
+          <Button size="sm" variant="outline" onClick={handleClear}>
+            Clear
+          </Button>
+          <Button size="sm" variant="primary" onClick={handleApply}>
+            Apply
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};

apps/dashboard/app/(app)/logs/filters/index.tsx

@@ -5,6 +5,8 @@ import { RefreshCcw, Search } from "lucide-react";
 import { ChartsComp } from "../chart";
 import { DatePickerWithRange } from "./components/custom-date-filter";
 import { HourFilter } from "./components/hour-filter";
+import { ResponseStatus } from "./components/response-status";
+import React from "react";
 
 export const LogsFilters = () => {
   return (
@@ -25,10 +27,9 @@ export const LogsFilters = () => {
           </Button>
         </ButtonGroup>
 
-        <ButtonGroup>
-          <Button variant="outline">Response Status</Button>
-          <Button variant="outline">Request ID</Button>
-        </ButtonGroup>
+        <Button variant="outline">
+          <ResponseStatus />
+        </Button>
       </div>
       <ChartsComp />
     </>

apps/dashboard/app/(app)/logs/log-details/components/log-header.tsx

@@ -2,6 +2,7 @@ import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import { X } from "lucide-react";
 import type { Log } from "../../data";
+import { Button } from "@/components/ui/button";
 
 type Props = {
   log: Log;
@@ -28,12 +29,13 @@ export const LogHeader = ({ onClose, log }: Props) => {
         </Badge>
 
         <span className="text-content/65">|</span>
-        <X
-          onClick={onClose}
-          size="22"
-          strokeWidth="1.5"
-          className="text-content/65 cursor-pointer"
-        />
+        <Button size="icon" variant="ghost" onClick={onClose}>
+          <X
+            size="22"
+            strokeWidth="1.5"
+            className="text-content/65 cursor-pointer"
+          />
+        </Button>
       </div>
     </div>
   );