Momento/memento-note/fix-admin-settings.js

const fs = require('fs');
const file = 'app/(admin)/admin/settings/admin-settings-form.tsx';
let content = fs.readFileSync(file, 'utf-8');

// 1. Add icons
content = content.replace(
  "import { TestTube, ExternalLink, RefreshCw } from 'lucide-react'",
  "import { TestTube, ExternalLink, RefreshCw, Shield, Brain, Mail, Wrench } from 'lucide-react'"
);

// 2. Change root wrapper to 2 columns
content = content.replace(
  '<div className="space-y-6">',
  `<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
      {/* Left Column */}
      <div className="flex flex-col gap-6">`
);

// 3. Close left column and open right column right before AI Providers
content = content.replace(
  '      <Card>\n        <CardHeader>\n          <CardTitle>{t(\'admin.ai.title\')}</CardTitle>',
  `      </div>
      {/* Right Column */}
      <div className="flex flex-col gap-6">
      <Card>
        <CardHeader>
          <CardTitle>{t('admin.ai.title')}</CardTitle>`
);

// 4. Move Email from after AI to Left Column? No, let's keep the order and just split them.
// Wait, in my previous attempt I put Security + AI on left, and Email + Tools on right?
// Let's just do that to be safe.
// Let's put Security + AI in Left Column, and Email + Tools in Right Column.
// So:
// Left Column ends after AI Providers.
// Right Column starts before Email.
content = content.replace(
  '      <Card>\n        <CardHeader>\n          <CardTitle>{t(\'admin.email.title\')}</CardTitle>',
  `      </div>
      {/* Right Column */}
      <div className="flex flex-col gap-6">
      <Card>
        <CardHeader>
          <CardTitle>{t('admin.email.title')}</CardTitle>`
);

// Add the closing div for Right Column at the very end
content = content.replace(
  '    </div>\n  )\n}\n',
  '      </div>\n    </div>\n  )\n}\n'
);

// Now let's replace all Card components with the custom design system
// Security Card
content = content.replace(
  '<Card>\n        <CardHeader>\n          <CardTitle>{t(\'admin.security.title\')}</CardTitle>\n          <CardDescription>{t(\'admin.security.description\')}</CardDescription>\n        </CardHeader>',
  `<div className="bg-card rounded-lg border border-border shadow-sm overflow-hidden">
        <div className="flex items-center gap-3 p-6 border-b border-border">
          <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
            <Shield className="h-5 w-5" />
          </div>
          <div>
            <h2 className="font-semibold text-foreground">{t('admin.security.title')}</h2>
            <p className="text-sm text-muted-foreground">{t('admin.security.description')}</p>
          </div>
        </div>`
);
content = content.replace(/<CardContent/g, '<div');
content = content.replace(/<\/CardContent>/g, '</div>');
content = content.replace(/<CardFooter>/g, '<div className="px-6 pb-6">');
content = content.replace(/<\/CardFooter>/g, '</div>');

content = content.replace(
  '</form>\n      </Card>',
  '</form>\n      </div>'
); // do it 4 times
content = content.replace('</form>\n      </Card>', '</form>\n      </div>');
content = content.replace('</form>\n      </Card>', '</form>\n      </div>');
content = content.replace('</form>\n      </Card>', '</form>\n      </div>');

// AI Card
content = content.replace(
  '<Card>\n        <CardHeader>\n          <CardTitle>{t(\'admin.ai.title\')}</CardTitle>\n          <CardDescription>{t(\'admin.ai.description\')}</CardDescription>\n        </CardHeader>',
  `<div className="bg-card rounded-lg border border-border shadow-sm overflow-hidden">
        <div className="flex items-center gap-3 p-6 border-b border-border">
          <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
            <Brain className="h-5 w-5" />
          </div>
          <div>
            <h2 className="font-semibold text-foreground">{t('admin.ai.title')}</h2>
            <p className="text-sm text-muted-foreground">{t('admin.ai.description')}</p>
          </div>
        </div>`
);

// Email Card
content = content.replace(
  '<Card>\n        <CardHeader>\n          <CardTitle>{t(\'admin.email.title\')}</CardTitle>\n          <CardDescription>{t(\'admin.email.description\')}</CardDescription>\n        </CardHeader>',
  `<div className="bg-card rounded-lg border border-border shadow-sm overflow-hidden">
        <div className="flex items-center gap-3 p-6 border-b border-border">
          <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
            <Mail className="h-5 w-5" />
          </div>
          <div>
            <h2 className="font-semibold text-foreground">{t('admin.email.title')}</h2>
            <p className="text-sm text-muted-foreground">{t('admin.email.description')}</p>
          </div>
        </div>`
);

// Tools Card
content = content.replace(
  '<Card>\n        <CardHeader>\n          <CardTitle>{t(\'admin.tools.title\')}</CardTitle>\n          <CardDescription>{t(\'admin.tools.description\')}</CardDescription>\n        </CardHeader>',
  `<div className="bg-card rounded-lg border border-border shadow-sm overflow-hidden">
        <div className="flex items-center gap-3 p-6 border-b border-border">
          <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
            <Wrench className="h-5 w-5" />
          </div>
          <div>
            <h2 className="font-semibold text-foreground">{t('admin.tools.title')}</h2>
            <p className="text-sm text-muted-foreground">{t('admin.tools.description')}</p>
          </div>
        </div>`
);

// Replace AI block styling
content = content.replace(
  'p-4 border rounded-lg bg-primary/5 dark:bg-primary/10',
  'p-4 border border-border/50 rounded-lg bg-muted/50'
);
content = content.replace(
  'p-4 border rounded-lg bg-green-50/50 dark:bg-green-950/20',
  'p-4 border border-border/50 rounded-lg bg-muted/50 mt-4'
);
content = content.replace(
  'p-4 border rounded-lg bg-blue-50/50 dark:bg-blue-950/20',
  'p-4 border border-border/50 rounded-lg bg-muted/50 mt-4'
);

// Also replace dark text colors inside headers
content = content.replace(
  '<h3 className="text-base font-semibold flex items-center gap-2">\\n                <span className="text-primary">🏷️</span>',
  '<h3 className="text-base font-semibold flex items-center gap-2 text-foreground">\\n                <span className="text-primary">🏷️</span>'
);
content = content.replace(
  '<h3 className="text-base font-semibold flex items-center gap-2">\\n                <span className="text-green-600">🔍</span>',
  '<h3 className="text-base font-semibold flex items-center gap-2 text-foreground">\\n                <span className="text-green-600">🔍</span>'
);
content = content.replace(
  '<h3 className="text-base font-semibold flex items-center gap-2">\\n                <span className="text-blue-600">💬</span>',
  '<h3 className="text-base font-semibold flex items-center gap-2 text-foreground">\\n                <span className="text-blue-600">💬</span>'
);

// Email / Search test result classes
content = content.replace(
  /border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950\/30 dark:text-green-300/g,
  'border-green-500/20 bg-green-500/10 text-green-600'
);
content = content.replace(
  /border-red-200 bg-red-50 text-red-800 dark:border-red-800 dark:bg-red-950\/30 dark:text-red-300/g,
  'border-red-500/20 bg-red-500/10 text-red-600'
);

// CardFooter specific layout fixes since it became a div
content = content.replace(
  '<div className="flex justify-between pb-6">',
  '<div className="px-6 pb-6 flex justify-between">'
); // Might not match exact, let's fix manually if needed.

// Wait, the CardFooter replacement was: content.replace(/<CardFooter>/g, '<div className="px-6 pb-6">');
// Then there was <CardFooter className="flex justify-between"> which became <div className="flex justify-between">... Need to make sure it has padding.
content = content.replace(
  '<div className="flex justify-between">',
  '<div className="px-6 pb-6 flex justify-between">'
);

fs.writeFileSync(file, content);
console.log("Success");