Merge pull request #29 from chingu-voyages/feat/update

Feat/update

package.json

@@ -15,5 +15,9 @@
     "build": "lerna run build",
     "test": "lerna run test",
     "diff": "lerna diff"
+  },
+  "dependencies": {
+    "react-hook-form": "^7.54.0",
+    "zod": "^3.24.1"
   }
 }

packages/backend/src/controllers/admin.controller.ts

@@ -22,13 +22,12 @@ export async function deleteRequestById(req:Request, res:Response){
           id: requestId,
         },
       })
-
-      res.status(204).json({
-        status: 204,
+      return res.status(201).json({
+        status: 201,
         message: 'Request successfully deleted',
       });
     } catch {
-      res.status(500).json({
+      return res.status(500).json({
         status: 500,
         message: 'Server error',
       });

packages/frontend/.gitignore

@@ -23,6 +23,11 @@
 # misc
 .DS_Store
 *.pem
+<<<<<<< HEAD
+*.txt
+=======
+blank.txt
+>>>>>>> 92400c6 (chore: add .txt file to gitignore)
 
 # debug
 npm-debug.log*

packages/frontend/app/admin/dashboard/[requestId]/page.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import UpdateRequestForm from '@/src/components/UpdateRequestForm'
+import { useParams } from 'next/navigation'
+import React, { useEffect, useState } from 'react'
+
+
+function RequestPage() {
+
+    const [request, setRequest] = useState(null)
+
+    const params = useParams()
+    const {requestId} = params
+
+    useEffect(() => {
+      const fetchRequestData = async () =>{
+        const response = await fetch(`http://localhost:8000/api/v1/resident/request/${requestId}`, {method: "GET"})
+        const requestData = await response.json()
+        setRequest(requestData)
+      }
+      fetchRequestData()
+    }, [])
+
+if(request){
+  return (
+    <div className='ml-20 mt-10'>
+    <h1 className='text-3xl font-semibold'>Appointment details</h1>
+    <UpdateRequestForm request={request}/>
+    </div>
+  )
+}
+}
+
+export default RequestPage

packages/frontend/app/admin/dashboard/layout.tsx

@@ -0,0 +1,12 @@
+import SideNav from "@/src/components/sidenav";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
+      <div className="w-full flex-none md:w-64">
+        <SideNav />
+      </div>
+      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
+    </div>
+  );
+}

packages/frontend/app/admin/dashboard/page.tsx

@@ -2,84 +2,106 @@
 
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
-import { appointmentRequests } from '@/src/asset/mockData/appointmentRequests'
-import { filterRequestsByPeriod } from '@/src/utils/filterRequestsByPeriod'
+// import { appointmentRequests } from '@/src/asset/mockData/appointmentRequests'
+
 import ExportCSV from '@/src/features/exportFiles/components/ExportCSV'
 import ExportPDF from '@/src/features/exportFiles/components/ExportPDF'
 
-export default function Dashboard() {
-  const router = useRouter()
-  const [period, setPeriod] = useState<'all' | 'daily' | 'weekly'>('all')
-  const [filteredRequests, setFilteredRequests] = useState(appointmentRequests)
+import { filterRequestsByStatus } from '@/src/utils/filterRequestsByStatus'
+import DashboardCounterButtons from '@/src/components/DashboardCounterButtons'
 
+export default function DashboardPage() {
+  const router = useRouter()
+  const [status, setStatus] = useState<'Unscheduled Requests' | 'Scheduled Requests' | 'Completed Requests'>('Unscheduled Requests')
+  const [unscheduledRequestsCount, setUnscheduledRequestsCount] = useState(0)
+  const [scheduledRequestsCount, setScheduledRequestsCount] = useState(0)
+  const [completedRequestsCount, setCompletedRequestsCount] = useState(0)
+  const [arr, setArr] = useState(null)
+
   useEffect(() => {
     const isLoggedIn = localStorage.getItem('isLoggedIn')
     if (!isLoggedIn) {
       router.push('/admin/login')
     }
   }, [router])
-
+  
   useEffect(() => {
-    const filtered = filterRequestsByPeriod(appointmentRequests, period)
-    setFilteredRequests(filtered)
-  }, [period])
-
-  const handleLogout = () => {
-    localStorage.removeItem('isLoggedIn')
-    router.push('/admin/login')
-  }
+    const fetchData = async () => {
+      const response = await fetch('http://localhost:8000/api/v1/resident/request', {method: "GET"})
+      return response.json()
+    }
+    fetchData().then((appointmentRequests)=>{
+      const {unscheduledRequestsArr, scheduledRequestsArr, completedRequestsArr} = filterRequestsByStatus(appointmentRequests.data)
+      setUnscheduledRequestsCount(unscheduledRequestsArr.length)
+      setScheduledRequestsCount(scheduledRequestsArr.length)
+      setCompletedRequestsCount(completedRequestsArr.length)
+      if(status==="Unscheduled Requests"){
+        setArr(unscheduledRequestsArr)
+      }
+      if(status==="Scheduled Requests"){
+        setArr(scheduledRequestsArr)
+      }
+      if(status==="Completed Requests"){
+        setArr(completedRequestsArr)
+      }
+    })
+  }, [status])
 
   return (
-    <div>
-      <h1>Admin Dashboard</h1>
-      <button onClick={handleLogout}>Logout</button>
-      <div>
-        <label>
-          Filter by period:
-          <select
-            value={period}
-            onChange={(e) =>
-              setPeriod(e.target.value as 'all' | 'daily' | 'weekly')
-            }
-          >
-            <option value="all">All</option>
-            <option value="daily">Daily</option>
-            <option value="weekly">Weekly</option>
-          </select>
-        </label>
-      </div>
+    <div className='pl-16 pr-16'>
+      <h1 className='text-5xl font-semibold'>Overview</h1>
 
+      <DashboardCounterButtons requestCount={[unscheduledRequestsCount, scheduledRequestsCount, completedRequestsCount]} setStatus={setStatus}/>
+
+      <div className='mb-3 flex flex-row justify-end space-x-5'>
       <ExportCSV />
       <ExportPDF />
-
-      <table>
-        <thead>
+      </div>
+
+      <h2 className='text-2xl font-semibold'>{status}</h2>
+      <div className="overflow-y-auto max-h-96 border rounded">
+      <table className="table-fixed max-w-96 divide-y divide-gray-200">
+        <thead className="bg-gray-100 sticky top-0">
           <tr>
-            <th>Name</th>
-            <th>Email</th>
-            <th>Phone</th>
-            <th>Address</th>
-            <th>Requested At</th>
+            <th className="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Name</th>
+            <th className="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Email</th>
+            <th className="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Phone</th>
+            <th className="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Address</th>
+            <th className="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Requested Date</th>
+            <th className="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Requested Timeslot</th>
+            {/* <th className="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Status</th> */}
+            <th className="px-4 py-3"></th>
           </tr>
         </thead>
-        <tbody>
-          {filteredRequests.length > 0 ? (
-            filteredRequests.map((request) => (
+        <tbody className="bg-white divide-y divide-gray-200">
+          {arr?.length > 0 ? (
+            arr.map((request) => (
               <tr key={request.id}>
-                <td>{request.name}</td>
-                <td>{request.email}</td>
-                <td>{request.phone}</td>
-                <td>{request.address}</td>
-                <td>{new Date(request.requestedAt).toLocaleString()}</td>
+                <td className="px-4 py-4 whitespace-nowrap">{request.name}</td>
+                <td className="px-4 py-4 whitespace-nowrap">{request.email}</td>
+                <td className="px-4 py-4 whitespace-nowrap">{request.phoneNumber}</td>
+                <td className="px-4 py-4 whitespace-nowrap">{request.address}</td>
+                <td className="px-4 py-4 whitespace-nowrap">
+                  {new Date(request.preferred_date).toLocaleString("en-US", { dateStyle: "full" })}
+                </td>
+                <td className="px-4 py-4 whitespace-nowrap">{request.preferred_timeslot}</td>
+                {/* <td className="px-4 py-4 whitespace-nowrap">{request.request_status}</td> */}
+                <td className="px-4 py-4 whitespace-nowrap">
+                  <a href={`/admin/dashboard/${request.id}`}>
+                    <button className="text-blue-500 hover:underline">View</button>
+                  </a>
+                </td>
               </tr>
             ))
           ) : (
             <tr>
-              <td colSpan={5}>No requests found.</td>
+              <td colSpan={8} className="px-6 py-4 text-center text-gray-500">No requests found.</td>
             </tr>
           )}
         </tbody>
       </table>
+      </div>
+
     </div>
   )
 }

packages/frontend/app/admin/dashboard/scheduling/page.tsx

@@ -0,0 +1,18 @@
+"use client"
+
+import SchedulingMap from '@/src/components/SchedulingMap'
+import React from 'react'
+
+function SchedulingPage() {
+
+    const apiKey = process.env.NEXT_PUBLIC_HERE_MAP_API_KEY
+
+  return (
+    <>
+    <div>SchedulingPage</div>
+    {/* <SchedulingMap apiKey={apiKey}/> */}
+    </>
+  )
+}
+
+export default SchedulingPage

packages/frontend/app/admin/dashboard/settings/page.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function SettingsPage() {
+  return (
+    <div>SettingsPage</div>
+  )
+}
+
+export default SettingsPage

packages/frontend/app/admin/login/page.tsx

@@ -1,6 +1,6 @@
 import Login from "@/src/components/Login";
 
-export default function Home() {
+export default function LoginPage() {
   return (
     <div className="bg-white flex justify-content max-w-[482px] w-full h-[475px]">
       <Login />

packages/frontend/app/globals.css

@@ -40,4 +40,10 @@ body {
   font-style: normal;
   font-weight: 400;
   src: url('/fonts/Inter-Regular.ttf') format('truetype');
+}
+
+@layer base {
+  :root {
+    --radius: 0.5rem;
+  }
 }

packages/frontend/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "stone",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}