feat: add administration page and account role management

- Implemented `AdministrationContent` component for managing account roles.
- Created `AdministrationPage` to serve as the main entry point for administration tasks.
- Added PDF preview functionality with `PdfPreviewFrame` component for invoice generation.
- Introduced `InputColor` component for advanced color selection with various formats.
- Established color conversion utilities in `color-converter.ts` for handling color formats.
- Defined appearance-related schemas and types in `appearance.ts` for consistent theme management.

src/components/ui/image-with-skeleton.tsx

@@ -4,34 +4,34 @@ import { cn } from "~/lib/utils";
 import { Skeleton } from "~/components/ui/skeleton";
 
 interface ImageWithSkeletonProps extends ImageProps {
-    containerClassName?: string;
+  containerClassName?: string;
 }
 
 export function ImageWithSkeleton({
-    className,
-    containerClassName,
-    alt,
-    ...props
+  className,
+  containerClassName,
+  alt,
+  ...props
 }: ImageWithSkeletonProps) {
-    const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(true);
 
-    return (
-        <div className={cn("relative overflow-hidden", containerClassName)}>
-            {isLoading && (
-                <Skeleton className="absolute inset-0 h-full w-full animate-pulse" />
-            )}
-            <Image
-                className={cn(
-                    "duration-700 ease-in-out",
-                    isLoading
-                        ? "scale-110 blur-2xl grayscale"
-                        : "scale-100 blur-0 grayscale-0",
-                    className
-                )}
-                onLoad={() => setIsLoading(false)}
-                alt={alt}
-                {...props}
-            />
-        </div>
-    );
+  return (
+    <div className={cn("relative overflow-hidden", containerClassName)}>
+      {isLoading && (
+        <Skeleton className="absolute inset-0 h-full w-full animate-pulse" />
+      )}
+      <Image
+        className={cn(
+          "duration-700 ease-in-out",
+          isLoading
+            ? "scale-110 blur-2xl grayscale"
+            : "blur-0 scale-100 grayscale-0",
+          className,
+        )}
+        onLoad={() => setIsLoading(false)}
+        alt={alt}
+        {...props}
+      />
+    </div>
+  );
 }