admin/hspguard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: use breadcrubms on api services page

Browse Source
This commit is contained in:
Amir Adal
2025-05-31 16:15:47 +02:00
parent 62c90d0597
commit cd5adcdc3f
1 changed files with 92 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
web/src/pages/ApiServices/index.tsx
View File

@ -1,44 +1,10 @@
import Breadcrumbs from "@/components/ui/breadcrumbs";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { useAdmin } from "@/store/admin"; import { useAdmin } from "@/store/admin";
import { Plus } from "lucide-react"; import { Plus } from "lucide-react";
import { useEffect, type FC } from "react"; import { useEffect, type FC } from "react";
import { Link } from "react-router"; 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 ApiServicesPage: FC = () => {
const apiServices = useAdmin((state) => state.apiServices); const apiServices = useAdmin((state) => state.apiServices);
const loading = useAdmin((state) => state.loadingApiServices); const loading = useAdmin((state) => state.loadingApiServices);
@ -49,15 +15,30 @@ const ApiServicesPage: FC = () => {
}, [fetchApiServices]); }, [fetchApiServices]);
return ( 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"> <div className="p-4 flex flex-row items-center justify-between">
<p className="text-gray-800 dark:text-gray-300">Search...</p> <p className="text-gray-800 dark:text-gray-300">Search...</p>
<Link to="/admin/api-services/create">
<Button className="flex flex-row items-center gap-2"> <Button className="flex flex-row items-center gap-2">
<Plus /> Add API Service <Plus /> Add API Service
</Button> </Button>
</Link>
</div> </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"> <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 && ( {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="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"> <div className="text-gray-800 dark:text-gray-200 font-medium">
@ -68,19 +49,19 @@ const ApiServicesPage: FC = () => {
<thead className="bg-black/5 dark:bg-white/5"> <thead className="bg-black/5 dark:bg-white/5">
<tr> <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"> <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 Name
</th> </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"> <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 Client ID
</th> </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"> <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 Is Active
</th> </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"> <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 Created At
</th> </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"> <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 Updated At
</th> </th>
</tr> </tr>
@ -135,6 +116,7 @@ const ApiServicesPage: FC = () => {
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
); );
}; };