issueCard added

Author: nafi-ullah

client/components/dashboard-componenets/cards/IssueCard.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+// Define the Issue type
+type Issue = {
+  issueType: string;
+  description: string;
+  latitude: string;
+  longitude: string;
+  isAnonymous: string;
+};
+
+
+
+const IssueCard: React.FC<Issue> = ({ issueType, description, latitude, longitude }) => {
+  return (
+    <div id="alert-additional-content-1" className="p-4 mb-4 text-blue-800 border border-blue-300 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400 dark:border-blue-800" role="alert">
+      <div className="flex items-center">
+        <svg className="flex-shrink-0 w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+          <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
+        </svg>
+        <span className="sr-only">Info</span>
+        <h3 className="text-lg font-medium">{issueType}</h3>
+      </div>
+      <div className="mt-2 mb-4 text-sm">
+        {description}
+      </div>
+      <div className="flex">
+        <button type="button" className="text-white bg-blue-800 hover:bg-blue-900 focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 me-2 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+          <svg className="me-2 h-3 w-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 14">
+            <path d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z"/>
+          </svg>
+          View more
+        </button>
+        <button type="button" className="text-blue-800 bg-transparent border border-blue-800 hover:bg-blue-900 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-200 font-medium rounded-lg text-xs px-3 py-1.5 text-center dark:hover:bg-blue-600 dark:border-blue-600 dark:text-blue-400 dark:hover:text-white dark:focus:ring-blue-800" data-dismiss-target="#alert-additional-content-1" aria-label="Close">
+          Dismiss
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default IssueCard;

client/components/dashboard-componenets/mainContent/systemAdminContents/Workforce.tsx

@@ -1,4 +1,5 @@
 import { Button } from "@/components/ui/button";
+import * as React from "react";
 import EmptyFillContainer from "../../cards/EmptyFillContainer";
 import { Plus, Trash, Truck, Warehouse } from "lucide-react";
 import ContractLists from "@/components/dataTables/ContractLists";
@@ -8,8 +9,17 @@ import { AddNewContractorManager } from "@/components/modals/ContractorControl/A
 import CleanerLists from "@/components/dataTables/CleanerList";
 import { AddNewCleaner } from "@/components/modals/cleanerControl/AddNewCleaner";
 import CleanerLog from "@/components/dataTables/CleanerLog";
+import useGetIssue from "@/hooks/issues/useGetIssue";
+import IssueCard from "../../cards/IssueCard";
+
 
 export default function AdminWorkforcePanel() {
+  const { issueData, getAllIssue } = useGetIssue();
+
+  React.useEffect(() => {
+    getAllIssue();
+  }, []);
+
   return (
     <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6  max-h-[calc(100vh-60px)] overflow-scroll">
       <div className="flex items-center justify-between">
@@ -38,9 +48,21 @@ export default function AdminWorkforcePanel() {
             </EmptyFillContainer>
           </div>
           <div className="md:col-span-2 min-h-48">
-            <EmptyFillContainer>
+            {/* <EmptyFillContainer>
               <CleanerLog />
-            </EmptyFillContainer>
+            </EmptyFillContainer> */}
+            <div>
+      {issueData.map((issue, index) => (
+        <IssueCard
+          key={index}
+          issueType={issue.issueType}
+          description={issue.description}
+          latitude={issue.latitude}
+          longitude={issue.longitude}
+          isAnonymous={issue.isAnonymous}
+        />
+      ))}
+    </div>
           </div>
         </div>
       </div>

client/data/apiRoutes.ts

@@ -111,4 +111,8 @@ export const apiRoutes = {
     delete: `${baseUrl}/plans/`,
     edit: `${baseUrl}/plans/`,
   },  
+  issue: {
+    create: `${baseUrl}/issues/all`,
+ 
+  },  
 };

client/hooks/issues/useGetIssue.tsx

@@ -0,0 +1,47 @@
+import { apiRoutes } from "@/data/apiRoutes";
+import { jwtToken } from "@/data/cookieNames";
+import { message } from "antd";
+import axios from "axios";
+import { useState } from "react";
+import { getCookie } from "@/lib/cookieFunctions";
+
+type Issue = {
+  issueType: string;
+  description: string;
+  latitude: string;
+  longitude: string;
+  isAnonymous: string;
+};
+
+export default function useGetIssue() {
+  const [issueData, setIssueData] = useState<Issue[]>([]);
+
+  async function getAllIssue() {
+    try {
+      const token = await getCookie(jwtToken);
+      const res = await axios.get(apiRoutes.issue.create, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      const allIssues: Issue[] = res.data.map((issue: any) => ({
+        issueType: issue.issueType,
+        description: issue.description,
+        latitude: issue.latitude,
+        longitude: issue.longitude,
+        isAnonymous: issue.isAnonymous,
+      }));
+
+      setIssueData(allIssues);
+
+      return allIssues;
+    } catch (error: any) {
+      message.error(
+        (error?.response?.data?.message || "Error fetching issue data.") +
+          " Are you authorized?"
+      );
+    }
+  }
+
+  return { issueData, getAllIssue };
+}