Merge pull request #24 from akirachix/develop

Develop

Author: hunterachieng

tesfa/public/Images/tesfalogo.png tesfa/public/Images/tesfaLogo.pngtesfa/public/Images/tesfalogo.png renamed to tesfa/public/Images/tesfaLogo.png

@@ -24,22 +24,15 @@ import {
   ResponsiveContainer,
 } from "recharts";
 import type { User, Country, QueryLog } from "@/app/utils/type";
-
 export default function DashboardPage() {
   const { predictions, loading: predictionsLoading } = useFetchPredictions();
   const { tasks, loading: tasksLoading } = useFetchTasks();
   const { logs: queries, loading: queriesLoading } = useQueryLog();
   const { organizations, loading: organizationsLoading } = useFetchOrganizations();
   const { countries, loading: countriesLoading } = useCountries();
-
   const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([null, null]);
   const [startDate, endDate] = dateRange;
-
-  const isDateInRange = (
-    dateString: string,
-    start: Date | null,
-    end: Date | null
-  ): boolean => {
+  const isDateInRange = (dateString: string, start: Date | null, end: Date | null) => {
     if (!start || !end) return true;
     const date = new Date(dateString);
     const startOnly = new Date(start);
@@ -48,40 +41,33 @@ export default function DashboardPage() {
     endOnly.setHours(23, 59, 59, 999);
     return date >= startOnly && date <= endOnly;
   };
-
   const filteredQueries =
     queries?.filter(
       (query: QueryLog) =>
         query.created_at && isDateInRange(query.created_at, startDate, endDate)
     ) || [];
-
   const filteredOrganizations =
     organizations?.filter((organization: User) =>
       isDateInRange(organization.created_at, startDate, endDate)
     ) || [];
-
   const filteredPredictions =
     predictions?.filter(
       (prediction: any) =>
         prediction.created_at && isDateInRange(prediction.created_at, startDate, endDate)
     ) || [];
-
   const filteredTasks =
     tasks?.filter(
       (task: any) =>
         task.created_at && isDateInRange(task.created_at, startDate, endDate)
     ) || [];
-
   const activeOrganizations = filteredOrganizations.filter(
     (organization: User) =>
       organization.role === "organization" && organization.is_active === true
   );
-
   const getMonthLabel = (dateString: string): string => {
     const date = new Date(dateString);
     return date.toLocaleString("en-US", { month: "short", year: "2-digit" });
   };
-
   const organizationsByMonth = activeOrganizations.reduce(
     (accumulator: Record<string, number>, organization: User) => {
       const monthLabel = getMonthLabel(organization.created_at);
@@ -90,88 +76,69 @@ export default function DashboardPage() {
     },
     {}
   );
-
   const countriesByYear =
     countries?.reduce((accumulator: Record<string, number>, country: Country) => {
       const year = new Date().getFullYear().toString();
       accumulator[year] = (accumulator[year] || 0) + 1;
       return accumulator;
     }, {}) || {};
-
   const countriesChartData = Object.entries(countriesByYear)
     .map(([year, value]) => ({ year, value }))
     .sort((a, b) => a.year.localeCompare(b.year));
-
-
   const predictionCount = filteredPredictions.length;
   const taskCount = filteredTasks.length;
   const queryCount = filteredQueries.length;
   const totalCount = predictionCount + taskCount + queryCount;
-
   const pieChartData =
     totalCount === 0
       ? [
           { name: "Predict", value: 0, color: "#0f2e2e" },
           { name: "List of Tasks", value: 0, color: "#d7ad05" },
-          { name: "Query", value: 0, color: "#395D7A" },
+          { name: "Query", value: 0, color: "#395d7a" },
         ]
       : [
           { name: "Predict", value: predictionCount, color: "#0f2e2e" },
           { name: "List of Tasks", value: taskCount, color: "#d7ad05" },
-          { name: "Query", value: queryCount, color: "#395D7A" },
+          { name: "Query", value: queryCount, color: "#395d7a" },
         ];
-
   const isLoading =
     organizationsLoading ||
     predictionsLoading ||
     tasksLoading ||
     queriesLoading ||
     countriesLoading;
-
-  const generateMonthRange = (
-    start: Date | null,
-    end: Date | null
-  ): string[] => {
+  const generateMonthRange = (start: Date | null, end: Date | null): string[] => {
     const now = new Date();
-
     const defaultStart = new Date();
     defaultStart.setMonth(now.getMonth() - 5);
     const defaultEnd = now;
-
     const rangeStart = start || defaultStart;
     const rangeEnd = end || defaultEnd;
-
     const startDateMonth = new Date(rangeStart.getFullYear(), rangeStart.getMonth(), 1);
     const endDateMonth = new Date(rangeEnd.getFullYear(), rangeEnd.getMonth(), 1);
-
     const months: string[] = [];
     const current = new Date(startDateMonth);
-
     while (current <= endDateMonth) {
       months.push(
         current.toLocaleString("en-US", { month: "short", year: "2-digit" })
       );
       current.setMonth(current.getMonth() + 1);
     }
-
     return months;
   };
-
   const allMonths = generateMonthRange(startDate, endDate);
-  const chartData = allMonths.map((month) => {
-    const value = organizationsByMonth[month] || 0;
-    return { month, value };
-  });
-
+  const chartData = allMonths.map((month) => ({
+    month,
+    value: organizationsByMonth[month] || 0,
+  }));
   return (
-    <div className="flex h-screen">
+    <div className="flex h-screen bg-gray-50">
       <Sidebar />
-      <div className="flex-1 bg-white px-5 py-2">
+      <div className="flex-1 flex flex-col bg-white px-2 md:px-5 xl:px-8 py-2 overflow-y-auto max-h-screen">
         <div className="mb-4">
           <CalendarPicker onDateChange={setDateRange} />
         </div>
-
-        <div className="grid grid-cols-4 bg-[#011729] text-yellow-400 rounded-md overflow-hidden">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 bg-[#011729] text-yellow-400 rounded-md  mb-6 shadow-md">
           {[
             {
               label: "High Risk Areas",
@@ -208,32 +175,29 @@ export default function DashboardPage() {
           ].map((statistic, index) => (
             <div
               key={index}
-              className="text-center p-6 border-r border-teal-800 last:border-r-0"
+              className="text-center p-6 border-b border-teal-800 sm:border-b-0 sm:border-r last:border-r-0"
             >
-              <p className="text-xl">{statistic.label}</p>
+              <p className="text-lg font-semibold">{statistic.label}</p>
               <div className="flex justify-center items-center h-8 text-2xl">
                 {statistic.value}
               </div>
             </div>
           ))}
         </div>
-
-        <div className="grid grid-cols-2 gap-6 mt-6">
-          <div className="bg-blue-50 rounded-lg p-4 shadow hover:bg-blue-100 transition-shadow">
-            <h2 className="text-lg font-semibold mb-4">
-              Active Organizations
-            </h2>
+       
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <div className="bg-blue-50 rounded-lg p-4 shadow hover:bg-blue-100 transition">
+            <h2 className="text-lg font-semibold mb-4">Active Organizations</h2>
             <ResponsiveContainer width="100%" height={300}>
-              <BarChart data={chartData} data-testid="bar-chart">
+              <BarChart data={chartData}  data-testid="bar-chart">
                 <XAxis dataKey="month" interval={0} />
                 <YAxis />
                 <Tooltip />
-                <Bar dataKey="value" fill="#0f2e2e" />
+                <Bar dataKey="value" fill="#0F2E2E" />
               </BarChart>
             </ResponsiveContainer>
           </div>
-
-          <div className="bg-blue-100 rounded-lg p-4 shadow hover:bg-blue-100 transition-shadow">
+          <div className="bg-blue-100 rounded-lg p-4 shadow hover:bg-blue-200 transition">
             <h2 className="text-lg font-semibold mb-4">AI Functionality</h2>
             <ResponsiveContainer width="100%" height={300}>
               <PieChart data-testid="pie-chart">
@@ -252,9 +216,9 @@ export default function DashboardPage() {
             </ResponsiveContainer>
           </div>
         </div>
-
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
-          <div className="bg-blue-100 rounded-lg p-4 shadow hover:bg-blue-100 transition-shadow">
+    
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6 pb-8">
+          <div className="bg-blue-100 rounded-lg p-4 shadow hover:bg-blue-200 transition">
             <h2 className="text-lg font-semibold mb-4">
               Number of High-Risk Countries
             </h2>
@@ -264,32 +228,22 @@ export default function DashboardPage() {
                 <XAxis dataKey="year" />
                 <YAxis />
                 <Tooltip />
-                <Line
-                  type="monotone"
-                  dataKey="value"
-                  stroke="#0f2e2e"
-                  strokeWidth={2}
-                />
+                <Line type="monotone" dataKey="value" stroke="#0F2E2E" strokeWidth={2} />
               </LineChart>
             </ResponsiveContainer>
           </div>
-
-          <div className="bg-gray-50 rounded-lg p-2 shadow hover:bg-gray-100 transition-shadow">
+          <div className="bg-gray-50 rounded-lg p-4 shadow hover:bg-gray-100 transition">
             <h2 className="text-lg font-semibold mb-4">High-Risk Countries</h2>
             {countriesLoading ? (
-              <p className="text-gray-500">
-                {isLoading ? (
-                  <FaSpinner className="animate-spin text-gray-500" />
-                ) : (
-                  <p className="text-2xl font-bold"></p>
-                )}
-              </p>
+              <div className="flex justify-center items-center h-40">
+                <FaSpinner className="animate-spin text-gray-500" />
+              </div>
             ) : countries && countries.length > 0 ? (
-              <div className="max-h-70 overflow-y-auto pr-2 space-y-2">
+              <div className="max-h-72 overflow-y-auto pr-2 space-y-2">
                 {countries.map((country: Country) => (
                   <div
                     key={country.country_id}
-                    className="px-3 py-2 bg-[#0f2e2e] rounded border border-gray-200 text-white"
+                    className="px-3 py-2 bg-[#0F2E2E] rounded border border-gray-200 text-white"
                   >
                     {country.countries_name}
                   </div>
@@ -303,4 +257,9 @@ export default function DashboardPage() {
       </div>
     </div>
   );
-}
+}
+
+
+
+
+