admin ui enhacement

apps/admin/src/components/ui/badge.tsx

@@ -0,0 +1,62 @@
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary/10 text-primary",
+        secondary: "bg-secondary text-secondary-foreground",
+        success:
+          "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400",
+        warning:
+          "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400",
+        destructive:
+          "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
+        info: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
+        outline: "border border-input text-foreground",
+        gray: "bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-300",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+export function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export function StatusBadge({ status }: { status: string }) {
+  const statusConfig: Record<
+    string,
+    { variant: BadgeProps["variant"]; label: string }
+  > = {
+    active: { variant: "success", label: "Active" },
+    inactive: { variant: "gray", label: "Inactive" },
+    pending: { variant: "warning", label: "Pending" },
+    approved: { variant: "success", label: "Approved" },
+    rejected: { variant: "destructive", label: "Rejected" },
+    completed: { variant: "success", label: "Completed" },
+    failed: { variant: "destructive", label: "Failed" },
+    suspended: { variant: "destructive", label: "Suspended" },
+    basic: { variant: "default", label: "Basic" },
+    premium: { variant: "info", label: "Premium" },
+    vip: { variant: "warning", label: "VIP" },
+  };
+
+  const config = statusConfig[status.toLowerCase()] || {
+    variant: "outline",
+    label: status,
+  };
+
+  return <Badge variant={config.variant}>{config.label}</Badge>;
+}