feat: unify tenant admin ui and add photo moderation

resources/js/admin/components/tenant/action-grid.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface ActionItem {
+  key: string;
+  label: string;
+  description: string;
+  icon?: React.ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+interface ActionGridProps {
+  items: ActionItem[];
+  columns?: 1 | 2;
+}
+
+export function ActionGrid({ items, columns = 2 }: ActionGridProps) {
+  return (
+    <div className={cn('grid gap-3', columns === 2 ? 'sm:grid-cols-2' : '')}>
+      {items.map((item) => (
+        <button
+          key={item.key}
+          type="button"
+          onClick={item.onClick}
+          disabled={item.disabled}
+          className="group flex flex-col gap-1.5 rounded-2xl border border-slate-200 bg-white p-4 text-left shadow-sm transition duration-200 hover:-translate-y-0.5 hover:border-rose-200 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-rose-300 disabled:cursor-not-allowed disabled:opacity-60 dark:border-white/10 dark:bg-white/5"
+        >
+          <div className="flex items-center gap-2 text-sm font-semibold text-slate-900 dark:text-white">
+            {item.icon ? <span className="text-rose-500 dark:text-rose-200">{item.icon}</span> : null}
+            {item.label}
+          </div>
+          <p className="text-xs text-slate-600 dark:text-slate-400">{item.description}</p>
+        </button>
+      ))}
+    </div>
+  );
+}

resources/js/admin/components/tenant/frosted-surface.tsx

@@ -4,7 +4,7 @@ import { Card } from '@/components/ui/card';
 import { cn } from '@/lib/utils';
 
 export const frostedCardClass = cn(
-  'border border-white/15 bg-white/92 text-slate-900 shadow-lg shadow-rose-400/10 backdrop-blur-lg',
+  'border border-slate-200 bg-white text-slate-900 shadow-lg shadow-rose-100/30 backdrop-blur',
   'dark:border-slate-800/70 dark:bg-slate-950/85 dark:text-slate-100'
 );
 
@@ -22,7 +22,7 @@ export function FrostedSurface({ className, ...props }: FrostedSurfaceProps) {
   return (
     <div
       className={cn(
-        'rounded-2xl border border-white/15 bg-white/88 text-slate-900 shadow-lg shadow-rose-300/10 backdrop-blur-lg',
+        'rounded-2xl border border-slate-200 bg-white text-slate-900 shadow-lg shadow-rose-100/30 backdrop-blur',
         'dark:border-slate-800/70 dark:bg-slate-950/80 dark:text-slate-100',
         className
       )}

resources/js/admin/components/tenant/hero-card.tsx

@@ -29,31 +29,27 @@ export function TenantHeroCard({
   return (
     <Card
       className={cn(
-        'relative overflow-hidden border border-slate-200/80 bg-white text-slate-900 shadow-xl shadow-rose-200/30 backdrop-blur',
-        'dark:border-white/10 dark:bg-slate-950/90 dark:text-slate-100',
+        'relative overflow-hidden border border-slate-200 bg-white text-slate-900 shadow-lg shadow-rose-100/50 backdrop-blur dark:border-white/10 dark:bg-slate-900/80 dark:text-slate-100',
         className
       )}
     >
-      <div
-        aria-hidden
-        className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,_rgba(255,137,170,0.18),_transparent_55%),radial-gradient(ellipse_at_bottom,_rgba(99,102,241,0.16),_transparent_65%)] motion-safe:animate-[aurora_18s_ease-in-out_infinite] dark:hidden"
-      />
-      <div aria-hidden className="absolute inset-0 bg-gradient-to-br from-rose-50/70 via-white to-sky-50/70 dark:hidden" />
-      <div aria-hidden className="absolute inset-0 hidden bg-gradient-to-br from-slate-950/80 via-slate-900/20 to-transparent mix-blend-overlay dark:block" />
-
-      <CardContent className="relative z-10 flex flex-col gap-8 px-6 py-8 lg:flex-row lg:items-start lg:justify-between lg:px-10 lg:py-12">
-        <div className="max-w-2xl space-y-6">
+      <CardContent className="relative z-10 flex flex-col gap-6 px-5 py-6 sm:px-6 lg:flex-row lg:items-start lg:justify-between">
+        <div className="space-y-4">
           {badge ? (
-            <span className="inline-flex items-center gap-2 rounded-full border border-rose-100 bg-rose-50/80 px-4 py-1 text-xs font-semibold uppercase tracking-[0.35em] text-rose-600 dark:border-white/30 dark:bg-white/15 dark:text-white">
+            <span className="inline-flex items-center gap-2 rounded-full bg-rose-100/80 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.25em] text-rose-600 dark:bg-white/15 dark:text-white">
               {badge}
             </span>
           ) : null}
 
-          <div className="space-y-3 text-slate-700 dark:text-slate-100">
-            <h1 className="font-display text-3xl font-semibold tracking-tight text-slate-900 dark:text-white sm:text-4xl">{title}</h1>
-            {description ? <p className="text-sm text-slate-600 dark:text-white/75 sm:text-base">{description}</p> : null}
+          <div className="space-y-2 text-slate-700 dark:text-slate-100">
+            <h1 className="font-display text-2xl font-semibold leading-tight text-slate-900 dark:text-white sm:text-3xl">
+              {title}
+            </h1>
+            {description ? (
+              <p className="text-sm text-slate-600 dark:text-white/80">{description}</p>
+            ) : null}
             {supporting?.map((paragraph) => (
-              <p key={paragraph} className="text-sm text-slate-600 dark:text-white/75 sm:text-base">
+              <p key={paragraph} className="text-sm text-slate-600 dark:text-white/70">
                 {paragraph}
               </p>
             ))}
@@ -61,14 +57,18 @@ export function TenantHeroCard({
           </div>
 
           {(primaryAction || secondaryAction) && (
-            <div className="flex flex-wrap gap-3">
+            <div className="flex flex-wrap gap-2">
               {primaryAction}
               {secondaryAction}
             </div>
           )}
         </div>
 
-        {aside ? <div className="w-full max-w-sm">{aside}</div> : null}
+        {aside ? (
+          <div className="rounded-2xl border border-slate-200/70 bg-white/90 p-4 text-sm dark:border-white/10 dark:bg-white/5">
+            {aside}
+          </div>
+        ) : null}
       </CardContent>
     </Card>
   );

resources/js/admin/components/tenant/index.ts

@@ -3,3 +3,6 @@ export { FrostedCard, FrostedSurface, frostedCardClass } from './frosted-surface
 export { ChecklistRow } from './checklist-row';
 export type { ChecklistStep } from './onboarding-checklist-card';
 export { TenantOnboardingChecklistCard } from './onboarding-checklist-card';
+export { SectionCard, SectionHeader } from './section-card';
+export { StatCarousel } from './stat-carousel';
+export { ActionGrid } from './action-grid';

resources/js/admin/components/tenant/section-card.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface SectionCardProps extends React.HTMLAttributes<HTMLElement> {
+  as?: 'section' | 'div';
+}
+
+export function SectionCard({ className, as: Tag = 'section', ...props }: SectionCardProps) {
+  return (
+    <Tag
+      className={cn(
+        'rounded-3xl border border-slate-200 bg-white p-5 shadow-sm dark:border-white/10 dark:bg-white/5 dark:shadow-inner',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+interface SectionHeaderProps {
+  eyebrow?: string;
+  title: string;
+  description?: string;
+  endSlot?: React.ReactNode;
+  className?: string;
+}
+
+export function SectionHeader({ eyebrow, title, description, endSlot, className }: SectionHeaderProps) {
+  return (
+    <div className={cn('flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between', className)}>
+      <div>
+        {eyebrow ? (
+          <p className="text-xs font-semibold uppercase tracking-[0.35em] text-rose-500 dark:text-rose-200">{eyebrow}</p>
+        ) : null}
+        <h2 className="text-lg font-semibold text-slate-900 dark:text-white">{title}</h2>
+        {description ? <p className="text-sm text-slate-600 dark:text-slate-300">{description}</p> : null}
+      </div>
+      {endSlot}
+    </div>
+  );
+}

resources/js/admin/components/tenant/stat-carousel.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface StatItem {
+  key: string;
+  label: string;
+  value: string | number;
+  icon?: React.ReactNode;
+  hint?: string;
+}
+
+interface StatCarouselProps {
+  items: StatItem[];
+}
+
+export function StatCarousel({ items }: StatCarouselProps) {
+  return (
+    <div className="-mx-4 flex snap-x snap-mandatory gap-3 overflow-x-auto px-4 pb-2 sm:mx-0 sm:grid sm:snap-none sm:overflow-visible sm:px-0 sm:pb-0 sm:grid-cols-2 lg:grid-cols-4">
+      {items.map((item) => (
+        <div key={item.key} className="min-w-[70%] snap-center sm:min-w-0">
+          <div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-white/5">
+            <div className="flex items-center justify-between">
+              <span className="text-xs uppercase tracking-wide text-slate-500 dark:text-slate-400">{item.label}</span>
+              {item.icon ? <span className="text-rose-500 dark:text-rose-200">{item.icon}</span> : null}
+            </div>
+            <div className="mt-3 text-2xl font-semibold text-slate-900 dark:text-white">{item.value}</div>
+            {item.hint ? (
+              <p className="mt-2 text-xs text-slate-500 dark:text-slate-400">{item.hint}</p>
+            ) : null}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}