Pull up downstream changes

src/components/ui/badge.tsx

@@ -16,9 +16,9 @@ const badgeVariants = cva(
                 destructive:
                     "border-transparent bg-destructive text-destructive-foreground",
                 outline: "text-foreground",
-                green: "border-transparent bg-green-500",
-                yellow: "border-transparent bg-yellow-500",
-                red: "border-transparent bg-red-300",
+                green: "border-green-600 bg-green-500/20 text-green-700 dark:text-green-300",
+                yellow: "border-yellow-600 bg-yellow-500/20 text-yellow-700 dark:text-yellow-300",
+                red: "border-red-400 bg-red-300/20 text-red-600 dark:text-red-300",
             },
         },
         defaultVariants: {

src/components/ui/button.tsx

@@ -71,7 +71,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
                 disabled={loading || props.disabled} // Disable button when loading
                 {...props}
             >
-                {/* {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} */}
+                {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                 {props.children}
             </Comp>
         );

src/components/ui/data-table.tsx

@@ -107,8 +107,8 @@ export function DataTable<TData, TValue>({
                     </div>
                     <div className="flex items-center gap-2 sm:justify-end">
                         {onRefresh && (
-                            <Button 
-                                variant="outline" 
+                            <Button
+                                variant="outline"
                                 onClick={onRefresh}
                                 disabled={isRefreshing}
                                 loading={isRefreshing}
@@ -182,4 +182,4 @@ export function DataTable<TData, TValue>({
             </Card>
         </div>
     );
-}
+}

src/components/ui/progress.tsx

@@ -3,24 +3,60 @@
 import * as React from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import { cn } from "@app/lib/cn";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const progressVariants = cva(
+    "border relative h-2 w-full overflow-hidden rounded-full",
+    {
+        variants: {
+            variant: {
+                default: "bg-muted",
+                success: "bg-muted",
+                warning: "bg-muted", 
+                danger: "bg-muted"
+            }
+        },
+        defaultVariants: {
+            variant: "default"
+        }
+    }
+);
+
+const indicatorVariants = cva(
+    "h-full w-full flex-1 transition-all",
+    {
+        variants: {
+            variant: {
+                default: "bg-primary",
+                success: "bg-green-500",
+                warning: "bg-yellow-500",
+                danger: "bg-red-500"
+            }
+        },
+        defaultVariants: {
+            variant: "default"
+        }
+    }
+);
+
+type ProgressProps = React.ComponentProps<typeof ProgressPrimitive.Root> & 
+    VariantProps<typeof progressVariants>;
 
 function Progress({
     className,
     value,
+    variant,
     ...props
-}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+}: ProgressProps) {
     return (
         <ProgressPrimitive.Root
             data-slot="progress"
-            className={cn(
-                "border relative h-2 w-full overflow-hidden rounded-full",
-                className
-            )}
+            className={cn(progressVariants({ variant }), className)}
             {...props}
         >
             <ProgressPrimitive.Indicator
                 data-slot="progress-indicator"
-                className="bg-primary h-full w-full flex-1 transition-all"
+                className={cn(indicatorVariants({ variant }))}
                 style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
             />
         </ProgressPrimitive.Root>