@hed-hog/core 0.0.298 → 0.0.300

package/hedhog/frontend/app/dashboard/dashboard-home-tabs.tsx.ejs

@@ -0,0 +1,1389 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from '@/components/ui/context-menu';
+import { Input } from '@/components/ui/input';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import * as LucideIcons from 'lucide-react';
+import {
+  Home,
+  LayoutDashboard,
+  Loader2,
+  Palette,
+  Pencil,
+  Plus,
+  Share2,
+  Trash2,
+  UserPlus,
+  type LucideIcon,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+import { DashboardContent } from './[slug]/dashboard-content';
+
+type DashboardTab = {
+  id: number;
+  slug: string;
+  name?: string;
+  icon?: string | null;
+  is_home?: boolean;
+  dashboard_locale?: Array<{
+    name?: string | null;
+  }>;
+};
+
+type SharedUser = {
+  id: number;
+  name: string;
+  email: string | null;
+  isCurrentUser?: boolean;
+  isHome?: boolean;
+};
+
+type DashboardTemplate = {
+  id: number;
+  slug: string;
+  name: string;
+  icon?: string | null;
+  itemCount: number;
+};
+
+const getDashboardName = (dashboard: DashboardTab) =>
+  dashboard.name || dashboard.dashboard_locale?.[0]?.name || dashboard.slug;
+
+const DASHBOARD_HOME_HEADER_ACTIONS_TARGET_ID = 'dashboard-home-header-actions';
+
+const DASHBOARD_ICON_OPTIONS = [
+  'layout-dashboard',
+  'bar-chart-3',
+  'bar-chart-4',
+  'chart-column',
+  'chart-line',
+  'chart-no-axes-combined',
+  'pie-chart',
+  'trending-up',
+  'trending-down',
+  'briefcase',
+  'building-2',
+  'folder-kanban',
+  'graduation-cap',
+  'book-open',
+  'landmark',
+  'wallet',
+  'badge-dollar-sign',
+  'circle-dollar-sign',
+  'banknote',
+  'hand-coins',
+  'credit-card',
+  'receipt',
+  'shopping-cart',
+  'package',
+  'store',
+  'users',
+  'user-round',
+  'contact-round',
+  'message-square',
+  'mail',
+  'file-text',
+  'file-code-2',
+  'circle-help',
+  'tags',
+  'hash',
+  'ticket',
+  'shield',
+  'settings-2',
+  'database',
+  'activity',
+  'calendar',
+  'calendar-days',
+  'clock-3',
+  'timer',
+  'hourglass',
+  'globe',
+  'target',
+  'wrench',
+  'home',
+  'house',
+  'map-pinned',
+  'navigation',
+  'compass',
+  'zap',
+  'flame',
+  'star',
+  'heart',
+  'thumbs-up',
+  'rocket',
+  'sparkles',
+  'bell',
+  'megaphone',
+  'search',
+  'filter',
+  'list',
+  'layout-list',
+  'layout-grid',
+  'kanban',
+  'sliders-horizontal',
+  'cpu',
+  'monitor',
+  'smartphone',
+  'tablet',
+  'wifi',
+  'cloud',
+  'cloud-sun',
+  'sun',
+  'moon',
+  'palette',
+  'brush-cleaning',
+  'camera',
+  'image',
+  'video',
+  'music',
+  'headphones',
+  'mic',
+  'phone',
+  'send',
+  'inbox',
+  'archive',
+  'clipboard-list',
+  'check-circle-2',
+  'x-circle',
+  'alert-triangle',
+  'info',
+  'notebook-text',
+] as const;
+
+const normalizeLucideIconName = (value: string) =>
+  value
+    .trim()
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replace(/([a-zA-Z])(\d)/g, '$1-$2')
+    .replace(/(\d)([a-zA-Z])/g, '$1-$2')
+    .split(/[\s_-]+/)
+    .filter(Boolean)
+    .map((part) => part.toLowerCase())
+    .join('-');
+
+const getLucideComponentName = (value: string) =>
+  normalizeLucideIconName(value)
+    .split('-')
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('');
+
+const isLucideIconComponent = (candidate: unknown): candidate is LucideIcon =>
+  candidate !== null &&
+  candidate !== undefined &&
+  (typeof candidate === 'function' || typeof candidate === 'object');
+
+const resolveDashboardIcon = (iconName?: string | null): LucideIcon => {
+  const componentName = iconName ? getLucideComponentName(iconName) : '';
+  const candidate = componentName
+    ? LucideIcons[componentName as keyof typeof LucideIcons]
+    : undefined;
+
+  return isLucideIconComponent(candidate)
+    ? (candidate as LucideIcon)
+    : LayoutDashboard;
+};
+
+const isValidLucideIconName = (iconName: string) => {
+  const componentName = getLucideComponentName(iconName);
+  const candidate = componentName
+    ? LucideIcons[componentName as keyof typeof LucideIcons]
+    : undefined;
+
+  return isLucideIconComponent(candidate);
+};
+
+const getErrorMessage = (error: unknown, fallback: string) => {
+  if (
+    typeof error === 'object' &&
+    error !== null &&
+    'response' in error &&
+    typeof error.response === 'object' &&
+    error.response !== null &&
+    'data' in error.response &&
+    typeof error.response.data === 'object' &&
+    error.response.data !== null &&
+    'message' in error.response.data
+  ) {
+    const message = error.response.data.message;
+
+    if (Array.isArray(message)) {
+      return message.join(', ');
+    }
+
+    if (typeof message === 'string') {
+      return message;
+    }
+  }
+
+  if (error instanceof Error && error.message) {
+    return error.message;
+  }
+
+  return fallback;
+};
+
+export function DashboardHomeTabs() {
+  const t = useTranslations('core.DashboardHomeTabs');
+  const { request, currentLocaleCode } = useApp();
+  const [activeSlug, setActiveSlug] = useState('');
+  const [createOpen, setCreateOpen] = useState(false);
+  const [shareOpen, setShareOpen] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [newDashboardName, setNewDashboardName] = useState('');
+  const [newDashboardIcon, setNewDashboardIcon] = useState('layout-dashboard');
+  const [selectedTemplateSlug, setSelectedTemplateSlug] = useState('');
+  const [shareSearch, setShareSearch] = useState('');
+  const [renamingSlug, setRenamingSlug] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState('');
+  const [isCreating, setIsCreating] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [sharingUserId, setSharingUserId] = useState<number | null>(null);
+  const [revokingUserId, setRevokingUserId] = useState<number | null>(null);
+  const [isSettingHome, setIsSettingHome] = useState(false);
+  const [openAddWidgetSignal, setOpenAddWidgetSignal] = useState(0);
+  const [iconOpen, setIconOpen] = useState(false);
+  const [iconDashboard, setIconDashboard] = useState<DashboardTab | null>(null);
+  const [iconValue, setIconValue] = useState('layout-dashboard');
+  const [isSavingIcon, setIsSavingIcon] = useState(false);
+
+  const {
+    data: dashboards = [],
+    isLoading,
+    refetch: refetchDashboards,
+  } = useQuery<DashboardTab[]>({
+    queryKey: ['dashboard-home-tabs', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<DashboardTab[]>({
+        url: '/dashboard-core/user-dashboards',
+        method: 'GET',
+      });
+
+      return response.data ?? [];
+    },
+  });
+
+  const { data: dashboardTemplates = [], isLoading: isLoadingTemplates } =
+    useQuery<DashboardTemplate[]>({
+      queryKey: ['dashboard-templates', currentLocaleCode, createOpen],
+      queryFn: async () => {
+        const response = await request<DashboardTemplate[]>({
+          url: '/dashboard-core/templates',
+          method: 'GET',
+        });
+
+        return response.data ?? [];
+      },
+      enabled: createOpen,
+    });
+
+  const activeDashboard = useMemo(
+    () => dashboards.find((dashboard) => dashboard.slug === activeSlug) ?? null,
+    [activeSlug, dashboards]
+  );
+
+  const selectedTemplate = useMemo(
+    () =>
+      dashboardTemplates.find(
+        (template) => template.slug === selectedTemplateSlug
+      ) ?? null,
+    [dashboardTemplates, selectedTemplateSlug]
+  );
+
+  useEffect(() => {
+    if (dashboards.length === 0) {
+      setActiveSlug('');
+      return;
+    }
+
+    const hasActiveDashboard = dashboards.some(
+      (dashboard) => dashboard.slug === activeSlug
+    );
+
+    if (!activeSlug || !hasActiveDashboard) {
+      const nextDashboard =
+        dashboards.find((dashboard) => dashboard.is_home) ?? dashboards[0];
+
+      if (nextDashboard) {
+        setActiveSlug(nextDashboard.slug);
+      }
+    }
+  }, [activeSlug, dashboards]);
+
+  const {
+    data: sharedUsers = [],
+    isLoading: isLoadingShares,
+    refetch: refetchShares,
+  } = useQuery<SharedUser[]>({
+    queryKey: ['dashboard-shares', activeSlug, shareOpen],
+    queryFn: async () => {
+      if (!activeSlug) {
+        return [];
+      }
+
+      const response = await request<SharedUser[]>({
+        url: `/dashboard-core/dashboard/${activeSlug}/shares`,
+        method: 'GET',
+      });
+
+      return response.data ?? [];
+    },
+    enabled: shareOpen && Boolean(activeSlug),
+  });
+
+  const {
+    data: shareableUsers = [],
+    isLoading: isLoadingShareableUsers,
+    refetch: refetchShareableUsers,
+  } = useQuery<SharedUser[]>({
+    queryKey: ['dashboard-shareable-users', activeSlug, shareSearch, shareOpen],
+    queryFn: async () => {
+      if (!activeSlug) {
+        return [];
+      }
+
+      const params = new URLSearchParams();
+      if (shareSearch.trim()) {
+        params.set('search', shareSearch.trim());
+      }
+
+      const queryString = params.toString();
+      const response = await request<SharedUser[]>({
+        url: `/dashboard-core/shareable-users/${activeSlug}${
+          queryString ? `?${queryString}` : ''
+        }`,
+        method: 'GET',
+      });
+
+      return response.data ?? [];
+    },
+    enabled: shareOpen && Boolean(activeSlug),
+  });
+
+  const handleSelectTemplate = (template: DashboardTemplate | null) => {
+    setSelectedTemplateSlug(template?.slug ?? '');
+    setNewDashboardName(template?.name ?? '');
+    setNewDashboardIcon(template?.icon ?? 'layout-dashboard');
+  };
+
+  const handleCreateDashboard = async () => {
+    const trimmedName = newDashboardName.trim();
+    const normalizedIcon = newDashboardIcon.trim()
+      ? normalizeLucideIconName(newDashboardIcon)
+      : 'layout-dashboard';
+
+    if (!trimmedName) {
+      toast.error(t('enterDashboardName'));
+      return;
+    }
+
+    if (normalizedIcon && !isValidLucideIconName(normalizedIcon)) {
+      toast.error(t('enterValidLucideIcon'));
+      return;
+    }
+
+    try {
+      setIsCreating(true);
+
+      const response = await request<DashboardTab>({
+        url: '/dashboard-core/dashboard',
+        method: 'POST',
+        data: {
+          name: trimmedName,
+          icon: normalizedIcon,
+          ...(selectedTemplateSlug
+            ? { templateSlug: selectedTemplateSlug }
+            : {}),
+        },
+      });
+
+      await refetchDashboards();
+      setActiveSlug(response.data?.slug ?? activeSlug);
+      setNewDashboardName('');
+      setNewDashboardIcon('layout-dashboard');
+      setSelectedTemplateSlug('');
+      setCreateOpen(false);
+      toast.success(t('dashboardCreated'));
+    } catch (error) {
+      toast.error(getErrorMessage(error, t('createDashboardError')));
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  const handleSetHomeDashboard = async (dashboard = activeDashboard) => {
+    if (!dashboard || dashboard.is_home) {
+      return;
+    }
+
+    cancelRenameDashboard();
+
+    try {
+      setIsSettingHome(true);
+      await request({
+        url: `/dashboard-core/dashboard/${dashboard.slug}/home`,
+        method: 'POST',
+      });
+      await refetchDashboards();
+      toast.success(t('setAsHomeSuccess'));
+    } catch (error) {
+      toast.error(getErrorMessage(error, t('updateHomeError')));
+    } finally {
+      setIsSettingHome(false);
+    }
+  };
+
+  const startRenameDashboard = (dashboard: DashboardTab) => {
+    setActiveSlug(dashboard.slug);
+    setRenamingSlug(dashboard.slug);
+    setRenameValue(getDashboardName(dashboard));
+  };
+
+  const cancelRenameDashboard = () => {
+    setRenamingSlug(null);
+    setRenameValue('');
+  };
+
+  const handleRenameDashboard = async (dashboard: DashboardTab) => {
+    const trimmedName = renameValue.trim();
+
+    if (!trimmedName) {
+      toast.error(t('enterDashboardName'));
+      return;
+    }
+
+    if (trimmedName === getDashboardName(dashboard)) {
+      cancelRenameDashboard();
+      return;
+    }
+
+    try {
+      setIsRenaming(true);
+      await request({
+        url: `/dashboard-core/dashboard/${dashboard.slug}`,
+        method: 'PATCH',
+        data: { name: trimmedName },
+      });
+      await refetchDashboards();
+      cancelRenameDashboard();
+      toast.success(t('dashboardRenamed'));
+    } catch (error) {
+      toast.error(getErrorMessage(error, t('renameDashboardError')));
+    } finally {
+      setIsRenaming(false);
+    }
+  };
+
+  const openShareForDashboard = (dashboard: DashboardTab) => {
+    cancelRenameDashboard();
+    setActiveSlug(dashboard.slug);
+    setShareOpen(true);
+  };
+
+  const openDeleteForDashboard = (dashboard: DashboardTab) => {
+    cancelRenameDashboard();
+    setActiveSlug(dashboard.slug);
+    setDeleteOpen(true);
+  };
+
+  const openAddWidgetsForDashboard = (dashboard: DashboardTab) => {
+    cancelRenameDashboard();
+    setActiveSlug(dashboard.slug);
+    setOpenAddWidgetSignal((previous) => previous + 1);
+  };
+
+  const openIconForDashboard = (dashboard: DashboardTab) => {
+    cancelRenameDashboard();
+    setActiveSlug(dashboard.slug);
+    setIconDashboard(dashboard);
+    setIconValue(
+      dashboard.icon
+        ? normalizeLucideIconName(dashboard.icon)
+        : 'layout-dashboard'
+    );
+    setIconOpen(true);
+  };
+
+  const handleSaveDashboardIcon = async () => {
+    if (!iconDashboard) {
+      return;
+    }
+
+    const trimmedValue = iconValue.trim();
+    const normalizedIcon = trimmedValue
+      ? normalizeLucideIconName(trimmedValue)
+      : null;
+
+    if (normalizedIcon && !isValidLucideIconName(normalizedIcon)) {
+      toast.error(t('enterValidLucideIcon'));
+      return;
+    }
+
+    try {
+      setIsSavingIcon(true);
+      await request({
+        url: `/dashboard-core/dashboard/${iconDashboard.slug}`,
+        method: 'PATCH',
+        data: {
+          icon: normalizedIcon,
+        },
+      });
+      await refetchDashboards();
+      setIconOpen(false);
+      setIconDashboard(null);
+      toast.success(t('dashboardIconUpdated'));
+    } catch (error) {
+      toast.error(getErrorMessage(error, t('updateDashboardIconError')));
+    } finally {
+      setIsSavingIcon(false);
+    }
+  };
+
+  const handleRemoveDashboard = async () => {
+    if (!activeDashboard) {
+      return;
+    }
+
+    try {
+      setIsDeleting(true);
+      await request({
+        url: `/dashboard-core/dashboard/${activeDashboard.slug}`,
+        method: 'DELETE',
+      });
+      await refetchDashboards();
+      setDeleteOpen(false);
+      toast.success(t('tabRemoved'));
+    } catch (error) {
+      toast.error(getErrorMessage(error, t('removeTabError')));
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const handleShareWithUser = async (userId: number) => {
+    if (!activeDashboard) {
+      return;
+    }
+
+    try {
+      setSharingUserId(userId);
+      await request({
+        url: `/dashboard-core/dashboard/${activeDashboard.slug}/share`,
+        method: 'POST',
+        data: { userId },
+      });
+      await Promise.all([refetchShares(), refetchShareableUsers()]);
+      toast.success(t('dashboardShared'));
+    } catch (error) {
+      toast.error(getErrorMessage(error, t('shareDashboardError')));
+    } finally {
+      setSharingUserId(null);
+    }
+  };
+
+  const handleRevokeShare = async (userId: number) => {
+    if (!activeDashboard) {
+      return;
+    }
+
+    try {
+      setRevokingUserId(userId);
+      await request({
+        url: `/dashboard-core/dashboard/${activeDashboard.slug}/share/${userId}`,
+        method: 'DELETE',
+      });
+      await Promise.all([refetchShares(), refetchShareableUsers()]);
+      toast.success(t('shareRemoved'));
+    } catch (error) {
+      toast.error(getErrorMessage(error, t('revokeShareError')));
+    } finally {
+      setRevokingUserId(null);
+    }
+  };
+
+  const isBusy =
+    isCreating ||
+    isDeleting ||
+    isRenaming ||
+    isSettingHome ||
+    isSavingIcon ||
+    sharingUserId !== null ||
+    revokingUserId !== null;
+
+  const headerActions = (
+    <div className="flex flex-wrap items-center justify-end gap-2">
+      {activeDashboard ? (
+        <div
+          id={DASHBOARD_HOME_HEADER_ACTIONS_TARGET_ID}
+          className="contents"
+        />
+      ) : null}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() =>
+          activeDashboard && openShareForDashboard(activeDashboard)
+        }
+        disabled={!activeDashboard || isBusy}
+      >
+        <Share2 className="size-4" />
+        {t('share')}
+      </Button>
+      <Button size="sm" onClick={() => setCreateOpen(true)} disabled={isBusy}>
+        <Plus className="size-4" />
+        {t('newDashboard')}
+      </Button>
+    </div>
+  );
+
+  return (
+    <Page>
+      <PageHeader
+        breadcrumbs={[
+          { label: t('pageTitle'), href: '/core/dashboard' },
+          ...(activeDashboard
+            ? [{ label: getDashboardName(activeDashboard) }]
+            : [{ label: t('home') }]),
+        ]}
+        title={t('pageTitle')}
+        description={t('pageDescription')}
+        actions={headerActions}
+      />
+
+      {isLoading ? (
+        <div className="flex gap-2">
+          <Skeleton className="h-10 w-32 rounded-lg" />
+          <Skeleton className="h-10 w-36 rounded-lg" />
+          <Skeleton className="h-10 w-28 rounded-lg" />
+        </div>
+      ) : dashboards.length > 0 ? (
+        <div className="overflow-hidden">
+          <Tabs
+            value={activeSlug}
+            onValueChange={setActiveSlug}
+            className="gap-0"
+          >
+            <div className="bg-muted dark:bg-muted/40">
+              <ScrollArea className="w-full whitespace-nowrap">
+                <TabsList className="dashboard-tabs-list h-auto min-h-0 w-max items-end gap-0 rounded-none bg-transparent p-0 pt-1 pl-1">
+                  {dashboards.map((dashboard) => {
+                    const isRenamingCurrentTab =
+                      renamingSlug === dashboard.slug;
+                    const isActiveTab = activeSlug === dashboard.slug;
+                    const DashboardTabIcon = resolveDashboardIcon(
+                      dashboard.icon
+                    );
+
+                    const tabContent = (
+                      <>
+                        <DashboardTabIcon
+                          className={cn('size-4 transition-colors')}
+                        />
+                        {isRenamingCurrentTab ? (
+                          <Input
+                            value={renameValue}
+                            onChange={(event) =>
+                              setRenameValue(event.target.value)
+                            }
+                            onClick={(event) => event.stopPropagation()}
+                            onPointerDown={(event) => event.stopPropagation()}
+                            onFocus={(event) => event.currentTarget.select()}
+                            onBlur={() => void handleRenameDashboard(dashboard)}
+                            onKeyDown={(event) => {
+                              if (event.key === 'Enter') {
+                                event.preventDefault();
+                                void handleRenameDashboard(dashboard);
+                              }
+
+                              if (event.key === 'Escape') {
+                                event.preventDefault();
+                                cancelRenameDashboard();
+                              }
+                            }}
+                            autoFocus
+                            disabled={isRenaming}
+                            className="h-7 w-40"
+                          />
+                        ) : (
+                          <span className="max-w-45 truncate">
+                            {getDashboardName(dashboard)}
+                          </span>
+                        )}
+                      </>
+                    );
+
+                    return (
+                      <ContextMenu key={dashboard.slug}>
+                        <ContextMenuTrigger asChild>
+                          {isRenamingCurrentTab ? (
+                            <div className="-mb-px flex min-h-9 items-center gap-2 rounded-b-none rounded-t-lg border border-b-0 border-border bg-background px-3 py-2 text-foreground shadow-none">
+                              {tabContent}
+                            </div>
+                          ) : (
+                            <TabsTrigger
+                              value={dashboard.slug}
+                              className="dashboard-tab-trigger -mb-px cursor-pointer gap-2 rounded-b-none rounded-t-lg px-3 py-2 mt-1 border-none shadow-none data-[state=active]:shadow-none"
+                              style={
+                                isActiveTab
+                                  ? {
+                                      backgroundColor: 'var(--background)',
+                                      color: 'var(--primary)',
+                                    }
+                                  : {
+                                      backgroundColor: 'transparent',
+                                      color: 'var(--muted-foreground)',
+                                    }
+                              }
+                              onDoubleClick={() =>
+                                startRenameDashboard(dashboard)
+                              }
+                              onContextMenu={() =>
+                                setActiveSlug(dashboard.slug)
+                              }
+                            >
+                              {tabContent}
+                            </TabsTrigger>
+                          )}
+                        </ContextMenuTrigger>
+                        <ContextMenuContent className="w-56">
+                          <ContextMenuItem
+                            onSelect={() =>
+                              openAddWidgetsForDashboard(dashboard)
+                            }
+                          >
+                            <Plus className="size-4" />
+                            {t('addWidgets')}
+                          </ContextMenuItem>
+                          {!dashboard.is_home ? (
+                            <ContextMenuItem
+                              onSelect={() =>
+                                void handleSetHomeDashboard(dashboard)
+                              }
+                            >
+                              <Home className="size-4" />
+                              {t('setAsHome')}
+                            </ContextMenuItem>
+                          ) : null}
+                          <ContextMenuItem
+                            onSelect={() => startRenameDashboard(dashboard)}
+                          >
+                            <Pencil className="size-4" />
+                            {t('rename')}
+                          </ContextMenuItem>
+                          <ContextMenuItem
+                            onSelect={() => openIconForDashboard(dashboard)}
+                          >
+                            <Palette className="size-4" />
+                            {t('changeIcon')}
+                          </ContextMenuItem>
+                          <ContextMenuItem
+                            onSelect={() => openShareForDashboard(dashboard)}
+                          >
+                            <Share2 className="size-4" />
+                            {t('share')}
+                          </ContextMenuItem>
+                          <ContextMenuSeparator />
+                          <ContextMenuItem
+                            variant="destructive"
+                            onSelect={() => openDeleteForDashboard(dashboard)}
+                          >
+                            <Trash2 className="size-4" />
+                            {t('delete')}
+                          </ContextMenuItem>
+                        </ContextMenuContent>
+                      </ContextMenu>
+                    );
+                  })}
+                  <button
+                    type="button"
+                    onClick={() => setCreateOpen(true)}
+                    disabled={isBusy}
+                    className="my-auto ml-1 flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-background/60 hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+                    title={t('newDashboard')}
+                  >
+                    <Plus className="size-4" />
+                  </button>
+                </TabsList>
+              </ScrollArea>
+            </div>
+          </Tabs>
+        </div>
+      ) : (
+        <div className="rounded-lg border border-dashed p-6 text-center">
+          <p className="text-sm font-medium">{t('emptyTitle')}</p>
+          <p className="text-muted-foreground mt-1 text-sm">
+            {t('emptyDescription')}
+          </p>
+        </div>
+      )}
+
+      {activeDashboard ? (
+        <DashboardContent
+          key={activeDashboard.slug}
+          dashboardSlug={activeDashboard.slug}
+          showHeader={false}
+          headerActionsTargetId={DASHBOARD_HOME_HEADER_ACTIONS_TARGET_ID}
+          openWidgetPickerSignal={openAddWidgetSignal}
+          onOpenWidgetPickerHandled={() => setOpenAddWidgetSignal(0)}
+        />
+      ) : !isLoading ? (
+        <div className="rounded-xl border border-dashed p-8 text-center text-sm text-muted-foreground">
+          {t('createToStart')}
+        </div>
+      ) : null}
+
+      <Sheet
+        open={createOpen}
+        onOpenChange={(open) => {
+          setCreateOpen(open);
+          if (!open) {
+            setNewDashboardName('');
+            setNewDashboardIcon('layout-dashboard');
+            setSelectedTemplateSlug('');
+          }
+        }}
+      >
+        <SheetContent side="right" className="w-full sm:max-w-xl">
+          <div className="flex h-full flex-col">
+            <SheetHeader className="px-6 py-5 text-left">
+              <SheetTitle>{t('newDashboardTitle')}</SheetTitle>
+              <SheetDescription>
+                {t('newDashboardDescription')}
+              </SheetDescription>
+            </SheetHeader>
+
+            <div className="flex-1 space-y-4 overflow-y-auto px-6 py-4">
+              <div className="space-y-2">
+                <div className="flex items-center justify-between gap-2">
+                  <label className="text-sm font-medium">
+                    {t('dashboardTemplateLabel')}
+                  </label>
+                  <Badge variant={selectedTemplate ? 'secondary' : 'outline'}>
+                    {selectedTemplate
+                      ? t('templateSelectedBadge')
+                      : t('blankDashboardBadge')}
+                  </Badge>
+                </div>
+
+                <div className="grid gap-2">
+                  <button
+                    type="button"
+                    className={cn(
+                      'flex cursor-pointer items-start gap-3 rounded-lg border p-3 text-left transition-colors hover:border-primary/40 hover:bg-accent/30',
+                      !selectedTemplateSlug &&
+                        'border-primary bg-primary/5 text-foreground'
+                    )}
+                    onClick={() => handleSelectTemplate(null)}
+                  >
+                    <div className="bg-primary/10 text-primary flex size-9 shrink-0 items-center justify-center rounded-lg">
+                      <LayoutDashboard className="size-4" />
+                    </div>
+                    <div className="min-w-0">
+                      <p className="text-sm font-medium">
+                        {t('blankDashboardTitle')}
+                      </p>
+                      <p className="text-muted-foreground text-xs">
+                        {t('blankDashboardDescription')}
+                      </p>
+                    </div>
+                  </button>
+
+                  {isLoadingTemplates ? (
+                    <div className="grid gap-2">
+                      <Skeleton className="h-16 rounded-lg" />
+                      <Skeleton className="h-16 rounded-lg" />
+                    </div>
+                  ) : dashboardTemplates.length > 0 ? (
+                    dashboardTemplates.map((template) => {
+                      const TemplateIcon = resolveDashboardIcon(template.icon);
+                      const isSelected = template.slug === selectedTemplateSlug;
+
+                      return (
+                        <button
+                          key={template.slug}
+                          type="button"
+                          className={cn(
+                            'flex cursor-pointer items-start gap-3 rounded-lg border p-3 text-left transition-colors hover:border-primary/40 hover:bg-accent/30',
+                            isSelected &&
+                              'border-primary bg-primary/5 text-foreground'
+                          )}
+                          onClick={() => handleSelectTemplate(template)}
+                        >
+                          <div className="bg-primary/10 text-primary flex size-9 shrink-0 items-center justify-center rounded-lg">
+                            <TemplateIcon className="size-4" />
+                          </div>
+                          <div className="min-w-0 flex-1">
+                            <div className="flex flex-wrap items-center gap-2">
+                              <p className="text-sm font-medium">
+                                {template.name}
+                              </p>
+                              <Badge variant="outline">
+                                {t('templateWidgetCount', {
+                                  count: template.itemCount,
+                                })}
+                              </Badge>
+                            </div>
+                            <p className="text-muted-foreground text-xs">
+                              {template.slug}
+                            </p>
+                          </div>
+                        </button>
+                      );
+                    })
+                  ) : (
+                    <p className="text-muted-foreground text-xs">
+                      {t('noTemplatesAvailable')}
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="dashboard-name">
+                  {t('dashboardNameLabel')}
+                </label>
+                <Input
+                  id="dashboard-name"
+                  value={newDashboardName}
+                  onChange={(event) => setNewDashboardName(event.target.value)}
+                  placeholder={t('dashboardNamePlaceholder')}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter') {
+                      event.preventDefault();
+                      void handleCreateDashboard();
+                    }
+                  }}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <label
+                  className="text-sm font-medium"
+                  htmlFor="new-dashboard-icon-name"
+                >
+                  {t('dashboardIconLabel')}
+                </label>
+                <Input
+                  id="new-dashboard-icon-name"
+                  value={newDashboardIcon}
+                  onChange={(event) => setNewDashboardIcon(event.target.value)}
+                  placeholder={t('dashboardIconPlaceholder')}
+                />
+                <p className="text-muted-foreground text-xs">
+                  {newDashboardIcon.trim() &&
+                  !isValidLucideIconName(newDashboardIcon)
+                    ? t('invalidIconName')
+                    : t('selectIconHint')}
+                </p>
+              </div>
+
+              <div className="rounded-lg border p-4">
+                <div className="flex items-center gap-3">
+                  <div className="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
+                    {(() => {
+                      const SelectedIcon =
+                        resolveDashboardIcon(newDashboardIcon);
+                      return <SelectedIcon className="size-5" />;
+                    })()}
+                  </div>
+                  <div className="min-w-0">
+                    <p className="truncate text-sm font-medium">
+                      {newDashboardIcon.trim()
+                        ? normalizeLucideIconName(newDashboardIcon)
+                        : 'layout-dashboard'}
+                    </p>
+                    <p className="text-muted-foreground truncate text-xs">
+                      {newDashboardName.trim() || t('newDashboard')}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <p className="text-sm font-medium">{t('iconSuggestions')}</p>
+                <div className="grid gap-2 grid-cols-12">
+                  {DASHBOARD_ICON_OPTIONS.map((iconName) => {
+                    const IconOption = resolveDashboardIcon(iconName);
+                    const isSelected =
+                      normalizeLucideIconName(newDashboardIcon) === iconName;
+
+                    return (
+                      <button
+                        key={`create-${iconName}`}
+                        type="button"
+                        title={iconName}
+                        aria-label={iconName}
+                        className={cn(
+                          'flex aspect-square cursor-pointer items-center justify-center rounded-lg border p-2 text-sm transition-colors hover:border-primary/40 hover:bg-accent/30',
+                          isSelected &&
+                            'border-primary bg-primary/10 text-primary'
+                        )}
+                        onClick={() => setNewDashboardIcon(iconName)}
+                      >
+                        <IconOption className="size-5" />
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-auto flex justify-end gap-2 border-t px-6 py-4">
+              <Button
+                className="w-full"
+                onClick={handleCreateDashboard}
+                disabled={isCreating}
+              >
+                {isCreating ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  <Plus className="size-4" />
+                )}
+                {t('createDashboard')}
+              </Button>
+            </div>
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      <Sheet
+        open={iconOpen}
+        onOpenChange={(open) => {
+          setIconOpen(open);
+          if (!open) {
+            setIconDashboard(null);
+            setIconValue('layout-dashboard');
+          }
+        }}
+      >
+        <SheetContent side="right" className="w-full sm:max-w-xl">
+          <div className="flex h-full flex-col">
+            <SheetHeader className="px-6 py-5 text-left">
+              <SheetTitle>{t('changeDashboardIconTitle')}</SheetTitle>
+              <SheetDescription>
+                {t('changeDashboardIconDescription')}
+              </SheetDescription>
+            </SheetHeader>
+
+            <div className="flex-1 space-y-4 overflow-y-auto px-6 py-4">
+              <div className="space-y-2">
+                <label
+                  className="text-sm font-medium"
+                  htmlFor="dashboard-icon-name"
+                >
+                  {t('iconNameLabel')}
+                </label>
+                <Input
+                  id="dashboard-icon-name"
+                  value={iconValue}
+                  onChange={(event) => setIconValue(event.target.value)}
+                  placeholder={t('iconNamePlaceholder')}
+                />
+                <p className="text-muted-foreground text-xs">
+                  {iconValue.trim() && !isValidLucideIconName(iconValue)
+                    ? t('invalidIconName')
+                    : t('selectIconHint')}
+                </p>
+              </div>
+
+              <div className="rounded-lg border p-4">
+                <div className="flex items-center gap-3">
+                  <div className="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
+                    {(() => {
+                      const SelectedIcon = resolveDashboardIcon(iconValue);
+                      return <SelectedIcon className="size-5" />;
+                    })()}
+                  </div>
+                  <div className="min-w-0">
+                    <p className="truncate text-sm font-medium">
+                      {iconValue.trim()
+                        ? normalizeLucideIconName(iconValue)
+                        : t('noCustomIcon')}
+                    </p>
+                    <p className="text-muted-foreground truncate text-xs">
+                      {iconDashboard
+                        ? getDashboardName(iconDashboard)
+                        : t('dashboardLabel')}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <p className="text-sm font-medium">{t('suggestions')}</p>
+                <div className="grid gap-2 grid-cols-12">
+                  {DASHBOARD_ICON_OPTIONS.map((iconName) => {
+                    const IconOption = resolveDashboardIcon(iconName);
+                    const isSelected =
+                      normalizeLucideIconName(iconValue) === iconName;
+
+                    return (
+                      <button
+                        key={iconName}
+                        type="button"
+                        title={iconName}
+                        aria-label={iconName}
+                        className={cn(
+                          'flex aspect-square cursor-pointer items-center justify-center rounded-lg border p-2 text-sm transition-colors hover:border-primary/40 hover:bg-accent/30',
+                          isSelected &&
+                            'border-primary bg-primary/10 text-primary'
+                        )}
+                        onClick={() => setIconValue(iconName)}
+                      >
+                        <IconOption className="size-5" />
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-auto flex justify-end gap-2 border-t px-6 py-4">
+              <Button
+                className="w-full"
+                onClick={() => void handleSaveDashboardIcon()}
+                disabled={isSavingIcon || Boolean(iconValue.trim()) === false}
+              >
+                {isSavingIcon ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  <Palette className="size-4" />
+                )}
+                {t('saveIcon')}
+              </Button>
+            </div>
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      <Sheet
+        open={shareOpen}
+        onOpenChange={(open) => {
+          setShareOpen(open);
+          if (!open) {
+            setShareSearch('');
+          }
+        }}
+      >
+        <SheetContent className="w-full sm:max-w-xl">
+          <SheetHeader>
+            <SheetTitle>
+              {t('shareDashboardTitle', {
+                name: activeDashboard ? getDashboardName(activeDashboard) : '',
+              })}
+            </SheetTitle>
+            <SheetDescription>
+              {t('shareDashboardDescription')}
+            </SheetDescription>
+          </SheetHeader>
+
+          <div className="flex flex-1 flex-col gap-4 overflow-hidden px-4 pb-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium" htmlFor="share-search">
+                {t('searchUser')}
+              </label>
+              <Input
+                id="share-search"
+                value={shareSearch}
+                onChange={(event) => setShareSearch(event.target.value)}
+                placeholder={t('searchUserPlaceholder')}
+              />
+            </div>
+
+            <div className="grid flex-1 gap-4 overflow-hidden lg:grid-cols-2">
+              <div className="flex min-h-0 flex-col rounded-lg border">
+                <div className="flex items-center justify-between border-b px-3 py-2">
+                  <div>
+                    <p className="text-sm font-semibold">
+                      {t('usersWithAccess')}
+                    </p>
+                    <p className="text-muted-foreground text-xs">
+                      {t('usersWithAccessDescription')}
+                    </p>
+                  </div>
+                  <Badge variant="outline">{sharedUsers.length}</Badge>
+                </div>
+
+                <ScrollArea className="h-72">
+                  <div className="space-y-2 p-3">
+                    {isLoadingShares ? (
+                      <>
+                        <Skeleton className="h-16 rounded-lg" />
+                        <Skeleton className="h-16 rounded-lg" />
+                      </>
+                    ) : sharedUsers.length === 0 ? (
+                      <p className="text-muted-foreground text-sm">
+                        {t('noSharedUsers')}
+                      </p>
+                    ) : (
+                      sharedUsers.map((user) => (
+                        <div
+                          key={user.id}
+                          className="flex items-center justify-between rounded-lg border p-3"
+                        >
+                          <div className="min-w-0">
+                            <div className="flex items-center gap-2">
+                              <p className="truncate text-sm font-medium">
+                                {user.name}
+                              </p>
+                              {user.isCurrentUser ? (
+                                <Badge variant="secondary">{t('you')}</Badge>
+                              ) : null}
+                              {user.isHome ? (
+                                <Badge variant="outline">{t('home')}</Badge>
+                              ) : null}
+                            </div>
+                            <p className="text-muted-foreground truncate text-xs">
+                              {user.email || t('noPublicEmail')}
+                            </p>
+                          </div>
+
+                          {!user.isCurrentUser ? (
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="cursor-pointer"
+                              onClick={() => void handleRevokeShare(user.id)}
+                              disabled={revokingUserId === user.id}
+                            >
+                              {revokingUserId === user.id ? (
+                                <Loader2 className="size-4 animate-spin" />
+                              ) : (
+                                <Trash2 className="size-4" />
+                              )}
+                            </Button>
+                          ) : null}
+                        </div>
+                      ))
+                    )}
+                  </div>
+                </ScrollArea>
+              </div>
+
+              <div className="flex min-h-0 flex-col rounded-lg border">
+                <div className="border-b px-3 py-2">
+                  <p className="text-sm font-semibold">{t('addPeople')}</p>
+                  <p className="text-muted-foreground text-xs">
+                    {t('addPeopleDescription')}
+                  </p>
+                </div>
+
+                <ScrollArea className="h-72">
+                  <div className="space-y-2 p-3">
+                    {isLoadingShareableUsers ? (
+                      <>
+                        <Skeleton className="h-16 rounded-lg" />
+                        <Skeleton className="h-16 rounded-lg" />
+                      </>
+                    ) : shareableUsers.length === 0 ? (
+                      <p className="text-muted-foreground text-sm">
+                        {t('noUsersToShare')}
+                      </p>
+                    ) : (
+                      shareableUsers.map((user) => (
+                        <div
+                          key={user.id}
+                          className="flex items-center justify-between rounded-lg border p-3"
+                        >
+                          <div className="min-w-0">
+                            <p className="truncate text-sm font-medium">
+                              {user.name}
+                            </p>
+                            <p className="text-muted-foreground truncate text-xs">
+                              {user.email || t('noPublicEmail')}
+                            </p>
+                          </div>
+
+                          <Button
+                            size="sm"
+                            className="cursor-pointer"
+                            onClick={() => void handleShareWithUser(user.id)}
+                            disabled={sharingUserId === user.id}
+                          >
+                            {sharingUserId === user.id ? (
+                              <Loader2 className="size-4 animate-spin" />
+                            ) : (
+                              <UserPlus className="size-4" />
+                            )}
+                            {t('add')}
+                          </Button>
+                        </div>
+                      ))
+                    )}
+                  </div>
+                </ScrollArea>
+              </div>
+            </div>
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <AlertDialogContent className="w-[calc(100%-2rem)] sm:max-w-md">
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('removeTabTitle')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {activeDashboard
+                ? t('removeTabDescription', {
+                    name: getDashboardName(activeDashboard),
+                  })
+                : t('removeTabDescriptionFallback')}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeleting}>
+              {t('cancel')}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={(event) => {
+                event.preventDefault();
+                void handleRemoveDashboard();
+              }}
+              disabled={isDeleting}
+            >
+              {isDeleting ? (
+                <Loader2 className="size-4 animate-spin" />
+              ) : (
+                <Trash2 className="size-4" />
+              )}
+              {t('removeTab')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Page>
+  );
+}