feat: finalize kinerja divisi feature implementation

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

src/components/ui/card.tsx

@@ -0,0 +1,56 @@
+import {
+	Box,
+	Card as MantineCard,
+	type CardProps as MantineCardProps,
+
+	Title,
+} from "@mantine/core";
+import type React from "react";
+import { cn } from "./utils";
+
+interface CardComponentProps extends MantineCardProps {
+	// Add any specific props you had in your custom Card component
+}
+
+interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
+interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const Card = ({ className, children, ...props }: CardComponentProps) => (
+	<MantineCard
+		className={cn(
+			"rounded-xl border bg-white dark:bg-gray-800 p-6 shadow",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+	</MantineCard>
+);
+
+const CardHeader = ({ className, children, ...props }: CardHeaderProps) => (
+	<Box className={cn("flex flex-col space-y-1.5", className)} {...props}>
+		{children}
+	</Box>
+);
+
+const CardTitle = ({ className, children, ...props }: CardTitleProps) => (
+	<Title
+		order={3}
+		className={cn(
+			"font-semibold leading-none tracking-tight text-gray-900 dark:text-white",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+	</Title>
+);
+
+const CardContent = ({ className, children, ...props }: CardContentProps) => (
+	<Box className={cn("p-6 pt-0", className)} {...props}>
+		{children}
+	</Box>
+);
+
+export { Card, CardHeader, CardTitle, CardContent };