rearranged tenant admin layout, invite layouts now visible and manageable

resources/js/admin/pages/EmotionsPage.tsx

@@ -3,34 +3,20 @@ import { useTranslation } from 'react-i18next';
 import { format } from 'date-fns';
 import { de, enGB } from 'date-fns/locale';
 import type { Locale } from 'date-fns';
-import { Palette, Plus, Power, Smile } from 'lucide-react';
+import { Loader2, Palette, Plus, Power, Smile } from 'lucide-react';
 
-import { AdminLayout } from '../components/AdminLayout';
-import {
-  getEmotions,
-  createEmotion,
-  updateEmotion,
-  TenantEmotion,
-  EmotionPayload,
-} from '../api';
-import { isAuthError } from '../auth/tokens';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 
-const DEFAULT_COLOR = '#6366f1';
+import { AdminLayout } from '../components/AdminLayout';
+import { getEmotions, createEmotion, updateEmotion, TenantEmotion, EmotionPayload } from '../api';
+import { isAuthError } from '../auth/tokens';
 
 type EmotionFormState = {
   name: string;
@@ -41,6 +27,7 @@ type EmotionFormState = {
   sort_order: number;
 };
 
+const DEFAULT_COLOR = '#6366f1';
 const INITIAL_FORM_STATE: EmotionFormState = {
   name: '',
   description: '',
@@ -50,7 +37,11 @@ const INITIAL_FORM_STATE: EmotionFormState = {
   sort_order: 0,
 };
 
-export default function EmotionsPage(): JSX.Element {
+export type EmotionsSectionProps = {
+  embedded?: boolean;
+};
+
+export function EmotionsSection({ embedded = false }: EmotionsSectionProps): JSX.Element {
   const { t, i18n } = useTranslation('management');
 
   const [emotions, setEmotions] = React.useState<TenantEmotion[]>([]);
@@ -89,10 +80,10 @@ export default function EmotionsPage(): JSX.Element {
     };
   }, [t]);
 
-  function openCreateDialog() {
+  const openCreateDialog = React.useCallback(() => {
     setForm(INITIAL_FORM_STATE);
     setDialogOpen(true);
-  }
+  }, []);
 
   async function handleCreate(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
@@ -137,21 +128,13 @@ export default function EmotionsPage(): JSX.Element {
   }
 
   const locale = i18n.language.startsWith('en') ? enGB : de;
+  const title = embedded ? t('emotions.title') : t('emotions.title');
+  const subtitle = embedded
+    ? t('emotions.subtitle')
+    : t('emotions.subtitle');
 
   return (
-    <AdminLayout
-      title={t('emotions.title') ?? 'Emotions'}
-      subtitle={t('emotions.subtitle') ?? ''}
-      actions={
-        <Button
-          className="bg-gradient-to-r from-pink-500 via-fuchsia-500 to-purple-500 text-white shadow-lg shadow-pink-500/20"
-          onClick={openCreateDialog}
-        >
-          <Plus className="h-4 w-4" />
-          {t('emotions.actions.create')}
-        </Button>
-      }
-    >
+    <div className="space-y-6">
       {error && (
         <Alert variant="destructive">
           <AlertTitle>{t('emotions.errors.genericTitle')}</AlertTitle>
@@ -160,15 +143,27 @@ export default function EmotionsPage(): JSX.Element {
       )}
 
       <Card className="border-0 bg-white/85 shadow-xl shadow-pink-100/60">
-        <CardHeader>
-          <CardTitle className="text-xl text-slate-900">{t('emotions.title')}</CardTitle>
-          <CardDescription className="text-sm text-slate-600">{t('emotions.subtitle')}</CardDescription>
+        <CardHeader className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+          <div>
+            <CardTitle className="flex items-center gap-2 text-xl text-slate-900">
+              <Palette className="h-5 w-5 text-pink-500" />
+              {title}
+            </CardTitle>
+            <CardDescription className="text-sm text-slate-600">{subtitle}</CardDescription>
+          </div>
+          <Button
+            className="bg-gradient-to-r from-pink-500 via-fuchsia-500 to-purple-500 text-white shadow-lg shadow-pink-500/20"
+            onClick={openCreateDialog}
+          >
+            <Plus className="h-4 w-4" />
+            {t('emotions.actions.create')}
+          </Button>
         </CardHeader>
         <CardContent className="space-y-6">
           {loading ? (
             <EmotionSkeleton />
           ) : emotions.length === 0 ? (
-            <EmptyEmotionsState />
+            <EmptyEmotionsState onCreate={openCreateDialog} />
           ) : (
             <div className="grid gap-4 sm:grid-cols-2">
               {emotions.map((emotion) => (
@@ -177,7 +172,6 @@ export default function EmotionsPage(): JSX.Element {
                   emotion={emotion}
                   onToggle={() => toggleEmotion(emotion)}
                   locale={locale}
-                  canToggle={!emotion.is_global}
                 />
               ))}
             </div>
@@ -193,6 +187,15 @@ export default function EmotionsPage(): JSX.Element {
         saving={saving}
         onSubmit={handleCreate}
       />
+    </div>
+  );
+}
+
+export default function EmotionsPage(): JSX.Element {
+  const { t } = useTranslation('management');
+  return (
+    <AdminLayout title={t('emotions.title')} subtitle={t('emotions.subtitle')}>
+      <EmotionsSection />
     </AdminLayout>
   );
 }
@@ -201,95 +204,60 @@ function EmotionCard({
   emotion,
   onToggle,
   locale,
-  canToggle,
 }: {
   emotion: TenantEmotion;
   onToggle: () => void;
   locale: Locale;
-  canToggle: boolean;
 }) {
   const { t } = useTranslation('management');
-  const updatedLabel = emotion.updated_at
-    ? format(new Date(emotion.updated_at), 'PP', { locale })
-    : null;
-
+  const updated = emotion.updated_at ? format(new Date(emotion.updated_at), 'Pp', { locale }) : null;
   return (
-    <Card className="border border-slate-100 bg-white/90 shadow-sm">
-      <CardHeader className="space-y-3">
+    <Card className="border border-slate-200/70 bg-white/85 shadow-md shadow-pink-100/20">
+      <CardHeader className="flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <Badge
-            variant="outline"
-            className={emotion.is_global ? 'border-indigo-200 text-indigo-600' : 'border-pink-200 text-pink-600'}
+          <div
+            className="flex h-9 w-9 items-center justify-center rounded-full"
+            style={{ backgroundColor: `${emotion.color}20`, color: emotion.color ?? DEFAULT_COLOR }}
           >
-            {emotion.is_global ? t('emotions.scope.global') : t('emotions.scope.tenant')}
-          </Badge>
-          <Badge variant="secondary" className="bg-slate-100 text-slate-700">
-            {emotion.event_types.map((type) => type.name).join(', ') || t('emotions.labels.noEventType')}
-          </Badge>
+            <Smile className="h-4 w-4" />
+          </div>
+          <div>
+            <CardTitle className="text-base text-slate-900">{emotion.name}</CardTitle>
+            {emotion.description ? (
+              <CardDescription className="text-xs text-slate-500">{emotion.description}</CardDescription>
+            ) : null}
+          </div>
         </div>
-        <CardTitle className="flex items-center gap-2 text-lg text-slate-900">
-          <Smile className="h-4 w-4" />
-          {emotion.name}
-        </CardTitle>
-        {emotion.description && (
-          <CardDescription className="text-sm text-slate-600">{emotion.description}</CardDescription>
-        )}
-      </CardHeader>
-      <CardContent className="flex items-center justify-between text-xs text-slate-500">
-        <div className="flex items-center gap-2">
-          <Palette className="h-4 w-4" />
-          <span>{emotion.color}</span>
-        </div>
-        {updatedLabel && <span>{t('emotions.labels.updated', { date: updatedLabel })}</span>}
-      </CardContent>
-      <CardFooter className="flex items-center justify-between border-t border-slate-100 bg-slate-50/60 px-4 py-3">
-        <span className="text-xs text-slate-500">
+        <Badge variant={emotion.is_active ? 'default' : 'secondary'}>
           {emotion.is_active ? t('emotions.status.active') : t('emotions.status.inactive')}
-        </span>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={onToggle}
-          disabled={!canToggle}
-          className={!canToggle ? 'pointer-events-none opacity-60' : ''}
-        >
-          <Power className="mr-2 h-4 w-4" />
+        </Badge>
+      </CardHeader>
+      <CardContent className="space-y-3 text-sm text-slate-600">
+        <div className="flex flex-wrap gap-2">
+          <Badge variant="outline">#{emotion.icon}</Badge>
+          {emotion.event_types?.length ? (
+            emotion.event_types.map((eventType) => (
+              <Badge key={eventType.id} variant="outline">
+                {eventType.name}
+              </Badge>
+            ))
+          ) : (
+            <Badge variant="outline">{t('emotions.labels.noEventType')}</Badge>
+          )}
+        </div>
+        {updated ? <p className="text-xs text-slate-400">{t('emotions.labels.updated', { date: updated })}</p> : null}
+      </CardContent>
+      <CardFooter className="flex justify-between gap-2">
+        <Button variant="ghost" onClick={onToggle} className="text-slate-500 hover:text-emerald-600">
+          <Power className="mr-1 h-4 w-4" />
           {emotion.is_active ? t('emotions.actions.disable') : t('emotions.actions.enable')}
         </Button>
+        <div className="h-8 w-8 rounded-full border border-slate-200" style={{ backgroundColor: emotion.color ?? DEFAULT_COLOR }} />
       </CardFooter>
     </Card>
   );
 }
 
-function EmptyEmotionsState() {
-  const { t } = useTranslation('management');
-  return (
-    <div className="flex flex-col items-center justify-center gap-4 rounded-2xl border border-dashed border-indigo-200 bg-indigo-50/40 p-12 text-center">
-      <div className="rounded-full bg-white p-4 shadow-inner">
-        <Smile className="h-8 w-8 text-indigo-500" />
-      </div>
-      <div className="space-y-1">
-        <h3 className="text-lg font-semibold text-slate-800">{t('emotions.empty.title')}</h3>
-        <p className="text-sm text-slate-600">{t('emotions.empty.description')}</p>
-      </div>
-    </div>
-  );
-}
-
-function EmotionSkeleton() {
-  return (
-    <div className="grid gap-4 sm:grid-cols-2">
-      {Array.from({ length: 4 }).map((_, index) => (
-        <div key={index} className="animate-pulse rounded-2xl border border-slate-100 bg-white/80 p-6 shadow-sm">
-          <div className="mb-3 h-4 w-24 rounded bg-slate-200" />
-          <div className="mb-2 h-5 w-40 rounded bg-slate-200" />
-          <div className="h-16 rounded bg-slate-100" />
-        </div>
-      ))}
-    </div>
-  );
-}
-
 function EmotionDialog({
   open,
   onOpenChange,
@@ -308,12 +276,11 @@ function EmotionDialog({
   const { t } = useTranslation('management');
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-lg">
+      <DialogContent>
         <DialogHeader>
           <DialogTitle>{t('emotions.dialogs.createTitle')}</DialogTitle>
         </DialogHeader>
-
-        <form className="space-y-4" onSubmit={onSubmit}>
+        <form onSubmit={onSubmit} className="space-y-4">
           <div className="space-y-2">
             <Label htmlFor="emotion-name">{t('emotions.dialogs.name')}</Label>
             <Input
@@ -323,17 +290,14 @@ function EmotionDialog({
               required
             />
           </div>
-
           <div className="space-y-2">
             <Label htmlFor="emotion-description">{t('emotions.dialogs.description')}</Label>
-            <textarea
+            <Input
               id="emotion-description"
               value={form.description}
               onChange={(event) => setForm((prev) => ({ ...prev, description: event.target.value }))}
-              className="min-h-[80px] w-full rounded-md border border-slate-200 bg-white/80 p-2 text-sm shadow-sm focus:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-200"
             />
           </div>
-
           <div className="grid gap-4 sm:grid-cols-2">
             <div className="space-y-2">
               <Label htmlFor="emotion-icon">{t('emotions.dialogs.icon')}</Label>
@@ -347,28 +311,20 @@ function EmotionDialog({
               <Label htmlFor="emotion-color">{t('emotions.dialogs.color')}</Label>
               <Input
                 id="emotion-color"
+                type="color"
                 value={form.color}
                 onChange={(event) => setForm((prev) => ({ ...prev, color: event.target.value }))}
-                placeholder="#6366f1"
               />
             </div>
           </div>
-
-          <div className="flex items-center justify-between rounded-lg border border-indigo-100 bg-indigo-50/60 p-3">
+          <div className="flex items-center justify-between rounded-lg border border-slate-200 bg-slate-50/50 p-3">
             <div>
-              <Label htmlFor="emotion-active" className="text-sm font-medium text-slate-800">
-                {t('emotions.dialogs.activeLabel')}
-              </Label>
+              <p className="text-sm font-medium text-slate-700">{t('emotions.dialogs.activeLabel')}</p>
               <p className="text-xs text-slate-500">{t('emotions.dialogs.activeDescription')}</p>
             </div>
-            <Switch
-              id="emotion-active"
-              checked={form.is_active}
-              onCheckedChange={(checked) => setForm((prev) => ({ ...prev, is_active: Boolean(checked) }))}
-            />
+            <Switch checked={form.is_active} onCheckedChange={(checked) => setForm((prev) => ({ ...prev, is_active: checked }))} />
           </div>
-
-          <DialogFooter className="flex justify-end gap-2">
+          <DialogFooter className="flex gap-2">
             <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
               {t('emotions.dialogs.cancel')}
             </Button>
@@ -382,3 +338,27 @@ function EmotionDialog({
     </Dialog>
   );
 }
+
+function EmotionSkeleton() {
+  return (
+    <div className="grid gap-4 sm:grid-cols-2">
+      {Array.from({ length: 4 }).map((_, index) => (
+        <div key={`emotion-skeleton-${index}`} className="h-36 animate-pulse rounded-xl bg-gradient-to-r from-white/40 via-white/60 to-white/40" />
+      ))}
+    </div>
+  );
+}
+
+function EmptyEmotionsState({ onCreate }: { onCreate: () => void }) {
+  const { t } = useTranslation('management');
+  return (
+    <div className="flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-slate-200 bg-slate-50/60 p-10 text-center">
+      <h3 className="text-base font-semibold text-slate-800">{t('emotions.empty.title')}</h3>
+      <p className="text-sm text-slate-500">{t('emotions.empty.description')}</p>
+      <Button onClick={onCreate} className="bg-gradient-to-r from-pink-500 via-fuchsia-500 to-purple-500 text-white">
+        <Plus className="mr-1 h-4 w-4" />
+        {t('emotions.actions.create')}
+      </Button>
+    </div>
+  );
+}