@snapdragonsnursery/react-components 1.1.29 → 1.1.31

package/package.json

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

package/src/ChildSearchPage.jsx

@@ -130,13 +130,10 @@ const ChildSearchPage = ({
     columnHelper.accessor("full_name", {
       header: "Name",
       cell: ({ row }) => (
-        <div className="flex items-center space-x-2">
-          <UserIcon className="h-4 w-4 text-gray-400" />
-          <div>
-            <div className="font-medium">{row.original.full_name}</div>
-            <div className="text-sm text-gray-500">
-              ID: {row.original.child_id}
-            </div>
+        <div>
+          <div className="font-medium">{row.original.full_name}</div>
+          <div className="text-sm text-gray-500">
+            ID: {row.original.child_id}
           </div>
         </div>
       ),
@@ -145,24 +142,18 @@ const ChildSearchPage = ({
     columnHelper.accessor("site_name", {
       header: "Site",
       cell: ({ row }) => (
-        <div className="flex items-center space-x-2">
-          <MapPinIcon className="h-4 w-4 text-gray-400" />
-          <span>{row.original.site_name}</span>
-        </div>
+        <span>{row.original.site_name}</span>
       ),
     }),
     // Date of Birth column
     columnHelper.accessor("date_of_birth", {
       header: "Date of Birth",
       cell: ({ row }) => (
-        <div className="flex items-center space-x-2">
-          <CalendarIcon className="h-4 w-4 text-gray-400" />
-          <span>
-            {row.original.date_of_birth
-              ? new Date(row.original.date_of_birth).toLocaleDateString("en-GB")
-              : "N/A"}
-          </span>
-        </div>
+        <span>
+          {row.original.date_of_birth
+            ? new Date(row.original.date_of_birth).toLocaleDateString("en-GB")
+            : "N/A"}
+        </span>
       ),
     }),
     // Age column
@@ -180,11 +171,7 @@ const ChildSearchPage = ({
           ? `${years}y ${months}m`
           : "N/A";
           
-        return (
-          <div className="flex items-center space-x-2">
-            <span>{ageText}</span>
-          </div>
-        );
+        return <span>{ageText}</span>;
       },
     }),
     // Status column
@@ -665,7 +652,7 @@ const ChildSearchPage = ({
           {!loading && !error && (
             <>
               {/* Results Header */}
-              <div className="px-6 py-6 border-b border-gray-200 dark:border-gray-700">
+              <div className="px-6 py-6 border-b border-gray-200 dark:border-gray-700" style={{ padding: '24px' }}>
                 <div className="flex items-center justify-between">
                   <div className="text-sm text-gray-600 dark:text-gray-400">
                     {(pagination.totalCount > 0 || children.length > 0)
@@ -739,20 +726,15 @@ const ChildSearchPage = ({
 
               {/* Pagination */}
               {(pagination.totalCount > 0 || children.length > 0) && (
-                <div className="px-6 py-8 border-t border-gray-200 dark:border-gray-700">
-                  {/* Pagination Info */}
-                  <div className="flex items-center justify-between mb-6">
+                <div className="px-6 py-8 border-t border-gray-200 dark:border-gray-700" style={{ padding: '32px 24px' }}>
+                  {/* Pagination Info and Controls */}
+                  <div className="flex items-center justify-between">
                     <div className="text-sm text-gray-600 dark:text-gray-400">
                       Page {pagination.page} of {pagination.totalPages || 1}
                     </div>
-                    <div className="text-sm text-gray-600 dark:text-gray-400">
-                      {pagination.totalCount || children.length} total children
-                    </div>
-                  </div>
-                  
-                  {/* Pagination Controls */}
-                  {(pagination.totalPages > 1 || children.length > 0) && (
-                    <div className="flex justify-center">
+                    
+                    {/* Pagination Controls */}
+                    {(pagination.totalPages > 1 || children.length > 0) && (
                       <Pagination>
                         <PaginationContent>
                           <PaginationItem>
@@ -840,8 +822,12 @@ const ChildSearchPage = ({
                           </PaginationItem>
                         </PaginationContent>
                       </Pagination>
+                    )}
+                    
+                    <div className="text-sm text-gray-600 dark:text-gray-400">
+                      {pagination.totalCount || children.length} total children
                     </div>
-                  )}
+                  </div>
                 </div>
               )}
             </>