From 8abc4396ac1d0447931afac628b99de29b5a2168 Mon Sep 17 00:00:00 2001
From: LandaMm <qwer.009771@gmail.com>
Date: Fri, 30 May 2025 21:27:59 +0200
Subject: [PATCH] feat: integrate admin store in api services tab

---
 web/src/pages/ApiServices/index.tsx | 186 ++++++++++++++++------------
 1 file changed, 109 insertions(+), 77 deletions(-)

diff --git a/web/src/pages/ApiServices/index.tsx b/web/src/pages/ApiServices/index.tsx
index 6260e55..f7e0e25 100644
--- a/web/src/pages/ApiServices/index.tsx
+++ b/web/src/pages/ApiServices/index.tsx
@@ -1,100 +1,132 @@
-import type { FC } from "react";
+import { useAdmin } from "@/store/admin";
+import { useEffect, type FC } from "react";
 import { Link } from "react-router";
 
-const services = [
-  {
-    id: "1",
-    name: "User Service",
-    clientId: "user-svc-001",
-    isActive: true,
-    createdAt: "2024-09-15T10:20:30Z",
-    updatedAt: "2025-01-10T12:00:00Z",
-  },
-  {
-    id: "2",
-    name: "Billing Service",
-    clientId: "billing-svc-009",
-    isActive: false,
-    createdAt: "2024-10-01T08:45:10Z",
-    updatedAt: "2025-03-22T14:30:00Z",
-  },
-  {
-    id: "3",
-    name: "Analytics Service",
-    clientId: "analytics-svc-777",
-    isActive: true,
-    createdAt: "2024-11-25T16:00:00Z",
-    updatedAt: "2025-02-05T10:15:45Z",
-  },
-  {
-    id: "4",
-    name: "Email Service",
-    clientId: "email-svc-333",
-    isActive: false,
-    createdAt: "2023-07-10T13:00:00Z",
-    updatedAt: "2024-12-31T09:25:00Z",
-  },
-];
+// const services = [
+//   {
+//     id: "1",
+//     name: "User Service",
+//     clientId: "user-svc-001",
+//     isActive: true,
+//     createdAt: "2024-09-15T10:20:30Z",
+//     updatedAt: "2025-01-10T12:00:00Z",
+//   },
+//   {
+//     id: "2",
+//     name: "Billing Service",
+//     clientId: "billing-svc-009",
+//     isActive: false,
+//     createdAt: "2024-10-01T08:45:10Z",
+//     updatedAt: "2025-03-22T14:30:00Z",
+//   },
+//   {
+//     id: "3",
+//     name: "Analytics Service",
+//     clientId: "analytics-svc-777",
+//     isActive: true,
+//     createdAt: "2024-11-25T16:00:00Z",
+//     updatedAt: "2025-02-05T10:15:45Z",
+//   },
+//   {
+//     id: "4",
+//     name: "Email Service",
+//     clientId: "email-svc-333",
+//     isActive: false,
+//     createdAt: "2023-07-10T13:00:00Z",
+//     updatedAt: "2024-12-31T09:25:00Z",
+//   },
+// ];
 
 const ApiServicesPage: FC = () => {
+  const apiServices = useAdmin((state) => state.apiServices);
+  const loading = useAdmin((state) => state.loadingApiServices);
+  const fetchApiServices = useAdmin((state) => state.fetchApiServices);
+
+  useEffect(() => {
+    fetchApiServices();
+  }, [fetchApiServices]);
+
   return (
-    <div className="overflow-x-auto rounded shadow-md dark:shadow-gray-800">
-      <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-        <thead className="bg-gray-50 dark:bg-gray-800">
+    <div className="relative overflow-x-auto flex flex-col w-full h-full">
+      <div className="p-4">
+        <p className="text-gray-800 dark:text-gray-300">Search...</p>
+      </div>
+
+      {loading && (
+        <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/60 dark:bg-gray-900/60 backdrop-blur-sm">
+          <div className="text-gray-800 dark:text-gray-200 font-medium">
+            Loading...
+          </div>
+        </div>
+      )}
+
+      <table className="min-w-full flex-1 border-l-0 border border-gray-700 dark:border-gray-800 border-collapse divide-y divide-gray-200 dark:divide-gray-800">
+        <thead className="bg-black/5 dark:bg-white/5">
           <tr>
-            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-gray-200">
+            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-700 dark:border-gray-800">
               Name
             </th>
-            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-gray-200">
+            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-700 dark:border-gray-800">
               Client ID
             </th>
-            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-gray-200">
+            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-700 dark:border-gray-800">
               Is Active
             </th>
-            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-gray-200">
+            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-700 dark:border-gray-800">
               Created At
             </th>
-            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-gray-200">
+            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-white/70 border border-l-0 border-gray-700 dark:border-gray-800">
               Updated At
             </th>
           </tr>
         </thead>
-        <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
-          {services.map((service) => (
-            <tr
-              key={service.id}
-              className="hover:bg-gray-50 dark:hover:bg-gray-800"
-            >
-              <td className="px-6 py-4 text-sm font-medium text-blue-600">
-                <Link
-                  to={`/services/${service.id}`}
-                  className="hover:underline hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
-                >
-                  {service.name}
-                </Link>
-              </td>
-              <td className="px-6 py-4 text-sm text-gray-700 dark:text-gray-300">
-                {service.clientId}
-              </td>
-              <td className="px-6 py-4 text-sm">
-                <span
-                  className={`inline-block px-2 py-1 text-xs rounded-full font-semibold ${
-                    service.isActive
-                      ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
-                      : "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300"
-                  }`}
-                >
-                  {service.isActive ? "Yes" : "No"}
-                </span>
-              </td>
-              <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
-                {new Date(service.createdAt).toLocaleString()}
-              </td>
-              <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
-                {new Date(service.updatedAt).toLocaleString()}
+        <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+          {!loading && apiServices.length === 0 ? (
+            <tr>
+              <td
+                colSpan={5}
+                className="px-6 py-12 text-center text-gray-500 dark:text-gray-400"
+              >
+                No services found.
               </td>
             </tr>
-          ))}
+          ) : (
+            apiServices.map((service) => (
+              <tr
+                key={service.id}
+                className="hover:bg-gray-50 dark:hover:bg-gray-800"
+              >
+                <td className="px-6 py-4 text-sm font-medium text-blue-600 border border-gray-700">
+                  <Link
+                    to={`/services/${service.id}`}
+                    className="hover:underline hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+                  >
+                    {service.name}
+                  </Link>
+                </td>
+                <td className="px-6 py-4 text-sm text-gray-700 dark:text-gray-300 border border-gray-700">
+                  {service.client_id}
+                </td>
+                <td className="px-6 py-4 text-sm border border-gray-700">
+                  <span
+                    className={`inline-block px-2 py-1 text-xs rounded-full font-semibold ${
+                      service.is_active
+                        ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
+                        : "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300"
+                    }`}
+                  >
+                    {service.is_active ? "Yes" : "No"}
+                  </span>
+                </td>
+                <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-700">
+                  {new Date(service.created_at).toLocaleString()}
+                </td>
+                <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 border border-gray-700">
+                  {new Date(service.updated_at).toLocaleString()}
+                </td>
+              </tr>
+            ))
+          )}
         </tbody>
       </table>
     </div>