feat: metrics ui component

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx

@@ -9,6 +9,7 @@ import { StackedColumnChart } from "@/components/dashboard/charts";
 import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Metric } from "@/components/ui/metric";
 import { Separator } from "@/components/ui/separator";
 import { getTenantId } from "@/lib/auth";
 import { clickhouse } from "@/lib/clickhouse";
@@ -143,10 +144,7 @@ export default async function APIKeyDetailPage(props: {
     ...ratelimitedOverTime.map((d) => ({ ...d, category: "Ratelimited" })),
     ...usageExceededOverTime.map((d) => ({ ...d, category: "Usage Exceeded" })),
     ...disabledOverTime.map((d) => ({ ...d, category: "Disabled" })),
-    ...insufficientPermissionsOverTime.map((d) => ({
-      ...d,
-      category: "Insufficient Permissions",
-    })),
+    ...insufficientPermissionsOverTime.map((d) => ({ ...d, category: "Insufficient Permissions" })),
     ...expiredOverTime.map((d) => ({ ...d, category: "Expired" })),
     ...forbiddenOverTime.map((d) => ({ ...d, category: "Forbidden" })),
   ];
@@ -337,7 +335,7 @@ export default async function APIKeyDetailPage(props: {
               {Intl.NumberFormat().format(transientPermissionIds.size)} Permissions
             </Badge>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 border-border">
             <CreateNewRole
               trigger={<Button>Create New Role</Button>}
               permissions={key.workspace.permissions}
@@ -405,12 +403,3 @@ function prepareInterval(interval: Interval) {
     }
   }
 }
-
-const Metric: React.FC<{ label: string; value: React.ReactNode }> = ({ label, value }) => {
-  return (
-    <div className="flex flex-col items-start justify-between h-full px-4 py-2">
-      <p className="text-sm text-content-subtle">{label}</p>
-      <div className="text-2xl font-semibold leading-none tracking-tight">{value}</div>
-    </div>
-  );
-};

apps/dashboard/app/(app)/apis/[apiId]/page.tsx

@@ -1,6 +1,7 @@
 import { AreaChart, StackedColumnChart } from "@/components/dashboard/charts";
 import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Metric } from "@/components/ui/metric";
 import { Separator } from "@/components/ui/separator";
 import { getTenantId } from "@/lib/auth";
 import { clickhouse } from "@/lib/clickhouse";
@@ -321,12 +322,3 @@ function prepareInterval(interval: Interval) {
     }
   }
 }
-
-const Metric: React.FC<{ label: string; value: string }> = ({ label, value }) => {
-  return (
-    <div className="flex flex-col items-start justify-between h-full px-4 py-2">
-      <p className="text-sm text-content-subtle">{label}</p>
-      <div className="text-2xl font-semibold leading-none tracking-tight">{value}</div>
-    </div>
-  );
-};

apps/dashboard/app/(app)/apis/[apiId]/settings/update-ip-whitelist.tsx

@@ -98,7 +98,7 @@ export const UpdateIpWhitelist: React.FC<Props> = ({ api, workspace }) => {
               />
             </div>
           ) : (
-            <Alert className="flex items-center justify-between opacity-100">
+            <Alert className="flex items-center justify-between opacity-100 border-border">
               <div>
                 <AlertTitle>Enterprise Feature</AlertTitle>
                 <AlertDescription>

apps/dashboard/app/(app)/apis/create-api-button.tsx

@@ -56,7 +56,7 @@ export const CreateApiButton = ({ ...rest }: React.ButtonHTMLAttributes<HTMLButt
             Create New API
           </Button>
         </DialogTrigger>
-        <DialogContent className="w-11/12 max-sm: ">
+        <DialogContent className="border-border w-11/12 max-sm: ">
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)}>
               <FormField

apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx

@@ -142,7 +142,7 @@ const Metric: React.FC<{ label: string; value?: string; Icon: LucideIcon }> = ({
   Icon,
 }) => {
   return (
-    <div className="flex items-center gap-4 px-4 py-2 border rounded-lg">
+    <div className="flex items-center gap-4 px-4 py-2 border rounded-lg border-border">
       <Icon className="w-6 h-6 text-primary" />
       <div className="flex flex-col items-start justify-center">
         <p className="text-sm text-content-subtle">{label}</p>

apps/dashboard/app/(app)/authorization/permissions/create-new-permission.tsx

@@ -76,7 +76,7 @@ export const CreateNewPermission: React.FC<Props> = ({ trigger }) => {
   return (
     <Dialog open={open} onOpenChange={handleDialogOpenChange}>
       <DialogTrigger asChild>{trigger}</DialogTrigger>
-      <DialogContent>
+      <DialogContent className="border-border">
         <DialogHeader>
           <DialogTitle>Create a new permission</DialogTitle>
           <DialogDescription>Permissions allow your key to do certain actions.</DialogDescription>

apps/dashboard/app/(app)/authorization/roles/create-new-role.tsx

@@ -93,7 +93,7 @@ export const CreateNewRole: React.FC<Props> = ({ trigger }) => {
   return (
     <Dialog open={open} onOpenChange={handleDialogOpenChange}>
       <DialogTrigger asChild>{trigger}</DialogTrigger>
-      <DialogContent>
+      <DialogContent className="border-border">
         <DialogHeader>
           <DialogTitle>Create a new role</DialogTitle>
           <DialogDescription>Roles group permissions together.</DialogDescription>

apps/dashboard/app/(app)/ratelimits/[namespaceId]/page.tsx

@@ -3,6 +3,7 @@ import { CopyButton } from "@/components/dashboard/copy-button";
 import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Code } from "@/components/ui/code";
+import { Metric } from "@/components/ui/metric";
 import { Separator } from "@/components/ui/separator";
 import { getTenantId } from "@/lib/auth";
 import { clickhouse } from "@/lib/clickhouse";
@@ -291,12 +292,3 @@ function prepareInterval(interval: Interval) {
     }
   }
 }
-
-const Metric: React.FC<{ label: string; value: string }> = ({ label, value }) => {
-  return (
-    <div className="flex flex-col items-start justify-center px-4 py-2">
-      <p className="text-sm text-content-subtle">{label}</p>
-      <div className="text-2xl font-semibold leading-none tracking-tight">{value}</div>
-    </div>
-  );
-};

apps/dashboard/app/(app)/ratelimits/create-namespace-button.tsx

@@ -64,7 +64,7 @@ export const CreateNamespaceButton = ({
             Create new namespace
           </Button>
         </DialogTrigger>
-        <DialogContent className="w-11/12 max-sm: ">
+        <DialogContent className="border-border w-11/12 max-sm: ">
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)}>
               <FormField

apps/dashboard/app/(app)/settings/root-keys/[keyId]/layout.tsx

@@ -1,4 +1,5 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Metric } from "@/components/ui/metric";
 import { getTenantId } from "@/lib/auth";
 import { clickhouse } from "@/lib/clickhouse";
 import { db } from "@/lib/db";
@@ -65,18 +66,6 @@ export default async function Layout({ children, params: { keyId } }: Props) {
   );
 }
 
-const Metric: React.FC<{
-  label: React.ReactNode;
-  value: React.ReactNode;
-}> = ({ label, value }) => {
-  return (
-    <div className="flex flex-col items-start justify-center px-4 py-2">
-      <p className="text-sm text-content-subtle">{label}</p>
-      <div className="text-sm leading-none tracking-tight ">{value}</div>
-    </div>
-  );
-};
-
 const LastUsed: React.FC<{ workspaceId: string; keySpaceId: string; keyId: string }> = async ({
   workspaceId,
   keySpaceId,

apps/dashboard/app/(app)/settings/user/update-theme.tsx

@@ -30,7 +30,7 @@ const Option: React.FC<{ theme: string; icon: LucideIcon }> = (props) => {
       type="button"
       onClick={() => setTheme(props.theme)}
       className={cn(
-        "border text-sm rounded-md hover:border-primary flex items-center justify-center gap-2 h-8 p-2 ",
+        "border text-sm rounded-md hover:border-primary flex items-center justify-center gap-2 h-8 p-2 border-border ",
         {
           "bg-primary text-primary-foreground border-primary": props.theme === theme,
         },

apps/dashboard/app/ratelimit/page.tsx

@@ -8,6 +8,7 @@ import { PageHeader } from "@/components/dashboard/page-header";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Metric } from "@/components/ui/metric";
 import {
   Select,
   SelectContent,
@@ -272,15 +273,3 @@ export default function RatelimitPage() {
     </div>
   );
 }
-
-const Metric: React.FC<{
-  label: React.ReactNode;
-  value: React.ReactNode;
-}> = ({ label, value }) => {
-  return (
-    <div className="flex flex-col items-start justify-center px-4 py-2">
-      <p className="text-sm text-content-subtle">{label}</p>
-      <div className="text-2xl font-semibold leading-none tracking-tight">{value}</div>
-    </div>
-  );
-};

apps/dashboard/components/ui/metric.tsx

@@ -0,0 +1,17 @@
+import type * as React from "react";
+
+interface MetricProps {
+  label: string;
+  value: string | React.ReactNode;
+}
+
+const Metric: React.FC<MetricProps> = ({ label, value }) => {
+  return (
+    <div className="flex flex-col items-start justify-center px-4 py-2 border-border">
+      <p className="text-sm text-content-subtle">{label}</p>
+      <div className="text-2xl font-semibold leading-none tracking-tight">{value}</div>
+    </div>
+  );
+};
+
+export { Metric };