ui changes

src/pages/ChatPage.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Search, MoreVertical, Send, Phone, Video, Check, CheckCheck, ArrowLeft, Star, Share2, Flag, Ban, Trash2 } from 'lucide-react';
+import ReportModal from '../components/common/ReportModal';
 
 const ChatUI = () => {
   const [selectedChat, setSelectedChat] = useState(null);
@@ -8,6 +9,7 @@ const ChatUI = () => {
   const [showCallHistory, setShowCallHistory] = useState(false);
   const [showMenu, setShowMenu] = useState(false);
   const [showChatMenu, setShowChatMenu] = useState(false);
+const [openReport, setOpenReport] = useState(false);
 
   const contacts = [
     {
@@ -263,7 +265,13 @@ const ChatUI = () => {
   };
 
   return (
-    <div className="w-full max-w-[1400px] mx-auto flex h-screen gap-[20px] bg-gray-50">
+
+    <>
+    
+    
+        <ReportModal open={openReport} onClose={() => setOpenReport(false)} />
+    
+     <div className="w-full max-w-[1400px] mx-auto flex h-screen gap-[20px] bg-gray-50">
       {/* Sidebar - Chat List */}
       <div className={`w-full md:w-96 bg-white border border-1 border-gray-200 rounded-[10px] flex flex-col ${
         showChatOnMobile || showCallHistory ? 'hidden md:flex' : 'flex'
@@ -450,9 +458,9 @@ const ChatUI = () => {
               </div>
             </div>
             <div className="flex items-center gap-2">
-              <button className="p-2 hover:bg-gray-100 rounded">
+              {/* <button className="p-2 hover:bg-gray-100 rounded">
                 <Phone className="w-5 h-5 text-blue-600" />
-              </button>
+              </button> */}
               <div className="relative">
                 <button 
                   onClick={() => setShowChatMenu(!showChatMenu)}
@@ -471,7 +479,7 @@ const ChatUI = () => {
                       <Share2 className="w-4 h-4" />
                       <span className="text-sm">Share</span>
                     </button>
-                    <button className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 border-b border-gray-100">
+                    <button onClick={() => setOpenReport(true)}  className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 border-b border-gray-100">
                       <Flag className="w-4 h-4" />
                       <span className="text-sm">Report</span>
                     </button>
@@ -571,6 +579,8 @@ const ChatUI = () => {
         </div>
       )}
     </div>
+    </>
+   
   );
 };
 

src/pages/InterestSendPage.jsx

@@ -41,8 +41,8 @@ import groom1 from "../assets/images/groom1.jpg";
 import groom2 from "../assets/images/groom2.jpg";
 import groom3 from "../assets/images/groom3.jpg";
 import groom4 from "../assets/images/groom4.jpg";
-
-
+import frame from "../assets/images/frame1.jpg"
+import "../styles/addon.css"
 
 // Icons as inline SVG components
 const CakeIcon = () => (
@@ -296,7 +296,18 @@ const renderMenu = () => {
 
 
 
-<div classname=" bg-gray-200 overflow-hidden w-full max-w-sm h-[300px]" style={{height:"300px"}}>
+<div 
+classname="profile-img-box overflow-hidden w-full max-w-sm h-[300px]"
+ style={{height:"300px",
+  backgroundImage:`url(${frame})`,
+  backgroundRepeat:"no-repeat",
+  backgroundPosition:"center",
+  backgroundSize:"cover",
+  
+
+
+
+ }}>
 
         <img
           src={profile.image}
@@ -306,7 +317,7 @@ const renderMenu = () => {
 </div>
         {/* White Gradient Overlay */}
         <div
-          className="absolute bottom-0 left-0 right-0 h-35 pointer-events-none"
+          className="absolute bottom-0 left-0 right-0 h-25 pointer-events-none"
           style={{
             background:
               "linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 40%, rgb(255, 255, 255) 100%)",
@@ -319,7 +330,7 @@ const renderMenu = () => {
             {profile.name}
           </h1>
           <p className="text-[14px] text-gray-700 leading-relaxed">
-            Matrimony ID: {profile.matrimonyId}
+             ID: {profile.matrimonyId}
           </p>
         </div>
       </div>
@@ -329,7 +340,7 @@ const renderMenu = () => {
 {(activeTab === "1" || activeTab === "2" || activeTab === "3") && (
   <>
   <div className="flex items-center gap-2">
-          <VisibilityIcon  />
+          <VisibilityIcon sx={{color:"#787777ff", fontSize:"18px"}}  />
           <span className="text-[14px]  text-gray-900">
             {profile.lastseen}
           </span>
@@ -340,13 +351,13 @@ const renderMenu = () => {
 
         <div className="flex items-center gap-4">
           <div className="flex items-center gap-2">
-            <CakeIcon />
+            <CakeIcon sx={{color:"#787777ff", fontSize:"18px"}} />
             <span className="text-[14px]  text-gray-900">
              {profile.age} yr
             </span>
           </div>
           <div className="flex items-center gap-2">
-            <AccessibilityIcon />
+            <AccessibilityIcon sx={{color:"#787777ff", fontSize:"18px"}} />
             <span className="text-[14px]  text-gray-900">
              {profile.height} cm
             </span>
@@ -490,6 +501,19 @@ View Details
       </div>
     </div>
     
+<style>
+{`
+  .profile-img-box {
+    background-image: url("../assets/images/frame1.jpg");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    padding: 20px;
+  }
+`}
+</style>
+
+
     </>
    
   );
@@ -497,12 +521,14 @@ View Details
 
 // Main Component
 export default function InterestSendPage() {
-  const [value, setValue] = useState("1");
+  const [value, setValue] = useState("2");
 
   const handleChange = (event, newValue) => {
     setValue(newValue);
   };
 
+   const [intreasteactiveTab, setIntreasteactiveTab] = useState("receivedintreaste");
+
   // Sample data for different categories
   const profilesData = {
     received: [
@@ -751,17 +777,42 @@ const [profiles, setProfiles] = useState({
     <div className=" py-8 px-0">
       <div className="max-w-[1400px] mx-auto">
         {/* Header */}
-        <div className="text-center mb-8">
-          <h1 className="text-3xl md:text-4xl font-bold text-gray-800 mb-2">
+
+          <div className="flex justify-center mb-8 items-center gap-4">
+        <div className={`cursor-pointer text-center bg-green-50 p-4 rounded-[10px]  mb-8  ${
+              intreasteactiveTab === "receivedintreaste"
+                ? "border-1 border-green-600 text-green-600"
+                : "text-gray-500 hover:text-gray-700"
+            }`}
+               onClick={() => setIntreasteactiveTab("receivedintreaste")}>
+          <h1 className="text-xl md:text-xl font-bold text-gray-800 mb-2">
          Received  Interest 
           </h1>
           <p className="text-gray-600">
             Manage your matrimony profile interests
           </p>
         </div>
+        <div className={`cursor-pointer text-center mb-8 bg-green-50 p-4 rounded-[10px] ${
+              intreasteactiveTab === "sendintreaste"
+                ? "border-1 border-green-600 text-green-600"
+                : "text-gray-500 hover:text-gray-700"
+            }`}   onClick={() => setIntreasteactiveTab("sendintreaste")}>
+          <h1 className="text-xl md:text-xl font-bold text-gray-800 mb-2">
+         Send  Interest 
+          </h1>
+          <p className="text-gray-600">
+            Manage your matrimony profile interests
+          </p>
+        </div>
+</div>
+  {intreasteactiveTab === "receivedintreaste" && (
 
-        {/* MUI Tabs */}
-        <Box sx={{ width: "100%", maxWidth:"1400px", typography: "body1" }}>
+<>
+
+ {/* MUI Tabs */}
+        <Box
+         sx={{ width: "100%", maxWidth:"1400px", typography: "body1" }}
+         >
           <TabContext value={value}>
             <Box
               sx={{
@@ -825,7 +876,7 @@ const [profiles, setProfiles] = useState({
                   },
                 }}
               >
-                <Tab label="All " value="1" />
+                {/* <Tab label="All " value="1" /> */}
                 <Tab label="Pending" value="2" />
                 <Tab label="Accepted" value="3" />
                 <Tab label="Rejected" value="4" />
@@ -870,6 +921,137 @@ const [profiles, setProfiles] = useState({
             </TabPanel>
           </TabContext>
         </Box>
+
+
+</>
+      )}   
+
+
+
+
+       {intreasteactiveTab === "sendintreaste" && (
+
+<>
+
+ {/* MUI Tabs */}
+        <Box
+         sx={{ width: "100%", maxWidth:"1400px", typography: "body1" }}
+         >
+          <TabContext value={value}>
+            <Box
+              sx={{
+               
+                width: "100%",
+                maxWidth: "800px",
+                margin: "0px auto",
+                marginBottom:"40px",
+                display:"flex",
+                justifyContent:"center",
+                background:"#f5fbff",
+                borderRadius:"10px",
+                padding:"20px 15px",
+              }}
+            >
+              <TabList
+                onChange={handleChange}
+                aria-label="interest management tabs"
+                variant="scrollable"
+                // scrollButtons="auto"
+                scrollButtons="on"
+                allowScrollButtonsMobile
+                sx={{
+                  "& .MuiTabs-scrollButtons": {
+                    display: "flex !important", // force visible
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "36px",
+                    height: "36px",
+                    borderRadius: "50%",
+                    backgroundColor: "#034E08",
+                    color: "white",
+                    margin: "0 6px",
+                    boxShadow: "0 2px 5px rgba(0,0,0,0.2)",
+
+                    
+                  },
+
+                  "& .MuiTabs-scrollButtons:hover": {
+                    backgroundColor: "#046b0b",
+                  },
+
+                  "& .MuiTabs-scrollButtons.Mui-disabled": {
+                    opacity: 0.4,
+                    backgroundColor: "#9bcf9d",
+                  },
+
+                  "& .MuiTab-root": {
+                    fontSize: { xs: "14px", sm: "16px" },
+                    fontWeight: 600,
+                    textTransform: "none",
+                    minWidth: { xs: 120, sm: 150 },
+                    color: "#666",
+                  },
+                  "& .Mui-selected": {
+                    color: "#034E08 !important",
+                  },
+                  "& .MuiTabs-indicator": {
+                    backgroundColor: "#034E08",
+                    height: 3,
+                  },
+                }}
+              >
+                {/* <Tab label="All " value="1" /> */}
+                <Tab label="Pending" value="2" />
+                <Tab label="Accepted" value="3" />
+                <Tab label="Rejected" value="4" />
+              </TabList>
+            </Box>
+
+            {/* Received Requests */}
+            <TabPanel value="1" sx={{ padding: "10px 0" }}>
+              <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 
+              w-[100%] max-w-[1400px] mx-auto">
+                {profilesData.received.map((profile) => (
+                   <ProfileCard key={profile.id} profile={profile} activeTab={value} />
+                ))}
+              </div>
+            </TabPanel>
+
+            {/* Sent Requests */}
+            <TabPanel value="2" sx={{ padding: "24px 0" }}>
+              <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 w-[100%] max-w-[1400px] mx-auto">
+                {profilesData.sent.map((profile) => (
+                 <ProfileCard key={profile.id} profile={profile} activeTab={value}  handleDelete={handleDelete}/>
+                ))}
+              </div>
+            </TabPanel>
+
+            {/* Accepted */}
+            <TabPanel value="3" sx={{ padding: "24px 0" }}>
+              <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 w-[100%] max-w-[1400px] mx-auto">
+                {profilesData.accepted.map((profile) => (
+                  <ProfileCard key={profile.id} profile={profile} activeTab={value} />
+                ))}
+              </div>
+            </TabPanel>
+
+            {/* Rejected */}
+            <TabPanel value="4" sx={{ padding: "24px 0" }}>
+              <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 w-[100%] max-w-[1400px] mx-auto">
+                {profilesData.rejected.map((profile) => (
+                  <ProfileCard key={profile.id} profile={profile} activeTab={value} />
+                ))}
+              </div>
+            </TabPanel>
+          </TabContext>
+        </Box>
+
+
+</>
+      )}   
+            
+
+
       </div>
     </div>
   );