client side xlsx export :)

pages/cart/publishers/index.tsx

@@ -23,6 +23,10 @@ import ConfirmationModal from '../../../components/ConfirmationModal';
 import { relative } from "path";
 import { set } from "lodash";
 
+import { utils, write } from 'xlsx';
+import { saveAs } from 'file-saver';
+
+
 interface IProps {
   initialItems: Publisher[];
 }
@@ -38,20 +42,6 @@ function PublishersPage({ publishers = [] }: IProps) {
     indeterminate: true,
   });
 
-  // const cbRefFilterTraining = useRef<HTMLInputElement>(null);
-
-  // const getCheckboxState = (currentState: boolean | null) => {
-  //   if (currentState === true) return 'unchecked';
-  //   if (currentState === false) return 'checked';
-  //   return 'indeterminate';
-  // };
-  // const cbRefFilterTraining = useRef<HTMLInputElement>(null);
-  // const [cbFilterTrainingState, setcbFilterTrainingState] = useState<boolean | null>(null);
-  // useEffect(() => {
-  //   if (cbRefFilterTraining.current) {
-  //     cbRefFilterTraining.current.indeterminate = cbFilterTrainingState === null;
-  //   }
-  // }, [cbFilterTrainingState]);
   const [flterNoTraining, setFilterNoTraining] = useState(false);
 
   const [isDeleting, setIsDeleting] = useState(false);
@@ -225,6 +215,69 @@ function PublishersPage({ publishers = [] }: IProps) {
       toast.error("Грешка при експорт на данни");
     }
   }
+
+
+  // Add this function to your component
+  const exportFilteredPublishers = () => {
+    try {
+      // Format the data for Excel
+      const excelData = shownPubs.map(publisher => ({
+        'First Name': publisher.firstName,
+        'Last Name': publisher.lastName,
+        'Email': publisher.email,
+        'Phone': publisher.phone,
+        'Active': publisher.isActive ? 'Yes' : 'No',
+        'Trained': publisher.isTrained ? 'Yes' : 'No',
+        'Imported': publisher.isImported ? 'Yes' : 'No',
+        'Last Assignment': publisher.assignments.length > 0
+          ? new Date(Math.max(...publisher.assignments.map(a => new Date(a.shift.startTime)))).toLocaleDateString()
+          : 'Never',
+        'Number of Assignments': publisher.assignments.length,
+        'Number of Availabilities': publisher.availabilities.length
+      }));
+
+      // Create worksheet
+      const ws = utils.json_to_sheet(excelData);
+
+      // Set column widths
+      const colWidths = [
+        { wch: 15 }, // First Name
+        { wch: 15 }, // Last Name
+        { wch: 30 }, // Email
+        { wch: 10 }, // Active
+        { wch: 10 }, // Trained
+        { wch: 10 }, // Imported
+        { wch: 15 }, // Last Assignment
+        { wch: 20 }, // Number of Assignments
+        { wch: 20 }, // Number of Availabilities
+      ];
+      ws['!cols'] = colWidths;
+
+      // Create workbook and add worksheet
+      const wb = utils.book_new();
+      utils.book_append_sheet(wb, ws, 'Publishers');
+
+      // Generate buffer
+      const excelBuffer = write(wb, { bookType: 'xlsx', type: 'array' });
+
+      // Create blob and save file
+      const blob = new Blob([excelBuffer], {
+        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+      });
+
+      // Generate filename with current date
+      const date = new Date().toISOString().split('T')[0];
+      const filename = `publishers-${date}.xlsx`;
+
+      saveAs(blob, filename);
+
+      toast.success("Експортът е успешен");
+    } catch (error) {
+      console.error('Export error:', error);
+      toast.error("Грешка при експорт на данни");
+    }
+  };
+
   return (
     <Layout>
       <ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER]}>
@@ -258,8 +311,16 @@ function PublishersPage({ publishers = [] }: IProps) {
               <a href="/cart/publishers/import" className="btn">Import publishers</a>
             </div>
             {/* export by calling excel helper .ExportPublishersToExcel() */}
-            <div className="flex justify-center m-4">
+            {/* <div className="flex justify-center m-4">
               <button className="button m-2 btn btn-primary" onClick={exportPublishers}>Export to Excel</button>
+            </div> */}
+            <div className="flex justify-center m-4">
+              <button className="button m-2 btn btn-primary" onClick={exportPublishers}>
+                Export All XLSX
+              </button>
+              <button className="button m-2 btn btn-primary" onClick={exportFilteredPublishers}>
+                Export Filtered XLSX
+              </button>
             </div>
           </div>
 
@@ -350,6 +411,11 @@ export const getServerSideProps = async (context) => {
       isActive: true,
       isTrained: true,
       isImported: true,
+      lastLogin: true,
+      phone: true,
+      isSubscribedToReminders: true,
+      isSubscribedToCoverMe: true,
+      familyHeadId: true,
       assignments: {
         select: {
           shift: {