@devvistatech/devvista-kit 0.0.10 → 0.0.13

package/components/addOns/functional/contactsDashboard/ContactsDashboard.tsx

@@ -1,367 +1,367 @@
-"use client";
-
-import React, { useState, useEffect, useCallback, useRef } from "react";
-import { Card } from "@/components/other/card";
-import Spinner from "@/components/addOns/non-functional/spinner";
-import { motion } from "framer-motion";
-import { useAuth as useClerkAuth, useSession } from "@clerk/nextjs";
-import { useStrapiAuth } from "@/lib/auth-context";
-import { Bar } from "react-chartjs-2";
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend,
-} from "chart.js";
-import { debounce } from "lodash";
-import { CONTACTS_DASHBOARD } from "./constants/contactsDashboard";
-
-ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
-
-interface Contact {
-  id: number;
-  documentId: string;
-  name: string;
-  lastName: string;
-  email: string;
-  phone: string;
-  subject: string;
-  message: string;
-  submissionDate: string;
-  rawSubmissionDate: string;
-}
-
-// Utility function to truncate text
-const truncateText = (text: string, maxLength: number = 30): string => {
-  if (text.length <= maxLength) return text;
-  return text.slice(0, maxLength) + "...";
-};
-
-const ContactsDashboard: React.FC = () => {
-  const { isSignedIn, userId } = useClerkAuth();
-  const { session } = useSession();
-  const { user, authLoading, error: authError, checkSession } = useStrapiAuth();
-  const [contacts, setContacts] = useState<Contact[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [visibleRows, setVisibleRows] = useState(3);
-  const [selectedYear, setSelectedYear] = useState<number | "all">("all");
-  const [availableYears, setAvailableYears] = useState<number[]>([]);
-  const [retryCount, setRetryCount] = useState(0);
-  const maxRetries = 3;
-  const hasFetchedRef = useRef(false); // Track if fetch has been completed
-
-  const contactsPerRow = 3;
-  const totalRows = Math.ceil(contacts.length / contactsPerRow);
-
-  // Memoize debouncedCheckSession to ensure it doesn't change
-  const debouncedCheckSession = useCallback(
-    debounce(async () => {
-      await checkSession();
-    }, 3000),
-    [checkSession]
-  );
-
-  const fetchContacts = useCallback(async () => {
-    try {
-      setIsLoading(true);
-      const token = await session?.getToken();
-
-      if (!token) {
-        throw new Error(CONTACTS_DASHBOARD.ERRORS.NO_TOKEN);
-      }
-
-      const response = await fetch("/api/contacts", {
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${token}`,
-        },
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(
-          errorData.error ||
-            CONTACTS_DASHBOARD.ERRORS.FETCH_FAILED.replace("${response.status}", response.status.toString())
-        );
-      }
-
-      const result = await response.json();
-
-      const fetchedContacts: Contact[] = (result.data || []).map((contact: any) => ({
-        id: contact.id || 0,
-        documentId: contact.documentId || "",
-        name: contact.name || "Unknown",
-        lastName: contact.lastName || "Unknown",
-        email: contact.email || "N/A",
-        phone: contact.phone || "N/A",
-        subject: contact.subject || "No Subject",
-        message: contact.message || "No Message",
-        submissionDate: contact.submissionDate
-          ? new Date(contact.submissionDate).toLocaleString("en-US", {
-              dateStyle: "medium",
-              timeStyle: "short",
-            })
-          : "N/A",
-        rawSubmissionDate: contact.submissionDate || "",
-      }));
-
-      const validContacts = fetchedContacts.filter(
-        (contact) =>
-          contact.name !== "Unknown" ||
-          contact.lastName !== "Unknown" ||
-          contact.email !== "N/A" ||
-          contact.phone !== "N/A" ||
-          contact.subject !== "No Subject" ||
-          contact.message !== "No Message"
-      );
-
-      const sortedContacts = validContacts.sort((a, b) =>
-        b.rawSubmissionDate
-          ? new Date(b.rawSubmissionDate).getTime() - new Date(a.rawSubmissionDate).getTime()
-          : 0
-      );
-
-      const years = Array.from(
-        new Set(
-          validContacts
-            .filter((contact) => contact.rawSubmissionDate)
-            .map((contact) => new Date(contact.rawSubmissionDate).getFullYear())
-        )
-      ).sort((a, b) => b - a);
-
-      setAvailableYears(years);
-      setContacts(sortedContacts);
-      if (validContacts.length === 0 && fetchedContacts.length > 0) {
-        setError(CONTACTS_DASHBOARD.ERRORS.NO_VALID_CONTACTS);
-      }
-      hasFetchedRef.current = true; // Mark fetch as complete
-    } catch (err) {
-      setError(err instanceof Error ? err.message : CONTACTS_DASHBOARD.ERRORS.UNKNOWN_ERROR);
-      console.error("ContactsDashboard: Fetch error", err);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [session]);
-
-  useEffect(() => {
-    const attemptFetch = async () => {
-      if (authLoading || hasFetchedRef.current) {
-        setIsLoading(false);
-        return;
-      }
-
-      if (!isSignedIn || !user) {
-        setError(authError || CONTACTS_DASHBOARD.ERRORS.UNAUTHORIZED);
-        setIsLoading(false);
-        if (retryCount < maxRetries) {
-          setTimeout(async () => {
-            setRetryCount((prev) => Math.min(prev + 1, maxRetries));
-            await debouncedCheckSession();
-            if (!hasFetchedRef.current) {
-              await fetchContacts();
-            }
-          }, Math.min(Math.pow(2, retryCount) * 1000, 10000));
-        }
-        return;
-      }
-
-      setRetryCount(0);
-      await fetchContacts();
-    };
-
-    attemptFetch();
-  }, [isSignedIn, user, authLoading, authError, debouncedCheckSession, fetchContacts]);
-
-  const handleRetry = useCallback(async () => {
-    setIsLoading(true);
-    setError(null);
-    setRetryCount(0);
-    hasFetchedRef.current = false; // Reset fetch guard
-    await debouncedCheckSession();
-    await fetchContacts();
-  }, [debouncedCheckSession, fetchContacts]);
-
-  const getChartData = () => {
-    const uniqueEmails = new Set<string>();
-    const uniqueContacts = contacts.filter((contact) => {
-      if (contact.email === "N/A" || uniqueEmails.has(contact.email)) {
-        return false;
-      }
-      uniqueEmails.add(contact.email);
-      return true;
-    });
-
-    const filteredContacts =
-      selectedYear === "all"
-        ? uniqueContacts
-        : uniqueContacts.filter(
-            (contact) =>
-              contact.rawSubmissionDate &&
-              new Date(contact.rawSubmissionDate).getFullYear() === selectedYear
-          );
-
-    const leadsByMonth = Array(12).fill(0);
-    filteredContacts.forEach((contact) => {
-      if (contact.rawSubmissionDate) {
-        const month = new Date(contact.rawSubmissionDate).getMonth();
-        leadsByMonth[month]++;
-      }
-    });
-
-    return {
-      labels: CONTACTS_DASHBOARD.UI.MONTH_LABELS,
-      datasets: [
-        {
-          label: "New Leads",
-          data: leadsByMonth,
-          backgroundColor: "rgba(59, 130, 246, 0.5)",
-          borderColor: "rgba(59, 130, 246, 1)",
-          borderWidth: 1,
-        },
-      ],
-    };
-  };
-
-  const chartOptions = {
-    responsive: true,
-    plugins: {
-      legend: { position: "top" as const },
-      title: { display: true, text: CONTACTS_DASHBOARD.UI.CHART_TITLE },
-    },
-    scales: {
-      y: { beginAtZero: true, title: { display: true, text: CONTACTS_DASHBOARD.UI.Y_AXIS_TITLE } },
-      x: { title: { display: true, text: CONTACTS_DASHBOARD.UI.X_AXIS_TITLE } },
-    },
-  };
-
-  const handleShowMore = () => {
-    setVisibleRows((prev) => prev + 3);
-  };
-
-  const handleCloseAll = () => {
-    setVisibleRows(3);
-  };
-
-  if (authLoading || isLoading) {
-    return <Spinner />;
-  }
-
-  if (error || authError) {
-    return (
-      <div className="bg-red-900/50 border-l-4 border-red-600 p-4 rounded-lg backdrop-blur-sm text-center">
-        <p className="text-red-300">{error || authError}</p>
-        <button
-          onClick={handleRetry}
-          className="mt-2 bg-blue-600 text-white px-3 py-1 rounded-lg hover:bg-blue-500"
-        >
-          {CONTACTS_DASHBOARD.BUTTONS.RETRY_BUTTON}
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <section className="bg-gradient-to-br from-blue-600/80 to-gray-800/80 backdrop-blur-md rounded-2xl shadow-lg p-6 border border-blue-500/30 hover:border-blue-400/50 transition-all">
-      <motion.h2
-        initial={{ opacity: 0, y: -20 }}
-        animate={{ opacity: 1, y: 0 }}
-        className="text-2xl font-bold text-blue-200 mb-6"
-      >
-        {CONTACTS_DASHBOARD.UI.SECTION_HEADING}
-      </motion.h2>
-
-      <div className="mb-8">
-        <div className="flex justify-between items-center mb-4">
-          <h3 className="text-lg font-semibold text-blue-200">{CONTACTS_DASHBOARD.UI.CHART_SUBHEADING}</h3>
-          <div>
-            <label htmlFor="yearFilter" className="text-gray-200 mr-2">
-              {CONTACTS_DASHBOARD.UI.YEAR_FILTER_LABEL}
-            </label>
-            <select
-              id="yearFilter"
-              value={selectedYear}
-              onChange={(e) => setSelectedYear(e.target.value === "all" ? "all" : Number(e.target.value))}
-              className="bg-gray-800 text-gray-200 border border-gray-700 rounded px-2 py-1"
-            >
-              <option value="all">{CONTACTS_DASHBOARD.UI.ALL_YEARS_OPTION}</option>
-              {availableYears.map((year) => (
-                <option key={year} value={year}>
-                  {year}
-                </option>
-              ))}
-            </select>
-          </div>
-        </div>
-        <div className="bg-gray-800/50 p-4 rounded-lg">
-          <Bar data={getChartData()} options={chartOptions} />
-        </div>
-      </div>
-
-      <div>
-        {contacts.length === 0 ? (
-          <p className="text-gray-400 text-center py-4">{CONTACTS_DASHBOARD.UI.NO_CONTACTS_MESSAGE}</p>
-        ) : (
-          <>
-            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-              {contacts.slice(0, visibleRows * contactsPerRow).map((contact) => (
-                <Card
-                  key={contact.documentId}
-                  className="bg-gray-800/50 backdrop-blur-md border border-gray-700/50 rounded-2xl p-6 flex flex-col"
-                >
-                  <h3 className="text-xl font-bold text-blue-200 mb-3">
-                    {truncateText(`${contact.name} ${contact.lastName}`)}
-                  </h3>
-                  <p className="text-gray-200 font-medium mb-2">
-                    <strong>{CONTACTS_DASHBOARD.UI.EMAIL_LABEL}</strong>{" "}
-                    <a href={`mailto:${contact.email}`} className="text-blue-300 hover:underline">
-                      {truncateText(contact.email)}
-                    </a>
-                  </p>
-                  <p className="text-gray-200 font-medium mb-2">
-                    <strong>{CONTACTS_DASHBOARD.UI.PHONE_LABEL}</strong>{" "}
-                    <a href={`tel:${contact.phone}`} className="text-blue-300 hover:underline">
-                      {truncateText(contact.phone)}
-                    </a>
-                  </p>
-                  <p className="text-gray-200 font-medium mb-2">
-                    <strong>{CONTACTS_DASHBOARD.UI.SUBJECT_LABEL}</strong> {truncateText(contact.subject)}
-                  </p>
-                  <p className="text-gray-200 font-medium mb-2">
-                    <strong>{CONTACTS_DASHBOARD.UI.MESSAGE_LABEL}</strong> {truncateText(contact.message)}
-                  </p>
-                  <p className="text-gray-200 font-medium">
-                    <strong>{CONTACTS_DASHBOARD.UI.SUBMITTED_LABEL}</strong> {truncateText(contact.submissionDate)}
-                  </p>
-                </Card>
-              ))}
-            </div>
-            <div className="flex gap-4 mt-4">
-              {visibleRows < totalRows && (
-                <button
-                  onClick={handleShowMore}
-                  className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition"
-                >
-                  {CONTACTS_DASHBOARD.BUTTONS.SHOW_MORE_BUTTON}
-                </button>
-              )}
-              {visibleRows > 3 && (
-                <button
-                  onClick={handleCloseAll}
-                  className="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 transition"
-                >
-                  {CONTACTS_DASHBOARD.BUTTONS.CLOSE_ALL_BUTTON}
-                </button>
-              )}
-            </div>
-          </>
-        )}
-      </div>
-    </section>
-  );
-};
-
+"use client";
+
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { Card } from "@/components/other/card";
+import Spinner from "@/components/addOns/non-functional/spinner";
+import { motion } from "framer-motion";
+import { useAuth as useClerkAuth, useSession } from "@clerk/nextjs";
+import { useStrapiAuth } from "@/lib/auth/auth-context";
+import { Bar } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+import { debounce } from "lodash";
+import { CONTACTS_DASHBOARD } from "./constants/contactsDashboard";
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
+
+interface Contact {
+  id: number;
+  documentId: string;
+  name: string;
+  lastName: string;
+  email: string;
+  phone: string;
+  subject: string;
+  message: string;
+  submissionDate: string;
+  rawSubmissionDate: string;
+}
+
+// Utility function to truncate text
+const truncateText = (text: string, maxLength: number = 30): string => {
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength) + "...";
+};
+
+const ContactsDashboard: React.FC = () => {
+  const { isSignedIn, userId } = useClerkAuth();
+  const { session } = useSession();
+  const { user, authLoading, error: authError, checkSession } = useStrapiAuth();
+  const [contacts, setContacts] = useState<Contact[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [visibleRows, setVisibleRows] = useState(3);
+  const [selectedYear, setSelectedYear] = useState<number | "all">("all");
+  const [availableYears, setAvailableYears] = useState<number[]>([]);
+  const [retryCount, setRetryCount] = useState(0);
+  const maxRetries = 3;
+  const hasFetchedRef = useRef(false); // Track if fetch has been completed
+
+  const contactsPerRow = 3;
+  const totalRows = Math.ceil(contacts.length / contactsPerRow);
+
+  // Memoize debouncedCheckSession to ensure it doesn't change
+  const debouncedCheckSession = useCallback(
+    debounce(async () => {
+      await checkSession();
+    }, 3000),
+    [checkSession]
+  );
+
+  const fetchContacts = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      const token = await session?.getToken();
+
+      if (!token) {
+        throw new Error(CONTACTS_DASHBOARD.ERRORS.NO_TOKEN);
+      }
+
+      const response = await fetch("/api/contacts", {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(
+          errorData.error ||
+            CONTACTS_DASHBOARD.ERRORS.FETCH_FAILED.replace("${response.status}", response.status.toString())
+        );
+      }
+
+      const result = await response.json();
+
+      const fetchedContacts: Contact[] = (result.data || []).map((contact: any) => ({
+        id: contact.id || 0,
+        documentId: contact.documentId || "",
+        name: contact.name || "Unknown",
+        lastName: contact.lastName || "Unknown",
+        email: contact.email || "N/A",
+        phone: contact.phone || "N/A",
+        subject: contact.subject || "No Subject",
+        message: contact.message || "No Message",
+        submissionDate: contact.submissionDate
+          ? new Date(contact.submissionDate).toLocaleString("en-US", {
+              dateStyle: "medium",
+              timeStyle: "short",
+            })
+          : "N/A",
+        rawSubmissionDate: contact.submissionDate || "",
+      }));
+
+      const validContacts = fetchedContacts.filter(
+        (contact) =>
+          contact.name !== "Unknown" ||
+          contact.lastName !== "Unknown" ||
+          contact.email !== "N/A" ||
+          contact.phone !== "N/A" ||
+          contact.subject !== "No Subject" ||
+          contact.message !== "No Message"
+      );
+
+      const sortedContacts = validContacts.sort((a, b) =>
+        b.rawSubmissionDate
+          ? new Date(b.rawSubmissionDate).getTime() - new Date(a.rawSubmissionDate).getTime()
+          : 0
+      );
+
+      const years = Array.from(
+        new Set(
+          validContacts
+            .filter((contact) => contact.rawSubmissionDate)
+            .map((contact) => new Date(contact.rawSubmissionDate).getFullYear())
+        )
+      ).sort((a, b) => b - a);
+
+      setAvailableYears(years);
+      setContacts(sortedContacts);
+      if (validContacts.length === 0 && fetchedContacts.length > 0) {
+        setError(CONTACTS_DASHBOARD.ERRORS.NO_VALID_CONTACTS);
+      }
+      hasFetchedRef.current = true; // Mark fetch as complete
+    } catch (err) {
+      setError(err instanceof Error ? err.message : CONTACTS_DASHBOARD.ERRORS.UNKNOWN_ERROR);
+      console.error("ContactsDashboard: Fetch error", err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [session]);
+
+  useEffect(() => {
+    const attemptFetch = async () => {
+      if (authLoading || hasFetchedRef.current) {
+        setIsLoading(false);
+        return;
+      }
+
+      if (!isSignedIn || !user) {
+        setError(authError || CONTACTS_DASHBOARD.ERRORS.UNAUTHORIZED);
+        setIsLoading(false);
+        if (retryCount < maxRetries) {
+          setTimeout(async () => {
+            setRetryCount((prev) => Math.min(prev + 1, maxRetries));
+            await debouncedCheckSession();
+            if (!hasFetchedRef.current) {
+              await fetchContacts();
+            }
+          }, Math.min(Math.pow(2, retryCount) * 1000, 10000));
+        }
+        return;
+      }
+
+      setRetryCount(0);
+      await fetchContacts();
+    };
+
+    attemptFetch();
+  }, [isSignedIn, user, authLoading, authError, debouncedCheckSession, fetchContacts]);
+
+  const handleRetry = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    setRetryCount(0);
+    hasFetchedRef.current = false; // Reset fetch guard
+    await debouncedCheckSession();
+    await fetchContacts();
+  }, [debouncedCheckSession, fetchContacts]);
+
+  const getChartData = () => {
+    const uniqueEmails = new Set<string>();
+    const uniqueContacts = contacts.filter((contact) => {
+      if (contact.email === "N/A" || uniqueEmails.has(contact.email)) {
+        return false;
+      }
+      uniqueEmails.add(contact.email);
+      return true;
+    });
+
+    const filteredContacts =
+      selectedYear === "all"
+        ? uniqueContacts
+        : uniqueContacts.filter(
+            (contact) =>
+              contact.rawSubmissionDate &&
+              new Date(contact.rawSubmissionDate).getFullYear() === selectedYear
+          );
+
+    const leadsByMonth = Array(12).fill(0);
+    filteredContacts.forEach((contact) => {
+      if (contact.rawSubmissionDate) {
+        const month = new Date(contact.rawSubmissionDate).getMonth();
+        leadsByMonth[month]++;
+      }
+    });
+
+    return {
+      labels: CONTACTS_DASHBOARD.UI.MONTH_LABELS,
+      datasets: [
+        {
+          label: "New Leads",
+          data: leadsByMonth,
+          backgroundColor: "rgba(59, 130, 246, 0.5)",
+          borderColor: "rgba(59, 130, 246, 1)",
+          borderWidth: 1,
+        },
+      ],
+    };
+  };
+
+  const chartOptions = {
+    responsive: true,
+    plugins: {
+      legend: { position: "top" as const },
+      title: { display: true, text: CONTACTS_DASHBOARD.UI.CHART_TITLE },
+    },
+    scales: {
+      y: { beginAtZero: true, title: { display: true, text: CONTACTS_DASHBOARD.UI.Y_AXIS_TITLE } },
+      x: { title: { display: true, text: CONTACTS_DASHBOARD.UI.X_AXIS_TITLE } },
+    },
+  };
+
+  const handleShowMore = () => {
+    setVisibleRows((prev) => prev + 3);
+  };
+
+  const handleCloseAll = () => {
+    setVisibleRows(3);
+  };
+
+  if (authLoading || isLoading) {
+    return <Spinner />;
+  }
+
+  if (error || authError) {
+    return (
+      <div className="bg-red-900/50 border-l-4 border-red-600 p-4 rounded-lg backdrop-blur-sm text-center">
+        <p className="text-red-300">{error || authError}</p>
+        <button
+          onClick={handleRetry}
+          className="mt-2 bg-blue-600 text-white px-3 py-1 rounded-lg hover:bg-blue-500"
+        >
+          {CONTACTS_DASHBOARD.BUTTONS.RETRY_BUTTON}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <section className="bg-gradient-to-br from-blue-600/80 to-gray-800/80 backdrop-blur-md rounded-2xl shadow-lg p-6 border border-blue-500/30 hover:border-blue-400/50 transition-all">
+      <motion.h2
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="text-2xl font-bold text-blue-200 mb-6"
+      >
+        {CONTACTS_DASHBOARD.UI.SECTION_HEADING}
+      </motion.h2>
+
+      <div className="mb-8">
+        <div className="flex justify-between items-center mb-4">
+          <h3 className="text-lg font-semibold text-blue-200">{CONTACTS_DASHBOARD.UI.CHART_SUBHEADING}</h3>
+          <div>
+            <label htmlFor="yearFilter" className="text-gray-200 mr-2">
+              {CONTACTS_DASHBOARD.UI.YEAR_FILTER_LABEL}
+            </label>
+            <select
+              id="yearFilter"
+              value={selectedYear}
+              onChange={(e) => setSelectedYear(e.target.value === "all" ? "all" : Number(e.target.value))}
+              className="bg-gray-800 text-gray-200 border border-gray-700 rounded px-2 py-1"
+            >
+              <option value="all">{CONTACTS_DASHBOARD.UI.ALL_YEARS_OPTION}</option>
+              {availableYears.map((year) => (
+                <option key={year} value={year}>
+                  {year}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+        <div className="bg-gray-800/50 p-4 rounded-lg">
+          <Bar data={getChartData()} options={chartOptions} />
+        </div>
+      </div>
+
+      <div>
+        {contacts.length === 0 ? (
+          <p className="text-gray-400 text-center py-4">{CONTACTS_DASHBOARD.UI.NO_CONTACTS_MESSAGE}</p>
+        ) : (
+          <>
+            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+              {contacts.slice(0, visibleRows * contactsPerRow).map((contact) => (
+                <Card
+                  key={contact.documentId}
+                  className="bg-gray-800/50 backdrop-blur-md border border-gray-700/50 rounded-2xl p-6 flex flex-col"
+                >
+                  <h3 className="text-xl font-bold text-blue-200 mb-3">
+                    {truncateText(`${contact.name} ${contact.lastName}`)}
+                  </h3>
+                  <p className="text-gray-200 font-medium mb-2">
+                    <strong>{CONTACTS_DASHBOARD.UI.EMAIL_LABEL}</strong>{" "}
+                    <a href={`mailto:${contact.email}`} className="text-blue-300 hover:underline">
+                      {truncateText(contact.email)}
+                    </a>
+                  </p>
+                  <p className="text-gray-200 font-medium mb-2">
+                    <strong>{CONTACTS_DASHBOARD.UI.PHONE_LABEL}</strong>{" "}
+                    <a href={`tel:${contact.phone}`} className="text-blue-300 hover:underline">
+                      {truncateText(contact.phone)}
+                    </a>
+                  </p>
+                  <p className="text-gray-200 font-medium mb-2">
+                    <strong>{CONTACTS_DASHBOARD.UI.SUBJECT_LABEL}</strong> {truncateText(contact.subject)}
+                  </p>
+                  <p className="text-gray-200 font-medium mb-2">
+                    <strong>{CONTACTS_DASHBOARD.UI.MESSAGE_LABEL}</strong> {truncateText(contact.message)}
+                  </p>
+                  <p className="text-gray-200 font-medium">
+                    <strong>{CONTACTS_DASHBOARD.UI.SUBMITTED_LABEL}</strong> {truncateText(contact.submissionDate)}
+                  </p>
+                </Card>
+              ))}
+            </div>
+            <div className="flex gap-4 mt-4">
+              {visibleRows < totalRows && (
+                <button
+                  onClick={handleShowMore}
+                  className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition"
+                >
+                  {CONTACTS_DASHBOARD.BUTTONS.SHOW_MORE_BUTTON}
+                </button>
+              )}
+              {visibleRows > 3 && (
+                <button
+                  onClick={handleCloseAll}
+                  className="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 transition"
+                >
+                  {CONTACTS_DASHBOARD.BUTTONS.CLOSE_ALL_BUTTON}
+                </button>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+    </section>
+  );
+};
+
 export default ContactsDashboard;