fix: dashboard profit color

components/dashboard/projects-widget.tsx

@@ -61,7 +61,12 @@ export function ProjectsWidget({
                 <div className="text-sm font-medium text-muted-foreground">Profit</div>
                 <div className="text-2xl font-bold">
                   {Object.entries(statsPerProject[project.code]?.profitPerCurrency).map(([currency, total]) => (
-                    <div key={currency} className="flex flex-col gap-2 items-center text-2xl font-bold text-green-500">
+                    <div
+                      key={currency}
+                      className={`flex flex-col gap-2 items-center text-2xl font-bold ${
+                        total >= 0 ? "text-green-500" : "text-red-500"
+                      }`}
+                    >
                       {formatCurrency(total, currency)}
                     </div>
                   ))}

components/forms/date-range-picker.tsx

@@ -66,6 +66,18 @@ export function DateRangePicker({
   const [rangeName, setRangeName] = useState<string>(defaultDate?.from ? "custom" : defaultRange)
   const [dateRange, setDateRange] = useState<DateRange | undefined>(defaultDate)
 
+  const getDisplayText = () => {
+    if (rangeName === "custom") {
+      if (dateRange?.from) {
+        return dateRange.to
+          ? `${format(dateRange.from, "LLL dd, y")} - ${format(dateRange.to, "LLL dd, y")}`
+          : format(dateRange.from, "LLL dd, y")
+      }
+      return "Select dates"
+    }
+    return predefinedRanges.find((range) => range.code === rangeName)?.label || "Select dates"
+  }
+
   return (
     <Popover>
       <PopoverTrigger asChild>
@@ -78,19 +90,7 @@ export function DateRangePicker({
           )}
         >
           <CalendarIcon className="mr-2 h-4 w-4" />
-          {rangeName === "custom" ? (
+          {getDisplayText()}
-            dateRange?.from ? (
-              dateRange.to ? (
-                `${format(dateRange.from, "LLL dd, y")} - ${format(dateRange.to, "LLL dd, y")}`
-              ) : (
-                format(dateRange.from, "LLL dd, y")
-              )
-            ) : (
-              <span>???</span>
-            )
-          ) : (
-            predefinedRanges.find((range) => range.code === rangeName)?.label
-          )}
         </Button>
       </PopoverTrigger>
       <PopoverContent className="flex flex-row gap-3 w-auto p-0" align="end">