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/app/dashboard/settings/page.tsx

@@ -3,7 +3,6 @@ import { HydrateClient } from "~/trpc/server";
 import { PageHeader } from "~/components/layout/page-header";
 import { DataTableSkeleton } from "~/components/data/data-table";
 import { SettingsContent } from "./_components/settings-content";
-import { Card, CardContent } from "~/components/ui/card";
 
 export default async function SettingsPage() {
   return (
@@ -14,15 +13,11 @@ export default async function SettingsPage() {
         variant="gradient"
       />
 
-      <Card>
-        <CardContent className="p-6">
-          <HydrateClient>
-            <Suspense fallback={<DataTableSkeleton columns={1} rows={4} />}>
-              <SettingsContent />
-            </Suspense>
-          </HydrateClient>
-        </CardContent>
-      </Card>
+      <HydrateClient>
+        <Suspense fallback={<DataTableSkeleton columns={1} rows={4} />}>
+          <SettingsContent />
+        </Suspense>
+      </HydrateClient>
     </div>
   );
 }