Merge pull request #75 from joshtyf/feature/service-request-approving…

…-page

Feature/service request approving page

frontend/README.md

@@ -2,16 +2,16 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 ## Getting Started
 
-First, run the development server:
+First, install all the dependencies:
+
+```bash
+npm ci
+```
+
+Second, run the development server:
 
 ```bash
 npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

frontend/src/app/(authenticated)/approved-service-requests/_hooks/use-approved-service-requests.ts

@@ -0,0 +1,106 @@
+import { ServiceRequest, ServiceRequestStatus } from "@/types/service-request"
+
+const DUMMY_SERVICE_REQUESTS: ServiceRequest[] = [
+  {
+    id: "1",
+    pipeline_id: "65d48c02d62a1281c4f4ba3e",
+    pipeline_version: "0",
+    status: ServiceRequestStatus.RUNNING,
+    created_on: "2024-02-21T19:50:01",
+    created_by: "User 1",
+    last_updated: "2024-02-21T19:50:01",
+    remarks: "",
+    form_data: {
+      user_id: "1",
+      user_name: "Test User",
+      name: "Pipeline 1",
+      description: "Pipeline 1 description",
+    },
+  },
+  {
+    id: "2",
+    pipeline_id: "65d48c02d62a1281c4f4ba3e",
+    pipeline_version: "0",
+    status: ServiceRequestStatus.RUNNING,
+    created_on: "2024-02-21T18:50:01",
+    created_by: "User 2",
+    last_updated: "2024-02-21T18:50:01",
+    remarks: "",
+    form_data: {
+      user_id: "1",
+      user_name: "Test User",
+      name: "Pipeline 1",
+      description: "Pipeline 1 description",
+    },
+  },
+  {
+    id: "3",
+    pipeline_id: "65d48c02d62a1281c4f4ba3e",
+    pipeline_version: "0",
+    status: ServiceRequestStatus.SUCCESS,
+    created_on: "2024-02-21T17:00:00",
+    created_by: "User 3",
+    last_updated: "2024-02-21T17:00:00",
+    remarks: "",
+    form_data: {
+      user_id: "1",
+      user_name: "Test User",
+      name: "Pipeline 1",
+      description: "Pipeline 1 description",
+    },
+  },
+  {
+    id: "4",
+    pipeline_id: "65d48c02d62a1281c4f4ba3e",
+    pipeline_version: "0",
+    status: ServiceRequestStatus.SUCCESS,
+    created_on: "2024-02-21T00:00:00",
+    created_by: "User 4",
+    last_updated: "2024-02-21T00:00:00",
+    remarks: "",
+    form_data: {
+      user_id: "1",
+      user_name: "Test User",
+      name: "Pipeline 1",
+      description: "Pipeline 1 description",
+    },
+  },
+  {
+    id: "5",
+    pipeline_id: "65d48c02d62a1281c4f4ba3e",
+    pipeline_version: "0",
+    status: ServiceRequestStatus.SUCCESS,
+    created_on: "2024-02-20T00:00:00",
+    created_by: "User 1",
+    last_updated: "2024-02-20T00:00:00",
+    remarks: "",
+    form_data: {
+      user_id: "1",
+      user_name: "Test User",
+      name: "Pipeline 1",
+      description: "Pipeline 1 description",
+    },
+  },
+  {
+    id: "6",
+    pipeline_id: "65d48c02d62a1281c4f4ba3e",
+    pipeline_version: "0",
+    status: ServiceRequestStatus.SUCCESS,
+    created_on: "2024-02-10T00:00:00",
+    created_by: "User 2",
+    last_updated: "2024-02-10T00:00:00",
+    remarks: "",
+    form_data: {
+      user_id: "1",
+      user_name: "Test User",
+      name: "Pipeline 1",
+      description: "Pipeline 1 description",
+    },
+  },
+]
+
+const useApprovedServiceRequest = () => {
+  return { serviceRequests: DUMMY_SERVICE_REQUESTS }
+}
+
+export default useApprovedServiceRequest

frontend/src/app/(authenticated)/approved-service-requests/columns.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import { formatDateString, formatTimeDifference } from "@/lib/utils"
+import { ServiceRequest, ServiceRequestStatus } from "@/types/service-request"
+import { ColumnDef } from "@tanstack/react-table"
+import Link from "next/link"
+import StatusBadge from "@/components/layouts/status-badge"
+
+export const approvedServiceRequestColumns: ColumnDef<ServiceRequest>[] = [
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => {
+      const status: ServiceRequestStatus = row.getValue("status")
+      return <StatusBadge status={status} />
+    },
+  },
+  {
+    accessorKey: "pipeline_id",
+    header: "Pipeline",
+    cell: ({ row }) => {
+      const pipelineId: string = row.getValue("pipeline_id")
+      return (
+        <Link
+          href={`/service-catalog/${pipelineId}`}
+          className="hover:underline hover:text-blue-500"
+        >
+          {pipelineId}
+        </Link>
+      )
+    },
+  },
+  {
+    accessorKey: "created_on",
+    header: "Created Date",
+    cell: ({ row }) => {
+      const dateIsoString: string = row.getValue("created_on")
+      const dateObject = new Date(dateIsoString)
+      return formatDateString(dateObject)
+    },
+  },
+  {
+    accessorKey: "created_by",
+    header: "Created By",
+  },
+  {
+    accessorKey: "last_updated",
+    header: "Last Updated",
+    cell: ({ row }) => {
+      const dateIsoString: string = row.getValue("last_updated")
+      const dateObject = new Date(dateIsoString)
+      return formatTimeDifference(dateObject)
+    },
+  },
+]

frontend/src/app/(authenticated)/approved-service-requests/page.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import HeaderAccessory from "@/components/ui/header-accessory"
+import { approvedServiceRequestColumns } from "./columns"
+import { DataTable } from "@/components/layouts/data-table"
+import useApprovedServiceRequest from "./_hooks/use-approved-service-requests"
+
+export default function ApproveServiceRequestPage() {
+  const { serviceRequests } = useApprovedServiceRequest()
+  return (
+    <div className="flex flex-col justify-start py-10">
+      <HeaderAccessory />
+      <div className="flex items-baseline">
+        <p className="font-bold text-3xl pt-5">
+          Your Approved Service Requests
+        </p>
+      </div>
+      <div className="py-10">
+        <DataTable
+          columns={approvedServiceRequestColumns}
+          data={serviceRequests}
+        />
+      </div>
+    </div>
+  )
+}

frontend/src/app/(authenticated)/pending-service-requests/_components/pending-service-request-actions.tsx

@@ -0,0 +1,51 @@
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { MoreHorizontal } from "lucide-react"
+
+interface ApproveServiceRequestActionsProps {
+  pipelineId: string
+  approveRequest: (pipelineId: string) => void
+  rejectRequest: (pipelineId: string) => void
+}
+
+export default function ApproveServiceRequestActions({
+  pipelineId,
+  approveRequest,
+  rejectRequest,
+}: ApproveServiceRequestActionsProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="h-8 w-8 p-0">
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start">
+        <DropdownMenuItem>
+          <Button
+            variant="ghost"
+            className="text-green-700 hover:text-green-500"
+            onClick={() => approveRequest(pipelineId)}
+          >
+            Approve
+          </Button>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          {/* TODO: Add on click logic*/}
+          <Button
+            variant="ghost"
+            className="text-red-700 hover:text-red-500"
+            onClick={() => rejectRequest(pipelineId)}
+          >
+            Reject
+          </Button>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

frontend/src/app/(authenticated)/pending-service-requests/_hooks/use-pending-service-requests.ts

@@ -0,0 +1,106 @@
+import { ServiceRequest, ServiceRequestStatus } from "@/types/service-request"
+
+const DUMMY_SERVICE_REQUESTS: ServiceRequest[] = [
+  {
+    id: "1",
+    pipeline_id: "65d48c02d62a1281c4f4ba3e",
+    pipeline_version: "0",
+    status: ServiceRequestStatus.PENDING,
+    created_on: "2024-02-21T19:50:01",
+    created_by: "User 1",
+    last_updated: "2024-02-21T19:50:01",
+    remarks: "",
+    form_data: {
+      user_id: "1",
+      user_name: "Test User",
+      name: "Pipeline 1",
+      description: "Pipeline 1 description",
+    },
+  },
+  {
+    id: "2",
+    pipeline_id: "65d48c02d62a1281c4f4ba3e",
+    pipeline_version: "0",
+    status: ServiceRequestStatus.PENDING,
+    created_on: "2024-02-21T18:50:01",
+    created_by: "User 2",
+    last_updated: "2024-02-21T18:50:01",
+    remarks: "",
+    form_data: {
+      user_id: "1",
+      user_name: "Test User",
+      name: "Pipeline 1",
+      description: "Pipeline 1 description",
+    },
+  },
+  {
+    id: "3",
+    pipeline_id: "65d48c02d62a1281c4f4ba3e",
+    pipeline_version: "0",
+    status: ServiceRequestStatus.PENDING,
+    created_on: "2024-02-21T17:00:00",
+    created_by: "User 3",
+    last_updated: "2024-02-21T17:00:00",
+    remarks: "",
+    form_data: {
+      user_id: "1",
+      user_name: "Test User",
+      name: "Pipeline 1",
+      description: "Pipeline 1 description",
+    },
+  },
+  {
+    id: "4",
+    pipeline_id: "65d48c02d62a1281c4f4ba3e",
+    pipeline_version: "0",
+    status: ServiceRequestStatus.PENDING,
+    created_on: "2024-02-21T00:00:00",
+    created_by: "User 4",
+    last_updated: "2024-02-21T00:00:00",
+    remarks: "",
+    form_data: {
+      user_id: "1",
+      user_name: "Test User",
+      name: "Pipeline 1",
+      description: "Pipeline 1 description",
+    },
+  },
+  {
+    id: "5",
+    pipeline_id: "65d48c02d62a1281c4f4ba3e",
+    pipeline_version: "0",
+    status: ServiceRequestStatus.PENDING,
+    created_on: "2024-02-20T00:00:00",
+    created_by: "User 1",
+    last_updated: "2024-02-20T00:00:00",
+    remarks: "",
+    form_data: {
+      user_id: "1",
+      user_name: "Test User",
+      name: "Pipeline 1",
+      description: "Pipeline 1 description",
+    },
+  },
+  {
+    id: "6",
+    pipeline_id: "65d48c02d62a1281c4f4ba3e",
+    pipeline_version: "0",
+    status: ServiceRequestStatus.PENDING,
+    created_on: "2024-02-10T00:00:00",
+    created_by: "User 2",
+    last_updated: "2024-02-10T00:00:00",
+    remarks: "",
+    form_data: {
+      user_id: "1",
+      user_name: "Test User",
+      name: "Pipeline 1",
+      description: "Pipeline 1 description",
+    },
+  },
+]
+
+const usePendingServiceRequest = () => {
+  return { serviceRequests: DUMMY_SERVICE_REQUESTS }
+}
+
+export default usePendingServiceRequest