@snapdragonsnursery/react-components 1.1.10 → 1.1.12

package/package.json

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

package/src/ChildSearchPage.jsx

@@ -32,17 +32,16 @@ import {
   PaginationPrevious,
 } from "./components/ui/pagination";
 import {
-  Search,
-  Filter,
-  ChevronDown,
-  ChevronUp,
-  User,
-  MapPin,
-  Calendar,
-  Hash,
-  CheckCircle,
-  XCircle,
-} from "lucide-react";
+  MagnifyingGlassIcon,
+  FunnelIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  UserIcon,
+  MapPinIcon,
+  CalendarIcon,
+  CheckCircleIcon,
+  XCircleIcon,
+} from "@heroicons/react/24/outline";
 import { cn } from "./lib/utils";
 
 const ChildSearchPage = ({
@@ -132,7 +131,7 @@ const ChildSearchPage = ({
       header: "Name",
       cell: ({ row }) => (
         <div className="flex items-center space-x-2">
-          <User className="h-4 w-4 text-gray-400" />
+          <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">
@@ -147,7 +146,7 @@ const ChildSearchPage = ({
       header: "Site",
       cell: ({ row }) => (
         <div className="flex items-center space-x-2">
-          <MapPin className="h-4 w-4 text-gray-400" />
+          <MapPinIcon className="h-4 w-4 text-gray-400" />
           <span>{row.original.site_name}</span>
         </div>
       ),
@@ -157,7 +156,7 @@ const ChildSearchPage = ({
       header: "Date of Birth",
       cell: ({ row }) => (
         <div className="flex items-center space-x-2">
-          <Calendar className="h-4 w-4 text-gray-400" />
+          <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")
@@ -177,7 +176,7 @@ const ChildSearchPage = ({
             : "N/A";
         return (
           <div className="flex items-center space-x-2">
-            <Hash className="h-4 w-4 text-gray-400" />
+            <span className="text-gray-400 font-mono">#</span>
             <span>{ageText}</span>
           </div>
         );
@@ -189,9 +188,9 @@ const ChildSearchPage = ({
       cell: ({ row }) => (
         <div className="flex items-center space-x-2">
           {row.original.is_active ? (
-            <CheckCircle className="h-4 w-4 text-green-500" />
+            <CheckCircleIcon className="h-4 w-4 text-green-500" />
           ) : (
-            <XCircle className="h-4 w-4 text-red-500" />
+            <XCircleIcon className="h-4 w-4 text-red-500" />
           )}
           <span
             className={cn(
@@ -357,6 +356,13 @@ const ChildSearchPage = ({
     searchChildren();
   }, [debouncedSearchTerm, pagination.page, searchChildren]);
 
+  // Initial search on component mount
+  useEffect(() => {
+    if (instance && accounts[0]) {
+      searchChildren();
+    }
+  }, [instance, accounts, searchChildren]);
+
   const handlePageChange = (newPage) => {
     setPagination((prev) => ({ ...prev, page: newPage }));
   };
@@ -401,6 +407,10 @@ const ChildSearchPage = ({
     });
   };
 
+  // Calculate pagination display values
+  const startItem = pagination.totalCount > 0 ? (pagination.page - 1) * pagination.pageSize + 1 : 0;
+  const endItem = Math.min(pagination.page * pagination.pageSize, pagination.totalCount);
+
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
@@ -424,7 +434,7 @@ const ChildSearchPage = ({
           <div className="p-6">
             {/* Search Input */}
             <div className="relative mb-4">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+              <MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
               <Input
                 type="text"
                 placeholder="Search by name or child ID..."
@@ -440,12 +450,12 @@ const ChildSearchPage = ({
                 onClick={() => setIsAdvancedFiltersOpen(!isAdvancedFiltersOpen)}
                 className="flex items-center space-x-2 text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
               >
-                <Filter className="h-4 w-4" />
+                <FunnelIcon className="h-4 w-4" />
                 <span>Advanced Filters</span>
                 {isAdvancedFiltersOpen ? (
-                  <ChevronUp className="h-4 w-4" />
+                  <ChevronUpIcon className="h-4 w-4" />
                 ) : (
-                  <ChevronDown className="h-4 w-4" />
+                  <ChevronDownIcon className="h-4 w-4" />
                 )}
               </button>
               <button
@@ -646,14 +656,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">
-                    {children.length === 0
+                    {pagination.totalCount === 0
                       ? "No children found"
-                      : `Showing ${
-                          (pagination.page - 1) * pagination.pageSize + 1
-                        } to ${Math.min(
-                          pagination.page * pagination.pageSize,
-                          pagination.totalCount
-                        )} of ${pagination.totalCount} children`}
+                      : `Showing ${startItem} to ${endItem} of ${pagination.totalCount} children`}
                   </div>
                 </div>
               </div>
@@ -721,75 +726,88 @@ const ChildSearchPage = ({
               )}
 
               {/* Pagination */}
-              {pagination.totalPages > 1 && (
+              {pagination.totalCount > 0 && (
                 <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
-                  <Pagination>
-                    <PaginationContent>
-                      <PaginationItem>
-                        <PaginationPrevious
-                          onClick={() => handlePageChange(pagination.page - 1)}
-                          className={cn(
-                            !pagination.hasPreviousPage &&
-                              "pointer-events-none opacity-50"
-                          )}
-                        />
-                      </PaginationItem>
-
-                      {/* Page numbers */}
-                      {Array.from(
-                        { length: pagination.totalPages },
-                        (_, i) => i + 1
-                      )
-                        .filter((page) => {
-                          const current = pagination.page;
-                          const total = pagination.totalPages;
-                          return (
-                            page === 1 ||
-                            page === total ||
-                            (page >= current - 1 && page <= current + 1)
-                          );
-                        })
-                        .map((page, index, array) => {
-                          if (index > 0 && array[index - 1] !== page - 1) {
+                  {/* 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}
+                    </div>
+                    <div className="text-sm text-gray-600 dark:text-gray-400">
+                      {pagination.totalCount} total children
+                    </div>
+                  </div>
+                  
+                  {/* Pagination Controls */}
+                  {pagination.totalPages > 1 && (
+                    <Pagination>
+                      <PaginationContent>
+                        <PaginationItem>
+                          <PaginationPrevious
+                            onClick={() => handlePageChange(pagination.page - 1)}
+                            className={cn(
+                              !pagination.hasPreviousPage &&
+                                "pointer-events-none opacity-50"
+                            )}
+                          />
+                        </PaginationItem>
+
+                        {/* Page numbers */}
+                        {Array.from(
+                          { length: pagination.totalPages },
+                          (_, i) => i + 1
+                        )
+                          .filter((page) => {
+                            const current = pagination.page;
+                            const total = pagination.totalPages;
                             return (
-                              <React.Fragment key={`ellipsis-${page}`}>
-                                <PaginationItem>
-                                  <PaginationEllipsis />
-                                </PaginationItem>
-                                <PaginationItem>
-                                  <PaginationLink
-                                    onClick={() => handlePageChange(page)}
-                                    isActive={page === pagination.page}
-                                  >
-                                    {page}
-                                  </PaginationLink>
-                                </PaginationItem>
-                              </React.Fragment>
+                              page === 1 ||
+                              page === total ||
+                              (page >= current - 1 && page <= current + 1)
                             );
-                          }
-                          return (
-                            <PaginationItem key={page}>
-                              <PaginationLink
-                                onClick={() => handlePageChange(page)}
-                                isActive={page === pagination.page}
-                              >
-                                {page}
-                              </PaginationLink>
-                            </PaginationItem>
-                          );
-                        })}
-
-                      <PaginationItem>
-                        <PaginationNext
-                          onClick={() => handlePageChange(pagination.page + 1)}
-                          className={cn(
-                            !pagination.hasNextPage &&
-                              "pointer-events-none opacity-50"
-                          )}
-                        />
-                      </PaginationItem>
-                    </PaginationContent>
-                  </Pagination>
+                          })
+                          .map((page, index, array) => {
+                            if (index > 0 && array[index - 1] !== page - 1) {
+                              return (
+                                <React.Fragment key={`ellipsis-${page}`}>
+                                  <PaginationItem>
+                                    <PaginationEllipsis />
+                                  </PaginationItem>
+                                  <PaginationItem>
+                                    <PaginationLink
+                                      onClick={() => handlePageChange(page)}
+                                      isActive={page === pagination.page}
+                                    >
+                                      {page}
+                                    </PaginationLink>
+                                  </PaginationItem>
+                                </React.Fragment>
+                              );
+                            }
+                            return (
+                              <PaginationItem key={page}>
+                                <PaginationLink
+                                  onClick={() => handlePageChange(page)}
+                                  isActive={page === pagination.page}
+                                >
+                                  {page}
+                                </PaginationLink>
+                              </PaginationItem>
+                            );
+                          })}
+
+                        <PaginationItem>
+                          <PaginationNext
+                            onClick={() => handlePageChange(pagination.page + 1)}
+                            className={cn(
+                              !pagination.hasNextPage &&
+                                "pointer-events-none opacity-50"
+                            )}
+                          />
+                        </PaginationItem>
+                      </PaginationContent>
+                    </Pagination>
+                  )}
                 </div>
               )}
             </>

package/src/components/ui/button.jsx

@@ -39,7 +39,7 @@ const Button = React.forwardRef(
     const Comp = asChild ? "span" : "button";
     return (
       <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
+        className={cn(buttonVariants({ variant, size, className }), "cursor-pointer")}
         ref={ref}
         {...props}
       />

package/src/components/ui/pagination.jsx

@@ -4,7 +4,7 @@
 import * as React from "react";
 import { cn } from "../../lib/utils";
 import { Button } from "./button";
-import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+import { ChevronLeftIcon, ChevronRightIcon, EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
 
 const Pagination = ({ className, ...props }) => (
   <nav
@@ -37,7 +37,7 @@ const PaginationLink = React.forwardRef(
       variant={isActive ? "outline" : "ghost"}
       size={size}
       ref={ref}
-      className={cn("", className)}
+      className={cn("cursor-pointer", className)}
       {...props}
     />
   )
@@ -52,7 +52,7 @@ const PaginationPrevious = React.forwardRef(({ className, ...props }, ref) => (
     className={cn("gap-1 pl-2.5", className)}
     {...props}
   >
-    <ChevronLeft className="h-4 w-4" />
+    <ChevronLeftIcon className="h-4 w-4" />
     <span>Previous</span>
   </PaginationLink>
 ));
@@ -67,7 +67,7 @@ const PaginationNext = React.forwardRef(({ className, ...props }, ref) => (
     {...props}
   >
     <span>Next</span>
-    <ChevronRight className="h-4 w-4" />
+    <ChevronRightIcon className="h-4 w-4" />
   </PaginationLink>
 ));
 PaginationNext.displayName = "PaginationNext";
@@ -78,7 +78,7 @@ const PaginationEllipsis = ({ className, ...props }) => (
     className={cn("flex h-9 w-9 items-center justify-center", className)}
     {...props}
   >
-    <MoreHorizontal className="h-4 w-4" />
+    <EllipsisHorizontalIcon className="h-4 w-4" />
     <span className="sr-only">More pages</span>
   </span>
 );