feat: add pagination

app/create-location/page.tsx

@@ -39,6 +39,10 @@ export default function CreateLocationPage() {
     const [loadingProjects, setLoadingProjects] = useState(false)
     const [loadingPackages, setLoadingPackages] = useState(false)
 
+    // Pagination state
+    const [skip, setSkip] = useState(0)
+    const [limit, setLimit] = useState(10)
+
     // Editing state
     const [isEditing, setIsEditing] = useState(false)
     const [currentLocation, setCurrentLocation] = useState<Location | null>(null)
@@ -55,11 +59,11 @@ export default function CreateLocationPage() {
     const [endLng, setEndLng] = useState("")
 
     // Load locations and projects
-    const loadLocations = async () => {
+    const loadLocations = async (currentSkip = skip, currentLimit = limit) => {
         try {
             setIsLoading(true)
             setError(null)
-            const data = await fetchAllLocations()
+            const data = await fetchAllLocations({ skip: currentSkip, limit: currentLimit })
             setLocations(data)
         } catch (err) {
             setError("Failed to load locations. Please check if the backend is running.")
@@ -71,7 +75,7 @@ export default function CreateLocationPage() {
     const loadProjects = async () => {
         try {
             setLoadingProjects(true)
-            const data = await fetchProjects()
+            const data = await fetchProjects({ skip: 0, limit: 1000 })
             setProjects(data)
         } catch (err) {
             setError("Failed to load projects.")
@@ -82,7 +86,7 @@ export default function CreateLocationPage() {
 
     const loadAllPackages = async () => {
         try {
-            const data = await fetchAllPackages()
+            const data = await fetchAllPackages({ skip: 0, limit: 1000 })
             setAllPackages(data)
         } catch (err) {
             console.error("Failed to load all packages")
@@ -90,10 +94,10 @@ export default function CreateLocationPage() {
     }
 
     useEffect(() => {
-        loadLocations()
+        loadLocations(skip, limit)
         loadProjects()
         loadAllPackages()
-    }, [])
+    }, [skip, limit])
 
     // Load packages when project changes
     useEffect(() => {
@@ -107,7 +111,7 @@ export default function CreateLocationPage() {
             try {
                 setLoadingPackages(true)
                 if (!isEditing) setSelectedPackageId("")
-                const data = await fetchPackagesByProject(selectedProjectId)
+                const data = await fetchPackagesByProject(selectedProjectId, { skip: 0, limit: 1000 })
                 setPackages(data)
             } catch (err) {
                 setError("Failed to load packages for the selected project.")
@@ -325,6 +329,15 @@ export default function CreateLocationPage() {
                             onDelete={handleDelete}
                             addButtonText="Add New Location"
                             isLoading={isLoading}
+                            pagination={{
+                                skip,
+                                limit,
+                                onPageChange: setSkip,
+                                onLimitChange: (newLimit) => {
+                                    setLimit(newLimit);
+                                    setSkip(0); // Reset skip when limit changes
+                                }
+                            }}
                         />
                     </div>
 

app/create-package/page.tsx

@@ -33,6 +33,10 @@ export default function CreatePackagePage() {
     const [error, setError] = useState<string | null>(null)
     const [loadingProjects, setLoadingProjects] = useState(false)
 
+    // Pagination state
+    const [skip, setSkip] = useState(0)
+    const [limit, setLimit] = useState(10)
+
     // Editing state
     const [isEditing, setIsEditing] = useState(false)
     const [currentPackage, setCurrentPackage] = useState<PackageType | null>(null)
@@ -43,11 +47,11 @@ export default function CreatePackagePage() {
     const [region, setRegion] = useState("")
 
     // Load packages and projects
-    const loadPackages = async () => {
+    const loadPackages = async (currentSkip = skip, currentLimit = limit) => {
         try {
             setIsLoading(true)
             setError(null)
-            const data = await fetchAllPackages()
+            const data = await fetchAllPackages({ skip: currentSkip, limit: currentLimit })
             setPackages(data)
         } catch (err) {
             setError("Failed to load packages. Please check if the backend is running.")
@@ -59,7 +63,7 @@ export default function CreatePackagePage() {
     const loadProjects = async () => {
         try {
             setLoadingProjects(true)
-            const data = await fetchProjects()
+            const data = await fetchProjects({ skip: 0, limit: 1000 }) // Load all projects for selector
             setProjects(data)
         } catch (err) {
             setError("Failed to load projects.")
@@ -69,9 +73,9 @@ export default function CreatePackagePage() {
     }
 
     useEffect(() => {
-        loadPackages()
+        loadPackages(skip, limit)
         loadProjects()
-    }, [])
+    }, [skip, limit])
 
     const resetForm = () => {
         setSelectedProjectId("")
@@ -229,6 +233,15 @@ export default function CreatePackagePage() {
                             onDelete={handleDelete}
                             addButtonText="Add New Package"
                             isLoading={isLoading}
+                            pagination={{
+                                skip,
+                                limit,
+                                onPageChange: setSkip,
+                                onLimitChange: (newLimit) => {
+                                    setLimit(newLimit);
+                                    setSkip(0); // Reset skip when limit changes
+                                }
+                            }}
                         />
                     </div>
 

app/create-project/page.tsx

@@ -20,6 +20,10 @@ export default function CreateProjectPage() {
     const [isSubmitting, setIsSubmitting] = useState(false)
     const [error, setError] = useState<string | null>(null)
 
+    // Pagination state
+    const [skip, setSkip] = useState(0)
+    const [limit, setLimit] = useState(10)
+
     // Editing state
     const [isEditing, setIsEditing] = useState(false)
     const [currentProject, setCurrentProject] = useState<Project | null>(null)
@@ -34,11 +38,11 @@ export default function CreateProjectPage() {
     const [endLng, setEndLng] = useState("")
 
     // Load projects
-    const loadProjects = async () => {
+    const loadProjects = async (currentSkip = skip, currentLimit = limit) => {
         try {
             setIsLoading(true)
             setError(null)
-            const data = await fetchProjects()
+            const data = await fetchProjects({ skip: currentSkip, limit: currentLimit })
             setProjects(data)
         } catch (err) {
             setError("Failed to load projects. Please check if the backend is running.")
@@ -48,8 +52,8 @@ export default function CreateProjectPage() {
     }
 
     useEffect(() => {
-        loadProjects()
-    }, [])
+        loadProjects(skip, limit)
+    }, [skip, limit])
 
     const resetForm = () => {
         setName("")
@@ -210,6 +214,15 @@ export default function CreateProjectPage() {
                             onDelete={handleDelete}
                             addButtonText="Add New Project"
                             isLoading={isLoading}
+                            pagination={{
+                                skip,
+                                limit,
+                                onPageChange: setSkip,
+                                onLimitChange: (newLimit) => {
+                                    setLimit(newLimit);
+                                    setSkip(0); // Reset skip when limit changes
+                                }
+                            }}
                         />
                     </div>