block,unblock,report, shortlisted changes in detail page

src/api/apiEndpoints.js

@@ -76,7 +76,10 @@ export const API_ENDPOINTS = {
   SUBSCRIPTION_PLANS: "subscription-plans",
   SUBSCRIPTION_PURCHASE_RAZORPAY: "subscription-purchase-razorpay",
   SUBSCRIPTION_HISTORY: "subscription-history",
+
+  //Report and Block profile
+  REPORT_PROFILE : "report_profile",
+  BLOCK_PROFILE: "block_profile",
 };
 
-
+// https://www.thirukalyanam.amrithaa.net/backend/api/report_profile?profile_id=151&reason=test
-

src/components/matches/MatchesProfilesTab.jsx

@@ -201,16 +201,14 @@ useEffect(() => {
                         dispatch(updateFilter({ filter_type: finalFilterType }));
                       }}
 
-                  className={`p-4 rounded-lg mb-3 cursor-pointer transition-all ${
+                      className={`p-4 rounded-lg mb-3 cursor-pointer transition-all ${selectedTab === tab.id
-                    selectedTab === tab.id
                           ? "bg-green-50 border-l-4 border-green-600"
                           : "hover:bg-gray-50"
                         }`}
                     >
                       <div className="flex items-start gap-3">
                         <div
-                      className={`mt-1 ${
+                          className={`mt-1 ${selectedTab === tab.id
-                        selectedTab === tab.id
                               ? "text-green-600"
                               : "text-gray-600"
                             }`}
@@ -220,8 +218,7 @@ useEffect(() => {
                         <div className="flex-1">
                           <div className="flex items-center justify-between">
                             <h3
-                          className={`font-semibold text-base ${
+                              className={`font-semibold text-base ${selectedTab === tab.id
-                            selectedTab === tab.id
                                   ? "text-green-900"
                                   : "text-gray-900"
                                 }`}
@@ -229,8 +226,7 @@ useEffect(() => {
                               {tab.title}
                             </h3>
                             <svg
-                          className={`w-5 h-5 ${
+                              className={`w-5 h-5 ${selectedTab === tab.id
-                            selectedTab === tab.id
                                   ? "text-green-600"
                                   : "text-gray-400"
                                 }`}

src/components/profiledashboard/DailyRecommendedCard.jsx

@@ -180,11 +180,13 @@ const DailyRecommendedCard = ({ profiles: initialProfiles = [] }) => {
       e.stopPropagation();
       try {
         const res = await shortlistProfile(profile.id);
-        if (res.status === "success") {
+        console.log(res);
+        if (res.status === "success" || res.message) {
           setIsShortlisted(!isShortlisted);
-          toast.success(res.data.message || "Updated shortlist status");
+          toast.success(res.message || "Updated shortlist status");
         }
       } catch (error) {
+        console.log(error);
         toast.error("Failed to update shortlist");
       }
     };

src/components/profiledetail/MatrimonyProfile.jsx

@@ -28,7 +28,9 @@ import "swiper/css/pagination";
 import "swiper/css/thumbs";
 import { useNavigate } from "react-router-dom";
 import { sendInterest, shortlistProfile } from "../../services/shortlistapi";
+import { reportProfile, blockProfile } from "../../services/profileActionApi";
 import { toast } from "react-hot-toast";
+import ReportModel from "../../feature/ReportModel";
 import UpgradeModal from "../common/UpgradeModal";
 import axiosInstance, { apiForFiles } from "../../api/axiosInstance";
 import { API_ENDPOINTS } from "../../api/apiEndpoints";
@@ -69,6 +71,8 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
   const [isCreatingChat, setIsCreatingChat] = useState(false);
   const [modalTitle, setModalTitle] = useState("");
   const [modalMessage, setModalMessage] = useState("");
+  const [reportModalOpen, setReportModalOpen] = useState(false);
+  const [reportActionType, setReportActionType] = useState("report");
 
   const queryClient = useQueryClient();
 
@@ -308,10 +312,45 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
   const handleShortlist = async () => {
     try {
       const res = await shortlistProfile(profile.id);
-      toast.success(res.message || "Profile shortlisted successfully");
+      toast.success(res.message || "Updated shortlist status");
       if (onRefresh) onRefresh(false);
+      queryClient.invalidateQueries();
     } catch (error) {
-      toast.error(error.message || "Failed to shortlist");
+      toast.error(error.message || "Failed to update shortlist");
+    }
+  };
+
+  const openReportModal = (type) => {
+    setReportActionType(type);
+    setReportModalOpen(true);
+    setShowMenu(false);
+  };
+
+  const handleReportAction = async (reason) => {
+    try {
+      if (reportActionType === 'report') {
+        const res = await reportProfile(profile.id, reason);
+        toast.success(res?.message || "Profile Reported successfully");
+      } else {
+        const res = await blockProfile(profile.id, reason);
+        toast.success(res?.message || "Profile Blocked successfully");
+      }
+      if (onRefresh) onRefresh(false);
+      queryClient.invalidateQueries();
+    } catch (error) {
+      toast.error(error?.message || `Failed to ${reportActionType === 'report' ? 'Report' : 'Block'}`);
+    }
+  };
+
+  const handleUnblock = async () => {
+    try {
+      // Calling the same blockProfile API without a model/reason to trigger unblocking
+      const res = await blockProfile(profile.id, "");
+      toast.success(res?.message || "Profile Unblocked successfully");
+      if (onRefresh) onRefresh(false);
+      queryClient.invalidateQueries();
+    } catch (error) {
+      toast.error(error?.message || "Failed to Unblock");
     }
   };
 
@@ -339,6 +378,12 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
 
   return (
     <div className="bg-gray-50 min-h-screen py-8 px-4 sm:px-6 lg:px-8">
+      <ReportModel 
+        open={reportModalOpen} 
+        onClose={() => setReportModalOpen(false)} 
+        onSubmit={handleReportAction} 
+        actionType={reportActionType} 
+      />
       <div
         className="max-w-[1200px] mx-auto 
       bg-white rounded-3xl shadow-xl shadow-gray-200/50 border border-gray-100 overflow-hidden"
@@ -424,9 +469,10 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
                   <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl border z-10">
                     <button 
                       onClick={() => { setShowMenu(false); handleShortlist(); }}
-                      className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3"
+                      className={`w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 ${profile.is_shortlisted === 1 ? 'text-green-700' : ''}`}
                     >
-                      <Bookmark className="w-4 h-4" /> Shortlist
+                      <Bookmark className={`w-4 h-4 ${profile.is_shortlisted === 1 ? 'fill-current text-green-700' : ''}`} /> 
+                      {profile.is_shortlisted === 1 ? "Shortlisted" : "Shortlist"}
                     </button>
                     <button 
                       onClick={() => { setShowMenu(false); navigate("/chat"); }}
@@ -434,10 +480,26 @@ const MatrimonyProfile = ({ data, onRefresh }) => {
                     >
                       <MessageCircle className="w-4 h-4" /> Send Message
                     </button>
-                    <button className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3">
+                    <button 
-                      <Ban className="w-4 h-4" /> Block Profile
+                      onClick={() => {
+                        setShowMenu(false);
+                        if (profile.is_blocked) {
+                          handleUnblock();
+                        } else {
+                          openReportModal('block');
+                        }
+                      }}
+                      className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3"
+                    >
+                      <Ban className="w-4 h-4" /> {profile.is_blocked ? "Unblock Profile" : "Block Profile"}
                     </button>
-                    <button className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 text-red-600">
+                    <button 
+                      onClick={() => {
+                        setShowMenu(false);
+                        openReportModal('report');
+                      }}
+                      className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 text-red-600"
+                    >
                       <Flag className="w-4 h-4" /> Report Profile
                     </button>
                   </div>

src/feature/ReportModel.jsx

@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from "react";
+import { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Box, Button, TextField } from "@mui/material";
+import { X } from "lucide-react";
+
+const ReportModel = ({ open, onClose, onSubmit, actionType }) => {
+    const [reason, setReason] = useState("");
+
+    useEffect(() => {
+        if (open) {
+            setReason("");
+        }
+    }, [open]);
+
+    const handleSubmit = () => {
+        onSubmit(reason);
+        onClose();
+    };
+
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            fullWidth
+            maxWidth="sm"
+        >
+            <DialogTitle sx={{ background: "#f5fbff" }}>
+                <Box display="flex" alignItems="center" justifyContent="space-between">
+                    <span className="capitalize" style={{ textTransform: 'capitalize' }}>
+                        {actionType === 'block' ? 'Block Profile' : 'Report Profile'}
+                    </span>
+                    <IconButton onClick={onClose} aria-label="close">
+                        <X size={20} />
+                    </IconButton>
+                </Box>
+            </DialogTitle>
+
+            <DialogContent dividers>
+                <Box mt={1}>
+                    <TextField
+                        fullWidth
+                        multiline
+                        rows={4}
+                        variant="outlined"
+                        placeholder={`Enter your reason for ${actionType === 'block' ? 'blocking' : 'reporting'} this profile...`}
+                        value={reason}
+                        onChange={(e) => setReason(e.target.value)}
+                    />
+                </Box>
+            </DialogContent>
+            <DialogActions sx={{ p: 2, background: "#f5fbff" }}>
+                <Button onClick={onClose} color="inherit">
+                    Cancel
+                </Button>
+                <Button
+                    onClick={handleSubmit}
+                    variant="contained"
+                    disabled={!reason.trim()}
+                    sx={{
+                        bgcolor: actionType === 'block' ? '#d32f2f' : '#034E08',
+                        '&:hover': {
+                            bgcolor: actionType === 'block' ? '#b71c1c' : '#023806',
+                        }
+                    }}
+                >
+                    {actionType === 'block' ? 'Block' : 'Submit Report'}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+export default ReportModel;

src/services/profileActionApi.js

@@ -23,7 +23,7 @@ export const getReportedProfiles = async () => {
 
 export const unblockProfile = async (profileId) => {
   try {
-    const response = await axiosInstance.post(`unblock_profile?profile_id=${profileId}`);
+    const response = await axiosInstance.post(`${API_ENDPOINTS.BLOCK_PROFILE}?profile_id=${profileId}`);
     return response.data;
   } catch (error) {
     console.error("Error unblocking profile:", error);
@@ -61,3 +61,18 @@ export const updateInterestStatus = async (id, status) => {
   }
 };
 
+export const reportProfile = async (profileId, reason) => {
+  const response = await axiosInstance.post(`${API_ENDPOINTS.REPORT_PROFILE}?profile_id=${profileId}&reason=${reason}`);
+  if (response.data?.status === "error") {
+    throw new Error(response.data.message || "Failed to report");
+  }
+  return response.data;
+};
+
+export const blockProfile = async (profileId, reason) => {
+  const response = await axiosInstance.post(`${API_ENDPOINTS.BLOCK_PROFILE}?profile_id=${profileId}&reason=${reason}`);
+  if (response.data?.status === "error") {
+    throw new Error(response.data.message || "Failed to block");
+  }
+  return response.data;
+};