feat: make dashboard service management actionable

app/(dashboard)/dashboard/services/page.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { Edit, Plus, Trash2 } from "lucide-react"
 import Link from "next/link"
 import { Badge } from "@/components/ui/badge"
@@ -11,9 +13,12 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
-import { mockServices } from "@/lib/mock"
+import { useServiceStore } from "@/store/services"
 
 export default function ServicesPage() {
+  const services = useServiceStore((state) => state.services)
+  const deleteService = useServiceStore((state) => state.deleteService)
+
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
@@ -43,7 +48,7 @@ export default function ServicesPage() {
               </TableRow>
             </TableHeader>
             <TableBody>
-              {mockServices.map((service) => (
+              {services.map((service) => (
                 <TableRow key={service.id}>
                   <TableCell className="font-medium">{service.title}</TableCell>
                   <TableCell>
@@ -63,11 +68,11 @@ export default function ServicesPage() {
                   <TableCell className="text-right">
                     <div className="flex justify-end gap-1">
                       <Button variant="ghost" size="icon" asChild>
-                        <Link href="/dashboard/services/new">
+                        <Link href={`/dashboard/services/new?serviceId=${service.id}`}>
                           <Edit className="h-4 w-4" />
                         </Link>
                       </Button>
-                      <Button variant="ghost" size="icon">
+                      <Button variant="ghost" size="icon" onClick={() => deleteService(service.id)}>
                         <Trash2 className="h-4 w-4 text-destructive" />
                       </Button>
                     </div>