Merge pull request #72 from PentabyteDevAlign/refactor

fix: workload calculation and mobile responsive design

Author: zrahadiz

AI/src/api/roster.py

@@ -240,12 +240,15 @@ def get_recommendations(request: SkillRequest):
         print("Proyek gweh: ", project_count)
 
         if project_count == 0:
-            project_count_score = 0.0
-        elif project_count >= 5:
             project_count_score = 1.0
+        elif project_count >= 5:
+            project_count_score = 0.0
         else:
             # menurun 0.2 tiap project
-            project_count_score = project_count * 0.2
+            project_count_score = 1.0 - (project_count * 0.2)
+
+        print("Proyek count score: ", project_count_score)
+
         logs["workload_calculation_time"] += time.time() - start_time
 
         # 3. Embedding vector

Frontend/src/App.jsx

@@ -40,23 +40,6 @@ function App() {
     <>
       <Router>
         <Routes>
-          {/* Profile and Change Password */}
-          <Route
-            path="/profile"
-            element={
-              <ProtectedRoute>
-                <ProfilePage />
-              </ProtectedRoute>
-            }
-          />
-          <Route
-            path="/change-password"
-            element={
-              <ProtectedRoute>
-                <ChangePasswordPage />
-              </ProtectedRoute>
-            }
-          />
           {/* Halaman Login tanpa layout */}
           <Route
             path="/login"
@@ -83,6 +66,28 @@ function App() {
             }
           />
 
+          {/* Profile and Change Password */}
+          <Route
+            path="/profile"
+            element={
+              <ProtectedRoute>
+                <AppLayout>
+                  <ProfilePage />
+                </AppLayout>
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/change-password"
+            element={
+              <ProtectedRoute>
+                <AppLayout>
+                  <ChangePasswordPage />
+                </AppLayout>
+              </ProtectedRoute>
+            }
+          />
+
           {/* Halaman dengan layout utama */}
           <Route
             path="/dashboard"

Frontend/src/components/EmployeeTable.jsx

@@ -34,10 +34,8 @@ export default function EmployeeTable({
 }) {
   const handleSort = (field) => {
     if (sortField === field) {
-      // toggle sort order if same field clicked
       setSortOrder((prev) => (prev === "asc" ? "desc" : "asc"));
     } else {
-      // set new field to sort by
       setSortField(field);
       setSortOrder("asc");
     }
@@ -54,32 +52,46 @@ export default function EmployeeTable({
   };
 
   return (
-    <div className="bg-white rounded-lg shadow p-6">
+    <div className="bg-white rounded-lg shadow p-4 sm:p-6">
       {/* Header */}
-      <div className="flex items-center justify-between mb-4">
-        <h3 className="text-lg font-semibold">{title}</h3>
-        <div className="flex gap-3">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4 gap-3">
+        <h3 className="text-base sm:text-lg font-semibold text-center sm:text-left">
+          {title}
+        </h3>
+
+        {/* Controls */}
+        <div className="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
           {/* Sort Select */}
           <Select value={sortOrder} onValueChange={setSortOrder}>
-            <SelectTrigger className="w-[160px] text-sm">
+            <SelectTrigger className="w-full sm:w-[160px] text-sm cursor-pointer">
               <SelectValue placeholder="Sort by Projects" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="desc">Most Projects</SelectItem>
-              <SelectItem value="asc">Least Projects</SelectItem>
+              <SelectItem value="desc" className="cursor-pointer">
+                Most Projects
+              </SelectItem>
+              <SelectItem value="asc" className="cursor-pointer">
+                Least Projects
+              </SelectItem>
             </SelectContent>
           </Select>
 
           {/* Position Filter */}
           <Select value={positionFilter} onValueChange={setPositionFilter}>
-            <SelectTrigger className="w-[160px] text-sm">
+            <SelectTrigger className="w-full sm:w-[160px] text-sm cursor-pointer">
               <SelectValue placeholder="Filter by Position" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="all">All Positions</SelectItem>
+              <SelectItem value="all" className="cursor-pointer">
+                All Positions
+              </SelectItem>
               {Array.isArray(positionsList) &&
                 positionsList.map((p) => (
-                  <SelectItem key={p._id || p.id} value={p._id || p.id}>
+                  <SelectItem
+                    key={p._id || p.id}
+                    value={p._id || p.id}
+                    className="cursor-pointer"
+                  >
                     {p.name}
                   </SelectItem>
                 ))}
@@ -94,8 +106,8 @@ export default function EmployeeTable({
           No employee data available
         </p>
       ) : (
-        <div className="rounded-md border">
-          <Table>
+        <div className="rounded-md border overflow-x-auto">
+          <Table className="min-w-[600px]">
             <TableHeader>
               <TableRow>
                 <TableHead
@@ -125,14 +137,16 @@ export default function EmployeeTable({
               {employees.map((emp, i) => (
                 <TableRow key={i} className="hover:bg-muted/50">
                   <TableCell className="flex items-center gap-3 py-3">
-                    <div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white text-sm font-semibold">
+                    <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white text-xs sm:text-sm font-semibold">
                       {emp.name
                         .split(" ")
                         .map((n) => n[0])
                         .join("")
                         .toUpperCase()}
                     </div>
-                    <span className="text-sm font-medium">{emp.name}</span>
+                    <span className="text-sm font-medium truncate max-w-[120px] sm:max-w-none">
+                      {emp.name}
+                    </span>
                   </TableCell>
                   <TableCell className="text-sm">{emp.position}</TableCell>
                   <TableCell className="text-sm">{emp.manager}</TableCell>
@@ -154,17 +168,17 @@ export default function EmployeeTable({
 
       {/* Pagination */}
       {total > 0 && (
-        <div className="flex items-center justify-between mt-4 pt-4 border-t">
-          <p className="text-sm text-muted-foreground">
+        <div className="flex flex-col sm:flex-row items-center justify-between mt-4 pt-4 border-t gap-3">
+          <p className="text-xs sm:text-sm text-muted-foreground">
             Page {pageIndex + 1} of {Math.ceil(total / pageSize)}
           </p>
-          <div className="flex gap-2">
+          <div className="flex gap-2 w-full sm:w-auto justify-center sm:justify-end">
             <Button
               variant="outline"
               size="sm"
               onClick={() => setPageIndex((p) => Math.max(p - 1, 0))}
               disabled={pageIndex === 0}
-              className="cursor-pointer"
+              className="cursor-pointer w-1/2 sm:w-auto"
             >
               Previous
             </Button>
@@ -177,7 +191,7 @@ export default function EmployeeTable({
                 )
               }
               disabled={pageIndex + 1 >= Math.ceil(total / pageSize)}
-              className="cursor-pointer"
+              className="cursor-pointer w-1/2 sm:w-auto"
             >
               Next
             </Button>

Frontend/src/components/SkillSelector.jsx

@@ -10,6 +10,7 @@ import { Badge } from "@/components/ui/badge";
 import { PlusCircle, Check, X } from "lucide-react";
 import { useSkillStore } from "@/store/useSkillStore";
 import api from "@/api/axios";
+import { toast } from "@/lib/toast";
 
 export function SkillSelector({
   selectedSkills,
@@ -70,6 +71,9 @@ export function SkillSelector({
       setOpen(false);
     } catch (error) {
       console.error("Error adding skill:", error);
+      toast(error.response.data.message || "Failed to add new skills", {
+        type: "error",
+      });
     }
   };
 

Frontend/src/pages/HR/Dashboard.jsx

@@ -198,7 +198,7 @@ export default function HRDashboard() {
       : "bg-yellow-100 text-yellow-800";
 
   return (
-    <div className="min-h-screen bg-gray-50 p-4 lg:p-6">
+    <div className="min-h-screen pb-24 pt-5 lg:px-5 lg:py-10">
       <Loading status={loadingState} fullscreen text={loadingText} />
 
       {/* Header */}

Frontend/src/pages/HR/Employee/AddEmployee.jsx

@@ -203,7 +203,7 @@ export default function AddEmployee() {
   }, []);
 
   return (
-    <div className="min-h-screen lg:p-5">
+    <div className="min-h-screen pb-24 pt-5 lg:px-5 lg:py-10">
       <Loading status={loadingState} fullscreen text={loadingText} />
 
       {/* Header */}

Frontend/src/pages/HR/Employee/EmployeeDetail.jsx

@@ -206,7 +206,7 @@ export default function EmployeeDetail() {
   };
 
   return (
-    <div className="min-h-screen lg:p-5">
+    <div className="min-h-screen pb-24 pt-5 lg:px-5 lg:py-10">
       <Loading status={loadingState} fullscreen text={loadingText} />
 
       {/* Header */}

Frontend/src/pages/HR/Employee/ManageEmployee.jsx

@@ -541,7 +541,7 @@ export default function ManageEmployee() {
         </AlertDialog>
       )}
 
-      <div className="container mx-auto p-6 space-y-6">
+      <div className="min-h-screen pb-24 pt-5 lg:px-5 lg:py-10 space-y-6">
         {/* Header */}
         <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
           <div>

Frontend/src/pages/PM/Dashboard.jsx

@@ -138,7 +138,7 @@ export default function PMDashboard() {
   };
 
   return (
-    <div className="min-h-screen p-5">
+    <div className="min-h-screen pb-24 pt-5 lg:px-5 lg:py-10">
       <Loading status={loadingState} fullscreen text={loadingText} />
 
       {/* Header */}

Frontend/src/pages/Shared/Inbox.jsx

@@ -238,30 +238,30 @@ export default function Inbox() {
   const totalPages = Math.max(1, Math.ceil(total / perPage));
 
   return (
-    <div className="h-screen flex flex-col">
+    <div className="h-screen pb-24 pt-5 lg:px-5 lg:py-10  flex flex-col">
       <Loading status={loadingState} fullscreen text={loadingText} />
 
       {/* Header */}
-      <div className="px-4 lg:px-5 py-6 border-b">
-        <div className="max-w-7xl mx-auto">
-          <div className="flex items-center gap-3">
-            <div className="w-12 h-12 bg-linear-to-br from-slate-800 to-slate-900 rounded-xl flex items-center justify-center">
-              <InboxIcon className="w-6 h-6 text-white" />
-            </div>
-            <div>
-              <h1 className="text-3xl font-bold text-slate-900">Inbox</h1>
-              <p className="text-sm text-slate-600">
-                Manage your notifications and messages
-              </p>
-            </div>
+      <div className="mb-8">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="p-3 bg-linear-to-br from-blue-500 to-cyan-500 rounded-xl shadow-lg">
+            <InboxIcon className="w-6 h-6 text-white" />
+          </div>
+          <div>
+            <h1 className="text-3xl md:text-4xl font-bold text-gray-900">
+              Inbox
+            </h1>
+            <p className="text-gray-600 text-sm mt-1">
+              Manage your notifications and messages
+            </p>
           </div>
         </div>
       </div>
 
       {/* Main Content */}
       <div className="flex-1 overflow-hidden">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 h-full">
-          <div className="flex flex-col lg:flex-row gap-6 h-full">
+        <div className="max-w-7xl mx-auto h-full">
+          <div className="flex flex-col lg:flex-row gap-6 py-1 h-full">
             {/* Left Section: Message List - Hidden on mobile when message is selected */}
             <div
               className={`lg:w-2/5 xl:w-1/3 flex flex-col bg-white rounded-2xl shadow-sm border border-slate-200/50 overflow-hidden h-[600px] lg:h-full ${