{FORM_LABELS.TITLE} -
{" "} - {/* Full Name field with validation */} -
+
+ {/* Read-only Name field */}
+
- {fullNameError && (
-
{/* NIC number field with validation */}
- {fullNameError} -
- )} -- {MESSAGES.FULLNAME_FORMAT_INFO} -
@@ -610,7 +537,7 @@ export default function KYCForm() {
type="submit"
className="bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700"
disabled={
- uploading || !!nicError || !!fullNameError || !!fileError
+ uploading || !!nicError || !!fileError
}
aria-busy={uploading}
>
diff --git a/src/components/Admin/dashboardContent/SuccessStoriesContent.tsx b/src/components/Admin/dashboardContent/SuccessStoriesContent.tsx
index b8c1deee..a86ae3dc 100644
--- a/src/components/Admin/dashboardContent/SuccessStoriesContent.tsx
+++ b/src/components/Admin/dashboardContent/SuccessStoriesContent.tsx
@@ -1,6 +1,9 @@
"use client";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import Image from "next/image";
import {
Users,
Plus,
@@ -13,7 +16,8 @@ import {
BookOpen,
Star,
Calendar,
- User
+ User,
+ X
} from "lucide-react";
interface User {
@@ -29,14 +33,19 @@ interface SuccessStory {
userId: User | null;
title: string;
description: string;
+ feedback: string;
+ rating: number;
image?: string;
isPublished: boolean;
publishedAt?: string;
- createdBy: {
+ createdBy?: {
username: string;
};
createdAt: string;
updatedAt: string;
+ displayName: string;
+ isAnonymous: boolean;
+ canSuccessStoryPost: boolean;
}
interface CreateStoryFormData {
@@ -52,7 +61,9 @@ export default function SuccessStoriesContent() {
const [successStories, setSuccessStories] = useState([]);
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
+ const [searching, setSearching] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
+ const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
const [statusFilter, setStatusFilter] = useState("all");
const [currentPage, setCurrentPage] = useState(1);
const [totalPages, setTotalPages] = useState(1);
@@ -67,22 +78,73 @@ export default function SuccessStoriesContent() {
isPublished: false,
});
+ // Debounce search term
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ setDebouncedSearchTerm(searchTerm);
+ }, 500);
+
+ return () => clearTimeout(timer);
+ }, [searchTerm]);
+
+ // Reset to page 1 when search or filter changes
+ useEffect(() => {
+ setCurrentPage(1);
+ }, [debouncedSearchTerm, statusFilter]);
+
+ // Clear search function
+ const clearSearch = useCallback(() => {
+ setSearchTerm("");
+ setDebouncedSearchTerm("");
+ }, []);
+
+ // Handle keyboard shortcuts
+ const handleSearchKeyDown = useCallback((e: React.KeyboardEvent) => {
+ if (e.key === 'Escape') {
+ clearSearch();
+ }
+ }, [clearSearch]);
+
+ // Memoize search params to prevent unnecessary re-renders
+ const searchParams = useMemo(() => ({
+ page: currentPage.toString(),
+ limit: "10",
+ search: debouncedSearchTerm,
+ status: statusFilter,
+ }), [currentPage, debouncedSearchTerm, statusFilter]);
+
// Fetch success stories
- const fetchSuccessStories = async () => {
+ const fetchSuccessStories = useCallback(async (isInitialLoad = false) => {
try {
- setLoading(true);
- const params = new URLSearchParams({
- page: currentPage.toString(),
- limit: "10",
- search: searchTerm,
- status: statusFilter,
- });
+ if (isInitialLoad) {
+ setLoading(true);
+ }
+
+ const params = new URLSearchParams(searchParams);
const response = await fetch(`/api/admin/success-stories?${params}`, {
credentials: "include", // Important for cookies
});
+
+ console.log("Response status:", response.status);
+ console.log("Response headers:", response.headers);
+
+ // Check if response is HTML (likely an error page)
+ const contentType = response.headers.get('content-type');
+ if (!contentType || !contentType.includes('application/json')) {
+ const text = await response.text();
+ console.error("Received HTML instead of JSON:", text.substring(0, 200));
+
+ if (response.status === 401 || text.includes('login')) {
+ console.warn("Admin not authenticated, redirecting to login");
+ window.location.href = '/admin/login';
+ return;
+ }
+
+ throw new Error(`Server returned ${response.status}: Expected JSON but got HTML`);
+ }
+
const data = await response.json();
-
console.log("Success stories response:", { status: response.status, data });
if (response.ok && data.success) {
@@ -97,16 +159,20 @@ export default function SuccessStoriesContent() {
console.warn("Admin not authenticated, redirecting to login");
window.location.href = '/admin/login';
}
+ alert(`Failed to fetch success stories: ${data.message || 'Unknown error'}`);
}
} catch (error) {
console.error("Error fetching success stories:", error);
+ alert(`Error loading success stories: ${error instanceof Error ? error.message : 'Unknown error'}`);
} finally {
- setLoading(false);
+ if (isInitialLoad) {
+ setLoading(false);
+ }
}
- };
+ }, [searchParams, debouncedSearchTerm, statusFilter]);
// Fetch users for dropdown
- const fetchUsers = async () => {
+ const fetchUsers = useCallback(async () => {
try {
const response = await fetch("/api/admin/users", {
credentials: "include", // Important for cookies
@@ -123,39 +189,67 @@ export default function SuccessStoriesContent() {
console.error("Error fetching users:", error);
alert("Failed to fetch users. Please check your connection and try again.");
}
- };
+ }, []);
useEffect(() => {
- fetchSuccessStories();
- fetchUsers();
- }, [currentPage, searchTerm, statusFilter]);
+ // Only show loading spinner on initial load
+ const isInitialLoad = successStories.length === 0 && debouncedSearchTerm === "" && statusFilter === 'all';
+ fetchSuccessStories(isInitialLoad);
+ if (isInitialLoad) {
+ fetchUsers();
+ }
+ }, [fetchSuccessStories, fetchUsers, successStories.length, debouncedSearchTerm, statusFilter]);
- // Handle form submission
+ // Handle form submission - Only for editing
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
+ if (!editingStory) {
+ toast.error("Admin cannot create new success stories. Only users can submit feedback with success stories.", {
+ position: "top-right",
+ autoClose: 5000,
+ });
+ return;
+ }
+
+ // Check consent before allowing publish
+ if (formData.isPublished && !editingStory.canSuccessStoryPost) {
+ toast.error("Cannot publish this success story because the user did not give consent for publication.", {
+ position: "top-right",
+ autoClose: 5000,
+ });
+ return;
+ }
+
try {
- const url = editingStory
- ? "/api/admin/success-stories"
- : "/api/admin/success-stories";
-
- const method = editingStory ? "PUT" : "POST";
- const body = editingStory
- ? { ...formData, id: editingStory._id }
- : formData;
-
- const response = await fetch(url, {
- method,
+ const response = await fetch("/api/admin/success-stories", {
+ method: "PUT",
headers: {
"Content-Type": "application/json",
},
- credentials: "include", // Important for cookies
- body: JSON.stringify(body),
+ credentials: "include",
+ body: JSON.stringify({
+ id: editingStory._id,
+ title: formData.title,
+ isPublished: formData.isPublished
+ }),
});
+ // Check content type before parsing JSON
+ const contentType = response.headers.get('content-type');
+ if (!contentType || !contentType.includes('application/json')) {
+ const text = await response.text();
+ console.error("Received HTML instead of JSON:", text.substring(0, 200));
+ throw new Error(`Server returned ${response.status}: Expected JSON but got HTML`);
+ }
+
const data = await response.json();
if (data.success) {
+ toast.success(
+ `Success story "${formData.title || editingStory.title}" updated successfully!`,
+ { position: "top-right", autoClose: 3000 }
+ );
setShowCreateForm(false);
setEditingStory(null);
setFormData({
@@ -166,43 +260,184 @@ export default function SuccessStoriesContent() {
rating: 5,
isPublished: false,
});
- fetchSuccessStories();
+ fetchSuccessStories(false);
} else {
- alert(data.message || "Failed to save success story");
+ toast.error(data.message || "Failed to update success story", {
+ position: "top-right",
+ autoClose: 5000,
+ });
}
} catch (error) {
- console.error("Error saving success story:", error);
- alert("Failed to save success story");
+ console.error("Error updating success story:", error);
+ toast.error(
+ `Failed to update success story: ${error instanceof Error ? error.message : 'Unknown error'}`,
+ { position: "top-right", autoClose: 5000 }
+ );
}
};
// Handle delete
- const handleDelete = async (id: string) => {
- if (!confirm("Are you sure you want to delete this success story?")) {
+ const handleDelete = async (story: SuccessStory) => {
+ const storyTitle = story.title || 'this success story';
+
+ // Show confirmation toast
+ const confirmToast = () => {
+ return new Promise((resolve) => {
+ const toastId = toast(
+
+
,
+ {
+ position: "top-center",
+ autoClose: false,
+ closeButton: false,
+ draggable: false,
+ closeOnClick: false,
+ }
+ );
+ });
+ };
+
+ const confirmed = await confirmToast();
+ if (!confirmed) {
return;
}
try {
- const response = await fetch(`/api/admin/success-stories?id=${id}`, {
+ const response = await fetch(`/api/admin/success-stories?id=${story._id}`, {
method: "DELETE",
credentials: "include", // Important for cookies
});
+ // Check content type before parsing JSON
+ const contentType = response.headers.get('content-type');
+ if (!contentType || !contentType.includes('application/json')) {
+ const text = await response.text();
+ console.error("Received HTML instead of JSON:", text.substring(0, 200));
+ throw new Error(`Server returned ${response.status}: Expected JSON but got HTML`);
+ }
+
const data = await response.json();
if (data.success) {
- fetchSuccessStories();
+ toast.success(
+ `Success story "${storyTitle}" deleted successfully!`,
+ { position: "top-right", autoClose: 3000 }
+ );
+ fetchSuccessStories(false);
} else {
- alert(data.message || "Failed to delete success story");
+ toast.error(data.message || "Failed to delete success story", {
+ position: "top-right",
+ autoClose: 5000,
+ });
}
} catch (error) {
console.error("Error deleting success story:", error);
- alert("Failed to delete success story");
+ toast.error(
+ `Failed to delete success story: ${error instanceof Error ? error.message : 'Unknown error'}`,
+ { position: "top-right", autoClose: 5000 }
+ );
}
};
// Handle toggle publish status
const handleTogglePublish = async (story: SuccessStory) => {
+ // Check if user gave consent before allowing publish
+ if (!story.isPublished && !story.canSuccessStoryPost) {
+ toast.error("Cannot publish this success story because the user did not give consent for publication.", {
+ position: "top-right",
+ autoClose: 5000,
+ });
+ return;
+ }
+
+ // Show confirmation toast
+ const storyTitle = story.title || 'this success story';
+
+ const confirmToast = () => {
+ return new Promise((resolve) => {
+ const toastId = toast(
+
+ Delete Success Story?
+
+
+ "{storyTitle}"
+
+
+ โ ๏ธ This action cannot be undone!
+
+
+
+
+
+
+
,
+ {
+ position: "top-center",
+ autoClose: false,
+ closeButton: false,
+ draggable: false,
+ closeOnClick: false,
+ }
+ );
+ });
+ };
+
+ const confirmed = await confirmToast();
+ if (!confirmed) {
+ return;
+ }
+
try {
const response = await fetch("/api/admin/success-stories", {
method: "PUT",
@@ -216,28 +451,46 @@ export default function SuccessStoriesContent() {
}),
});
+ // Check content type before parsing JSON
+ const contentType = response.headers.get('content-type');
+ if (!contentType || !contentType.includes('application/json')) {
+ const text = await response.text();
+ console.error("Received HTML instead of JSON:", text.substring(0, 200));
+ throw new Error(`Server returned ${response.status}: Expected JSON but got HTML`);
+ }
+
const data = await response.json();
if (data.success) {
- fetchSuccessStories();
+ toast.success(
+ `Success story ${story.isPublished ? 'unpublished' : 'published'} successfully!`,
+ { position: "top-right", autoClose: 3000 }
+ );
+ fetchSuccessStories(false);
} else {
- alert(data.message || "Failed to update success story");
+ toast.error(data.message || "Failed to update success story", {
+ position: "top-right",
+ autoClose: 5000,
+ });
}
} catch (error) {
console.error("Error updating success story:", error);
- alert("Failed to update success story");
+ toast.error(
+ `Failed to update success story: ${error instanceof Error ? error.message : 'Unknown error'}`,
+ { position: "top-right", autoClose: 5000 }
+ );
}
};
- // Handle edit
+ // Handle edit - Only title and publish status
const handleEdit = (story: SuccessStory) => {
setEditingStory(story);
setFormData({
userId: story.userId?._id || "",
title: story.title,
description: story.description,
- feedback: (story as any).feedback || "General feedback",
- rating: (story as any).rating || 5,
+ feedback: story.feedback || "General feedback",
+ rating: story.rating || 5,
isPublished: story.isPublished,
});
setShowCreateForm(true);
@@ -258,34 +511,16 @@ export default function SuccessStoriesContent() {
}
return (
-
+ {story.isPublished ? 'Unpublish Story?' : 'Publish Story?'}
+
+
+ "{storyTitle}"
+
+
+ {story.isPublished
+ ? 'This will remove it from the public homepage.'
+ : 'This will make it visible on the public homepage.'}
+
+
+
+
+
+
+
-
{/* Stats Cards */}
-
Success Stories Management
-Create and manage user success stories
+Review and manage user success stories from feedback
+
-
-
+ {/* Enhanced Filters */}
+
+
+
+
-
+ Found {successStories.length} result{successStories.length !== 1 ? 's' : ''} for "{debouncedSearchTerm}"
+
+ )}
-
{/* Success Stories Table */}
-
+
+
+ {/* Active filters summary */}
+ {(debouncedSearchTerm || statusFilter !== 'all') && (
+
+
+
+ )}
+ Active filters:
+ {debouncedSearchTerm && (
+
+ Search: {debouncedSearchTerm}
+
+
+ )}
+ {statusFilter !== 'all' && (
+
+ Status: {statusFilter}
+
+
+ )}
+ {(debouncedSearchTerm || statusFilter !== 'all') && (
+
+ )}
+
+
+
-
-
+ {story.isPublished ? "Pub" : "Draft"}
+
+
+
+
+
+
+
+ ))}
+
+
{successStories.length === 0 && (
-
| - User - | -- Title - | -- Status - | -- Created - | -- Actions - | -||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
-
-
- {story.userId?.avatar ? (
-
-
+ User
+ |
+
+ Title
+ |
+
+ Rating
+ |
+
+ Consent
+ |
+
+ Status
+ |
+
+ Created
+ |
+
+ Actions
+ |
+
+ |
+
+
-
+ {story.userId?.avatar ? (
+
+
+
+ ) : (
+
+
+ )}
+
+
+ {story.isAnonymous ? "Anonymous" : (story.displayName || "Unknown User")}
+
+
+ {story.isAnonymous ? "Anonymous User" : (story.userId?.email || "No email")}
- )}
+
-
- {story.userId ? `${story.userId.firstName} ${story.userId.lastName}` : "Unknown User"}
+
+ |
-
+
-
+ {story.title}
-
- {story.userId?.email || "No email"}
+
-
+ {story.description.substring(0, 60) + '...'}
- |
-
- {story.title}
-
-
- {story.description}
-
-
-
- {story.isPublished ? "Published" : "Draft"}
-
- |
-
- |
-
-
-
- |
+
-
+ |
+
+
+
+
- {story.isPublished ? (
- |
+
+
- |
- |
+ {new Date(story.createdAt).toLocaleDateString('en-US', { month: 'short', day: '2-digit' })}
+
+
+
+
+
+
+
+
{/* Pagination */}
{totalPages > 1 && (
- No success stories found
-Create your first success story to get started
+Success stories come from user feedback submissions
+
)}
- {/* Create/Edit Form Modal */}
- {showCreateForm && (
+ {/* Edit Form Modal - Only for editing titles and publish status */}
+ {showCreateForm && editingStory && (
-