@dyrected/admin 2.0.0 → 2.4.0

package/src/pages/auth/first-user-page.tsx

@@ -47,18 +47,18 @@ export function FirstUserPage({
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-background px-4">
-      <div className="w-full max-w-sm space-y-8">
-        <div className="space-y-2 text-center">
-          <div className="mx-auto h-12 w-12 rounded-full bg-primary/5 flex items-center justify-center mb-4">
-            <div className="h-6 w-6 rounded-full border-2 border-primary border-t-transparent animate-pulse" />
+    <div className="dy-flex dy-min-h-screen dy-items-center dy-justify-center dy-bg-background dy-px-4">
+      <div className="dy-w-full dy-max-w-sm dy-space-y-8">
+        <div className="dy-space-y-2 dy-text-center">
+          <div className="dy-mx-auto dy-h-12 dy-w-12 dy-rounded-full dy-bg-primary/5 dy-flex dy-items-center dy-justify-center dy-mb-4">
+            <div className="dy-h-6 dy-w-6 dy-rounded-full dy-border-2 dy-border-primary dy-border-t-transparent dy-animate-pulse" />
           </div>
-          <h1 className="text-2xl font-semibold tracking-tight">Setup Admin Account</h1>
-          <p className="text-sm text-muted-foreground">Create the first administrative user to get started</p>
+          <h1 className="dy-text-2xl dy-font-semibold dy-tracking-tight">Setup Admin Account</h1>
+          <p className="dy-text-sm dy-text-muted-foreground">Create the first administrative user to get started</p>
         </div>
 
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="space-y-2">
+        <form onSubmit={handleSubmit} className="dy-space-y-4">
+          <div className="dy-space-y-2">
             <Label htmlFor="email">Admin Email</Label>
             <Input
               id="email"
@@ -67,10 +67,10 @@ export function FirstUserPage({
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               required
-              className="bg-transparent"
+              className="dy-bg-transparent"
             />
           </div>
-          <div className="space-y-2">
+          <div className="dy-space-y-2">
             <Label htmlFor="password">Password</Label>
             <Input
               id="password"
@@ -78,10 +78,10 @@ export function FirstUserPage({
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               required
-              className="bg-transparent"
+              className="dy-bg-transparent"
             />
           </div>
-          <div className="space-y-2">
+          <div className="dy-space-y-2">
             <Label htmlFor="confirm-password">Confirm Password</Label>
             <Input
               id="confirm-password"
@@ -89,23 +89,23 @@ export function FirstUserPage({
               value={confirmPassword}
               onChange={(e) => setConfirmPassword(e.target.value)}
               required
-              className="bg-transparent"
+              className="dy-bg-transparent"
             />
           </div>
 
           {error && (
-            <div className="text-xs text-destructive font-medium bg-destructive/10 p-3 rounded-md">
+            <div className="dy-text-xs dy-text-destructive dy-font-medium dy-bg-destructive/10 dy-p-3 dy-rounded-md">
               {error}
             </div>
           )}
 
-          <Button type="submit" className="w-full" disabled={loading}>
+          <Button type="submit" className="dy-w-full" disabled={loading}>
             {loading ? "Creating account..." : "Create Admin Account"}
           </Button>
         </form>
 
-        <div className="pt-4 border-t text-center space-y-2">
-          <p className="text-[10px] text-muted-foreground uppercase tracking-widest">
+        <div className="dy-pt-4 dy-border-t dy-text-center dy-space-y-2">
+          <p className="dy-text-[10px] dy-text-muted-foreground dy-uppercase dy-tracking-widest">
             Dyrected CMS · Initial Setup
           </p>
         </div>

package/src/pages/auth/login-page.tsx

@@ -37,15 +37,15 @@ export function LoginPage({
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-background px-4">
-      <div className="w-full max-w-sm space-y-8">
-        <div className="space-y-2 text-center">
-          <h1 className="text-2xl font-semibold tracking-tight">Welcome back</h1>
-          <p className="text-sm text-muted-foreground">Enter your credentials to access the dashboard</p>
+    <div className="dy-flex dy-min-h-screen dy-items-center dy-justify-center dy-bg-background dy-px-4">
+      <div className="dy-w-full dy-max-w-sm dy-space-y-8">
+        <div className="dy-space-y-2 dy-text-center">
+          <h1 className="dy-text-2xl dy-font-semibold dy-tracking-tight">Welcome back</h1>
+          <p className="dy-text-sm dy-text-muted-foreground">Enter your credentials to access the dashboard</p>
         </div>
 
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="space-y-2">
+        <form onSubmit={handleSubmit} className="dy-space-y-4">
+          <div className="dy-space-y-2">
             <Label htmlFor="email">Email</Label>
             <Input
               id="email"
@@ -54,11 +54,11 @@ export function LoginPage({
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               required
-              className="bg-transparent"
+              className="dy-bg-transparent"
             />
           </div>
-          <div className="space-y-2">
-            <div className="flex items-center justify-between">
+          <div className="dy-space-y-2">
+            <div className="dy-flex dy-items-center dy-justify-between">
               <Label htmlFor="password">Password</Label>
             </div>
             <Input
@@ -67,22 +67,22 @@ export function LoginPage({
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               required
-              className="bg-transparent"
+              className="dy-bg-transparent"
             />
           </div>
 
           {error && (
-            <div className="text-xs text-destructive font-medium bg-destructive/10 p-3 rounded-md">
+            <div className="dy-text-xs dy-text-destructive dy-font-medium dy-bg-destructive/10 dy-p-3 dy-rounded-md">
               {error}
             </div>
           )}
 
-          <Button type="submit" className="w-full" disabled={loading}>
+          <Button type="submit" className="dy-w-full" disabled={loading}>
             {loading ? "Signing in..." : "Sign In"}
           </Button>
         </form>
 
-        <p className="text-center text-xs text-muted-foreground uppercase tracking-widest">
+        <p className="dy-text-center dy-text-xs dy-text-muted-foreground dy-uppercase dy-tracking-widest">
           Dyrected CMS
         </p>
       </div>

package/src/pages/collections/edit-page.tsx

@@ -138,33 +138,33 @@ export function EditEntryPage() {
   const canUpdate = (schema.access as any)?.update !== false
 
   return (
-    <div className="flex h-[calc(100vh-0px)] overflow-hidden -mt-6 -mx-4 lg:-mt-10 lg:-mx-6">
+    <div className="dy-flex dy-h-[calc(100vh-0px)] dy-overflow-hidden dy--mt-6 dy--mx-4 lg:dy--mt-10 lg:dy--mx-6">
       {/* Left Column: Header + Form */}
       <div className={cn(
-        "flex-1 overflow-y-auto px-6 py-6 lg:px-10 lg:py-10 transition-all duration-500",
-        showPreview ? "max-w-2xl xl:max-w-3xl" : "max-w-5xl mx-auto w-full"
+        "dy-flex-1 dy-overflow-y-auto dy-px-6 dy-py-6 lg:dy-px-10 lg:dy-py-10 dy-transition-all dy-duration-500",
+        showPreview ? "dy-max-w-2xl xl:dy-max-w-3xl" : "dy-max-w-5xl dy-mx-auto dy-w-full"
       )}>
-        <div className="space-y-8">
+        <div className="dy-space-y-8">
           {/* Header */}
-          <div className="flex items-center justify-between gap-4 border-b border-border/50 pb-6">
-            <div className="flex items-center gap-4">
+          <div className="dy-flex dy-items-center dy-justify-between dy-gap-4 dy-border-b dy-border-border/50 dy-pb-6">
+            <div className="dy-flex dy-items-center dy-gap-4">
               <Button
                 variant="ghost"
                 size="icon"
-                className="h-8 w-8 rounded-lg hover:bg-muted shrink-0"
+                className="dy-h-8 dy-w-8 dy-rounded-lg hover:dy-bg-muted dy-shrink-0"
                 onClick={() => navigate(`/collections/${slug}`)}
               >
-                <ChevronLeft className="h-4 w-4" />
+                <ChevronLeft className="dy-h-4 dy-w-4" />
               </Button>
               <div>
-                <div className="flex items-center gap-3">
-                  <h1 className="text-lg font-serif font-bold tracking-tight text-foreground truncate">
+                <div className="dy-flex dy-items-center dy-gap-3">
+                  <h1 className="dy-text-lg dy-font-serif dy-font-bold dy-tracking-tight dy-text-foreground dy-truncate">
                     {isEdit ? `Edit ${schema.label || schema.slug}` : `New ${schema.label || schema.slug}`}
                   </h1>
                   {hasStatus && (
                     <Badge className={cn(
-                      "px-2 py-0 rounded-full text-[10px] font-bold uppercase tracking-wider",
-                      currentStatus === "published" ? "bg-emerald-100 text-emerald-700 border-emerald-200" : "bg-amber-100 text-amber-700 border-amber-200"
+                      "dy-px-2 dy-py-0 dy-rounded-full dy-text-[10px] dy-font-bold dy-uppercase dy-tracking-wider",
+                      currentStatus === "published" ? "dy-bg-emerald-100 dy-text-emerald-700 dy-border-emerald-200" : "dy-bg-amber-100 dy-text-amber-700 dy-border-amber-200"
                     )} variant="outline">
                       {currentStatus === "published" ? "Live" : "Draft"}
                     </Badge>
@@ -173,42 +173,42 @@ export function EditEntryPage() {
               </div>
             </div>
 
-            <div className="flex items-center gap-2">
+            <div className="dy-flex dy-items-center dy-gap-2">
               {previewUrl && (
                 <Button
                   variant="ghost"
                   size="icon"
                   className={cn(
-                    "h-9 w-9 rounded-lg transition-colors",
-                    showPreview ? "bg-primary/10 text-primary hover:bg-primary/20" : "hover:bg-muted"
+                    "dy-h-9 dy-w-9 dy-rounded-lg dy-transition-colors",
+                    showPreview ? "dy-bg-primary/10 dy-text-primary hover:dy-bg-primary/20" : "hover:dy-bg-muted"
                   )}
                   onClick={() => setShowPreview(!showPreview)}
                   title={showPreview ? "Hide Preview" : "Live Preview"}
                 >
-                  {showPreview ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                  {showPreview ? <EyeOff className="dy-h-4 dy-w-4" /> : <Eye className="dy-h-4 dy-w-4" />}
                 </Button>
               )}
               <Button
                 size="icon"
-                className="h-9 w-9 rounded-lg shadow-sm"
+                className="dy-h-9 dy-w-9 dy-rounded-lg dy-shadow-sm"
                 onClick={() => document.getElementById('dyrected-form-submit')?.click()}
                 disabled={saveMutation.isPending || (isEdit ? !canUpdate : !canCreate)}
                 title={isEdit ? "Save Changes (⌘S)" : "Create Entry (⌘S)"}
               >
                 {saveMutation.isPending ? (
-                  <div className="h-4 w-4 animate-spin border-2 border-current border-t-transparent rounded-full" />
+                  <div className="dy-h-4 dy-w-4 dy-animate-spin dy-border-2 dy-border-current dy-border-t-transparent dy-rounded-full" />
                 ) : (
-                  <Save className="h-4 w-4" />
+                  <Save className="dy-h-4 dy-w-4" />
                 )}
               </Button>
             </div>
           </div>
 
           {/* Form */}
-          <div className="animate-in space-y-8 pb-20">
+          <div className="dy-animate-in dy-space-y-8 dy-pb-20">
             {!canUpdate && isEdit && (
-              <div className="p-4 rounded-lg bg-amber-50 border border-amber-200 text-amber-800 text-sm flex items-center gap-3">
-                <Archive className="h-4 w-4" />
+              <div className="dy-p-4 dy-rounded-lg dy-bg-amber-50 dy-border dy-border-amber-200 dy-text-amber-800 dy-text-sm dy-flex dy-items-center dy-gap-3">
+                <Archive className="dy-h-4 dy-w-4" />
                 You have read-only access to this collection.
               </div>
             )}
@@ -223,29 +223,29 @@ export function EditEntryPage() {
               submitLabel={isEdit ? "Save Changes" : "Create Entry"}
               readOnly={isEdit ? !canUpdate : !canCreate}
             />
-            <button id="dyrected-form-submit" type="submit" className="hidden" />
+            <button id="dyrected-form-submit" type="submit" className="dy-hidden" />
 
             {/* Document Meta */}
-            <div className="pt-8 border-t border-border/40">
-              <div className="flex flex-wrap items-center gap-x-8 gap-y-4">
-                <div className="space-y-1">
-                  <p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/40 text-nowrap">Document ID</p>
-                  <code className="text-xs font-mono text-muted-foreground/80 select-all">
+            <div className="dy-pt-8 dy-border-t dy-border-border/40">
+              <div className="dy-flex dy-flex-wrap dy-items-center dy-gap-x-8 dy-gap-y-4">
+                <div className="dy-space-y-1">
+                  <p className="dy-text-[10px] dy-font-bold dy-uppercase dy-tracking-wider dy-text-muted-foreground/40 dy-text-nowrap">Document ID</p>
+                  <code className="dy-text-xs dy-font-mono dy-text-muted-foreground/80 dy-select-all">
                     {isEdit ? id : "Pending..."}
                   </code>
                 </div>
 
                 {isEdit && (
                   <>
-                    <div className="space-y-1">
-                      <p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/40 text-nowrap">Created At</p>
-                      <p className="text-xs font-medium text-muted-foreground/80">
+                    <div className="dy-space-y-1">
+                      <p className="dy-text-[10px] dy-font-bold dy-uppercase dy-tracking-wider dy-text-muted-foreground/40 dy-text-nowrap">Created At</p>
+                      <p className="dy-text-xs dy-font-medium dy-text-muted-foreground/80">
                         {entry?.createdAt ? new Date(entry.createdAt).toLocaleString() : 'N/A'}
                       </p>
                     </div>
-                    <div className="space-y-1">
-                      <p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/40 text-nowrap">Last Updated</p>
-                      <p className="text-xs font-medium text-muted-foreground/80">
+                    <div className="dy-space-y-1">
+                      <p className="dy-text-[10px] dy-font-bold dy-uppercase dy-tracking-wider dy-text-muted-foreground/40 dy-text-nowrap">Last Updated</p>
+                      <p className="dy-text-xs dy-font-medium dy-text-muted-foreground/80">
                         {entry?.updatedAt ? new Date(entry.updatedAt).toLocaleString() : 'N/A'}
                       </p>
                     </div>
@@ -260,13 +260,13 @@ export function EditEntryPage() {
       {/* Right Column: Preview (starts from top) */}
       {previewUrl && (
         <div className={cn(
-          "hidden lg:block border-l border-border/50 bg-muted/5 transition-all duration-500 overflow-hidden",
-          showPreview ? "flex-1 opacity-100" : "w-0 opacity-0 border-l-0"
+          "dy-hidden lg:dy-block dy-border-l dy-border-border/50 dy-bg-muted/5 dy-transition-all dy-duration-500 dy-overflow-hidden",
+          showPreview ? "dy-flex-1 dy-opacity-100" : "dy-w-0 dy-opacity-0 dy-border-l-0"
         )}>
           {/* We use negative margins to pull the preview up and out to the shell's padding edges if possible, 
               but since we're inside a parent with padding, we'll just make it height-full.
           */}
-          <div className="h-full">
+          <div className="dy-h-full">
             <LivePreviewPane
               previewUrl={previewUrl}
               data={previewData || entry}

package/src/pages/collections/list-page.tsx

@@ -127,7 +127,7 @@ export function CollectionListPage({ slug }: CollectionListPageProps) {
       {
         accessorKey: "id",
         header: "ID",
-        cell: ({ row }) => <span className="font-mono text-xs">{row.getValue("id")}</span>,
+        cell: ({ row }) => <span className="dy-font-mono dy-text-xs">{row.getValue("id")}</span>,
       },
     ]
 
@@ -173,9 +173,9 @@ export function CollectionListPage({ slug }: CollectionListPageProps) {
       cell: ({ row }) => {
         const date = new Date(row.getValue("updatedAt"))
         return (
-          <div className="flex items-center gap-2 text-muted-foreground">
-            <Calendar className="h-3 w-3" />
-            <span className="text-xs">{date.toLocaleDateString()}</span>
+          <div className="dy-flex dy-items-center dy-gap-2 dy-text-muted-foreground">
+            <Calendar className="dy-h-3 dy-w-3" />
+            <span className="dy-text-xs">{date.toLocaleDateString()}</span>
           </div>
         )
       }
@@ -189,9 +189,9 @@ export function CollectionListPage({ slug }: CollectionListPageProps) {
         return (
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button variant="ghost" className="h-8 w-8 p-0">
-                <span className="sr-only">Open menu</span>
-                <MoreHorizontal className="h-4 w-4" />
+              <Button variant="ghost" className="dy-h-8 dy-w-8 dy-p-0">
+                <span className="dy-sr-only">Open menu</span>
+                <MoreHorizontal className="dy-h-4 dy-w-4" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
@@ -201,17 +201,17 @@ export function CollectionListPage({ slug }: CollectionListPageProps) {
               </DropdownMenuItem>
               <DropdownMenuSeparator />
               <Link to={`/collections/${slug}/edit/${item.id}`}>
-                <DropdownMenuItem className="flex gap-2">
-                  <Pencil className="h-4 w-4" />
+                <DropdownMenuItem className="dy-flex dy-gap-2">
+                  <Pencil className="dy-h-4 dy-w-4" />
                   Edit
                 </DropdownMenuItem>
               </Link>
               <DropdownMenuItem
-                className="flex gap-2 text-destructive focus:text-destructive"
+                className="dy-flex dy-gap-2 dy-text-destructive focus:dy-text-destructive"
                 onClick={() => handleDelete(item.id)}
                 disabled={deleteMutation.isPending}
               >
-                <Trash2 className="h-4 w-4" />
+                <Trash2 className="dy-h-4 dy-w-4" />
                 {deleteMutation.isPending ? "Deleting..." : "Delete"}
               </DropdownMenuItem>
             </DropdownMenuContent>
@@ -246,8 +246,8 @@ export function CollectionListPage({ slug }: CollectionListPageProps) {
 
   if (isLoading) {
     return (
-      <div className="flex h-[400px] items-center justify-center">
-        <div className="animate-spin rounded-full border-4 border-primary border-t-transparent h-8 w-8"></div>
+      <div className="dy-flex dy-h-[400px] dy-items-center dy-justify-center">
+        <div className="dy-animate-spin dy-rounded-full dy-border-4 dy-border-primary dy-border-t-transparent dy-h-8 dy-w-8"></div>
       </div>
     )
   }
@@ -258,15 +258,15 @@ export function CollectionListPage({ slug }: CollectionListPageProps) {
 
   if (slug === "media") {
     return (
-      <div className="space-y-8 animate-in">
+      <div className="dy-space-y-8 dy-animate-in">
         <PageHeader 
           title="Media Library" 
           description="Manage your media assets and uploads." 
           icon={ImageIcon}
         >
           <Link to={`/collections/${slug}/new`}>
-            <Button className="h-8 px-4 text-[11px] rounded-md bg-primary hover:bg-primary/90 shadow-sm transition-all active:scale-95">
-              <Plus className="mr-1.5 h-3 w-3" />
+            <Button className="dy-h-8 dy-px-4 dy-text-[11px] dy-rounded-md dy-bg-primary hover:dy-bg-primary/90 dy-shadow-sm dy-transition-all active:dy-scale-95">
+              <Plus className="dy-mr-1.5 dy-h-3 dy-w-3" />
               Upload New
             </Button>
           </Link>
@@ -285,28 +285,28 @@ export function CollectionListPage({ slug }: CollectionListPageProps) {
           hasPrevPage={hasPrevPage}
           hasNextPage={hasNextPage}
           onPageChange={setPage}
-          className="mt-8"
+          className="dy-mt-8"
         />
       </div>
     )
   }
 
   return (
-    <div className="space-y-8 animate-in">
+    <div className="dy-space-y-8 dy-animate-in">
       <PageHeader 
         title={schema.labels?.plural || schema.label || schema.slug} 
         description={`Manage your ${schema.slug} entries and update content.`} 
         icon={Database}
       >
         <Link to={`/collections/${slug}/new`}>
-          <Button className="h-8 px-4 text-[11px] rounded-md bg-primary hover:bg-primary/90 shadow-sm transition-all active:scale-95">
-            <Plus className="mr-1.5 h-3 w-3" />
+          <Button className="dy-h-8 dy-px-4 dy-text-[11px] dy-rounded-md dy-bg-primary hover:dy-bg-primary/90 dy-shadow-sm dy-transition-all active:dy-scale-95">
+            <Plus className="dy-mr-1.5 dy-h-3 dy-w-3" />
             Create New
           </Button>
         </Link>
       </PageHeader>
 
-      <div className="overflow-hidden">
+      <div className="dy-overflow-hidden">
         <DataTable
           key={slug}
           columns={columns}
@@ -320,11 +320,11 @@ export function CollectionListPage({ slug }: CollectionListPageProps) {
             <Button
               variant="destructive"
               size="sm"
-              className="h-8"
+              className="dy-h-8"
               onClick={() => handleBulkDelete(selectedIds)}
               disabled={bulkDeleteMutation.isPending}
             >
-              <Trash2 className="h-4 w-4 mr-2" />
+              <Trash2 className="dy-h-4 dy-w-4 dy-mr-2" />
               Delete Selected ({selectedIds.length})
             </Button>
           )}

package/src/pages/dashboard/dashboard.tsx

@@ -26,8 +26,8 @@ export function Dashboard() {
 
   if (isLoadingSchemas) {
     return (
-      <div className="flex items-center justify-center h-64">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+      <div className="dy-flex dy-items-center dy-justify-center dy-h-64">
+        <div className="dy-animate-spin dy-rounded-full dy-h-8 dy-w-8 dy-border-b-2 dy-border-primary"></div>
       </div>
     );
   }
@@ -35,9 +35,9 @@ export function Dashboard() {
   // No schema yet — route to /setup
   if (collections.length === 0 && globals.length === 0) {
     return (
-      <div className="flex items-center justify-center h-64">
-        <div className="text-center space-y-4">
-          <p className="text-muted-foreground">No collections configured yet.</p>
+      <div className="dy-flex dy-items-center dy-justify-center dy-h-64">
+        <div className="dy-text-center dy-space-y-4">
+          <p className="dy-text-muted-foreground">No collections configured yet.</p>
           <Button asChild>
             <Link to="/setup">View Integration Guide</Link>
           </Button>
@@ -47,72 +47,72 @@ export function Dashboard() {
   }
 
   return (
-    <div className="space-y-8 animate-in fade-in duration-500">
+    <div className="dy-space-y-8 dy-animate-in dy-fade-in dy-duration-500">
       <div>
-        <h2 className="text-2xl font-semibold tracking-tight">Overview</h2>
-        <p className="text-muted-foreground">Monitor and manage your site's content and structure.</p>
+        <h2 className="dy-text-2xl dy-font-semibold dy-tracking-tight">Overview</h2>
+        <p className="dy-text-muted-foreground">Monitor and manage your site's content and structure.</p>
       </div>
 
-      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-        <div className="p-1 space-y-2 group border border-card">
-          <div className="flex items-center gap-3">
-            <div className="rounded-md bg-primary/5 p-1.5 text-primary/60 group-hover:bg-primary/10 group-hover:text-primary transition-colors">
-              <Database className="h-4 w-4" />
+      <div className="dy-grid dy-gap-6 md:dy-grid-cols-2 lg:dy-grid-cols-3">
+        <div className="dy-p-1 dy-space-y-2 dy-group dy-border dy-border-card">
+          <div className="dy-flex dy-items-center dy-gap-3">
+            <div className="dy-rounded-md dy-bg-primary/5 dy-p-1.5 dy-text-primary/60 dy-group-hover:dy-bg-primary/10 dy-group-hover:dy-text-primary dy-transition-colors">
+              <Database className="dy-h-4 dy-w-4" />
             </div>
-            <h3 className="text-[10px] font-bold text-muted-foreground/40 uppercase tracking-widest">Collections</h3>
+            <h3 className="dy-text-[10px] dy-font-bold dy-text-muted-foreground/40 dy-uppercase dy-tracking-widest">Collections</h3>
           </div>
-          <p className="text-3xl font-bold tracking-tight">{collections.length}</p>
+          <p className="dy-text-3xl dy-font-bold dy-tracking-tight">{collections.length}</p>
         </div>
 
-        <div className="p-1 space-y-2 group border border-card">
-          <div className="flex items-center gap-3">
-            <div className="rounded-md bg-secondary/5 p-1.5 text-muted-foreground/60 group-hover:bg-accent group-hover:text-foreground transition-colors">
-              <Globe className="h-4 w-4" />
+        <div className="dy-p-1 dy-space-y-2 dy-group dy-border dy-border-card">
+          <div className="dy-flex dy-items-center dy-gap-3">
+            <div className="dy-rounded-md dy-bg-secondary/5 dy-p-1.5 dy-text-muted-foreground/60 dy-group-hover:dy-bg-accent dy-group-hover:dy-text-foreground dy-transition-colors">
+              <Globe className="dy-h-4 dy-w-4" />
             </div>
-            <h3 className="text-[10px] font-bold text-muted-foreground/40 uppercase tracking-widest">Global Configs</h3>
+            <h3 className="dy-text-[10px] dy-font-bold dy-text-muted-foreground/40 dy-uppercase dy-tracking-widest">Global Configs</h3>
           </div>
-          <p className="text-3xl font-bold tracking-tight">{globals.length}</p>
+          <p className="dy-text-3xl dy-font-bold dy-tracking-tight">{globals.length}</p>
         </div>
 
-        <div className="p-1 space-y-2 group border border-card">
-          <div className="flex items-center gap-3">
-            <div className="rounded-md bg-accent p-1.5 text-muted-foreground/60 group-hover:bg-accent group-hover:text-foreground transition-colors">
-              <ImageIcon className="h-4 w-4" />
+        <div className="dy-p-1 dy-space-y-2 dy-group dy-border dy-border-card">
+          <div className="dy-flex dy-items-center dy-gap-3">
+            <div className="dy-rounded-md dy-bg-accent dy-p-1.5 dy-text-muted-foreground/60 dy-group-hover:dy-bg-accent dy-group-hover:dy-text-foreground dy-transition-colors">
+              <ImageIcon className="dy-h-4 dy-w-4" />
             </div>
-            <h3 className="text-[10px] font-bold text-muted-foreground/40 uppercase tracking-widest">Media Files</h3>
+            <h3 className="dy-text-[10px] dy-font-bold dy-text-muted-foreground/40 dy-uppercase dy-tracking-widest">Media Files</h3>
           </div>
-          <p className="text-3xl font-bold tracking-tight">-</p>
+          <p className="dy-text-3xl dy-font-bold dy-tracking-tight">-</p>
         </div>
       </div>
 
-      <div className="grid gap-8 md:grid-cols-2">
+      <div className="dy-grid dy-gap-8 md:dy-grid-cols-2">
         <section >
-          <div className="flex items-center justify-between mb-4">
-            <h3 className="text-lg font-semibold flex items-center gap-2">
-              <Database className="h-5 w-5 text-primary" />
+          <div className="dy-flex dy-items-center dy-justify-between dy-mb-4">
+            <h3 className="dy-text-lg dy-font-semibold dy-flex dy-items-center dy-gap-2">
+              <Database className="dy-h-5 dy-w-5 dy-text-primary" />
               Collections
             </h3>
-            {/* <Button variant="ghost" size="sm" asChild className="text-xs">
+            {/* <Button variant="ghost" size="sm" asChild className="dy-text-xs">
               <Link to="/collections">View All</Link>
             </Button> */}
           </div>
-          <div className="space-y-1 border border-card">
+          <div className="dy-space-y-1 dy-border dy-border-card">
             {collections.map((col: any, idx: number) => (
               <Link
                 key={col.slug}
                 to={`/collections/${col.slug}`}
-                className="group flex items-center justify-between p-3 rounded-md hover:bg-primary/[0.02] transition-colors"
+                className="dy-group dy-flex dy-items-center dy-justify-between dy-p-3 dy-rounded-md hover:dy-bg-primary/[0.02] dy-transition-colors"
               >
                 <div>
-                  <p className="font-medium group-hover:text-primary transition-colors">{col.labels?.plural || col.slug}</p>
-                  <p className="text-xs text-muted-foreground uppercase">{col.slug}</p>
+                  <p className="dy-font-medium dy-group-hover:dy-text-primary dy-transition-colors">{col.labels?.plural || col.slug}</p>
+                  <p className="dy-text-xs dy-text-muted-foreground dy-uppercase">{col.slug}</p>
                 </div>
-                <div className="flex items-center gap-3">
-                  <div className="text-right mr-4">
-                    <p className="text-sm font-semibold">{collectionCounts[idx]?.data?.total || 0}</p>
-                    <p className="text-[10px] text-muted-foreground uppercase">Entries</p>
+                <div className="dy-flex dy-items-center dy-gap-3">
+                  <div className="dy-text-right dy-mr-4">
+                    <p className="dy-text-sm dy-font-semibold">{collectionCounts[idx]?.data?.total || 0}</p>
+                    <p className="dy-text-[10px] dy-text-muted-foreground dy-uppercase">Entries</p>
                   </div>
-                  <ArrowRight className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-transform group-hover:translate-x-0.5" />
+                  <ArrowRight className="dy-h-4 dy-w-4 dy-text-muted-foreground dy-group-hover:dy-text-primary dy-transition-transform dy-group-hover:dy-translate-x-0.5" />
                 </div>
               </Link>
             ))}
@@ -120,24 +120,24 @@ export function Dashboard() {
         </section>
 
         <section>
-          <div className="flex items-center justify-between mb-4">
-            <h3 className="text-lg font-semibold flex items-center gap-2">
-              <Globe className="h-5 w-5 text-secondary-foreground" />
+          <div className="dy-flex dy-items-center dy-justify-between dy-mb-4">
+            <h3 className="dy-text-lg dy-font-semibold dy-flex dy-items-center dy-gap-2">
+              <Globe className="dy-h-5 dy-w-5 dy-text-secondary-foreground" />
               Global Settings
             </h3>
           </div>
-          <div className="space-y-1 border border-card">
+          <div className="dy-space-y-1 dy-border dy-border-card">
             {globals.map((glb: any) => (
               <Link
                 key={glb.slug}
                 to={`/globals/${glb.slug}`}
-                className="group flex items-center justify-between p-3 rounded-md hover:bg-primary/[0.02] transition-colors"
+                className="dy-group dy-flex dy-items-center dy-justify-between dy-p-3 dy-rounded-md hover:dy-bg-primary/[0.02] dy-transition-colors"
               >
                 <div>
-                  <p className="font-medium group-hover:text-secondary-foreground transition-colors">{glb.label || glb.slug}</p>
-                  <p className="text-xs text-muted-foreground uppercase">{glb.slug}</p>
+                  <p className="dy-font-medium dy-group-hover:dy-text-secondary-foreground dy-transition-colors">{glb.label || glb.slug}</p>
+                  <p className="dy-text-xs dy-text-muted-foreground dy-uppercase">{glb.slug}</p>
                 </div>
-                <div className="bg-secondary/10 px-2 py-1 rounded text-[10px] font-bold text-secondary-foreground uppercase">
+                <div className="dy-bg-secondary/10 dy-px-2 dy-py-1 dy-rounded dy-text-[10px] dy-font-bold dy-text-secondary-foreground dy-uppercase">
                   Global
                 </div>
               </Link>