first commit

2025-07-21 05:51:52 -04:00
commit 7e28fc8f51
114 changed files with 23749 additions and 0 deletions
@@ -0,0 +1,64 @@
+import { useState } from "react";
+import MainBtn from "../MainBtn";
+import Icons from "../Icons";
+
+
+export default function TablePaginatedWrapper({
+  data = [],
+  isFetching,
+  pagination,
+  setPage,
+  children,
+}) {
+
+  const handlePrev = () => {
+    setPage(prev => prev - 1)
+  };
+  const handleNext = () => {
+    setPage(prev => prev + 1)
+  };
+
+  return (
+    <div className="relative w-full">
+      <div className="flex flex-col">
+        <div className="w-full overflow-x-auto">
+          {children({ data })}
+        </div>
+
+        <div className='w-full flex flex-col lg:flex-row justify-center items-center gap-3 md:gap-6'>
+            <div className="text-sm text-center lg:text-left font-normal text-gray-500 dark:text-gray-400 block w-full">Showing <span className="font-semibold text-gray-900 dark:text-white">
+              {isFetching ? '----' : `page ${pagination?.current_page}`}</span> of <span className="font-semibold text-gray-900 dark:text-white">{pagination?.total_pages}</span>
+            </div>
+              <div className='flex items-center gap-3 md:gap-6'>
+                  <MainBtn 
+                      onClick={handlePrev}
+                      // text='Prev' 
+                      className={`${!pagination?.has_prev ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`} 
+                      disabled={isFetching || !pagination?.has_prev}
+                  >
+                  <Icons name='prev' />
+                  </MainBtn>
+                  <MainBtn 
+                      onClick={handleNext}
+                      // text='Next' 
+                      className={`${!pagination?.has_next ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`} 
+                      disabled={isFetching || !pagination?.has_next}
+                  > 
+                  <Icons name='next' />
+                  </MainBtn>
+              </div>
+          </div>
+      </div>
+      
+    {isFetching && <TableIsLoading />}
+    </div>
+  );
+}
+
+export const TableIsLoading = () => {
+  return (
+    <div className="w-full fixed z-[991] inset-0 flex justify-center items-center bg-black/10">
+      <p className="rounded-md shadow-md p-4 bg-white/90 dark:bg-gray-900 text-brown dark:text-white">Loading...</p>
+    </div>
+  )
+}