@snapdragonsnursery/react-components 1.1.16 → 1.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.1.16",
+  "version": "1.1.18",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/ChildSearchPage.jsx

@@ -170,10 +170,16 @@ const ChildSearchPage = ({
       header: "Age",
       cell: ({ row }) => {
         const { age_years, age_months } = row.original;
-        const ageText =
-          age_years || age_months
-            ? `${age_years || 0}y ${age_months || 0}m`
-            : "N/A";
+        
+        // Calculate proper years and months
+        let totalMonths = (age_years || 0) * 12 + (age_months || 0);
+        let years = Math.floor(totalMonths / 12);
+        let months = totalMonths % 12;
+        
+        const ageText = totalMonths > 0 
+          ? `${years}y ${months}m`
+          : "N/A";
+          
         return (
           <div className="flex items-center space-x-2">
             <span>{ageText}</span>
@@ -316,6 +322,13 @@ const ChildSearchPage = ({
       const data = await apiResponse.json();
 
       if (data.success) {
+        console.log("🔍 API Response:", {
+          children: data.data.children.length,
+          pagination: data.data.pagination,
+          totalCount: data.data.pagination.totalCount,
+          totalPages: data.data.pagination.totalPages
+        });
+        
         setChildren(data.data.children);
         setPagination(data.data.pagination);
         trackEvent("child_search_success", {
@@ -433,13 +446,12 @@ const ChildSearchPage = ({
           <div className="p-6">
             {/* Search Input */}
             <div className="relative mb-4">
-              <MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
               <Input
                 type="text"
-                placeholder="🔧 UPDATED: Search by name or child ID... (v1.1.14)"
+                placeholder="🔧 UPDATED: Search by name or child ID... (v1.1.17)"
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
-                className="pl-10"
+                className="pl-4"
               />
             </div>
 
@@ -655,9 +667,9 @@ const ChildSearchPage = ({
               <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                 <div className="flex items-center justify-between">
                   <div className="text-sm text-gray-600 dark:text-gray-400">
-                    {pagination.totalCount === 0
-                      ? "No children found"
-                      : `Showing ${startItem} to ${endItem} of ${pagination.totalCount} children`}
+                    {(pagination.totalCount > 0 || children.length > 0)
+                      ? `Showing ${startItem} to ${endItem} of ${pagination.totalCount || children.length} children`
+                      : "No children found"}
                   </div>
                 </div>
               </div>
@@ -725,20 +737,20 @@ const ChildSearchPage = ({
               )}
 
               {/* Pagination */}
-              {pagination.totalCount > 0 && (
+              {(pagination.totalCount > 0 || children.length > 0) && (
                 <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
                   {/* Pagination Info */}
                   <div className="flex items-center justify-between mb-4">
                     <div className="text-sm text-gray-600 dark:text-gray-400">
-                      Page {pagination.page} of {pagination.totalPages}
+                      Page {pagination.page} of {pagination.totalPages || 1}
                     </div>
                     <div className="text-sm text-gray-600 dark:text-gray-400">
-                      {pagination.totalCount} total children
+                      {pagination.totalCount || children.length} total children
                     </div>
                   </div>
                   
                   {/* Pagination Controls */}
-                  {pagination.totalPages > 1 && (
+                  {(pagination.totalPages > 1 || children.length > 0) && (
                     <Pagination>
                       <PaginationContent>
                         <PaginationItem>
@@ -753,12 +765,12 @@ const ChildSearchPage = ({
 
                         {/* Page numbers */}
                         {Array.from(
-                          { length: pagination.totalPages },
+                          { length: Math.max(pagination.totalPages, 1) },
                           (_, i) => i + 1
                         )
                           .filter((page) => {
                             const current = pagination.page;
-                            const total = pagination.totalPages;
+                            const total = Math.max(pagination.totalPages, 1);
                             return (
                               page === 1 ||
                               page === total ||