Skip to content

Commit cca7e10

Browse files
meronkahsaymeronkahsay
committed
Fix responsiveness
1 parent 797d402 commit cca7e10

File tree

9 files changed

+152
-59
lines changed

9 files changed

+152
-59
lines changed

‎tesfa/src/app/admin/performance/page.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export default function PerformancePage() {
9494
<h2 className="text-lg font-semibold text-gray-800">
9595
Number of Queries
9696
</h2>
97-
<button className="px-5 py-2 border cursor-pointer border-gray-400 rounded-full text-sm bg-white hover:bg-gray-100">
97+
<button className="px-5 py-2 border border-gray-400 rounded-full text-sm bg-white hover:bg-gray-100">
9898
Monthly View
9999
</button>
100100
</div>
@@ -120,7 +120,6 @@ export default function PerformancePage() {
120120
</div>
121121
)}
122122
</div>
123-
124123
<div>
125124
<ApiUsageChart />
126125
</div>

‎tesfa/src/app/admin/sharedcomponent/Sidebar/index.tsx‎

Lines changed: 53 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,32 @@
11
"use client";
22
import Link from "next/link";
33
import Image from "next/image";
4-
import { usePathname } from "next/navigation";
5-
import { LayoutDashboard, ClipboardList, Users, Bot, User } from "lucide-react";
4+
import { usePathname, useRouter } from "next/navigation";
5+
import { useState } from "react";
6+
import { LayoutDashboard, ClipboardList, Users, Bot, User, LogOut } from "lucide-react";
7+
68
const menuItems = [
79
{ id: 1, href: "/admin/dashboard", icon: LayoutDashboard, name: "Dashboard" },
8-
{ id: 2, href: "/admin/task-tracking", icon: ClipboardList , name: "Tasks"},
10+
{ id: 2, href: "/admin/task-tracking", icon: ClipboardList, name: "Tasks" },
911
{ id: 3, href: "/admin/organizations", icon: Users, name: "Organizations" },
1012
{ id: 4, href: "/admin/performance", icon: Bot, name: "Performance" },
1113
];
14+
1215
export default function Sidebar() {
1316
const pathname = usePathname();
17+
const router = useRouter();
18+
const [showLogoutConfirm, setShowLogoutConfirm] = useState(false);
19+
20+
const handleLogoutClick = () => setShowLogoutConfirm(true);
21+
22+
const handleLogoutConfirm = () => {
23+
localStorage.removeItem("authToken");
24+
router.push("/onboarding/login");
25+
setShowLogoutConfirm(false);
26+
};
27+
28+
const handleLogoutCancel = () => setShowLogoutConfirm(false);
29+
1430
return (
1531
<div className="w-64 h-screen bg-teal-900 flex flex-col justify-between text-white">
1632
<div className="px-1 bg-teal-900 flex flex-col justify-between text-white">
@@ -41,6 +57,16 @@ export default function Sidebar() {
4157
</Link>
4258
);
4359
})}
60+
61+
<button
62+
onClick={handleLogoutClick}
63+
className={
64+
`cursor-pointer px-6 py-3 mt-4 rounded-l-4xl gap-8 transition-colors flex items-center hover:bg-teal-700 w-63`
65+
}
66+
>
67+
<LogOut size={28} />
68+
<label className="text-md cursor-pointer">Logout</label>
69+
</button>
4470
</div>
4571
</div>
4672
<div className="flex items-center gap-5 px-6 py-4 bg-teal-800">
@@ -49,6 +75,29 @@ export default function Sidebar() {
4975
</div>
5076
<p className="items-center font-medium">Tesfa admin</p>
5177
</div>
78+
79+
{showLogoutConfirm && (
80+
<div className="fixed inset-0 bg-black opacity-90 flex items-center justify-center z-50">
81+
<div className="bg-white p-6 rounded-lg shadow-lg max-w-xs w-full">
82+
<h2 className="text-lg font-bold mb-2 text-[#00363E]">Confirm Logout</h2>
83+
<p className="mb-4 text-gray-700">Are you sure you want to logout?</p>
84+
<div className="flex justify-end gap-4">
85+
<button
86+
onClick={handleLogoutCancel}
87+
className="px-4 py-2 rounded-2xl cursor-pointer bg-gray-200 hover:bg-gray-300 text-gray-800"
88+
>
89+
Cancel
90+
</button>
91+
<button
92+
onClick={handleLogoutConfirm}
93+
className="px-4 py-2 cursor-pointer rounded-2xl bg-red-600 hover:bg-red-700 text-white"
94+
>
95+
Logout
96+
</button>
97+
</div>
98+
</div>
99+
</div>
100+
)}
52101
</div>
53102
);
54-
}
103+
}

‎tesfa/src/app/edit-profile/page.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ export default function EditProfilePage() {
132132
<button
133133
type="button"
134134
onClick={() => document.getElementById("logoInput")?.click()}
135-
className="absolute top-40 right-5 bg-white border-2 border-[#C3A041] text-[#C3A041] w-10 h-10 rounded-full flex items-center justify-center shadow hover:bg-[#F3FBFD] transition"
135+
className="absolute top-40 cursor-pointer right-5 bg-white border-2 border-[#C3A041] text-[#C3A041] w-10 h-10 rounded-full flex items-center justify-center shadow hover:bg-[#F3FBFD] transition"
136136
aria-label="Upload logo"
137137
>
138138
<CameraIcon className="w-5 h-5 cursor-pointer" />
@@ -198,7 +198,7 @@ export default function EditProfilePage() {
198198
<button
199199
type="button"
200200
onClick={() => setShowPassword(!showPassword)}
201-
className="absolute right-4 top-1/2 transform -translate-y-1/2 text-[#C3A041] hover:text-[#00353D]"
201+
className="absolute right-4 top-1/2 cursor-pointer transform -translate-y-1/2 text-[#C3A041] hover:text-[#00353D]"
202202
aria-label={showPassword ? "Hide password" : "Show password"}
203203
>
204204
{showPassword ? <Eye className="w-5 h-5" /> : <EyeOff className="w-5 h-5" />}
@@ -209,14 +209,14 @@ export default function EditProfilePage() {
209209
<button
210210
type="button"
211211
onClick={() => router.push("/profile")}
212-
className="px-5 py-2 border-2 border-[#03363D] text-[#03363D] rounded-full text-lg font-medium shadow hover:bg-[#F3FBFD] transition"
212+
className="px-5 py-2 border-2 border-[#03363D] cursor-pointer text-[#03363D] rounded-full text-lg font-medium shadow hover:bg-[#F3FBFD] transition"
213213
>
214214
Cancel
215215
</button>
216216
<button
217217
type="submit"
218218
disabled={submitting}
219-
className="px-7 py-2 bg-[#03363D] text-white rounded-full text-lg font-medium shadow hover:bg-[#065A60] transition"
219+
className="px-7 py-2 bg-[#03363D] text-white cursor-pointer rounded-full text-lg font-medium shadow hover:bg-[#065A60] transition"
220220
>
221221
{submitting ? "Saving..." : "Save"}
222222
</button>

‎tesfa/src/app/globals.css‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,46 +5,38 @@
55
--font-sans: var(--font-geist-sans);
66
--font-mono: var(--font-geist-mono);
77
}
8-
98
@media (prefers-color-scheme: dark) {
109
}
11-
1210
body {
1311
background: var(--background);
1412
color: var(--foreground);
1513
font-family: var(--font-josefin-sans),sans-serif;
1614
overflow-y: hidden;
17-
1815
}
1916
input:focus {
2017
outline: none;
2118
}
2219
.bg-active-gradient {
23-
background: linear-gradient(to right, #e6c362, #d3ac45);
20+
background: linear-gradient(to right, #E6C362, #D3AC45);
2421
}
25-
2622
*::-webkit-scrollbar {
2723
width: 12px;
2824
height: 12px;
2925
margin-left: 5px;
3026
}
31-
3227
*::-webkit-scrollbar-track {
33-
background: #f1f1f1;
28+
background: #F1F1F1;
3429
border-radius: 10px;
3530
margin-left: 5px;
3631
}
37-
3832
*::-webkit-scrollbar-thumb {
39-
background-color: #d3ac45;
33+
background-color: #D3AC45;
4034
border-radius: 10px;
41-
border: 3px solid #f1f1f1;
35+
border: 3px solid #F1F1F1;
4236
}
43-
4437
*::-webkit-scrollbar-thumb:hover {
45-
background-color: #d3ac45;
38+
background-color: #D3AC45;
4639
}
47-
4840
.animate-fade-in {
4941
animation: fadeInScale 0.4s;
5042
}
@@ -58,17 +50,12 @@ input:focus {
5850
transform: scale(1);
5951
}
6052
}
61-
62-
6353
.recharts-wrapper:focus,
6454
.recharts-surface:focus,
6555
.recharts-wrapper:focus-visible,
6656
.recharts-surface:focus-visible {
6757
outline: none !important;
6858
}
69-
70-
71-
7259
@keyframes move-rays {
7360
0% {
7461
transform: translateX(0);
@@ -124,3 +111,17 @@ input:focus {
124111
left: 50%;
125112
transform: translate(-50%, -50%);
126113
}
114+
@media screen and (min-width: 1025px) and (max-width: 1400px) {
115+
.dashed-spinner {
116+
top: 44%;
117+
left: 45.5%;
118+
transform: translate(-50%, -50%);
119+
}
120+
}
121+
@media screen and (width: 1024px) {
122+
.dashed-spinner {
123+
top: 42%;
124+
left: 44%;
125+
transform: translate(-50%, -50%);
126+
}
127+
}

‎tesfa/src/app/kanban/components/Taskcard/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export function TaskCard({ task, index, onDelete }: TaskCardProps) {
6767
<LuTrash2 size={16}/>
6868
</button>
6969

70-
<div className={`${getCardColor(task.status)} border-none rounded-2xl h-[20vh] sm:h-[18vh] md:h-[20vh] text-white p-3 sm:p-4 mb-3 shadow-lg hover:shadow-xl transition-shadow w-full`}>
70+
<div className={`${getCardColor(task.status)} border-none rounded-2xl h-auto text-white p-3 sm:p-4 mb-3 shadow-lg hover:shadow-xl transition-shadow w-full`}>
7171
<div {...listeners} {...attributes} className="w-full">
7272
<div className="space-y-1 sm:space-y-2">
7373
<h4 className="font-medium text-lg sm:text-base">{task.title}</h4>

‎tesfa/src/app/profile/components/TaskSummary/index.tsx‎

Lines changed: 41 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,79 @@
1-
import React, { useState } from 'react';
2-
import { CheckCircle, ChevronLeft, ChevronRight } from 'lucide-react';
1+
import React, { useState, useEffect } from 'react';
2+
import { CheckCircle, ChevronLeft, ChevronRight } from 'lucide-react';
3+
34
import { useFetchTaskAssignments } from '@/app/hooks/useFetchTaskAssignment';
45

56
const TaskSummary = () => {
67
const { assignedTasks, loading, error } = useFetchTaskAssignments();
78
const [currentPage, setCurrentPage] = useState(1);
8-
const tasksPerPage = 5;
9+
const tasksPerPage = 4;
910

1011
if (error) {
1112
return <div>Error: {error.message}</div>;
1213
}
13-
const completedTasks = assignedTasks.filter(task => task.status === 'completed');
14+
15+
const completedTasks = Array.from(
16+
new Map(
17+
assignedTasks
18+
.filter(task => task.status === 'completed')
19+
.map(task => [task.id, task])
20+
).values()
21+
);
22+
1423
const totalTasks = assignedTasks.length;
1524
const completedPercentage = totalTasks > 0 ? Math.round((completedTasks.length / totalTasks) * 100) : 0;
25+
26+
const totalPages = Math.max(1, Math.ceil(completedTasks.length / tasksPerPage));
27+
28+
useEffect(() => {
29+
if (currentPage > totalPages) setCurrentPage(totalPages);
30+
}, [completedTasks.length, totalPages]);
31+
1632
const indexOfLastTask = currentPage * tasksPerPage;
1733
const indexOfFirstTask = indexOfLastTask - tasksPerPage;
1834
const currentTasks = completedTasks.slice(indexOfFirstTask, indexOfLastTask);
19-
const totalPages = Math.ceil(completedTasks.length / tasksPerPage);
35+
2036
const handleNextPage = () => {
21-
if (currentPage < totalPages) {
22-
setCurrentPage(currentPage + 1);
23-
}
37+
if (currentPage < totalPages) setCurrentPage(currentPage + 1);
2438
};
2539
const handlePrevPage = () => {
26-
if (currentPage > 1) {
27-
setCurrentPage(currentPage - 1);
28-
}
40+
if (currentPage > 1) setCurrentPage(currentPage - 1);
2941
};
42+
3043
return (
31-
<div className="w-full h-full bg-[#F3FBFD] rounded-2xl shadow-[12px_12px_32px_rgba(0,0,0,0.15)] px-5 sm:px-7 py-8">
44+
<div className="w-full h-full bg-[#F3FBFD] rounded-2xl shadow-[12px_12px_32px_rgba(0,0,0,0.15)] px-5 sm:px-7 py-8">
3245
<h2 className="text-2xl font-medium text-[#00353D] mb-6">Task Summary</h2>
3346
<div>
3447
<div className="flex justify-between items-center mb-2">
3548
<span className="text-lg font-medium text-[#00353D]">{completedTasks.length}/{totalTasks} Tasks Completed</span>
3649
<span className="text-lg font-medium text-[#00353D]">{completedPercentage}%</span>
3750
</div>
3851
<div className="w-full bg-gray-200 rounded-full h-4">
39-
<div
40-
className="bg-[#8BB2B5] h-4 rounded-full"
41-
style={{ width: `${completedPercentage}%` }}
42-
></div>
52+
<div className="bg-[#8BB2B5] h-4 rounded-full" style={{ width: `${completedPercentage}%` }}></div>
4353
</div>
4454
</div>
4555
<div className="mt-8">
4656
<h3 className="text-xl font-medium text-[#00353D] mb-4">Recently Completed</h3>
4757
<ul className="space-y-4">
48-
{currentTasks.map((task) => (
49-
<li key={task.id} className="flex items-center p-4 bg-white rounded-lg shadow-sm">
50-
<CheckCircle className="w-6 h-6 text-green-500 mr-4" />
51-
<div className="flex-1">
52-
<p className="font-medium text-[#00353D]">{task.title}</p>
53-
</div>
54-
</li>
55-
))}
58+
{currentTasks.length === 0 ? (
59+
<li className="text-[#00353D]">No completed tasks yet.</li>
60+
) : (
61+
currentTasks.map((task) => (
62+
<li key={task.id} className="flex items-center p-4 bg-white rounded-lg shadow-sm">
63+
<CheckCircle className="w-6 h-6 text-green-500 mr-4" />
64+
<div className="flex-1">
65+
<p className="font-medium text-[#00353D]">{task.title}</p>
66+
</div>
67+
</li>
68+
))
69+
)}
5670
</ul>
5771
</div>
5872
<div className="mt-8 flex justify-center items-center space-x-4">
5973
<button
6074
onClick={handlePrevPage}
6175
disabled={currentPage === 1}
62-
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-[#C3A041] hover:bg-[#B5913A] disabled:bg-gray-400"
76+
className="inline-flex items-center cursor-pointer px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-[#C3A041] hover:bg-[#B5913A] disabled:bg-gray-400"
6377
>
6478
<ChevronLeft className="w-5 h-5" />
6579
Previous
@@ -68,7 +82,7 @@ const TaskSummary = () => {
6882
<button
6983
onClick={handleNextPage}
7084
disabled={currentPage === totalPages}
71-
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-[#C3A041] hover:bg-[#B5913A] disabled:bg-gray-400"
85+
className="inline-flex items-center cursor-pointer px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-[#C3A041] hover:bg-[#B5913A] disabled:bg-gray-400"
7286
>
7387
Next
7488
<ChevronRight className="w-5 h-5" />
@@ -77,4 +91,5 @@ const TaskSummary = () => {
7791
</div>
7892
);
7993
};
94+
8095
export default TaskSummary;

‎tesfa/src/app/profile/page.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22
import { useRouter } from "next/navigation";
33
import { User as UserIcon, Mail, Calendar, Edit2 } from "lucide-react";
4+
import { ShieldCheck, ChevronLeft, ChevronRight } from 'lucide-react';
45
import Image from "next/image";
56
import useFetchOrganization from "@/app/hooks/useFetchOrganization";
67
import Layout from "../sharedComponents/Layout";
@@ -120,7 +121,7 @@ export default function ProfilePage() {
120121
</div>
121122
</div>
122123
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 w-full">
123-
<Calendar className="w-7 h-7 text-[#C3A041]" />
124+
<ShieldCheck className="w-7 h-7 text-[#C3A041]" />
124125
<div className="flex flex-col sm:flex-row sm:items-center sm:gap-11">
125126
<p className="text-lg sm:text-xl text-[#00353D] font-medium">
126127
Tasks Completed:

‎tesfa/src/app/sharedComponents/Loader/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,4 @@ const Loader = () => {
1313
</div>
1414
);
1515
};
16-
export default Loader;
16+
export default Loader;

0 commit comments

Comments
 (0)