Skip to content

Empty_state_loader_implemented #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ammarnassar10 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Empty_state_loader_implemented #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 25 additions & 10 deletions frontend/my-app/src/pages/Admin/EventsPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import EventCard from "../../components/EventsOffice/EventCard";
import axios from 'axios';
import AuthContext from '../../context/AuthContext';
import Loader from '../../components/Shared/Loader';
import EmptyState from '../../components/Shared/EmptyState';



Expand Down Expand Up @@ -234,13 +235,27 @@ export default function ViewEvents() {
</div>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{loading ? (
<Loader size="large" className="h-64" />
) : error ? (
<p>Error: {error}</p>
) : (
filteredEvents.map((evt) => (
{loading ? (
<Loader size="large" className="h-64" />
) : error ? (
<div className="text-center py-12">
<div className="text-red-400 text-6xl mb-4">⚠️</div>
<h3 className="text-xl font-semibold text-gray-900 mb-2">Error Loading Events</h3>
<p className="text-gray-600 mb-4">{error}</p>
</div>
) : filteredEvents.length === 0 ? (
<EmptyState
title="No Events Found"
message={
query.trim()
? `No events found matching "${query}". Try adjusting your search terms.`
: "There are no upcoming events at the moment. Events will appear here once they are created."
}
icon={<span className="text-4xl">📅</span>}
/>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{filteredEvents.map((evt) => (
<EventCard
key={evt._id}
event={evt}
Expand All @@ -249,9 +264,9 @@ export default function ViewEvents() {
showActions={true}
showFullWorkshopActions={evt.type !== 'workshop'}
/>
))
)}
</div>
))}
</div>
)}
</div>
</main>

Expand Down
20 changes: 15 additions & 5 deletions frontend/my-app/src/pages/Admin/ManagePage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import MainHeader from "../../components/Shared/MainHeader";
import Swal from 'sweetalert2';
import axios from 'axios';
import AuthContext from "../../context/AuthContext";
import EmptyState from '../../components/Shared/EmptyState';

export default function ManagePage() {
const [mobileOpen, setMobileOpen] = useState(false);
Expand Down Expand Up @@ -287,11 +288,20 @@ export default function ManagePage() {
{/* Accounts List */}
<div className="space-y-4">
{currentAccounts.length === 0 ? (
<div className="text-center py-12">
<User className="h-16 w-16 text-gray-300 mx-auto mb-4" />
<h3 className="text-lg font-medium text-gray-500 mb-2">No {activeTab} accounts found</h3>
<p className="text-gray-400">Create your first {activeTab.toLowerCase()} account to get started</p>
</div>
<EmptyState
title={`No ${activeTab} Accounts Found`}
message={`There are no ${activeTab.toLowerCase()} accounts yet. Create your first account to get started!`}
icon={<User className="h-16 w-16 text-gray-400" />}
actionButton={
<button
onClick={() => setShowCreateModal(true)}
className="inline-flex items-center gap-2 rounded-md bg-[#001F3F] px-4 py-2 text-sm font-medium text-white hover:bg-[#0b2d5c]"
>
<Plus className="h-4 w-4" />
<span>Create {activeTab} Account</span>
</button>
}
/>
) : (
currentAccounts.map((account) => (
<div
Expand Down
27 changes: 19 additions & 8 deletions frontend/my-app/src/pages/Admin/VendorRequestsPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Footer from '../../components/Shared/Footer';
import AdminSideBar from "../../components/Admin/AdminSideBar";
import Swal from 'sweetalert2';
import Loader from '../../components/Shared/Loader';
import EmptyState from '../../components/Shared/EmptyState';

// Attendees Modal Component
function AttendeesModal({ attendees, onClose }) {
Expand Down Expand Up @@ -511,10 +512,15 @@ export default function VendorRequests() {
))}
</div>
) : (
<div className="text-center py-12 text-gray-500">
No bazaar requests found
{filterStatus !== 'all' && ` with status: ${filterStatus}`}
</div>
<EmptyState
title="No Bazaar Requests Found"
message={
filterStatus !== 'all'
? `No bazaar requests found with status: ${filterStatus}`
: "There are no bazaar requests at the moment. Check back later for new vendor applications!"
}
icon={<span className="text-4xl">🏪</span>}
/>
)
) : (
filteredBoothRequests.length > 0 ? (
Expand All @@ -529,10 +535,15 @@ export default function VendorRequests() {
))}
</div>
) : (
<div className="text-center py-12 text-gray-500">
No booth requests found
{filterStatus !== 'all' && ` with status: ${filterStatus}`}
</div>
<EmptyState
title="No Booth Requests Found"
message={
filterStatus !== 'all'
? `No booth requests found with status: ${filterStatus}`
: "There are no booth requests at the moment. Check back later for new vendor applications!"
}
icon={<span className="text-4xl">🏢</span>}
/>
)
)}
</div>
Expand Down
44 changes: 33 additions & 11 deletions frontend/my-app/src/pages/EventsOffice/Bazars.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { Plus } from "lucide-react";
import Swal from "sweetalert2";
import axios from 'axios';
import AuthContext from '../../context/AuthContext';
import EmptyState from '../../components/Shared/EmptyState';

const initialBazaars = [
{
Expand Down Expand Up @@ -242,17 +243,38 @@ export default function Bazars() {
</div>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{filtered.map((b) => (
<EventCard
key={b.id}
event={b}
onEdit={openEdit}
eventType="bazaar"
showActions={true}
/>
))}
</div>
{filtered.length === 0 ? (
<EmptyState
title="No Bazaars Found"
message={
query.trim()
? `No bazaars found matching "${query}". Try adjusting your search terms.`
: "There are no bazaars created yet. Click 'New Bazaar' to create your first bazaar!"
}
icon={<span className="text-4xl">🏪</span>}
actionButton={
<button
onClick={openCreate}
className="inline-flex items-center gap-2 rounded-md bg-[#001F3F] px-4 py-2 text-sm font-medium text-white hover:bg-[#0b2d5c]"
>
<Plus className="h-4 w-4" />
<span>Create New Bazaar</span>
</button>
}
/>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{filtered.map((b) => (
<EventCard
key={b.id}
event={b}
onEdit={openEdit}
eventType="bazaar"
showActions={true}
/>
))}
</div>
)}
</div>
</main>

Expand Down
35 changes: 25 additions & 10 deletions frontend/my-app/src/pages/EventsOffice/ViewEvents.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import EventCard from "../../components/EventsOffice/EventCard";
import axios from 'axios';
import AuthContext from '../../context/AuthContext';
import Loader from '../../components/Shared/Loader';
import EmptyState from '../../components/Shared/EmptyState';



Expand Down Expand Up @@ -233,13 +234,27 @@ export default function ViewEvents() {
</div>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{loading ? (
<Loader size="large" className="h-64" />
) : error ? (
<p>Error: {error}</p>
) : (
filteredEvents.map((evt) => (
{loading ? (
<Loader size="large" className="h-64" />
) : error ? (
<div className="text-center py-12">
<div className="text-red-400 text-6xl mb-4">⚠️</div>
<h3 className="text-xl font-semibold text-gray-900 mb-2">Error Loading Events</h3>
<p className="text-gray-600 mb-4">{error}</p>
</div>
) : filteredEvents.length === 0 ? (
<EmptyState
title="No Events Found"
message={
query.trim()
? `No events found matching "${query}". Try adjusting your search terms.`
: "There are no upcoming events at the moment. Events will appear here once they are created."
}
icon={<span className="text-4xl">📅</span>}
/>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{filteredEvents.map((evt) => (
<EventCard
key={evt._id}
event={evt}
Expand All @@ -248,9 +263,9 @@ export default function ViewEvents() {
showActions={true}
showFullWorkshopActions={evt.type !== 'workshop'}
/>
))
)}
</div>
))}
</div>
)}
</div>
</main>

Expand Down
37 changes: 25 additions & 12 deletions frontend/my-app/src/pages/EventsOffice/Workshops.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Swal from "sweetalert2";
import { StatusPill } from "../../components/Shared/StatusPill";
import axios from 'axios';
import AuthContext from '../../context/AuthContext';
import EmptyState from '../../components/Shared/EmptyState';

// In-memory sample workshops created by professors
const initialWorkshops = [
Expand Down Expand Up @@ -269,18 +270,30 @@ export default function Workshops() {
</div>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{filtered.map((evt) => (
<EventCard
key={evt._id}
event={evt}
onDelete={handleDelete}
eventType= {evt.type}
showActions={true}
showFullWorkshopActions={evt.type !== 'workshop'}
/>
))}
</div>
{filtered.length === 0 ? (
<EmptyState
title="No Workshops Found"
message={
query.trim()
? `No workshops found matching "${query}". Try adjusting your search terms.`
: "There are no workshop proposals at the moment. Workshop proposals will appear here once professors submit them."
}
icon={<span className="text-4xl">📚</span>}
/>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{filtered.map((evt) => (
<EventCard
key={evt._id}
event={evt}
onDelete={handleDelete}
eventType= {evt.type}
showActions={true}
showFullWorkshopActions={evt.type !== 'workshop'}
/>
))}
</div>
)}
</div>
</main>

Expand Down
7 changes: 7 additions & 0 deletions frontend/my-app/src/pages/Vendors/VendorBazaars.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import Swal from 'sweetalert2';
import axios from "axios";
import AuthContext from "../../context/AuthContext";
import Loader from '../../components/Shared/Loader';
import EmptyState from '../../components/Shared/EmptyState';

const validateEmail = (email) => {
// Regex from the HTML5 specification
Expand Down Expand Up @@ -436,6 +437,12 @@ const fetchBazaars = async () => {

{loading ? (
<Loader size="large" className="h-64" />
) : bazaars.length === 0 ? (
<EmptyState
title="No Bazaars Available"
message="There are no upcoming bazaars at the moment. Check back later for new opportunities to showcase your products!"
icon={<span className="text-4xl">🏪</span>}
/>
) : (
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
{bazaars.map((bazaar) => (
Expand Down
39 changes: 26 additions & 13 deletions frontend/my-app/src/pages/Vendors/VendorMyEvents.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { MyEventCard } from "../../components/Shared/MyEventCard";
import axios from "axios";
import AuthContext from "../../context/AuthContext";
import Loader from '../../components/Shared/Loader';
import EmptyState from '../../components/Shared/EmptyState';

export default function VendorMyEvents() {
const [events, setEvents] = useState({upcomingBazaars: [], upcomingBooths: []});
Expand Down Expand Up @@ -96,17 +97,18 @@ export default function VendorMyEvents() {

{loading ? (
<Loader size="large" className="h-64" />
) : view === "accepted" ? (
<EventGrid
title="✅ Accepted Events"
events={[...events.upcomingBazaars, ...events.upcomingBooths]}
viewType="accepted"
/>
) : (
<>
{view === "accepted" ? (
<EventGrid
title="✅ Accepted Events"
events={[...events.upcomingBazaars, ...events.upcomingBooths]}
/>
) : (
<EventGrid title="🕓 Pending / Rejected Requests" events={requests} />
)}
</>
<EventGrid
title="🕓 Pending / Rejected Requests"
events={requests}
viewType="requests"
/>
)}
</div>

Expand All @@ -124,7 +126,7 @@ export default function VendorMyEvents() {
);
}

function EventGrid({ title, events }) {
function EventGrid({ title, events, viewType }) {
// Check if this is the requests view
const isRequestsView = events && typeof events === 'object' && ('bazaarRequests' in events || 'boothRequests' in events);

Expand All @@ -137,7 +139,11 @@ function EventGrid({ title, events }) {
<section>
<h2 className="text-2xl font-semibold mb-6 text-[#001F3F]">{title}</h2>
{!hasBazaarRequests && !hasBoothRequests ? (
<p className="text-gray-600">No requests found.</p>
<EmptyState
title="No Requests Found"
message="You don't have any pending or rejected requests at the moment. Apply for bazaars or booths to see your applications here."
icon={<span className="text-4xl">📋</span>}
/>
) : (
<div className="space-y-8">
{hasBazaarRequests && (
Expand Down Expand Up @@ -178,7 +184,14 @@ function EventGrid({ title, events }) {
<section>
<h2 className="text-2xl font-semibold mb-6 text-[#001F3F]">{title}</h2>
{eventArray.length === 0 ? (
<p className="text-gray-600">No events found.</p>
<EmptyState
title={viewType === "accepted" ? "No Accepted Events" : "No Events Found"}
message={viewType === "accepted"
? "You don't have any accepted events yet. Once your applications are approved, they will appear here."
: "No events found for this category."
}
icon={<span className="text-4xl">✅</span>}
/>
) : (
<div className="grid sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-2 gap-8">
{eventArray.map((event) => (
Expand Down
Loading