feat: use breadcrubms on api services page
This commit is contained in:
@ -1,44 +1,10 @@
|
||||
import Breadcrumbs from "@/components/ui/breadcrumbs";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useAdmin } from "@/store/admin";
|
||||
import { Plus } from "lucide-react";
|
||||
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 ApiServicesPage: FC = () => {
|
||||
const apiServices = useAdmin((state) => state.apiServices);
|
||||
const loading = useAdmin((state) => state.loadingApiServices);
|
||||
@ -49,91 +15,107 @@ const ApiServicesPage: FC = () => {
|
||||
}, [fetchApiServices]);
|
||||
|
||||
return (
|
||||
<div className="relative overflow-x-auto flex flex-col w-full h-full">
|
||||
<div className="relative flex flex-col items-stretch w-full h-full">
|
||||
<Breadcrumbs
|
||||
className="p-7 pb-2"
|
||||
items={[
|
||||
{
|
||||
href: "/admin",
|
||||
label: "Admin",
|
||||
},
|
||||
{
|
||||
label: "API Services",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<div className="p-4 flex flex-row items-center justify-between">
|
||||
<p className="text-gray-800 dark:text-gray-300">Search...</p>
|
||||
<Button className="flex flex-row items-center gap-2">
|
||||
<Plus /> Add API Service
|
||||
</Button>
|
||||
<Link to="/admin/api-services/create">
|
||||
<Button className="flex flex-row items-center gap-2">
|
||||
<Plus /> Add API Service
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<table className="relative 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">
|
||||
{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 className="flex-1 overflow-x-auto">
|
||||
<table className="relative min-w-full border-l-0 border border-gray-300 dark:border-gray-700 border-collapse divide-y divide-gray-200 dark:divide-gray-800">
|
||||
{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>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
<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-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-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-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-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-white/70 border border-l-0 border-gray-700 dark:border-gray-800">
|
||||
Updated At
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{!loading && apiServices.length === 0 ? (
|
||||
<thead className="bg-black/5 dark:bg-white/5">
|
||||
<tr>
|
||||
<td
|
||||
colSpan={5}
|
||||
className="px-6 py-12 text-center text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
No services found.
|
||||
</td>
|
||||
<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-300 dark:border-gray-700">
|
||||
Name
|
||||
</th>
|
||||
<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-300 dark:border-gray-700">
|
||||
Client ID
|
||||
</th>
|
||||
<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-300 dark:border-gray-700">
|
||||
Is Active
|
||||
</th>
|
||||
<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-300 dark:border-gray-700">
|
||||
Created At
|
||||
</th>
|
||||
<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-300 dark:border-gray-700">
|
||||
Updated At
|
||||
</th>
|
||||
</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()}
|
||||
</thead>
|
||||
<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>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
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>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user