import React from "react";
import ReactDOM from "react-dom";
import { FwPagination } from "@freshworks/crayons/react";
function App() {
  return (<div>
    <FwPagination per-page="20" total="50"></FwPagination><br/>
    <FwPagination total="50"></FwPagination>
    <FwPagination page="2"
  per-page="10"
  total="50"></FwPagination>
  </div>)
}
#Properties
Property	Attribute	Description	Type	Default
buttonGroupLabel	button-group-label	Aria Label to be used for the button group.	string	''
isLoading	is-loading	Indicates if the records in current page are being fetched.	boolean	false
nextButtonLabel	next-button-label	Aria Label to be used for next button.	string	''
page	page	The current page number.	number	1
perPage	per-page	The number of records to be shown per page. Defaults to 10.	number	10
previousButtonLabel	previous-button-label	Aria Label to be used for previous button.	string	''
total	total	The total number of records. This is a mandatory parameter.	number	undefined
#Events
Event	Description	Type
fwChange	Triggered when either previous or next button is clicked.	CustomEvent<any>
#Methods
#nextPage() => Promise<void>
Navigates to next set of records if available.

#Returns
Type: Promise<void>

#previousPage() => Promise<void>
Navigates to previous set of records if available.

#Returns
Type: Promise<void>

#Dependencies
#Depends on
fw-button-group
fw-button
fw-icon
#Graph
graph TD;
  fw-pagination --> fw-button-group
  fw-pagination --> fw-button
  fw-pagination --> fw-icon
  fw-button --> fw-spinner
  fw-button --> fw-icon
  style fw-pagination fill:#f9f,stroke:#333,stroke-width:4px
Built with ❤ at Freshworks


refer this pagination and add pagination to this code for each tab ok



// Final WOrking but Without FW Pagination

import React, { useState, useEffect, useRef } from "react";
import { FwTabs, FwTab, FwTabPanel, FwSpinner } from "@freshworks/crayons/react";
import AutomationCard from "./AutomationCard";
import { getTicketCreationRules, getTicketUpdationRules, getHourlyRules } from '../common';

const getRuleSignature = (rule) => {
  return JSON.stringify({
    conditions: rule.summary.conditions,
    actions: rule.summary.actions,
  });
};

const groupDuplicates = (rules) => {
  const grouped = {};
  rules.forEach((rule) => {
    const signature = getRuleSignature(rule);
    if (!grouped[signature]) {
      grouped[signature] = [];
    }
    grouped[signature].push(rule);
  });
  return Object.values(grouped);
};

const AutomationTabs = ({ client }) => {
  const [searchTerm, setSearchTerm] = useState("");
  const [searchTriggered, setSearchTriggered] = useState(false);
  const [activeTab, setActiveTab] = useState("ticketcreate");

  const [ticketCreationRules, setTicketCreationRules] = useState([]);
  const [ticketUpdateRules, setTicketUpdateRules] = useState([]);
  const [hourlyTriggerRules, setHourlyTriggerRules] = useState([]);

  const [loading, setLoading] = useState(true);
  const loaderRef = useRef(null);

  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 30; 

  useEffect(() => {
    const fetchRules = async () => {
      setLoading(true);
      await Promise.all([
        getTicketCreationRules(client, setTicketCreationRules),
        getTicketUpdationRules(client, setTicketUpdateRules),
        getHourlyRules(client, setHourlyTriggerRules),
      ]);
      setLoading(false);
    };

    fetchRules();
  }, [client]);

  const getFilteredGroups = (rules) => {
    if (!searchTriggered || !searchTerm.trim()) return groupDuplicates(rules);
    return groupDuplicates(rules).filter((group) =>
      group.some(
        (rule) =>
          rule.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
          rule.description?.toLowerCase().includes(searchTerm.toLowerCase())
      )
    );
  };

  const paginateGroups = (groups) => {
    const startIdx = (currentPage - 1) * itemsPerPage;
    return groups.slice(startIdx, startIdx + itemsPerPage);
  };

  const renderPagination = (groups) => {
    const totalPages = Math.ceil(groups.length / itemsPerPage);

    return (
      <div style={{ textAlign: 'center', marginTop: '20px' }}>
        <button 
          onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
          disabled={currentPage === 1}
        >
          Previous
        </button>
        {[...Array(totalPages).keys()].map(i => (
          <button 
            key={i + 1} 
            onClick={() => setCurrentPage(i + 1)} 
            style={{ fontWeight: currentPage === i + 1 ? 'bold' : 'normal', margin: '0 5px' }}
          >
            {i + 1}
          </button>
        ))}
        <button 
          onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
          disabled={currentPage === totalPages}
        >
          Next
        </button>
      </div>
    );
  };

  const renderGroupedRules = (groups) => {
    if (loading) {
      return (
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '200px' }}>
          <FwSpinner size="medium" color="green" />
        </div>
      );
    }

    const paginatedGroups = paginateGroups(groups);

    return paginatedGroups.length > 0 ? (
      paginatedGroups.map((group, index) => (
        <div key={index} className="fw-card-1 fw-py-16" style={{ border: "1px solid #ddd", borderRadius: "8px", marginBottom: "20px", marginTop: "20px", padding: "10px 16px", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)", width: "80%", marginLeft: "auto", marginRight: "auto" }}>
          {group.map((rule, idx) => (
            <AutomationCard key={idx} rule={rule} index={idx + 1} isFirstInGroup={idx === 0} />
          ))}
        </div>
      ))
    ) : (
      <p style={{ textAlign: "center", marginTop: "20px" }}>No Rules Found Matched Your Search: {searchTerm}</p>
    );
  };

  const getRulesByTab = () => {
    switch (activeTab) {
      case "ticketcreate":
        return ticketCreationRules;
      case "ticketupdate":
        return ticketUpdateRules;
      case "hourly":
        return hourlyTriggerRules;
      default:
        return [];
    }
  };

  return (
    <>
      <h2>Automations - Rules</h2>
      <input
        type="text"
        placeholder="Search by name or description"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <button onClick={() => { setSearchTriggered(true); setCurrentPage(1); }}>Search</button>

      <FwTabs onFwChange={(e) => { setActiveTab(e.target.panel); setCurrentPage(1); }}>
        <FwTab slot="tab" panel="ticketcreate">Ticket Create</FwTab>
        <FwTab slot="tab" panel="ticketupdate">Ticket Update</FwTab>
        <FwTab slot="tab" panel="hourly">Hourly Triggers</FwTab>

        <FwTabPanel name="ticketcreate">
          {renderGroupedRules(getFilteredGroups(ticketCreationRules))}
          {renderPagination(getFilteredGroups(ticketCreationRules))}
        </FwTabPanel>

        <FwTabPanel name="ticketupdate">
          {renderGroupedRules(getFilteredGroups(ticketUpdateRules))}
          {renderPagination(getFilteredGroups(ticketUpdateRules))}
        </FwTabPanel>

        <FwTabPanel name="hourly">
          {renderGroupedRules(getFilteredGroups(hourlyTriggerRules))}
          {renderPagination(getFilteredGroups(hourlyTriggerRules))}
        </FwTabPanel>
      </FwTabs>
    </>
  );
};

export default AutomationTabs;