fix filters on reports and ngos (#159)

Author: idormenco

client/src/components/data-table/data-table-date-filter.tsx

@@ -4,6 +4,7 @@ import { ro } from "date-fns/locale";
 import { CalendarIcon, XCircle } from "lucide-react";
 import * as React from "react";
 import type { DateRange } from "react-day-picker";
+import { parse, isValid, format as formatISODate } from "date-fns";
 
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
@@ -21,12 +22,10 @@ function getIsDateRange(value: DateSelection): value is DateRange {
   return value && typeof value === "object" && !Array.isArray(value);
 }
 
-function parseAsDate(timestamp: number | string | undefined): Date | undefined {
-  if (!timestamp) return undefined;
-  const numericTimestamp =
-    typeof timestamp === "string" ? Number(timestamp) : timestamp;
-  const date = new Date(numericTimestamp);
-  return !Number.isNaN(date.getTime()) ? date : undefined;
+function parseAsDate(dateString: string | undefined): Date | undefined {
+  if (!dateString) return undefined;
+  const parsed = parse(dateString, "yyyy-MM-dd", new Date());
+  return isValid(parsed) ? parsed : undefined;
 }
 
 function parseColumnFilterValue(value: unknown) {
@@ -36,14 +35,11 @@ function parseColumnFilterValue(value: unknown) {
 
   if (Array.isArray(value)) {
     return value.map((item) => {
-      if (typeof item === "number" || typeof item === "string") {
-        return item;
-      }
-      return undefined;
+      return typeof item === "string" ? item : undefined;
     });
   }
 
-  if (typeof value === "string" || typeof value === "number") {
+  if (typeof value === "string") {
     return [value];
   }
 
@@ -89,11 +85,13 @@ export function DataTableDateFilter<TData>({
       }
 
       if (multiple && !("getTime" in date)) {
-        const from = date.from?.getTime();
-        const to = date.to?.getTime();
+        const from = date.from
+          ? formatISODate(date.from, "yyyy-MM-dd")
+          : undefined;
+        const to = date.to ? formatISODate(date.to, "yyyy-MM-dd") : undefined;
         column.setFilterValue(from || to ? [from, to] : undefined);
       } else if (!multiple && "getTime" in date) {
-        column.setFilterValue(date.getTime());
+        column.setFilterValue(formatISODate(date, "yyyy-MM-dd"));
       }
     },
     [column, multiple]
@@ -179,7 +177,7 @@ export function DataTableDateFilter<TData>({
           {hasValue ? (
             <div
               role="button"
-              aria-label={`Sterge ${title}`}
+              aria-label={`Șterge ${title}`}
               tabIndex={0}
               onClick={onReset}
               className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"

client/src/components/data-table/data-table-faceted-filter.tsx

@@ -29,16 +29,24 @@ interface DataTableFacetedFilterProps<TData, TValue> {
   title?: string;
   options: Option[];
   multiple?: boolean;
+  disabled?: boolean;
 }
 
 export function DataTableFacetedFilter<TData, TValue>({
   column,
   title,
   options,
   multiple,
+  disabled,
 }: DataTableFacetedFilterProps<TData, TValue>) {
   const [open, setOpen] = React.useState(false);
 
+  React.useEffect(() => {
+    if (disabled && open) {
+      setOpen(false);
+    }
+  }, [disabled, open]);
+
   const columnFilterValue = column?.getFilterValue();
   const selectedValues = new Set(
     Array.isArray(columnFilterValue) ? columnFilterValue : []
@@ -76,7 +84,7 @@ export function DataTableFacetedFilter<TData, TValue>({
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
-        <Button variant="outline" size="sm" className="border-dashed">
+        <Button variant="outline" size="sm" className="border-dashed" disabled={disabled} aria-disabled={disabled}>
           {selectedValues?.size > 0 ? (
             <div
               role="button"
@@ -133,7 +141,7 @@ export function DataTableFacetedFilter<TData, TValue>({
         <Command>
           <CommandInput placeholder={title} />
           <CommandList className="max-h-full">
-            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandEmpty>Nu există rezultate.</CommandEmpty>
             <CommandGroup className="max-h-[18.75rem] overflow-y-auto overflow-x-hidden">
               {options.map((option) => {
                 const isSelected = selectedValues.has(option.value);
@@ -172,7 +180,7 @@ export function DataTableFacetedFilter<TData, TValue>({
                     onSelect={() => onReset()}
                     className="justify-center text-center"
                   >
-                    Sterge filtre
+                    Șterge filtre
                   </CommandItem>
                 </CommandGroup>
               </>

client/src/components/data-table/data-table-slider-filter.tsx

@@ -134,7 +134,7 @@ export function DataTableSliderFilter<TData>({
           {columnFilterValue ? (
             <div
               role="button"
-              aria-label={`Sterge ${title}`}
+              aria-label={`Șterge ${title}`}
               tabIndex={0}
               className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
               onClick={onReset}
@@ -226,12 +226,12 @@ export function DataTableSliderFilter<TData>({
           />
         </div>
         <Button
-          aria-label={`Sterge ${title}`}
+          aria-label={`Șterge ${title}`}
           variant="outline"
           size="sm"
           onClick={onReset}
         >
-          Sterge
+          Șterge
         </Button>
       </PopoverContent>
     </Popover>