feat: pagination and search in dashboard

Author: darkhorse-420

src/ui/components/Filtering/Filtering.jsx

@@ -1,39 +1,18 @@
-/* Search.css */
-
-.search-container {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-  margin-top: 10px;
-  margin-right: 10 px;
+.search-bar {
+  width: 100%;
+  max-width:100%; /* Sets a maximum width for the bar, adjust as needed */
+  margin: 0 auto 20px auto; /* Centering the search bar with margin */
 }
 
 .search-input {
+  width: 100%;
   padding: 10px;
-  margin-right: 8px;
+  font-size: 16px;
   border: 1px solid #ccc;
-  border-radius: 10px;
-  width: 200px; /* Adjust width as needed */
-  font-size: 14px;
-  transition: border-color 0.3s;
+  border-radius: 4px;
+  box-sizing: border-box; /* Ensures padding is included in the width calculation */
 }
 
 .search-input:focus {
-  border-color: #007bff; /* Change to your desired focus color */
-  outline: none; /* Remove default outline */
-}
-
-.search-button {
-  padding: 10px 16px;
-  border: none;
-  border-radius: 10px;
-  background-color: #007bff; /* Change to your desired button color */
-  color: white;
-  cursor: pointer;
-  font-size: 14px;
-  transition: background-color 0.3s;
-}
-
-.search-button:hover {
-  background-color: #0056b3; /* Darker shade for hover effect */
+  border-color: #007bff; /* Change border color when focused */
 }

src/ui/components/Search/Search.css

@@ -1,42 +1,37 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
+import { TextField } from '@material-ui/core';
 import './Search.css';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import SearchIcon from '@material-ui/icons/Search'; // Import the Search Icon
 
-export default function Search({ placeholder = 'Search...', onSearch }) {
-  const [query, setQuery] = useState('');
 
-  const handleInputChange = (e) => {
-    setQuery(e.target.value);
-  };
-
-  const handleSearch = () => {
-    onSearch(query);
-  };
-
-  const handleKeyDown = (event) => {
-    if (event.key === 'Enter') {
-      handleSearch(); 
-    }
+export default function Search({ onSearch }) {
+  const handleSearchChange = (event) => {
+    const query = event.target.value;
+    onSearch(query);  // Pass the search query to parent component
   };
 
   return (
-    <div className="search-container">
-      <input
-        type="text"
-        placeholder={placeholder}
-        value={query}
-        onChange={handleInputChange}
-        onKeyDown={handleKeyDown} 
-        className="search-input" 
+    <div style={{ margin: '20px 0' }}>
+      <TextField
+        label="Search"
+        variant="outlined"
+        fullWidth
+        margin="normal"
+        onChange={handleSearchChange}  // Trigger onSearch on every change
+        placeholder="Search..."
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <SearchIcon />
+            </InputAdornment>
+          ),
+        }}
       />
-      <button onClick={handleSearch} className="search-button">
-        Search
-      </button>
     </div>
   );
 }
 
-Search.propTypes = {
-  placeholder: PropTypes.string,
-  onSearch: PropTypes.func.isRequired,
-};
+
+
+

src/ui/components/Search/Search.jsx

@@ -4,13 +4,18 @@ import GridContainer from '../../components/Grid/GridContainer';
 import PushesTable from './components/PushesTable';
 import CustomTabs from '../../components/CustomTabs/CustomTabs';
 
+
 import { Visibility, CheckCircle, Cancel, Block } from '@material-ui/icons';
 
 export default function Dashboard() {
+
+
+
   return (
     <div>
       <GridContainer>
         <GridItem xs={12} sm={12} md={12}>
+        
           <CustomTabs
             headerColor='primary'
             tabs={[
@@ -23,23 +28,27 @@ export default function Dashboard() {
                     authorised={false}
                     rejected={false}
                     canceled={false}
+                    
                   />
                 ),
               },
               {
                 tabName: 'Approved',
                 tabIcon: CheckCircle,
-                tabContent: <PushesTable authorised={true} />,
+                tabContent: <PushesTable 
+                  authorised={true}
+                  
+                    />,
               },
               {
                 tabName: 'Canceled',
                 tabIcon: Cancel,
-                tabContent: <PushesTable authorised={false} rejected={false} canceled={true} />,
+                tabContent: <PushesTable authorised={false} rejected={false} canceled={true}  />,
               },
               {
                 tabName: 'Rejected',
                 tabIcon: Block,
-                tabContent: <PushesTable authorised={false} rejected={true} canceled={false} />,
+                tabContent: <PushesTable authorised={false} rejected={true} canceled={false}  />,
               },
             ]}
           />