astro-tractstack 2.2.10 → 2.3.1

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

@@ -595,7 +595,7 @@ export default function ResourceBulkIngest({
 
             {/* Status Display */}
             <div className="mb-6 rounded-md border border-gray-200 bg-gray-50 p-4">
-              <div className="mb-2 flex items-center justify-between">
+              <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
                 <span className="font-bold text-gray-900">
                   {validationResult.resources.length} resources found
                 </span>
@@ -638,7 +638,7 @@ export default function ResourceBulkIngest({
                     Validation Errors:
                   </p>
                   <div className="max-h-32 overflow-y-auto">
-                    <ul className="space-y-1 text-sm text-red-600">
+                    <ul className="space-y-1 break-words text-sm text-red-600">
                       {validationResult.errors
                         .slice(0, 10)
                         .map((error, idx) => (
@@ -648,8 +648,12 @@ export default function ResourceBulkIngest({
                                 ? `Item ${error.index + 1}:`
                                 : 'JSON:'}
                             </span>
-                            <span>
-                              {error.field} - {error.message}
+                            <span
+                              className="truncate"
+                              title={`${error.field} - ${error.message}`}
+                            >
+                              <span className="font-bold">{error.field}</span> -{' '}
+                              {error.message}
                             </span>
                           </li>
                         ))}
@@ -674,7 +678,7 @@ export default function ResourceBulkIngest({
             {/* Progress indicator */}
             {isProcessing && progress && (
               <div className="mb-6">
-                <div className="mb-2 flex items-center justify-between text-sm">
+                <div className="mb-2 flex flex-wrap items-center justify-between gap-2 text-sm">
                   <span>
                     Processing resource {progress.current + 1} of{' '}
                     {progress.total}

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

@@ -9,6 +9,10 @@ import BooleanToggle from '@/components/form/BooleanToggle';
 import DateTimeInput from '@/components/form/DateTimeInput';
 import FileUpload from '@/components/form/FileUpload';
 import EnumSelect from '@/components/form/EnumSelect';
+import {
+  resourceFormHideFields,
+  resourceJsonifyFields,
+} from '@/utils/customHelpers';
 import type {
   ResourceConfig,
   ResourceState,
@@ -46,15 +50,16 @@ export default function ResourceForm({
         actionLisp: '',
       };
 
-  // Initialize optionsPayload with default values for all schema fields
+  // 1. Initialize optionsPayload with default values for all schema fields
+  // (Only runs if NO existing data is provided)
   if (!resourceData) {
-    // Only for new resources
     const defaultOptionsPayload: Record<string, any> = {};
 
     Object.entries(categorySchema).forEach(([fieldName, fieldDef]) => {
       switch (fieldDef.type) {
         case 'number':
-          defaultOptionsPayload[fieldName] = fieldDef.defaultValue ?? 0;
+          defaultOptionsPayload[fieldName] =
+            fieldDef.defaultValue ?? fieldDef.minNumber ?? 0;
           break;
         case 'boolean':
           defaultOptionsPayload[fieldName] = fieldDef.defaultValue ?? false;
@@ -79,6 +84,27 @@ export default function ResourceForm({
     initialData.optionsPayload = defaultOptionsPayload;
   }
 
+  // 2. Pre-process JSON fields for display (Pretty Print)
+  // This runs for both new and existing records to ensure readability
+  if (initialData.optionsPayload) {
+    resourceJsonifyFields.forEach((field) => {
+      const val = initialData.optionsPayload[field];
+      if (val && typeof val === 'string') {
+        try {
+          // Parse and re-stringify with indentation
+          initialData.optionsPayload[field] = JSON.stringify(
+            JSON.parse(val),
+            null,
+            2
+          );
+        } catch (e) {
+          // If it's not valid JSON, leave it as is
+          console.warn(`Failed to pretty-print field ${field}`, e);
+        }
+      }
+    });
+  }
+
   const validator = (state: ResourceState): FieldErrors => {
     const errors: FieldErrors = {};
 
@@ -114,9 +140,34 @@ export default function ResourceForm({
     validator,
     onSave: async (data) => {
       try {
+        // 3. Post-process JSON fields for saving (Minify)
+        const dataToSave = { ...data };
+        if (dataToSave.optionsPayload) {
+          // Create a shallow copy of optionsPayload to avoid mutating form state directly
+          dataToSave.optionsPayload = { ...dataToSave.optionsPayload };
+
+          resourceJsonifyFields.forEach((field) => {
+            const val = dataToSave.optionsPayload[field];
+            if (val && typeof val === 'string') {
+              try {
+                // Minify back to a compact string
+                dataToSave.optionsPayload[field] = JSON.stringify(
+                  JSON.parse(val)
+                );
+              } catch (e) {
+                console.error(`Failed to minify field ${field}`, e);
+                // Throwing here would stop the save if the user typed invalid JSON
+                throw new Error(
+                  `Invalid JSON in field "${field}". Please check your syntax.`
+                );
+              }
+            }
+          });
+        }
+
         const updatedState = await saveResourceWithStateUpdate(
           window.TRACTSTACK_CONFIG?.tenantId || 'default',
-          data
+          dataToSave
         );
 
         // Call success callback after save (original pattern)
@@ -137,14 +188,19 @@ export default function ResourceForm({
   // Helper to get category reference options for a field
   const getCategoryReferenceOptions = (belongsToCategory: string) => {
     return fullContentMap
-      .filter((item) => item.categorySlug === belongsToCategory)
+      .filter(
+        (item) =>
+          item.categorySlug === belongsToCategory &&
+          !(
+            belongsToCategory === 'service' && (item as any).optionsPayload?.gid
+          )
+      )
       .map((item) => ({
         value: item.slug,
         label: item.title,
       }));
   };
 
-  // Helper to update optionsPayload field
   const updateOptionsField = (fieldName: string, value: any) => {
     updateField('optionsPayload', {
       ...state.optionsPayload,
@@ -156,11 +212,51 @@ export default function ResourceForm({
     onClose?.(false);
   };
 
-  // Render dynamic field based on field definition
   const renderDynamicField = (fieldName: string, fieldDef: FieldDefinition) => {
+    if (
+      resourceFormHideFields.includes(fieldName)
+      // && initialData.optionsPayload?.[fieldName]
+    ) {
+      return null;
+    }
+
     const fieldValue = state.optionsPayload[fieldName];
     const fieldError = errors?.[`optionsPayload.${fieldName}`];
 
+    if (resourceJsonifyFields.includes(fieldName)) {
+      return (
+        <div key={fieldName} className="space-y-1">
+          <label
+            htmlFor={`field-${fieldName}`}
+            className="block text-sm font-bold text-gray-700"
+          >
+            {fieldName.charAt(0).toUpperCase() + fieldName.slice(1)}
+          </label>
+          <div className="relative">
+            <textarea
+              id={`field-${fieldName}`}
+              rows={12}
+              className={`block w-full rounded-md font-mono text-xs shadow-sm ${
+                fieldError
+                  ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+                  : 'border-gray-300 focus:border-cyan-500 focus:ring-cyan-500'
+              }`}
+              value={fieldValue || ''}
+              onChange={(e) => updateOptionsField(fieldName, e.target.value)}
+              placeholder="{}"
+            />
+          </div>
+          {fieldError ? (
+            <p className="mt-1 text-sm text-red-600">{fieldError}</p>
+          ) : (
+            <p className="mt-1 text-xs text-gray-500">
+              Raw JSON configuration. Edits are validated on save.
+            </p>
+          )}
+        </div>
+      );
+    }
+
     switch (fieldDef.type) {
       case 'string':
         // Check if this string field references another category
@@ -349,7 +445,11 @@ export default function ResourceForm({
 
       {/* Save/Cancel Bar */}
       <UnsavedChangesBar
-        formState={formState}
+        formState={{
+          ...formState,
+          isDirty: isCreate || formState.isDirty,
+          cancel: handleCancel,
+        }}
         message="You have unsaved resource changes"
         saveLabel="Save Resource"
         cancelLabel="Discard Changes"

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

@@ -117,7 +117,7 @@ export default function ResourceTable({
       </div>
 
       {/* Table */}
-      <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+      <div className="overflow-x-auto shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
         <table className="min-w-full divide-y divide-gray-300">
           <thead className="bg-gray-50">
             <tr>
@@ -153,13 +153,22 @@ export default function ResourceTable({
                   className="cursor-pointer hover:bg-gray-50"
                   onClick={() => onEdit(resource.id)}
                 >
-                  <td className="whitespace-nowrap px-6 py-4 text-sm font-bold text-gray-900">
+                  <td
+                    className="max-w-xs truncate whitespace-nowrap px-6 py-4 text-sm font-bold text-gray-900"
+                    title={resource.title}
+                  >
                     {resource.title}
                   </td>
-                  <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
+                  <td
+                    className="max-w-xs truncate whitespace-nowrap px-6 py-4 text-sm text-gray-500"
+                    title={resource.slug}
+                  >
                     {resource.slug}
                   </td>
-                  <td className="px-6 py-4 text-sm text-gray-500">
+                  <td
+                    className="max-w-xs truncate px-6 py-4 text-sm text-gray-500"
+                    title={(resource as any).oneliner || '-'}
+                  >
                     {(resource as any).oneliner || '-'}
                   </td>
                   <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-bold md:pr-6">

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

@@ -199,7 +199,7 @@ const StoryFragmentTable = ({
       </div>
 
       {/* Table Container */}
-      <div className="overflow-hidden rounded-lg border border-gray-200 bg-white shadow">
+      <div className="overflow-x-auto rounded-lg border border-gray-200 bg-white shadow">
         {filteredFragments.length === 0 ? (
           <div className="px-6 py-12 text-center">
             <svg
@@ -241,7 +241,7 @@ const StoryFragmentTable = ({
             )}
           </div>
         ) : (
-          <div className="overflow-hidden">
+          <div className="inline-block min-w-full align-middle">
             <table className="min-w-full divide-y divide-gray-200">
               <thead className="bg-gray-50">
                 <tr>
@@ -271,15 +271,24 @@ const StoryFragmentTable = ({
                     <tr key={item.id} className="hover:bg-gray-50">
                       <td className="px-3 py-4 md:px-6">
                         <div className="flex flex-col">
-                          <div className="text-sm font-bold text-gray-900">
+                          <div
+                            className="max-w-xs truncate text-sm font-bold text-gray-900"
+                            title={item.title}
+                          >
                             {item.title}
                           </div>
-                          <div className="text-sm text-gray-500 md:hidden">
+                          <div
+                            className="max-w-xs truncate text-sm text-gray-500 md:hidden"
+                            title={`/${item.slug}`}
+                          >
                             /{item.slug}
                           </div>
                         </div>
                       </td>
-                      <td className="hidden whitespace-nowrap px-3 py-4 text-sm text-gray-500 md:table-cell md:px-6">
+                      <td
+                        className="hidden max-w-xs truncate whitespace-nowrap px-3 py-4 text-sm text-gray-500 md:table-cell md:px-6"
+                        title={`/${item.slug}`}
+                      >
                         /{item.slug}
                       </td>
                       <td className="hidden whitespace-nowrap px-3 py-4 text-sm md:table-cell md:px-6">

package/templates/src/components/storykeep/shopify/ShopifyDashboard.tsx

@@ -0,0 +1,111 @@
+import { useEffect, useState } from 'react';
+import { bookingHelpers } from '@/utils/api/bookingHelpers';
+import type { BookingMetricsResponse } from '@/types/tractstack';
+import type { ResourceNode } from '@/types/compositorTypes';
+
+interface ShopifyDashboardProps {
+  existingResources: ResourceNode[];
+}
+
+export default function ShopifyDashboard({
+  existingResources,
+}: ShopifyDashboardProps) {
+  const [metrics, setMetrics] = useState<BookingMetricsResponse | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const loadMetrics = async () => {
+      try {
+        setIsLoading(true);
+        const data = await bookingHelpers.getMetrics();
+        setMetrics(data);
+      } catch (err) {
+        console.error('Failed to fetch metrics:', err);
+        setError('Failed to load dashboard metrics.');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadMetrics();
+  }, []);
+
+  if (isLoading) {
+    return (
+      <div className="flex h-48 items-center justify-center rounded-lg border-2 border-dashed border-gray-200">
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-cyan-600" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-lg border-2 border-red-200 bg-red-50 p-6 text-center">
+        <p className="font-bold text-red-600">{error}</p>
+      </div>
+    );
+  }
+
+  const totalLast24h =
+    (metrics?.confirmedLast24h || 0) + (metrics?.pendingLast24h || 0);
+  const intentRatio =
+    totalLast24h > 0
+      ? Math.round(((metrics?.confirmedLast24h || 0) / totalLast24h) * 100)
+      : 0;
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+        <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+          <h3 className="text-sm font-bold text-gray-500">Monthly Confirmed</h3>
+          <p className="mt-2 text-3xl font-bold text-gray-900">
+            {metrics?.totalMonthlyConfirmed || 0}
+          </p>
+        </div>
+
+        <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+          <h3 className="text-sm font-bold text-gray-500">Weekly Confirmed</h3>
+          <p className="mt-2 text-3xl font-bold text-gray-900">
+            {metrics?.totalWeeklyConfirmed || 0}
+          </p>
+        </div>
+
+        <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+          <h3 className="text-sm font-bold text-gray-500">Annual Confirmed</h3>
+          <p className="mt-2 text-3xl font-bold text-gray-900">
+            {metrics?.totalAnnualConfirmed || 0}
+          </p>
+        </div>
+
+        <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+          <h3 className="text-sm font-bold text-gray-500">
+            Total Leads Converted
+          </h3>
+          <p className="mt-2 text-3xl font-bold text-gray-900">
+            {metrics?.leadConversionAnchor || 0}
+          </p>
+        </div>
+
+        <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+          <h3 className="text-sm font-bold text-gray-500">
+            Pending (Last 24h)
+          </h3>
+          <p className="mt-2 text-3xl font-bold text-gray-900">
+            {metrics?.pendingLast24h || 0}
+          </p>
+        </div>
+
+        <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+          <h3 className="text-sm font-bold text-gray-500">
+            Checkout Intent Ratio
+          </h3>
+          <div className="mt-2 flex items-baseline gap-2">
+            <p className="text-3xl font-bold text-gray-900">{intentRatio}%</p>
+            <p className="text-sm font-bold text-gray-500">conversion</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}