feat: api services tab for admin

web/src/components/Home/Tabs/ApiServices.tsx

@@ -0,0 +1,104 @@
+import 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 ApiServices: FC = () => {
+  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">
+          <tr>
+            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-gray-200">
+              Name
+            </th>
+            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-gray-200">
+              Client ID
+            </th>
+            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-gray-200">
+              Is Active
+            </th>
+            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-gray-200">
+              Created At
+            </th>
+            <th className="px-6 py-3 text-left text-sm font-semibold text-gray-700 dark:text-gray-200">
+              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()}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default ApiServices;

web/src/pages/Index/index.tsx

@@ -8,6 +8,7 @@ import Sidebar from "@/components/Home/Sidebar";
 import TopBar from "@/components/Home/TopBar";
 import Home from "@/components/Home/Tabs/Home";
 import PersonalInfo from "@/components/Home/Tabs/PersonalInfo";
+import ApiServices from "@/components/Home/Tabs/ApiServices";
 
 const IndexPage: FC = () => {
   const [tab, setTab] = useState<string>("home");
@@ -38,6 +39,7 @@ const IndexPage: FC = () => {
                 </div>
                 <div className="p-4">
                   {tab === "personal-info" && <PersonalInfo />}
+                  {tab === "api-services" && <ApiServices />}
                 </div>
               </div>
             </div>