ui changes

src/App.css

@@ -24,3 +24,9 @@ button{
   inset: 0;
   background: rgba(255, 255, 255, 0.7); /* white overlay */
 }
+.profile-img-box {
+  background-image: url("./assets/images/frame1.jpg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}

src/components/matches/MatchesProfilesTab.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Crown, Bookmark, CurrencyIcon, Currency, Wallet, Receipt, Sparkles, MoonStar, IdCard } from "lucide-react";
+import { Crown, Bookmark, CurrencyIcon, Currency, Wallet, Receipt, Sparkles, MoonStar, IdCard, RockingChair, LocateFixed, School, WorkflowIcon } from "lucide-react";
 import CakeIcon from "@mui/icons-material/Cake";
 import GroupsIcon from "@mui/icons-material/Groups";
 import SchoolIcon from "@mui/icons-material/School";
@@ -40,7 +40,7 @@ function ProfileCard({ profile }) {
           initial={{ scale: 0 }}
           animate={{ scale: 1 }}
           transition={{ delay: 0.2, type: "spring" }}
-          className="absolute top-4 left-4 z-10 bg-orange-500 rounded-full p-2 shadow-lg"
+          className="absolute top-4 left-4 z-10 bg-red-900 rounded-full p-2 shadow-lg"
         >
           <Crown className="w-5 h-5 text-white" />
         </motion.div>
@@ -254,6 +254,34 @@ export default function MatchesInterface() {
       description: "Matches you have viewed",
       category: "Based on activity",
     },
+    {
+      id: "newly-joined",
+      icon: <RockingChair className="w-6 h-6" />,
+      title: "Newly Joined",
+      description: "Matches who Joined within the last 30 days",
+      category: "Based on activity",
+    },
+     {
+      id: "location",
+      icon: <LocateFixed className="w-6 h-6" />,
+      title: "Location matches",
+      description: "Matches near your location",
+      category: "Based on activity",
+    },
+     {
+      id: "education",
+      icon: <School className="w-6 h-6" />,
+      title: "Education matches",
+      description: "Matches near your education match",
+      category: "Based on activity",
+    },
+    {
+      id: "job",
+      icon: <WorkflowIcon className="w-6 h-6" />,
+      title: "Job matches",
+      description: "Matches near your job",
+      category: "Based on activity",
+    },
   ];
 
   const profiles = [

src/components/profiledetail/MatrimonyProfile.jsx

@@ -18,8 +18,10 @@ import "swiper/css";
 import "swiper/css/navigation";
 import "swiper/css/pagination";
 import "swiper/css/thumbs";
+import { useNavigate } from "react-router-dom";
 
 const MatrimonyProfile = () => {
+  const navigate = useNavigate();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [showMenu, setShowMenu] = useState(false);
   const [thumbsSwiper, setThumbsSwiper] = useState(null);
@@ -206,8 +208,13 @@ const MatrimonyProfile = () => {
 
             {/* Action Buttons */}
             <div className="flex justify-start gap-3">
-              <button className="w-[fit-content]  border-2 border-gray-300 text-gray-700 py-2  px-6 rounded-full hover:bg-gray-50 transition-colors flex items-center justify-center gap-2 text-sm">
+              <button 
+              // onClick={()=>{
+              //   navigate("/chat")
+              // }}
+              className="w-[fit-content]  border-2 border-gray-300 text-gray-700 py-2  px-6 rounded-full hover:bg-gray-50 transition-colors flex items-center justify-center gap-2 text-sm">
                 <X className="w-5 h-5" /> Don't Show
+                 {/* Message */}
               </button>
               {/* <button className="w-[fit-content]  border-2 border-orange-500 text-[#034E08] py-2  px-6 rounded-full hover:bg-orange-50 transition-colors flex items-center justify-center gap-2 text-sm">
                 <SkipForward className="w-5 h-5" /> Skip
@@ -438,7 +445,8 @@ const MatrimonyProfile = () => {
             <div className="flex items-center">
               <span className="text-gray-600 w-40">Date Of Birth</span>
               <span className="text-gray-400">:</span>
-              <button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
+              <span className="ml-3 text-gray-900"> 23-12-1991</span>
+              {/* <button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
                 <svg
                   className="w-3 h-3"
                   fill="currentColor"
@@ -452,12 +460,13 @@ const MatrimonyProfile = () => {
                   />
                 </svg>
                 Upgrade to view
-              </button>
+              </button> */} 
             </div>
             <div className="flex items-center">
               <span className="text-gray-600 w-40">Star</span>
               <span className="text-gray-400">:</span>
-              <button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
+                <span className="ml-3 text-gray-900">Piscus</span>
+              {/* <button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
                 <svg
                   className="w-3 h-3"
                   fill="currentColor"
@@ -471,12 +480,13 @@ const MatrimonyProfile = () => {
                   />
                 </svg>
                 Upgrade to view
-              </button>
+              </button> */}
             </div>
             <div className="flex items-center">
               <span className="text-gray-600 w-40">Rassi</span>
               <span className="text-gray-400">:</span>
-              <button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
+                <span className="ml-3 text-gray-900"> Revathy</span>
+              {/* <button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
                 <svg
                   className="w-3 h-3"
                   fill="currentColor"
@@ -490,9 +500,9 @@ const MatrimonyProfile = () => {
                   />
                 </svg>
                 Upgrade to view
-              </button>
+              </button> */}
             </div>
-            <div className="flex items-center">
+            {/* <div className="flex items-center">
               <span className="text-gray-600 w-40">Horoscope</span>
               <span className="text-gray-400">:</span>
               <button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
@@ -510,7 +520,7 @@ const MatrimonyProfile = () => {
                 </svg>
                 Upgrade to view
               </button>
-            </div>
+            </div> */}
             <div className="flex">
               <span className="text-gray-600 w-40">Employment</span>
               <span className="text-gray-400">:</span>

src/feature/FilterForm.jsx

@@ -525,7 +525,7 @@ const FilterForm = () => {
                   </Select>
                 </FormControl>
 
-                <FormControl fullWidth>
+                {/* <FormControl fullWidth>
                   <InputLabel>Smoking Habits</InputLabel>
                   <Select
                     value={filters.smokingHabits}
@@ -559,7 +559,7 @@ const FilterForm = () => {
                     <MenuItem value="Non-Drinker">Non-Drinker</MenuItem>
                     <MenuItem value="Social Drinker">Social Drinker</MenuItem>
                   </Select>
-                </FormControl>
+                </FormControl> */}
               </div>
             </AccordionDetails>
           </Accordion>

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>
   );

src/styles/addon.css

@@ -0,0 +1,7 @@
+.profile-img-box {
+  background-image: url("/assets/images/frame1.jpg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  padding: 20px;
+}