astro-tractstack 2.0.0-rc.0

package/templates/src/components/storykeep/controls/content/ManageContent.tsx

@@ -0,0 +1,439 @@
+import { useState, useEffect } from 'react';
+import {
+  handleManageSubtabChange,
+  restoreTabNavigation,
+} from '@/stores/navigation';
+import { getFullContentMap } from '@/stores/analytics';
+import { getBrandConfig } from '@/utils/api/brandConfig';
+import { classNames } from '@/utils/helpers';
+import { getMenuById } from '@/utils/api/menuConfig';
+import { getBeliefById } from '@/utils/api/beliefConfig';
+import { getResource } from '@/utils/api/resourceConfig';
+import ContentSummary from './ContentSummary';
+import StoryFragmentTable from './StoryFragmentTable';
+import MenuTable from './MenuTable';
+import MenuForm from './MenuForm';
+import BeliefTable from './BeliefTable';
+import BeliefForm from './BeliefForm';
+import KnownResourceTable from './KnownResourceTable';
+import KnownResourceForm from './KnownResourceForm';
+import ResourceTable from './ResourceTable';
+import ResourceForm from './ResourceForm';
+import type {
+  FullContentMapItem,
+  MenuNode,
+  BeliefNode,
+  ResourceConfig,
+  BrandConfig,
+} from '@/types/tractstack';
+
+interface ManageContentProps {
+  fullContentMap: FullContentMapItem[];
+  homeSlug: string;
+  createMenu: boolean;
+}
+
+interface ContentManagementTab {
+  id: string;
+  name: string;
+  isResourceCategory?: boolean;
+}
+
+const staticContentManagementTabs: ContentManagementTab[] = [
+  { id: 'summary', name: 'Summary' },
+  { id: 'storyfragments', name: 'Story Fragments' },
+  { id: 'menus', name: 'Menus' },
+  { id: 'resources', name: 'Resources' },
+  { id: 'beliefs', name: 'Beliefs' },
+  //{ id: 'panes', name: 'Panes' },
+  //{ id: 'epinets', name: 'Epinets' },
+  //{ id: 'files', name: 'Files' },
+];
+
+const ManageContent = ({
+  fullContentMap: initialContentMap,
+  homeSlug,
+  createMenu,
+}: ManageContentProps) => {
+  const [brandConfig, setBrandConfig] = useState<BrandConfig | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [activeTab, setActiveTab] = useState('summary');
+  const [navigationRestored, setNavigationRestored] = useState(false);
+  const [currentContentMap, setCurrentContentMap] =
+    useState<FullContentMapItem[]>(initialContentMap);
+
+  const [activeMenuForm, setActiveMenuForm] = useState<
+    MenuNode | 'create' | null
+  >(null);
+  const [activeBeliefForm, setActiveBeliefForm] = useState<
+    BeliefNode | 'create' | null
+  >(null);
+  const [activeKnownResourceForm, setActiveKnownResourceForm] = useState<
+    string | null
+  >(null);
+  const [activeResourceForm, setActiveResourceForm] = useState<{
+    resource: ResourceConfig | null;
+    category: string;
+  } | null>(null);
+
+  useEffect(() => {
+    if (createMenu && !navigationRestored) {
+      // Set manage subtab to 'menus'
+      setActiveTab('menus');
+      handleManageSubtabChange('menus', setActiveTab);
+      // Trigger create menu after short delay
+      setTimeout(() => {
+        setActiveMenuForm('create');
+      }, 100);
+    }
+  }, [createMenu, navigationRestored]);
+
+  useEffect(() => {
+    if (!brandConfig && !loading) {
+      setLoading(true);
+      getBrandConfig(window.TRACTSTACK_CONFIG?.tenantId || 'default')
+        .then(setBrandConfig)
+        .catch(console.error)
+        .finally(() => setLoading(false));
+    }
+  }, [brandConfig, loading]);
+
+  // Data refresh function - uses EXISTING API functions
+  const refreshData = async () => {
+    try {
+      // Use existing getFullContentMap function from analytics store
+      const newContentMap = await getFullContentMap(
+        window.TRACTSTACK_CONFIG?.tenantId || 'default'
+      );
+      setCurrentContentMap(newContentMap);
+      getBrandConfig(window.TRACTSTACK_CONFIG?.tenantId || 'default').then(
+        setBrandConfig
+      );
+    } catch (error) {
+      console.error('Failed to refresh data:', error);
+    }
+  };
+
+  // Update content map when prop changes
+  useEffect(() => {
+    setCurrentContentMap(initialContentMap);
+  }, [initialContentMap]);
+
+  // Generate dynamic tabs including resource categories
+  const knownResources = brandConfig?.KNOWN_RESOURCES || {};
+  const resourceCategories = Object.keys(knownResources);
+
+  const contentManagementTabs: ContentManagementTab[] = [
+    ...staticContentManagementTabs.filter((tab) => tab.id !== 'resources'),
+    { id: 'resources', name: 'Resources' },
+    ...resourceCategories.map((category) => ({
+      id: category,
+      name: category.charAt(0).toUpperCase() + category.slice(1),
+      isResourceCategory: true,
+    })),
+  ];
+
+  // Restore navigation state when component mounts
+  useEffect(() => {
+    if (!navigationRestored) {
+      const contentNavigation = restoreTabNavigation();
+      if (contentNavigation) {
+        setActiveTab(contentNavigation.manageSubtab);
+      }
+      setNavigationRestored(true);
+    }
+  }, [navigationRestored]);
+
+  // Enhanced manage tab change with navigation tracking
+  const handleManageTabChange = (tabId: string) => {
+    handleManageSubtabChange(tabId as any, setActiveTab);
+
+    // Close all forms when switching tabs
+    setActiveMenuForm(null);
+    setActiveBeliefForm(null);
+    setActiveKnownResourceForm(null);
+    setActiveResourceForm(null);
+  };
+
+  // Menu handlers - simplified
+  const handleCreateMenu = () => {
+    setActiveMenuForm('create');
+  };
+
+  const handleEditMenu = async (menuId: string) => {
+    try {
+      const menu = await getMenuById(
+        window.TRACTSTACK_CONFIG?.tenantId || 'default',
+        menuId
+      );
+      setActiveMenuForm(menu);
+    } catch (error) {
+      console.error('Failed to load menu for editing:', error);
+      alert('Failed to load menu. Please try again.');
+    } finally {
+    }
+  };
+
+  // Belief handlers - simplified
+  const handleCreateBelief = () => {
+    setActiveBeliefForm('create');
+  };
+
+  const handleEditBelief = async (beliefId: string) => {
+    if (!beliefId) {
+      handleCreateBelief();
+      return;
+    }
+
+    try {
+      const belief = await getBeliefById(
+        window.TRACTSTACK_CONFIG?.tenantId || 'default',
+        beliefId
+      );
+      setActiveBeliefForm(belief);
+    } catch (error) {
+      console.error('Failed to load belief for editing:', error);
+      alert('Failed to load belief. Please try again.');
+    } finally {
+    }
+  };
+
+  // Known resource handlers - simplified
+  const handleEditKnownResource = (categorySlug: string) => {
+    setActiveKnownResourceForm(categorySlug);
+  };
+
+  // Resource handlers - simplified
+  const handleCreateResource = () => {
+    setActiveResourceForm({
+      resource: null,
+      category: activeTab,
+    });
+  };
+
+  const handleEditResource = async (resourceId: string) => {
+    try {
+      const resource = await getResource(
+        window.TRACTSTACK_CONFIG?.tenantId || 'default',
+        resourceId
+      );
+      setActiveResourceForm({
+        resource,
+        category: activeTab,
+      });
+    } catch (error) {
+      console.error('Failed to load resource for editing:', error);
+      alert('Failed to load resource. Please try again.');
+    } finally {
+    }
+  };
+
+  const renderTabContent = () => {
+    // Forms take precedence - simplified logic
+    if (activeTab === 'menus' && activeMenuForm) {
+      return (
+        <MenuForm
+          menu={activeMenuForm === 'create' ? undefined : activeMenuForm}
+          isCreate={activeMenuForm === 'create'}
+          contentMap={currentContentMap}
+          onClose={async (saved: boolean) => {
+            setActiveMenuForm(null);
+            if (saved) await refreshData();
+          }}
+        />
+      );
+    }
+
+    if (activeTab === 'beliefs' && activeBeliefForm) {
+      return (
+        <BeliefForm
+          belief={activeBeliefForm === 'create' ? undefined : activeBeliefForm}
+          isCreate={activeBeliefForm === 'create'}
+          onClose={async (saved: boolean) => {
+            setActiveBeliefForm(null);
+            if (saved) await refreshData();
+          }}
+        />
+      );
+    }
+
+    if (activeTab === 'resources' && activeKnownResourceForm) {
+      return (
+        <KnownResourceForm
+          categorySlug={activeKnownResourceForm}
+          contentMap={currentContentMap}
+          onClose={async (saved: boolean) => {
+            setActiveKnownResourceForm(null);
+            if (saved) await refreshData();
+          }}
+        />
+      );
+    }
+
+    if (activeResourceForm) {
+      return (
+        <ResourceForm
+          resourceData={activeResourceForm.resource || undefined}
+          fullContentMap={currentContentMap}
+          categorySlug={activeResourceForm.category}
+          categorySchema={knownResources[activeResourceForm.category] || {}}
+          onClose={async (saved: boolean) => {
+            setActiveResourceForm(null);
+            if (saved) await refreshData();
+          }}
+        />
+      );
+    }
+
+    // Resource category tables
+    if (resourceCategories.includes(activeTab)) {
+      return (
+        <ResourceTable
+          categorySlug={activeTab}
+          fullContentMap={currentContentMap}
+          onEdit={handleEditResource}
+          onCreate={handleCreateResource}
+          onRefresh={refreshData}
+        />
+      );
+    }
+
+    // Static tab content
+    switch (activeTab) {
+      case 'summary':
+        return <ContentSummary fullContentMap={currentContentMap} />;
+
+      case 'storyfragments':
+        return (
+          <StoryFragmentTable
+            fullContentMap={currentContentMap}
+            homeSlug={homeSlug}
+          />
+        );
+
+      case 'panes':
+        return (
+          <div className="rounded-lg bg-white p-8 text-center shadow">
+            <div className="text-lg text-gray-600">
+              Panes management - Coming soon
+            </div>
+          </div>
+        );
+
+      case 'menus':
+        return (
+          <MenuTable
+            fullContentMap={currentContentMap}
+            onEdit={handleEditMenu}
+            onCreate={handleCreateMenu}
+            onRefresh={refreshData}
+          />
+        );
+
+      case 'resources':
+        return (
+          <div className="space-y-6">
+            <div>
+              <h3 className="mb-4 text-lg font-bold text-gray-900">
+                Resource Categories
+              </h3>
+              <KnownResourceTable
+                contentMap={currentContentMap}
+                onEdit={handleEditKnownResource}
+              />
+            </div>
+          </div>
+        );
+
+      case 'beliefs':
+        const beliefs = currentContentMap
+          .filter((item) => item.type === 'Belief')
+          .map((item) => ({
+            id: item.id,
+            title: item.title,
+            slug: item.slug,
+            scale: item.scale || '',
+            customValues: [], // Will be loaded when editing
+          })) as BeliefNode[];
+
+        return (
+          <BeliefTable
+            beliefs={beliefs}
+            onEdit={handleEditBelief}
+            onRefresh={refreshData}
+          />
+        );
+
+      //case 'epinets':
+      //  return (
+      //    <div className="rounded-lg bg-white p-8 text-center shadow">
+      //      <div className="text-lg text-gray-600">
+      //        Epinets management - Coming soon
+      //      </div>
+      //    </div>
+      //  );
+
+      //case 'files':
+      //  return (
+      //    <div className="rounded-lg bg-white p-8 text-center shadow">
+      //      <div className="text-lg text-gray-600">
+      //        Files management - Coming soon
+      //      </div>
+      //    </div>
+      //  );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="w-full">
+      {/* Content Management Sub-Navigation */}
+      <div className="mb-6">
+        <div className="border-b border-gray-200 pb-2.5">
+          <nav
+            className="flex flex-wrap gap-2"
+            aria-label="Content management tabs"
+          >
+            {contentManagementTabs.map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => handleManageTabChange(tab.id)}
+                className={classNames(
+                  activeTab === tab.id
+                    ? tab.isResourceCategory
+                      ? 'text-mydarkgrey border-dashed border-gray-500 bg-white'
+                      : 'border-cyan-500 bg-cyan-100 text-cyan-700'
+                    : tab.isResourceCategory
+                      ? 'text-mydarkgrey border-transparent bg-orange-50 hover:bg-orange-100'
+                      : 'border-transparent bg-gray-100 text-gray-500 hover:bg-gray-200',
+                  'rounded-xl border-2 px-4 py-1.5 text-sm font-bold transition-colors duration-200'
+                )}
+                aria-current={activeTab === tab.id ? 'page' : undefined}
+              >
+                {tab.name}
+                {tab.isResourceCategory && (
+                  <span className="ml-2 inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-600">
+                    {
+                      currentContentMap.filter(
+                        (item) =>
+                          item.type === 'Resource' &&
+                          item.categorySlug === tab.id
+                      ).length
+                    }
+                  </span>
+                )}
+              </button>
+            ))}
+          </nav>
+        </div>
+      </div>
+
+      {/* Tab Content */}
+      <div>{renderTabContent()}</div>
+    </div>
+  );
+};
+
+export default ManageContent;

package/templates/src/components/storykeep/controls/content/MenuForm.tsx

@@ -0,0 +1,239 @@
+import { useFormState } from '@/hooks/useFormState';
+import {
+  convertToLocalState,
+  validateMenuNode,
+  menuStateIntercept,
+  addMenuLink,
+  removeMenuLink,
+  updateMenuLink,
+} from '@/utils/api/menuHelpers';
+import { createMenu, saveMenu } from '@/utils/api/menuConfig';
+import StringInput from '@/components/form/StringInput';
+import EnumSelect from '@/components/form/EnumSelect';
+import ActionBuilderField from '@/components/form/ActionBuilderField';
+import UnsavedChangesBar from '@/components/form/UnsavedChangesBar';
+import type {
+  MenuNode,
+  MenuNodeState,
+  FullContentMapItem,
+} from '@/types/tractstack';
+
+interface MenuFormProps {
+  menu?: MenuNode;
+  isCreate?: boolean;
+  contentMap: FullContentMapItem[];
+  onClose?: (saved: boolean) => void;
+}
+
+const THEME_OPTIONS = [{ value: 'default', label: 'Default' }];
+
+export default function MenuForm({
+  menu,
+  isCreate = false,
+  contentMap,
+  onClose,
+}: MenuFormProps) {
+  // Initialize form state
+  const initialState: MenuNodeState = menu
+    ? convertToLocalState(menu)
+    : {
+        id: '',
+        title: '',
+        theme: 'default',
+        menuLinks: [],
+      };
+
+  const formState = useFormState({
+    initialData: initialState,
+    interceptor: menuStateIntercept,
+    validator: validateMenuNode,
+    onSave: async (data) => {
+      try {
+        const tenantId = window.TRACTSTACK_CONFIG?.tenantId || 'default';
+
+        if (!data.id || data.id === '') {
+          await createMenu(tenantId, data);
+        } else {
+          await saveMenu(tenantId, data);
+        }
+
+        setTimeout(() => {
+          onClose?.(true);
+        }, 1000);
+
+        return data; // Return current state for useFormState
+      } catch (error) {
+        console.error('Menu save failed:', error);
+        throw error;
+      }
+    },
+    unsavedChanges: {
+      enableBrowserWarning: true,
+      browserWarningMessage: 'Your menu changes will be lost!',
+    },
+  });
+
+  const handleAddLink = () => {
+    const newState = addMenuLink(formState.state);
+    formState.updateField('menuLinks', newState.menuLinks);
+  };
+
+  const handleRemoveLink = (index: number) => {
+    const newState = removeMenuLink(formState.state, index);
+    formState.updateField('menuLinks', newState.menuLinks);
+  };
+
+  const handleUpdateLink = (index: number, field: string, value: any) => {
+    const newState = updateMenuLink(formState.state, index, field, value);
+    formState.updateField('menuLinks', newState.menuLinks);
+  };
+
+  const handleCancel = () => {
+    onClose?.(false);
+  };
+
+  return (
+    <div className="space-y-8">
+      {/* Header */}
+      <div className="border-b border-gray-200 pb-4">
+        <h2 className="text-2xl font-bold text-gray-900">
+          {isCreate ? 'Create Menu' : 'Edit Menu'}
+        </h2>
+        <p className="mt-2 text-sm text-gray-600">
+          {isCreate
+            ? 'Create a new navigation menu for your site.'
+            : 'Edit the menu configuration and links.'}
+        </p>
+      </div>
+
+      {/* Basic Menu Information */}
+      <div className="space-y-6">
+        <StringInput
+          label="Menu Title"
+          value={formState.state.title}
+          onChange={(value) => formState.updateField('title', value)}
+          error={formState.errors.title}
+          placeholder="Enter menu title"
+          required
+        />
+
+        <EnumSelect
+          label="Theme"
+          value={formState.state.theme}
+          onChange={(value) => formState.updateField('theme', value)}
+          error={formState.errors.theme}
+          options={THEME_OPTIONS}
+          required
+        />
+      </div>
+
+      {/* Menu Links Section */}
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-bold text-gray-900">Menu Links</h3>
+          <button
+            type="button"
+            onClick={handleAddLink}
+            className="inline-flex items-center rounded-md bg-cyan-600 px-3 py-2 text-sm font-bold text-white shadow-sm hover:bg-cyan-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600"
+          >
+            Add Link
+          </button>
+        </div>
+
+        {formState.state.menuLinks.length === 0 ? (
+          <div className="py-6 text-center text-gray-500">
+            No menu links yet. Click "Add Link" to create your first link.
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {formState.state.menuLinks.map((link, index) => (
+              <div
+                key={index}
+                className="space-y-4 rounded-lg border border-gray-200 p-4"
+              >
+                <div className="flex items-center justify-between">
+                  <h4 className="text-sm font-bold text-gray-900">
+                    Link {index + 1}
+                  </h4>
+                  <button
+                    type="button"
+                    onClick={() => handleRemoveLink(index)}
+                    className="text-sm font-bold text-red-600 hover:text-red-800"
+                  >
+                    Remove
+                  </button>
+                </div>
+
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                  <StringInput
+                    label="Link Name"
+                    value={link.name}
+                    onChange={(value) => handleUpdateLink(index, 'name', value)}
+                    placeholder="Enter link text"
+                    required
+                  />
+
+                  <StringInput
+                    label="Description"
+                    value={link.description}
+                    onChange={(value) =>
+                      handleUpdateLink(index, 'description', value)
+                    }
+                    placeholder="Brief description"
+                  />
+                </div>
+
+                <ActionBuilderField
+                  label="Link Action"
+                  value={link.actionLisp}
+                  onChange={(value) =>
+                    handleUpdateLink(index, 'actionLisp', value)
+                  }
+                  contentMap={contentMap}
+                  error={formState.errors[`menuLinks.${index}.actionLisp`]}
+                />
+
+                <div className="flex items-center">
+                  <input
+                    type="checkbox"
+                    id={`featured-${index}`}
+                    checked={link.featured}
+                    onChange={(e) =>
+                      handleUpdateLink(index, 'featured', e.target.checked)
+                    }
+                    className="h-4 w-4 rounded border-gray-300 text-cyan-600 focus:ring-cyan-500"
+                  />
+                  <label
+                    htmlFor={`featured-${index}`}
+                    className="ml-2 block text-sm text-gray-900"
+                  >
+                    Featured link
+                  </label>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Save/Cancel Bar */}
+      <UnsavedChangesBar
+        formState={formState}
+        message="You have unsaved menu changes"
+        saveLabel="Save Menu"
+        cancelLabel="Discard Changes"
+      />
+
+      {/* Cancel Navigation Button */}
+      <div className="flex justify-start">
+        <button
+          type="button"
+          onClick={handleCancel}
+          className="text-sm font-bold text-gray-600 hover:text-gray-800"
+        >
+          ← Back to Menu List
+        </button>
+      </div>
+    </div>
+  );
+}