Skip to content

Fe/be/fix dashboard #145

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

Merged
dashaaaa21 merged 2 commits into from
Mar 5, 2026
Merged

Fe/be/fix dashboard #145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c27bca6
feat: improve validation appointments
dashaaaa21 Mar 5, 2026
099fdd1
fix: responsive
dashaaaa21 Mar 5, 2026
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
48 changes: 25 additions & 23 deletions client/src/components/regularStudentScheduleModal/RegularStudentScheduleModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,9 +120,9 @@ const ModalContent = ({

return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="bg-[#2A2433] rounded-2xl p-10 w-full max-w-5xl max-h-[85vh] flex flex-col">
<div className="flex items-center justify-between mb-10">
<h2 className="text-3xl font-bold text-white">
<div className="bg-[#2A2433] rounded-2xl p-4 sm:p-6 lg:p-10 w-full max-w-5xl max-h-[85vh] flex flex-col">
<div className="flex items-center justify-between mb-6 lg:mb-10">
<h2 className="text-xl sm:text-2xl lg:text-3xl font-bold text-white">
Weekly Schedule for {studentName}
</h2>
<button
Expand All @@ -135,22 +135,22 @@ const ModalContent = ({

<div className="flex-1 overflow-y-auto pr-2">
{savedSlots.length > 0 && (
<div className="mb-8">
<h3 className="text-white text-lg font-semibold mb-4">
<div className="mb-6 lg:mb-8">
<h3 className="text-white text-base sm:text-lg font-semibold mb-3 lg:mb-4">
Scheduled Lessons ({savedSlots.length})
</h3>
<div className="space-y-3">
<div className="space-y-2 lg:space-y-3">
{savedSlots.map((slot, index) => (
<div
key={index}
className="bg-[#1E1D28] rounded-lg px-6 py-4 flex items-center justify-between"
className="bg-[#1E1D28] rounded-lg px-4 sm:px-6 py-3 sm:py-4 flex items-center justify-between"
>
<span className="text-white text-base">
<span className="text-white text-sm sm:text-base">
{slot.day}, {slot.hour}:00
</span>
<button
onClick={() => handleRemoveSlot(index)}
className="text-red-400 hover:text-red-300 text-sm font-medium px-3 py-1 rounded hover:bg-red-400/10 transition-colors"
className="text-red-400 hover:text-red-300 text-xs sm:text-sm font-medium px-2 sm:px-3 py-1 rounded hover:bg-red-400/10 transition-colors"
>
Remove
</button>
Expand All @@ -160,13 +160,15 @@ const ModalContent = ({
</div>
)}

<div className="space-y-6">
<h3 className="text-white text-xl font-semibold">Add Lesson</h3>
<div className="space-y-4 lg:space-y-6">
<h3 className="text-white text-lg sm:text-xl font-semibold">
Add Lesson
</h3>

<div className="bg-[#1E1D28] rounded-xl p-10">
<div className="grid grid-cols-2 gap-10 mb-8">
<div className="bg-[#1E1D28] rounded-xl p-4 sm:p-6 lg:p-10">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 lg:gap-10 mb-6 lg:mb-8">
<div>
<label className="block text-gray-300 text-lg font-medium mb-5">
<label className="block text-gray-300 text-sm sm:text-base lg:text-lg font-medium mb-3 lg:mb-5">
Day
</label>
<SelectComponent
Expand All @@ -178,7 +180,7 @@ const ModalContent = ({
</div>

<div>
<label className="block text-gray-300 text-lg font-medium mb-5">
<label className="block text-gray-300 text-sm sm:text-base lg:text-lg font-medium mb-3 lg:mb-5">
Time
</label>
<SelectComponent
Expand All @@ -191,16 +193,16 @@ const ModalContent = ({
</div>

{isDuplicate && (
<div className="mb-4 px-4 py-3 bg-red-500/20 border border-red-500/50 rounded-lg">
<p className="text-red-300 text-sm">
<div className="mb-4 px-3 sm:px-4 py-2 sm:py-3 bg-red-500/20 border border-red-500/50 rounded-lg">
<p className="text-red-300 text-xs sm:text-sm">
This time slot is already added to the schedule
</p>
</div>
)}

{isOccupied && !isDuplicate && (
<div className="mb-4 px-4 py-3 bg-red-500/20 border border-red-500/50 rounded-lg">
<p className="text-red-300 text-sm">
<div className="mb-4 px-3 sm:px-4 py-2 sm:py-3 bg-red-500/20 border border-red-500/50 rounded-lg">
<p className="text-red-300 text-xs sm:text-sm">
This time slot is already occupied by another Regular
Student
</p>
Expand All @@ -210,7 +212,7 @@ const ModalContent = ({
<Button
onClick={handleAddLesson}
variant="secondary"
className="w-full text-base py-4"
className="w-full text-sm sm:text-base py-3 sm:py-4"
disabled={cannotAdd}
>
{isDuplicate
Expand All @@ -223,18 +225,18 @@ const ModalContent = ({
</div>
</div>

<div className="mt-6 pt-6 border-t border-gray-700 flex justify-end gap-5">
<div className="mt-4 sm:mt-6 pt-4 sm:pt-6 border-t border-gray-700 flex flex-col lg:flex-row justify-end gap-3 sm:gap-5">
<Button
onClick={handleCancel}
variant="secondary"
className="px-10 py-3 text-base"
className="px-6 sm:px-10 py-2 sm:py-3 text-sm sm:text-base order-2 lg:order-1"
>
Cancel
</Button>
<Button
onClick={handleSave}
variant="primary"
className="px-10 py-3 text-base"
className="px-6 sm:px-10 py-2 sm:py-3 text-sm sm:text-base order-1 lg:order-2"
>
Save Schedule
</Button>
Expand Down
26 changes: 14 additions & 12 deletions client/src/components/regularStudentScheduleModal/ViewScheduleModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ export const ViewScheduleModal = ({

return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="bg-[#2A2433] rounded-2xl p-10 w-full max-w-4xl max-h-[85vh] flex flex-col">
<div className="flex items-center justify-between mb-10">
<h2 className="text-3xl font-bold text-white">
<div className="bg-[#2A2433] rounded-2xl p-4 sm:p-6 lg:p-10 w-full max-w-4xl max-h-[85vh] flex flex-col">
<div className="flex items-center justify-between mb-6 lg:mb-10">
<h2 className="text-xl sm:text-2xl lg:text-3xl font-bold text-white">
Weekly Schedule with {teacherName}
</h2>
<button
Expand All @@ -34,28 +34,30 @@ export const ViewScheduleModal = ({

<div className="flex-1 overflow-y-auto pr-2">
{schedule.length === 0 ? (
<div className="text-center py-12">
<p className="text-gray-400 text-lg">No schedule set yet</p>
<div className="text-center py-8 lg:py-12">
<p className="text-gray-400 text-base lg:text-lg">
No schedule set yet
</p>
<p className="text-gray-500 text-sm mt-2">
Your teacher hasn&apos;t set up a weekly schedule yet
</p>
</div>
) : (
<div>
<h3 className="text-white text-lg font-semibold mb-6">
<h3 className="text-white text-base sm:text-lg font-semibold mb-4 lg:mb-6">
Your Lessons ({schedule.length} per week)
</h3>
<div className="space-y-4">
<div className="space-y-3 lg:space-y-4">
{schedule.map((slot, index) => (
<div
key={index}
className="bg-[#1E1D28] rounded-lg px-8 py-5 flex items-center"
className="bg-[#1E1D28] rounded-lg px-4 sm:px-6 lg:px-8 py-3 sm:py-4 lg:py-5 flex items-center"
>
<div className="flex-1">
<span className="text-white text-lg font-medium">
<span className="text-white text-base sm:text-lg font-medium">
{slot.day}
</span>
<span className="text-gray-400 text-lg ml-4">
<span className="text-gray-400 text-base sm:text-lg ml-2 sm:ml-4">
at {slot.hour}:00
</span>
</div>
Expand All @@ -66,11 +68,11 @@ export const ViewScheduleModal = ({
)}
</div>

<div className="mt-8 pt-6 border-t border-gray-700 flex justify-center">
<div className="mt-6 lg:mt-8 pt-4 lg:pt-6 border-t border-gray-700 flex justify-center">
<Button
onClick={onClose}
variant="primary"
className="px-12 py-3 text-base"
className="px-8 sm:px-12 py-2 sm:py-3 text-sm sm:text-base"
>
Close
</Button>
Expand Down
43 changes: 27 additions & 16 deletions client/src/components/teacherProfileSection/LessonSchedule.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,10 +82,12 @@ const ModalContent = ({
};

return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="bg-[#2A2433] rounded-2xl p-8 w-full max-w-[95vw] max-h-[95vh] overflow-y-auto">
<div className="flex items-center justify-between mb-6">
<h2 className="text-3xl font-bold text-white">Lesson schedule</h2>
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-2 sm:p-4">
<div className="bg-[#2A2433] rounded-2xl p-4 sm:p-6 lg:p-8 w-full max-w-[95vw] max-h-[95vh] overflow-y-auto">
<div className="flex items-center justify-between mb-4 sm:mb-6">
<h2 className="text-xl sm:text-2xl lg:text-3xl font-bold text-white">
Lesson schedule
</h2>
<button
onClick={onClose}
className="text-white hover:text-purple-400 transition-colors"
Expand All @@ -99,11 +101,11 @@ const ModalContent = ({
<table className="w-full border-collapse">
<thead>
<tr>
<th className="border border-gray-600 p-2 sticky left-0 bg-[#2A2433] z-10"></th>
<th className="border border-gray-600 p-1 sm:p-2 sticky left-0 bg-[#2A2433] z-10"></th>
{HOURS.map((hour) => (
<th
key={hour}
className="border border-gray-600 p-2 text-white text-sm min-w-[60px]"
className="border border-gray-600 p-1 sm:p-2 text-white text-xs sm:text-sm min-w-[50px] sm:min-w-[60px]"
>
{formatHour(hour)}
</th>
Expand All @@ -113,8 +115,9 @@ const ModalContent = ({
<tbody>
{DAYS.map((day) => (
<tr key={day}>
<td className="border border-gray-600 p-3 text-white font-medium sticky left-0 bg-[#2A2433] z-10 min-w-[100px]">
{day}
<td className="border border-gray-600 p-2 sm:p-3 text-white font-medium sticky left-0 bg-[#2A2433] z-10 min-w-[80px] sm:min-w-[100px] text-xs sm:text-sm">
<span className="hidden sm:inline">{day}</span>
<span className="sm:hidden">{day.slice(0, 3)}</span>
</td>
{HOURS.map((hour) => {
const key = `${day}-${hour}`;
Expand All @@ -125,7 +128,7 @@ const ModalContent = ({
<td
key={hour}
onClick={() => !isBlocked && toggleSlot(day, hour)}
className={`border border-gray-600 p-1 transition-colors min-w-[60px] min-h-[50px] ${
className={`border border-gray-600 p-1 transition-colors min-w-[50px] sm:min-w-[60px] min-h-[40px] sm:min-h-[50px] ${
isBlocked
? "bg-red-900 cursor-not-allowed"
: isSelected
Expand All @@ -142,21 +145,29 @@ const ModalContent = ({
</div>
</div>

<div className="mt-6 flex items-center gap-4">
<div className="mt-4 sm:mt-6 flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4">
<div className="flex items-center gap-2">
<div className="w-6 h-6 bg-purple-500 rounded"></div>
<span className="text-white text-sm">Available time</span>
<div className="w-4 h-4 sm:w-6 sm:h-6 bg-purple-500 rounded"></div>
<span className="text-white text-xs sm:text-sm">
Available time
</span>
</div>
{bookedSlots.length > 0 && (
<div className="flex items-center gap-2">
<div className="w-6 h-6 bg-red-900 rounded"></div>
<span className="text-white text-sm">Regular Students</span>
<div className="w-4 h-4 sm:w-6 sm:h-6 bg-red-900 rounded"></div>
<span className="text-white text-xs sm:text-sm">
Regular Students
</span>
</div>
)}
</div>

<div className="mt-6 flex justify-center">
<Button onClick={handleSave} variant="primary" className="px-12">
<div className="mt-4 sm:mt-6 flex justify-center">
<Button
onClick={handleSave}
variant="primary"
className="px-8 sm:px-12 py-2 sm:py-3 text-sm sm:text-base"
>
Save
</Button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/ui/pagination/Pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ export const Pagination = ({
}

return (
<div className="flex items-center justify-center gap-4">
<div className="flex items-center justify-center gap-4 mb-4">
<Button
variant="link"
className={paginationButtonStyles({ theme, shape, state: "inactive" })}
Expand Down
Loading
Loading