Slicing UI - Biometric(Face Recog-Summary)

src/assets/icon/index.js

@@ -1,9 +1,35 @@
 import OCR from './ocr.png';
 import SmsAnnounce from './sms.png';
-import OTP from './sms-otp.png'
+import OTP from './sms-otp.png';
+
+import Enroll from './total-enroll.png';
+import Verify from './total-verify.png';
+import Compare from './total-compare.png';
+import Liveness from './total-liveness.png';
+import Search from './total-search.png';
+import Transaction from './total-transaction.png';
+import Extract from './total-extract.png';
+import Quality from './total-quality.png';
+import AsyncIcon from './total-async.png';
+import QualityAsync from './total-quality-async.png';
+import Failed from './total-failed.png'
+import NoAvailable from './no-available.png';
 
 export {
     OCR,
     SmsAnnounce,
-    OTP
+    OTP,
+
+    Enroll,
+    Verify,
+    Compare,
+    Liveness,
+    Search,
+    Transaction,
+    NoAvailable,
+    Extract,
+    Quality,
+    AsyncIcon,
+    QualityAsync,
+    Failed,
 }

src/screens/Biometric/FaceRecognition/Summary.jsx

@@ -1,11 +1,273 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react';
+import {
+  Enroll,
+  Verify,
+  Compare,
+  Liveness,
+  Search,
+  Transaction
+} from '../../../assets/icon';
 
 const Summary = () => {
-  return (
+  const [startDate, setStartDate] = useState('');
-    <div>
+  const [endDate, setEndDate] = useState('');
-      <h1>Summary</h1>
+  const [application, setApplication] = useState('');
-    </div>
+  const [isMobile, setIsMobile] = useState(false);
-  )
-}
 
-export default Summary
+  const menuData = [
+    { id: 1, value: '150', label: 'Total Transaction', icon: Transaction },
+    { id: 2, value: '4', label: 'Total Enroll', icon: Enroll },
+    { id: 3, value: '65', label: 'Total Verify', icon: Verify },
+    { id: 6, value: '900', label: 'Total Compare', icon: Compare },
+    { id: 4, value: '22', label: 'Total Search', icon: Search },
+    { id: 5, value: '23', label: 'Total Liveness', icon: Liveness },
+  ];
+
+  const handleApply = () => {
+    console.log({ startDate, endDate, application });
+  };
+
+  const handleCancel = () => {
+    setStartDate('');
+    setEndDate('');
+    setApplication('');
+  };
+
+  // Detect if the device is mobile based on window width
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 768); // Define mobile screen as width <= 768px
+    };
+
+    // Initialize on component mount
+    handleResize();
+
+    // Add event listener to update state on resize
+    window.addEventListener('resize', handleResize);
+
+    // Cleanup event listener on component unmount
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return (
+    <div style={styles.container}>
+      {/* Welcome Message */}
+      <div
+        className="row-card border-left border-primary shadow mb-4"
+        style={{ backgroundColor: '#E2FBEA' }}
+      >
+        <div className="d-flex flex-column justify-content-start align-items-start p-4">
+          <div>
+            <h4 className="mb-3 text-start">
+              <i className="fas fa-warning fa-bold me-3"></i>Alert
+            </h4>
+            <p className="mb-0 text-start">
+              Get started now by creating an Application ID and explore all the demo services available on the dashboard.
+              Experience the ease and flexibility of trying out all our features firsthand.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div style={styles.summaryContainer}>
+        <div style={isMobile ? styles.filtersMobile : styles.filters}>
+          {/* Row 1: Start Date and End Date */}
+          <div style={styles.filterRow}>
+            <input
+              type="date"
+              value={startDate}
+              onChange={(e) => setStartDate(e.target.value)}
+              style={styles.filterInput}
+              placeholder="Start Date"
+            />
+            <input
+              type="date"
+              value={endDate}
+              onChange={(e) => setEndDate(e.target.value)}
+              style={styles.filterInput}
+              placeholder="End Date"
+            />
+          </div>
+
+          {/* Row 2: Application Select */}
+          <div style={styles.filterRow}>
+            <select
+              value={application}
+              onChange={(e) => setApplication(e.target.value)}
+              style={styles.filterInput}
+            >
+              <option value="">Application</option>
+              <option value="App1">App1</option>
+              <option value="App2">App2</option>
+            </select>
+          </div>
+
+          {/* Row 3: Apply and Cancel Buttons */}
+          <div style={styles.filterRow}>
+            <button style={styles.applyButton} onClick={handleApply}>
+              Apply
+            </button>
+            <button style={styles.cancelButton} onClick={handleCancel}>
+              Cancel
+            </button>
+          </div>
+        </div>
+
+        <div style={isMobile ? styles.summaryCardsMobile : styles.summaryCards}>
+          {menuData.map((item) => (
+            <div key={item.id} style={styles.card}>
+              <div style={styles.textContainer}>
+                <h2 style={styles.cardTitle}>{item.value}</h2>
+                <p style={styles.cardText}>{item.label}</p>
+              </div>
+              <div style={styles.iconContainer}>
+                <img src={item.icon} alt={item.label} style={styles.icon} />
+              </div>
+            </div>
+          ))}
+        </div>
+
+
+      </div>
+    </div>
+  );
+};
+
+const styles = {
+  container: {
+    margin: '3rem',
+  },
+  filters: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    marginBottom: '20px',
+    flexDirection: 'row', // Horizontal layout on desktop
+    gap: '10px',
+  },
+  filtersMobile: {
+    display: 'flex',
+    flexDirection: 'column', // Vertical layout on mobile
+    gap: '15px',
+  },
+  filterRow: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    gap: '10px',
+    width: '100%',
+  },
+  filterInput: {
+    padding: '10px',
+    border: '1px solid #ccc',
+    borderRadius: '5px',
+    fontSize: '16px',
+    width: '48%', // Adjust width to take up 48% of the row for input elements
+  },
+  applyButton: {
+    backgroundColor: '#0542cc',
+    color: '#fff',
+    padding: '10px 20px',
+    border: 'none',
+    borderRadius: '5px',
+    cursor: 'pointer',
+    width: '48%', // Adjust button width to take half of the row
+  },
+  cancelButton: {
+    backgroundColor: '#fff',
+    color: '#000',
+    padding: '10px 20px',
+    border: '1px solid gray',
+    borderRadius: '5px',
+    cursor: 'pointer',
+    width: '48%', // Adjust button width to take half of the row
+  },
+  summaryContainer: {
+    padding: '20px',
+    border: '0.1px solid rgba(0, 0, 0, 0.2)',
+    borderLeft: '4px solid #0542cc',
+    borderRadius: '10px',
+    width: '100%',
+  },
+  summaryCards: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(4, 1fr)', // 4 columns on desktop
+    gap: '20px',
+    marginTop: '20px',
+  },
+  summaryCardsMobile: {
+    display: 'grid',
+    gridTemplateColumns: '1fr', // 1 column on mobile (full width)
+    gap: '15px',
+    marginTop: '20px',
+  },
+  card: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '15px', // Reduced padding for a more compact card
+    backgroundColor: 'white',
+    borderRadius: '8px', // Slightly smaller border-radius for a sharper look
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+    textAlign: 'left',
+    minWidth: '200px', // Ensure minimum width for mobile responsiveness
+    maxWidth: '300px', // Limit the maximum width to prevent cards from becoming too wide
+    width: '100%',
+    transition: 'transform 0.3s ease', // Smooth transition for hover effects
+  },
+  cardHover: {
+    transform: 'scale(1.05)', // Slight zoom on hover for interactivity
+  },
+  iconContainer: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  textContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  icon: {
+    width: '36px', // Smaller icon size for a more compact card
+    height: '36px', // Matching height for the icon
+  },
+  cardTitle: {
+    fontSize: '18px', // Smaller font size for title to prevent overflow
+    margin: '0',
+    fontWeight: 'bold',
+  },
+  cardText: {
+    fontSize: '12px', // Smaller text size for description to keep it balanced
+    color: '#555',
+  },
+
+  // Optional: Hover effect for the cards to enhance interactivity
+  cardHover: {
+    transform: 'scale(1.05)', // Slight zoom effect when hovering over card
+  },
+
+  // Media query for smaller screens (e.g., phones in portrait mode)
+  "@media (max-width: 768px)": {
+    summaryCards: {
+      gridTemplateColumns: '1fr', // 1 column on mobile screens
+    },
+    card: {
+      padding: '10px', // Smaller padding for smaller screens
+      minWidth: '180px', // Adjust min width for mobile devices
+      maxWidth: '250px', // Adjust max width for mobile devices
+    },
+    icon: {
+      width: '30px', // Slightly smaller icon size for mobile
+      height: '30px', // Matching height for mobile icon
+    },
+    cardTitle: {
+      fontSize: '16px', // Smaller font size for the card title
+    },
+    cardText: {
+      fontSize: '10px', // Smaller font size for card description
+    },
+  },
+};
+
+export default Summary;