astro-tractstack 2.3.0 → 2.3.1

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

@@ -1,5 +1,5 @@
-import { useState } from 'react';
-import { Pagination } from '@ark-ui/react/pagination';
+import { useState, useRef, useEffect } from 'react';
+import { useStore } from '@nanostores/react';
 import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon';
 import ChevronLeftIcon from '@heroicons/react/24/outline/ChevronLeftIcon';
 import ArrowPathIcon from '@heroicons/react/24/outline/ArrowPathIcon';
@@ -7,7 +7,13 @@ import MagnifyingGlassIcon from '@heroicons/react/24/outline/MagnifyingGlassIcon
 import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import TrashIcon from '@heroicons/react/24/outline/TrashIcon';
 import PencilIcon from '@heroicons/react/24/outline/PencilIcon';
-import type { ShopifyProduct } from '@/stores/shopify';
+import {
+  shopifyData,
+  shopifyStatus,
+  fetchShopifyProducts,
+  clearShopifySearch,
+  type ShopifyProduct,
+} from '@/stores/shopify';
 import type { ResourceNode } from '@/types/compositorTypes';
 
 interface ProductTableProps {
@@ -21,68 +27,120 @@ interface ProductTableProps {
   onEdit: (product: ShopifyProduct, resource: ResourceNode) => void;
 }
 
-const ITEMS_PER_PAGE = 10;
-
 export default function ProductTable({
   products,
   linkedResourceMap,
-  onRefresh,
-  isRefreshing,
   onSelectProduct,
   onLink,
   onUnlink,
   onEdit,
 }: ProductTableProps) {
+  const data = useStore(shopifyData);
+  const status = useStore(shopifyStatus);
+
+  const [inputValue, setInputValue] = useState('');
   const [searchTerm, setSearchTerm] = useState('');
-  const [currentPage, setCurrentPage] = useState(1);
+  const [isDebouncing, setIsDebouncing] = useState(false);
 
-  const filteredProducts = products.filter(
-    (product) =>
-      product.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      product.handle.toLowerCase().includes(searchTerm.toLowerCase())
-  );
+  const [cursorStack, setCursorStack] = useState<string[]>([]);
+  const [currentCursor, setCurrentCursor] = useState<string | null>(null);
 
-  const totalResults = filteredProducts.length;
-  const totalPages = Math.ceil(totalResults / ITEMS_PER_PAGE);
-  const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
-  const paginatedProducts = filteredProducts.slice(
-    startIndex,
-    startIndex + ITEMS_PER_PAGE
-  );
+  const debounceTimer = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (debounceTimer.current) clearTimeout(debounceTimer.current);
+    };
+  }, []);
 
-  const handlePageChange = (page: number) => {
-    setCurrentPage(page);
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    setInputValue(val);
+    setIsDebouncing(true);
+
+    if (debounceTimer.current) {
+      clearTimeout(debounceTimer.current);
+    }
+
+    if (val.length === 0) {
+      setIsDebouncing(false);
+      setSearchTerm('');
+      setCursorStack([]);
+      setCurrentCursor(null);
+      clearShopifySearch();
+      return;
+    }
+
+    debounceTimer.current = setTimeout(() => {
+      setIsDebouncing(false);
+      setSearchTerm(val);
+      setCursorStack([]);
+      setCurrentCursor(null);
+
+      if (val.length >= 3) {
+        fetchShopifyProducts(val, null);
+      } else {
+        clearShopifySearch();
+      }
+    }, 1000);
   };
 
+  const handleRefreshSearch = () => {
+    if (searchTerm.length >= 3) {
+      fetchShopifyProducts(searchTerm, currentCursor);
+    }
+  };
+
+  const handleNext = () => {
+    if (data.pageInfo?.hasNextPage && data.pageInfo?.endCursor) {
+      const nextCursor = data.pageInfo.endCursor;
+      setCursorStack((prev) => [...prev, currentCursor || '']);
+      setCurrentCursor(nextCursor);
+      fetchShopifyProducts(searchTerm, nextCursor);
+    }
+  };
+
+  const handlePrev = () => {
+    if (cursorStack.length > 0) {
+      const newStack = [...cursorStack];
+      const prevCursor = newStack.pop() || null;
+      setCursorStack(newStack);
+      setCurrentCursor(prevCursor || null);
+      fetchShopifyProducts(searchTerm, prevCursor || null);
+    }
+  };
+
+  const isLoading = status.isLoading || isDebouncing;
+
   return (
     <div className="space-y-4">
-      <div className="flex items-center gap-4">
-        <div className="flex-1">
-          <input
-            type="text"
-            placeholder="Search products..."
-            value={searchTerm}
-            onChange={(e) => {
-              setSearchTerm(e.target.value);
-              setCurrentPage(1);
-            }}
-            className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-700 focus:ring-cyan-700"
-          />
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-4">
+          <div className="flex-1">
+            <input
+              type="text"
+              placeholder="Search products..."
+              value={inputValue}
+              onChange={handleSearchChange}
+              className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-700 focus:ring-cyan-700"
+            />
+          </div>
+          <button
+            onClick={handleRefreshSearch}
+            disabled={isLoading || searchTerm.length < 3}
+            className="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-bold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 disabled:opacity-50"
+            title="Refresh current search"
+          >
+            <ArrowPathIcon
+              className={`mr-1.5 h-5 w-5 ${isLoading ? 'animate-spin' : ''}`}
+            />
+            Sync
+          </button>
         </div>
-        <button
-          onClick={onRefresh}
-          disabled={isRefreshing}
-          className="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-bold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 disabled:opacity-50"
-          title="Refresh from Shopify"
-        >
-          <ArrowPathIcon
-            className={`mr-1.5 h-5 w-5 ${isRefreshing ? 'animate-spin' : ''}`}
-          />
-          Sync
-        </button>
+        <p className="text-xs text-gray-500">Search by product title.</p>
       </div>
 
-      <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>
@@ -98,25 +156,63 @@ export default function ProductTable({
             </tr>
           </thead>
           <tbody className="divide-y divide-gray-200 bg-white">
-            {paginatedProducts.length === 0 ? (
+            {status.error ? (
               <tr>
                 <td colSpan={3} className="px-6 py-12 text-center">
-                  <div className="text-gray-500">
-                    {products.length === 0
-                      ? 'No products found in store'
-                      : 'No products match your search'}
+                  <div className="font-bold text-red-600">{status.error}</div>
+                  <div className="mt-1 text-sm text-red-500">
+                    Please check your Shopify integration settings or API token.
                   </div>
                 </td>
               </tr>
+            ) : isLoading ? (
+              <tr>
+                <td colSpan={3} className="px-6 py-12 text-center">
+                  <div className="mx-auto h-8 w-8 animate-spin rounded-full border-2 border-gray-300 border-t-cyan-600"></div>
+                  <p className="mt-2 text-sm text-gray-500">
+                    Searching Shopify...
+                  </p>
+                </td>
+              </tr>
+            ) : inputValue.length === 0 ? (
+              <tr>
+                <td
+                  colSpan={3}
+                  className="px-6 py-12 text-center text-gray-500"
+                >
+                  Search to discover products.
+                </td>
+              </tr>
+            ) : inputValue.length < 3 ? (
+              <tr>
+                <td
+                  colSpan={3}
+                  className="px-6 py-12 text-center text-gray-500"
+                >
+                  Please enter at least 3 characters to search.
+                </td>
+              </tr>
+            ) : products.length === 0 ? (
+              <tr>
+                <td
+                  colSpan={3}
+                  className="px-6 py-12 text-center text-gray-500"
+                >
+                  No products match your search.
+                </td>
+              </tr>
             ) : (
-              paginatedProducts.map((product) => {
+              products.map((product) => {
                 const linkedResource = linkedResourceMap.get(product.id);
                 const isLinked = !!linkedResource;
 
                 return (
                   <tr key={product.id} className="hover:bg-gray-50">
                     <td className="px-6 py-4">
-                      <div className="font-bold text-gray-900">
+                      <div
+                        className="max-w-xs truncate font-bold text-gray-900"
+                        title={product.title}
+                      >
                         {product.title}
                       </div>
                       {isLinked && (
@@ -127,11 +223,20 @@ export default function ProductTable({
                               : 'bg-cyan-50 text-cyan-700 ring-cyan-600/20'
                           }`}
                         >
-                          Synced: {linkedResource.title}
+                          Synced:{' '}
+                          <span
+                            className="max-w-xs truncate"
+                            title={linkedResource.title}
+                          >
+                            {linkedResource.title}
+                          </span>
                         </span>
                       )}
                     </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={product.handle}
+                    >
                       {product.handle}
                     </td>
                     <td className="whitespace-nowrap px-6 py-4 text-right text-sm font-bold">
@@ -199,56 +304,30 @@ export default function ProductTable({
         </table>
       </div>
 
-      {totalPages > 1 && (
-        <div className="flex justify-center pt-4">
-          <Pagination.Root
-            count={totalResults}
-            pageSize={ITEMS_PER_PAGE}
-            page={currentPage}
-            onPageChange={(details) => handlePageChange(details.page)}
-          >
-            <Pagination.PrevTrigger className="mr-2 flex items-center gap-1 rounded px-3 py-2 text-sm font-bold text-mydarkgrey transition-colors hover:text-myblue disabled:opacity-50">
+      {(cursorStack.length > 0 || data.pageInfo?.hasNextPage) &&
+        !isLoading &&
+        inputValue.length >= 3 &&
+        products.length > 0 && (
+          <div className="flex items-center justify-center space-x-4 pt-4">
+            <button
+              onClick={handlePrev}
+              disabled={cursorStack.length === 0}
+              className="flex items-center gap-1 rounded px-3 py-2 text-sm font-bold text-gray-700 transition-colors hover:text-cyan-600 disabled:opacity-30 disabled:hover:text-gray-700"
+            >
               <ChevronLeftIcon className="h-4 w-4" />
               Previous
-            </Pagination.PrevTrigger>
-
-            <div className="flex items-center gap-1">
-              <Pagination.Context>
-                {(pagination) =>
-                  pagination.pages.map((page, index) =>
-                    page.type === 'page' ? (
-                      <Pagination.Item
-                        key={index}
-                        type="page"
-                        value={page.value}
-                        className={`rounded px-3 py-2 text-sm font-bold transition-colors ${
-                          page.value === currentPage
-                            ? 'bg-myblue text-white'
-                            : 'text-mydarkgrey hover:text-myblue'
-                        }`}
-                      >
-                        {page.value}
-                      </Pagination.Item>
-                    ) : (
-                      <span
-                        key={index}
-                        className="px-2 text-sm text-mydarkgrey"
-                      >
-                        {page.type === 'ellipsis' ? '...' : ''}
-                      </span>
-                    )
-                  )
-                }
-              </Pagination.Context>
-            </div>
-
-            <Pagination.NextTrigger className="ml-2 flex items-center gap-1 rounded px-3 py-2 text-sm font-bold text-mydarkgrey transition-colors hover:text-myblue disabled:opacity-50">
+            </button>
+
+            <button
+              onClick={handleNext}
+              disabled={!data.pageInfo?.hasNextPage}
+              className="flex items-center gap-1 rounded px-3 py-2 text-sm font-bold text-gray-700 transition-colors hover:text-cyan-600 disabled:opacity-30 disabled:hover:text-gray-700"
+            >
               Next
               <ChevronRightIcon className="h-4 w-4" />
-            </Pagination.NextTrigger>
-          </Pagination.Root>
-        </div>
-      )}
+            </button>
+          </div>
+        )}
     </div>
   );
 }

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/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>
+  );
+}