simplycms 0.4.0

package/src/admin/components/StockStatusSelect.tsx

@@ -0,0 +1,88 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from 'simplycms/ui/select';
+import { Label } from 'simplycms/ui/label';
+import { Package, PackageX, Clock } from 'lucide-react';
+import type { StockStatus } from 'simplycms/core/hooks/useStock';
+import { useT, type MessageKey } from 'simplycms/i18n';
+
+interface StockStatusSelectProps {
+  value: StockStatus;
+  onChange: (value: StockStatus) => void;
+  label?: string;
+  className?: string;
+}
+
+// Мапа КЛЮЧІВ: статус наявності — enum БД, підпис резолвиться в рендері.
+const statusOptions: {
+  value: StockStatus;
+  labelKey: MessageKey;
+  icon: React.ReactNode;
+  color: string;
+}[] = [
+  {
+    value: 'in_stock',
+    labelKey: 'admin.products.stock.inStock',
+    icon: <Package className="h-4 w-4" />,
+    color: 'text-green-600',
+  },
+  {
+    value: 'out_of_stock',
+    labelKey: 'admin.products.stock.outOfStock',
+    icon: <PackageX className="h-4 w-4" />,
+    color: 'text-destructive',
+  },
+  {
+    value: 'on_order',
+    labelKey: 'admin.products.stock.onOrder',
+    icon: <Clock className="h-4 w-4" />,
+    color: 'text-amber-600',
+  },
+];
+
+export function StockStatusSelect({
+  value,
+  onChange,
+  label,
+  className,
+}: StockStatusSelectProps) {
+  const t = useT();
+  // Дефолт підпису переїхав із деструктуризації в тіло: там уже є транслятор,
+  // а в списку параметрів його ще немає.
+  const fieldLabel = label ?? t('admin.products.stock.statusLabel');
+  const selectedOption = statusOptions.find((opt) => opt.value === value);
+
+  return (
+    <div className={className}>
+      {fieldLabel && <Label className="mb-2 block">{fieldLabel}</Label>}
+      <Select value={value} onValueChange={(v) => onChange(v as StockStatus)}>
+        <SelectTrigger>
+          <SelectValue>
+            {selectedOption && (
+              <div className="flex items-center gap-2">
+                <span className={selectedOption.color}>
+                  {selectedOption.icon}
+                </span>
+                <span>{t(selectedOption.labelKey)}</span>
+              </div>
+            )}
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+          {statusOptions.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              <div className="flex items-center gap-2">
+                <span className={option.color}>{option.icon}</span>
+                <span>{t(option.labelKey)}</span>
+              </div>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}

package/src/admin/components/ThemeActivateDialog.tsx

@@ -0,0 +1,51 @@
+import { useT } from 'simplycms/i18n';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from 'simplycms/ui/alert-dialog';
+
+interface ThemeActivateDialogProps {
+  /** Назва теми для тексту підтвердження; `null` — діалог закритий. */
+  themeName: string | null;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void;
+}
+
+/**
+ * Підтвердження активації теми.
+ *
+ * Окремий компонент, бо зміна теми — незворотна для відвідувачів дія: вітрина
+ * перемальовується одразу після мутації, тож крок підтвердження обовʼязковий.
+ */
+export function ThemeActivateDialog({
+  themeName,
+  onOpenChange,
+  onConfirm,
+}: ThemeActivateDialogProps) {
+  const t = useT();
+
+  return (
+    <AlertDialog open={themeName !== null} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{t('admin.themes.activateTitle')}</AlertDialogTitle>
+          <AlertDialogDescription>
+            {t('admin.themes.activateText', { name: themeName ?? '' })}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>{t('common.cancel')}</AlertDialogCancel>
+          <AlertDialogAction onClick={onConfirm}>
+            {t('common.activate')}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/src/admin/components/ThemeCard.tsx

@@ -0,0 +1,143 @@
+import { Link } from '@tanstack/react-router';
+import { Button } from 'simplycms/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from 'simplycms/ui/card';
+import { Badge } from 'simplycms/ui/badge';
+import { Palette, Check, Settings } from 'lucide-react';
+import { useT } from 'simplycms/i18n';
+import { adminPath } from '../lib/adminLinks';
+
+/** Рядок таблиці `themes` у тому обсязі, який показує адмінка. */
+export interface ThemeRecord {
+  id: string;
+  name: string;
+  display_name: string;
+  version: string;
+  description: string | null;
+  author: string | null;
+  preview_image: string | null;
+  is_active: boolean;
+  created_at: string;
+}
+
+interface ThemeCardProps {
+  theme: ThemeRecord;
+  /** Чи є модуль теми в `ThemeRegistry` (тобто чи вона встановлена в коді). */
+  hasModule: boolean;
+  isActivating: boolean;
+  onActivate: () => void;
+}
+
+/**
+ * Картка теми у списку адмінки.
+ *
+ * 🔴 Registry-awareness: рядок у БД і встановлений модуль — різні шари.
+ * Рядок може лишитися від міграції/сіду, тоді як пакет теми в магазині не
+ * стоїть. Активувати таку тему безглуздо (SSR упав би на `default`), тож
+ * кнопка disabled, а бейдж пояснює причину — дзеркало `hasModule` у Plugins.
+ */
+export function ThemeCard({
+  theme,
+  hasModule,
+  isActivating,
+  onActivate,
+}: ThemeCardProps) {
+  const t = useT();
+
+  return (
+    <Card className={theme.is_active ? 'ring-2 ring-primary' : ''}>
+      <div className="relative h-48 bg-muted rounded-t-lg overflow-hidden">
+        {theme.preview_image ? (
+          <img
+            src={theme.preview_image}
+            alt={theme.display_name}
+            className="absolute inset-0 w-full h-full object-cover"
+            loading="lazy"
+            decoding="async"
+          />
+        ) : (
+          <div className="flex items-center justify-center h-full">
+            <Palette className="h-16 w-16 text-muted-foreground/50" />
+          </div>
+        )}
+        {!hasModule && (
+          <Badge variant="destructive" className="absolute top-3 left-3">
+            {t('admin.themes.moduleMissing')}
+          </Badge>
+        )}
+        {theme.is_active && (
+          <Badge className="absolute top-3 right-3 gap-1">
+            <Check className="h-3 w-3" />
+            {t('common.activeF')}
+          </Badge>
+        )}
+      </div>
+
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between">
+          {theme.display_name}
+          <span className="text-sm font-normal text-muted-foreground">
+            v{theme.version}
+          </span>
+        </CardTitle>
+        <CardDescription>
+          {theme.author && (
+            <span>
+              {t('admin.themes.author')} {theme.author}
+            </span>
+          )}
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent className="space-y-3">
+        {theme.description && (
+          <p className="text-sm text-muted-foreground line-clamp-2">
+            {theme.description}
+          </p>
+        )}
+        {!hasModule && (
+          <p className="text-sm text-destructive">
+            {t('admin.themes.moduleMissingHint')}
+          </p>
+        )}
+
+        <div className="flex gap-2">
+          {theme.is_active ? (
+            <Button variant="outline" className="flex-1" asChild>
+              <Link
+                to={adminPath('themes/$themeId/settings')}
+                params={{ themeId: theme.id }}
+              >
+                <Settings className="h-4 w-4 mr-2" />
+                {t('admin.nav.settings')}
+              </Link>
+            </Button>
+          ) : (
+            <>
+              <Button
+                className="flex-1"
+                onClick={onActivate}
+                disabled={isActivating || !hasModule}
+              >
+                {t('common.activate')}
+              </Button>
+              <Button variant="outline" size="icon" asChild>
+                <Link
+                  to={adminPath('themes/$themeId/settings')}
+                  params={{ themeId: theme.id }}
+                >
+                  <Settings className="h-4 w-4" />
+                </Link>
+              </Button>
+            </>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/admin/hooks/usePluginToggle.ts

@@ -0,0 +1,87 @@
+import { useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { activatePlugin, deactivatePlugin } from 'simplycms/plugins';
+import type { Plugin } from 'simplycms/plugins/types';
+import { useSupabaseClient } from 'simplycms/supabase/SupabaseProvider';
+import { useToast } from 'simplycms/core/hooks/use-toast';
+import { useT } from 'simplycms/i18n';
+
+/** Спільний ключ кешу списку плагінів (сторінка + мутація toggle). */
+export const PLUGINS_QUERY_KEY = ['plugins'] as const;
+
+interface ToggleVars {
+  name: string;
+  activate: boolean;
+}
+
+interface ToggleContext {
+  previous: Plugin[] | undefined;
+}
+
+/**
+ * Перемикання плагіна. Єдиний механізм — lifecycle-функції ядра
+ * (`activatePlugin`/`deactivatePlugin`), які пишуть у БД і мутують HookRegistry.
+ * Прямий `supabase.from('plugins').update()` лишав би реєстр незмінним, і
+ * `PluginSlot` не оновлювався б до перезавантаження сторінки.
+ */
+export function usePluginToggle() {
+  const t = useT();
+  const supabase = useSupabaseClient();
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+  const [togglingPlugin, setTogglingPlugin] = useState<string | null>(null);
+
+  const mutation = useMutation<void, Error, ToggleVars, ToggleContext>({
+    mutationFn: async ({ name, activate }) => {
+      const ok = activate
+        ? await activatePlugin(supabase, name)
+        : await deactivatePlugin(supabase, name);
+
+      if (!ok) throw new Error(t('admin.plugins.toggleFailed', { name }));
+    },
+    onMutate: async ({ name, activate }) => {
+      setTogglingPlugin(name);
+      await queryClient.cancelQueries({ queryKey: PLUGINS_QUERY_KEY });
+
+      // Оптимістично: перемикач реагує миттєво…
+      const previous = queryClient.getQueryData<Plugin[]>(PLUGINS_QUERY_KEY);
+      queryClient.setQueryData<Plugin[]>(PLUGINS_QUERY_KEY, (old) =>
+        (old ?? []).map((plugin) =>
+          plugin.name === name ? { ...plugin, is_active: activate } : plugin,
+        ),
+      );
+
+      return { previous };
+    },
+    onError: (_error, _vars, context) => {
+      // …і відкочується, якщо БД відмовила (реєстр при цьому не змінювався).
+      if (context?.previous) {
+        queryClient.setQueryData(PLUGINS_QUERY_KEY, context.previous);
+      }
+      toast({
+        title: t('common.error'),
+        description: t('admin.plugins.toggleFailedShort'),
+        variant: 'destructive',
+      });
+    },
+    onSuccess: (_data, { name, activate }) => {
+      toast({
+        title: t(
+          activate ? 'admin.plugins.activated' : 'admin.plugins.deactivated',
+        ),
+        description: t(
+          activate
+            ? 'admin.plugins.activatedHint'
+            : 'admin.plugins.deactivatedHint',
+          { name },
+        ),
+      });
+    },
+    onSettled: () => {
+      setTogglingPlugin(null);
+      void queryClient.invalidateQueries({ queryKey: PLUGINS_QUERY_KEY });
+    },
+  });
+
+  return { togglePlugin: mutation.mutate, togglingPlugin };
+}

package/src/admin/hooks/useThemeActivate.ts

@@ -0,0 +1,73 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useSupabaseClient } from 'simplycms/supabase/SupabaseProvider';
+import { useToast } from 'simplycms/core/hooks/use-toast';
+import { useT } from 'simplycms/i18n';
+import {
+  revalidateFailureDescription,
+  useRevalidateStorefront,
+} from '../lib/revalidateTheme';
+
+/** Спільний ключ кешу списку тем (сторінка + мутація активації). */
+export const THEMES_QUERY_KEY = ['admin-themes'] as const;
+
+/**
+ * Активація теми: рівно одна тема в БД може бути активною
+ * (`themes_active_idx`), тому спершу знімаємо прапорець з решти, а потім
+ * ставимо обраній.
+ *
+ * Після успіху обовʼязкова ПАРА кроків скидання кешу вітрини
+ * (`useRevalidateStorefront`) — серверний кеш і кеш роутера; деталі й гард —
+ * `__tests__/revalidate-storefront.test.tsx`.
+ */
+export function useThemeActivate(onActivated: () => void) {
+  const t = useT();
+  const supabase = useSupabaseClient();
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+  const revalidateStorefront = useRevalidateStorefront();
+
+  const mutation = useMutation<void, Error, string>({
+    mutationFn: async (themeId) => {
+      const { error: deactivateError } = await supabase
+        .from('themes')
+        .update({ is_active: false })
+        .neq('id', themeId);
+      if (deactivateError) throw deactivateError;
+
+      const { error: activateError } = await supabase
+        .from('themes')
+        .update({ is_active: true })
+        .eq('id', themeId);
+      if (activateError) throw activateError;
+    },
+    onSuccess: async () => {
+      void queryClient.invalidateQueries({ queryKey: THEMES_QUERY_KEY });
+      onActivated();
+
+      try {
+        await revalidateStorefront();
+      } catch (error) {
+        toast({
+          variant: 'destructive',
+          title: t('admin.themes.activatedStale'),
+          description: revalidateFailureDescription(t, error),
+        });
+        return;
+      }
+
+      toast({
+        title: t('admin.themes.activated'),
+        description: t('admin.themes.appliedOnSite'),
+      });
+    },
+    onError: (error) => {
+      toast({
+        variant: 'destructive',
+        title: t('common.error'),
+        description: error.message || t('admin.themes.activateFailed'),
+      });
+    },
+  });
+
+  return { activateTheme: mutation.mutate, isActivating: mutation.isPending };
+}

package/src/admin/index.ts

@@ -0,0 +1,59 @@
+// Layouts
+export { AdminLayout } from './layouts/AdminLayout';
+export { AdminSidebar } from './layouts/AdminSidebar';
+
+// Components
+export { AddProductToOrder } from './components/AddProductToOrder';
+export { AllProductProperties } from './components/AllProductProperties';
+export { ImageUpload } from './components/ImageUpload';
+export { ProductModifications } from './components/ProductModifications';
+export { ProductPricesEditor } from './components/ProductPricesEditor';
+export { ProductPropertyValues } from './components/ProductPropertyValues';
+export { RichTextEditor } from './components/RichTextEditor';
+export { SectionPropertiesManager } from './components/SectionPropertiesManager';
+export { SectionPropertiesTable } from './components/SectionPropertiesTable';
+export { SimpleProductFields } from './components/SimpleProductFields';
+export { StockByPointManager } from './components/StockByPointManager';
+export { StockStatusSelect } from './components/StockStatusSelect';
+
+// Pages
+export { default as Dashboard } from './pages/Dashboard';
+export { default as Orders } from './pages/Orders';
+export { default as OrderDetail } from './pages/OrderDetail';
+export { default as OrderStatuses } from './pages/OrderStatuses';
+export { default as Products } from './pages/Products';
+export { default as ProductEdit } from './pages/ProductEdit';
+export { default as Sections } from './pages/Sections';
+export { default as SectionEdit } from './pages/SectionEdit';
+export { default as Properties } from './pages/Properties';
+export { default as PropertyEdit } from './pages/PropertyEdit';
+export { default as PropertyOptionEdit } from './pages/PropertyOptionEdit';
+export { default as Settings } from './pages/Settings';
+export { default as Users } from './pages/Users';
+export { default as UserEdit } from './pages/UserEdit';
+export { default as Plugins } from './pages/Plugins';
+export { default as PluginSettings } from './pages/PluginSettings';
+export { default as Themes } from './pages/Themes';
+export { default as ThemeSettings } from './pages/ThemeSettings';
+export { default as PlaceholderPage } from './pages/PlaceholderPage';
+export { default as Banners } from './pages/Banners';
+export { default as BannerEdit } from './pages/BannerEdit';
+export { default as Discounts } from './pages/Discounts';
+export { default as DiscountEdit } from './pages/DiscountEdit';
+export { default as DiscountGroupEdit } from './pages/DiscountGroupEdit';
+export { default as PriceTypes } from './pages/PriceTypes';
+export { default as PriceTypeEdit } from './pages/PriceTypeEdit';
+export { default as PriceValidator } from './pages/PriceValidator';
+export { default as Shipping } from './pages/Shipping';
+export { default as ShippingMethods } from './pages/ShippingMethods';
+export { default as ShippingMethodEdit } from './pages/ShippingMethodEdit';
+export { default as ShippingZones } from './pages/ShippingZones';
+export { default as ShippingZoneEdit } from './pages/ShippingZoneEdit';
+export { default as PickupPoints } from './pages/PickupPoints';
+export { default as PickupPointEdit } from './pages/PickupPointEdit';
+export { default as Reviews } from './pages/Reviews';
+export { default as ReviewDetail } from './pages/ReviewDetail';
+export { default as UserCategories } from './pages/UserCategories';
+export { default as UserCategoryEdit } from './pages/UserCategoryEdit';
+export { default as UserCategoryRules } from './pages/UserCategoryRules';
+export { default as UserCategoryRuleEdit } from './pages/UserCategoryRuleEdit';

package/src/admin/layouts/AdminLayout.tsx

@@ -0,0 +1,64 @@
+import { useNavigate } from '@tanstack/react-router';
+import {
+  SidebarProvider,
+  SidebarTrigger,
+  SidebarInset,
+} from 'simplycms/ui/sidebar';
+import { AdminSidebar } from './AdminSidebar';
+import { Button } from 'simplycms/ui/button';
+import { LogOut, Home } from 'lucide-react';
+import { useAuth } from 'simplycms/core/hooks/useAuth';
+import { useToast } from 'simplycms/core/hooks/use-toast';
+import { ThemeToggle } from 'simplycms/core/components/ThemeToggle';
+import { useT } from 'simplycms/i18n';
+
+export function AdminLayout({ children }: { children: React.ReactNode }) {
+  const t = useT();
+  const { signOut } = useAuth();
+  const navigate = useNavigate();
+  const { toast } = useToast();
+
+  const handleSignOut = async () => {
+    await signOut();
+    toast({
+      title: t('admin.common.signedOut'),
+      description: t('admin.common.signedOutHint'),
+    });
+    navigate({ to: '/' });
+  };
+
+  return (
+    <SidebarProvider>
+      <AdminSidebar />
+      <SidebarInset>
+        {/* Header */}
+        <header className="h-14 border-b flex items-center justify-between px-4 bg-background">
+          <div className="flex items-center gap-2">
+            <SidebarTrigger />
+            <span className="text-sm text-muted-foreground hidden sm:inline">
+              {t('admin.common.title')}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <ThemeToggle />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => navigate({ to: '/' })}
+            >
+              <Home className="h-4 w-4 mr-2" />
+              {t('admin.common.toSite')}
+            </Button>
+            <Button variant="ghost" size="sm" onClick={handleSignOut}>
+              <LogOut className="h-4 w-4 mr-2" />
+              {t('nav.signOut')}
+            </Button>
+          </div>
+        </header>
+
+        {/* Main content */}
+        <div className="flex-1 p-6 bg-muted/30">{children}</div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}