feat(customers): full CRUD module — pattern for all other modules

Establishes the multi-tenant module pattern. Subsequent modules (services,
software, calendar, tasks, finance, invoices) will copy this structure.

Validation:
- lib/validation/customers.ts: Zod schema with Turkish messages, optional
  fields normalized to undefined.

Server actions (lib/appwrite/customer-actions.ts):
- createCustomerAction, updateCustomerAction, deleteCustomerAction
- All call requireTenant() guard, write team-scoped row permissions
  (read+update by team, delete by owner|admin), and emit audit log.
- Update/delete cross-check tenantId on the existing row before mutating
  (defense in depth even though row-level perms already enforce it).
- Field-level errors flattened from Zod for inline form display.

Server-side queries (lib/appwrite/customer-queries.ts):
- listCustomers(tenantId), getCustomer(tenantId, id) — admin SDK with
  Query.equal('tenantId',...) tenant scope.

UI:
- /customers page (server component): pulls active tenant context, lists
  customers, hands off to CustomersClient.
- CustomersClient: TanStack Table with global filter (name/email/phone/
  taxId), column sorting on name + createdAt, pagination (20/page),
  status badges, row actions (Edit/Delete dropdown), empty-state CTA.
- CustomerFormSheet: shadcn Sheet-based add/edit form with all fields,
  toast feedback (sonner), inline field errors. Reused for create + update
  by switching the action.
- DeleteCustomerDialog: confirmation modal with destructive button.

Infrastructure:
- Added sonner Toaster to root layout (richColors, closeButton).
- Updated metadata to 'İşletmem KovakCRM' and html lang='tr'.
- Renamed theme storage key to isletmem-ui-theme.
This commit is contained in:
kovakmedya
2026-04-30 05:44:00 +03:00
parent 643f2de29b
commit 94f2c92da1
10 changed files with 892 additions and 7 deletions
@@ -0,0 +1,187 @@
"use client";
import { useActionState, useEffect } from "react";
import { Loader2, Save } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
Sheet,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
} from "@/components/ui/sheet";
import { Textarea } from "@/components/ui/textarea";
import {
createCustomerAction,
updateCustomerAction,
} from "@/lib/appwrite/customer-actions";
import { initialCustomerState } from "@/lib/appwrite/customer-types";
import type { CustomerRow } from "./types";
type Props = {
open: boolean;
onOpenChange: (v: boolean) => void;
customer?: CustomerRow | null;
};
export function CustomerFormSheet({ open, onOpenChange, customer }: Props) {
const isEdit = Boolean(customer);
const action = isEdit ? updateCustomerAction : createCustomerAction;
const [state, formAction, isPending] = useActionState(action, initialCustomerState);
useEffect(() => {
if (state.ok) {
toast.success(isEdit ? "Müşteri güncellendi." : "Müşteri eklendi.");
onOpenChange(false);
} else if (state.error) {
toast.error(state.error);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [state]);
return (
<Sheet open={open} onOpenChange={onOpenChange}>
<SheetContent className="flex w-full flex-col gap-0 p-0 sm:max-w-xl">
<SheetHeader className="border-b px-6 py-4">
<SheetTitle>{isEdit ? "Müşteriyi düzenle" : "Yeni müşteri"}</SheetTitle>
<SheetDescription>
{isEdit
? "Müşteri bilgilerini güncelleyin."
: "Yeni bir müşteri ekleyin. * işaretli alanlar zorunludur."}
</SheetDescription>
</SheetHeader>
<form action={formAction} className="flex flex-1 flex-col">
{isEdit && customer && <input type="hidden" name="id" value={customer.id} />}
<div className="flex-1 space-y-4 overflow-y-auto px-6 py-5">
<div className="grid gap-2">
<Label htmlFor="name">Ad / Şirket adı *</Label>
<Input
id="name"
name="name"
defaultValue={customer?.name ?? ""}
placeholder="Örn. Acme Yazılım Ltd."
required
/>
{state.fieldErrors?.name && (
<p className="text-destructive text-xs">{state.fieldErrors.name}</p>
)}
</div>
<div className="grid gap-4 md:grid-cols-2">
<div className="grid gap-2">
<Label htmlFor="email">Email</Label>
<Input
id="email"
name="email"
type="email"
defaultValue={customer?.email ?? ""}
placeholder="info@acme.com"
/>
{state.fieldErrors?.email && (
<p className="text-destructive text-xs">{state.fieldErrors.email}</p>
)}
</div>
<div className="grid gap-2">
<Label htmlFor="phone">Telefon</Label>
<Input
id="phone"
name="phone"
type="tel"
defaultValue={customer?.phone ?? ""}
placeholder="+90 555 123 45 67"
/>
</div>
</div>
<div className="grid gap-4 md:grid-cols-2">
<div className="grid gap-2">
<Label htmlFor="taxId">Vergi numarası</Label>
<Input
id="taxId"
name="taxId"
defaultValue={customer?.taxId ?? ""}
placeholder="1234567890"
inputMode="numeric"
/>
</div>
<div className="grid gap-2">
<Label htmlFor="status">Durum</Label>
<Select name="status" defaultValue={customer?.status ?? "active"}>
<SelectTrigger id="status">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="active">Aktif</SelectItem>
<SelectItem value="passive">Pasif</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div className="grid gap-2">
<Label htmlFor="address">Adres</Label>
<Textarea
id="address"
name="address"
rows={2}
defaultValue={customer?.address ?? ""}
placeholder="Açık adres"
/>
</div>
<div className="grid gap-2">
<Label htmlFor="notes">Notlar</Label>
<Textarea
id="notes"
name="notes"
rows={4}
defaultValue={customer?.notes ?? ""}
placeholder="Müşteriye özel notlar"
/>
</div>
</div>
<SheetFooter className="border-t bg-muted/30 px-6 py-4">
<div className="flex w-full justify-end gap-2">
<Button
type="button"
variant="outline"
onClick={() => onOpenChange(false)}
disabled={isPending}
>
Vazgeç
</Button>
<Button type="submit" disabled={isPending}>
{isPending ? (
<>
<Loader2 className="size-4 animate-spin" />
Kaydediliyor...
</>
) : (
<>
<Save className="size-4" />
{isEdit ? "Güncelle" : "Kaydet"}
</>
)}
</Button>
</div>
</SheetFooter>
</form>
</SheetContent>
</Sheet>
);
}
@@ -0,0 +1,314 @@
"use client";
import { useMemo, useState } from "react";
import {
type ColumnDef,
type SortingState,
flexRender,
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";
import {
ArrowUpDown,
ChevronLeft,
ChevronRight,
MoreHorizontal,
Pencil,
Plus,
Search,
Trash2,
UserPlus,
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { CustomerFormSheet } from "./customer-form-sheet";
import { DeleteCustomerDialog } from "./delete-customer-dialog";
import type { CustomerRow } from "./types";
type Props = { customers: CustomerRow[] };
export function CustomersClient({ customers }: Props) {
const [globalFilter, setGlobalFilter] = useState("");
const [sorting, setSorting] = useState<SortingState>([]);
const [formOpen, setFormOpen] = useState(false);
const [editing, setEditing] = useState<CustomerRow | null>(null);
const [deleting, setDeleting] = useState<CustomerRow | null>(null);
const columns = useMemo<ColumnDef<CustomerRow>[]>(
() => [
{
accessorKey: "name",
header: ({ column }) => (
<Button
variant="ghost"
size="sm"
className="-ml-3 h-8"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
İsim
<ArrowUpDown className="ml-2 size-3.5" />
</Button>
),
cell: ({ row }) => <span className="font-medium">{row.original.name}</span>,
},
{
accessorKey: "email",
header: "Email",
cell: ({ row }) =>
row.original.email ? (
<a
href={`mailto:${row.original.email}`}
className="text-muted-foreground hover:text-foreground hover:underline"
>
{row.original.email}
</a>
) : (
<span className="text-muted-foreground"></span>
),
},
{
accessorKey: "phone",
header: "Telefon",
cell: ({ row }) =>
row.original.phone ? (
<a
href={`tel:${row.original.phone}`}
className="text-muted-foreground hover:text-foreground hover:underline"
>
{row.original.phone}
</a>
) : (
<span className="text-muted-foreground"></span>
),
},
{
accessorKey: "status",
header: "Durum",
cell: ({ row }) => (
<Badge variant={row.original.status === "active" ? "default" : "secondary"}>
{row.original.status === "active" ? "Aktif" : "Pasif"}
</Badge>
),
},
{
accessorKey: "createdAt",
header: ({ column }) => (
<Button
variant="ghost"
size="sm"
className="-ml-3 h-8"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Eklendi
<ArrowUpDown className="ml-2 size-3.5" />
</Button>
),
cell: ({ row }) => (
<span className="text-muted-foreground text-sm">
{new Date(row.original.createdAt).toLocaleDateString("tr-TR", {
day: "2-digit",
month: "short",
year: "numeric",
})}
</span>
),
},
{
id: "actions",
cell: ({ row }) => (
<div className="flex justify-end">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="size-8">
<MoreHorizontal className="size-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem
onClick={() => {
setEditing(row.original);
setFormOpen(true);
}}
>
<Pencil className="size-3.5" />
Düzenle
</DropdownMenuItem>
<DropdownMenuItem
variant="destructive"
onClick={() => setDeleting(row.original)}
>
<Trash2 className="size-3.5" />
Sil
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
),
},
],
[],
);
const table = useReactTable({
data: customers,
columns,
state: { globalFilter, sorting },
onGlobalFilterChange: setGlobalFilter,
onSortingChange: setSorting,
getCoreRowModel: getCoreRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getSortedRowModel: getSortedRowModel(),
getPaginationRowModel: getPaginationRowModel(),
initialState: { pagination: { pageSize: 20 } },
globalFilterFn: (row, _id, filterValue) => {
const v = String(filterValue).toLowerCase();
return [row.original.name, row.original.email, row.original.phone, row.original.taxId]
.join(" ")
.toLowerCase()
.includes(v);
},
});
return (
<Card>
<CardContent className="p-0">
<div className="flex flex-col gap-3 p-4 md:flex-row md:items-center md:justify-between">
<div className="relative md:max-w-xs md:flex-1">
<Search className="text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2" />
<Input
value={globalFilter}
onChange={(e) => setGlobalFilter(e.target.value)}
placeholder="İsim, email, telefon, vergi no..."
className="pl-9"
/>
</div>
<Button
onClick={() => {
setEditing(null);
setFormOpen(true);
}}
>
<Plus className="size-4" />
Yeni müşteri
</Button>
</div>
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(header.column.columnDef.header, header.getContext())}
</TableHead>
))}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows.length ? (
table.getRowModel().rows.map((row) => (
<TableRow key={row.id}>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={columns.length} className="h-32 text-center">
<div className="text-muted-foreground flex flex-col items-center gap-2">
<UserPlus className="size-6" />
<p className="text-sm">Henüz müşteri eklenmemiş.</p>
<Button
variant="outline"
size="sm"
onClick={() => {
setEditing(null);
setFormOpen(true);
}}
>
<Plus className="size-3.5" />
İlk müşteriyi ekle
</Button>
</div>
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
<div className="flex items-center justify-between border-t px-4 py-3">
<p className="text-muted-foreground text-sm">
Toplam {table.getFilteredRowModel().rows.length} müşteri
</p>
<div className="flex items-center gap-2">
<Button
variant="outline"
size="icon"
className="size-8"
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
>
<ChevronLeft className="size-4" />
</Button>
<span className="text-muted-foreground text-sm">
Sayfa {table.getState().pagination.pageIndex + 1} /{" "}
{Math.max(table.getPageCount(), 1)}
</span>
<Button
variant="outline"
size="icon"
className="size-8"
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
>
<ChevronRight className="size-4" />
</Button>
</div>
</div>
</CardContent>
<CustomerFormSheet
open={formOpen}
onOpenChange={(v) => {
setFormOpen(v);
if (!v) setEditing(null);
}}
customer={editing}
/>
<DeleteCustomerDialog
open={Boolean(deleting)}
onOpenChange={(v) => !v && setDeleting(null)}
id={deleting?.id ?? null}
name={deleting?.name ?? ""}
/>
</Card>
);
}
@@ -0,0 +1,76 @@
"use client";
import { useTransition } from "react";
import { Loader2, Trash2 } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { deleteCustomerAction } from "@/lib/appwrite/customer-actions";
export function DeleteCustomerDialog({
open,
onOpenChange,
id,
name,
}: {
open: boolean;
onOpenChange: (v: boolean) => void;
id: string | null;
name: string;
}) {
const [isPending, startTransition] = useTransition();
const handleDelete = () => {
if (!id) return;
startTransition(async () => {
const fd = new FormData();
fd.set("id", id);
const result = await deleteCustomerAction(fd);
if (result.ok) {
toast.success("Müşteri silindi.");
onOpenChange(false);
} else {
toast.error(result.error ?? "Silme başarısız.");
}
});
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent>
<DialogHeader>
<DialogTitle>Müşteriyi sil</DialogTitle>
<DialogDescription>
<strong>{name}</strong> kalıcı olarak silinecek. Bu işlem geri alınamaz.
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button variant="outline" onClick={() => onOpenChange(false)} disabled={isPending}>
Vazgeç
</Button>
<Button variant="destructive" onClick={handleDelete} disabled={isPending}>
{isPending ? (
<>
<Loader2 className="size-4 animate-spin" />
Siliniyor...
</>
) : (
<>
<Trash2 className="size-4" />
Sil
</>
)}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
@@ -0,0 +1,11 @@
export type CustomerRow = {
id: string;
name: string;
email: string;
phone: string;
taxId: string;
address: string;
notes: string;
status: "active" | "passive";
createdAt: string;
};
+47
View File
@@ -0,0 +1,47 @@
import type { Metadata } from "next";
import { redirect } from "next/navigation";
import { listCustomers } from "@/lib/appwrite/customer-queries";
import { requireTenant } from "@/lib/appwrite/tenant-guard";
import { CustomersClient } from "./components/customers-client";
export const metadata: Metadata = {
title: "İşletmem — Müşteriler",
};
export default async function CustomersPage() {
let ctx;
try {
ctx = await requireTenant();
} catch {
redirect("/onboarding");
}
const customers = await listCustomers(ctx.tenantId);
return (
<div className="flex-1 space-y-6 px-6 pt-0">
<div className="flex flex-col gap-1">
<p className="text-muted-foreground text-sm">{ctx.settings?.companyName ?? "Çalışma alanı"}</p>
<h1 className="text-2xl font-bold tracking-tight">Müşteriler</h1>
<p className="text-muted-foreground text-sm">
Müşterilerinizi yönetin, hizmet ve yazılım ilişkilerini buradan kurun.
</p>
</div>
<CustomersClient
customers={customers.map((c) => ({
id: c.$id,
name: c.name,
email: c.email ?? "",
phone: c.phone ?? "",
taxId: c.taxId ?? "",
address: c.address ?? "",
notes: c.notes ?? "",
status: (c.status ?? "active") as "active" | "passive",
createdAt: c.$createdAt,
}))}
/>
</div>
);
}
+7 -7
View File
@@ -2,12 +2,13 @@ import type { Metadata } from "next";
import "./globals.css";
import { ThemeProvider } from "@/components/theme-provider";
import { Toaster } from "@/components/ui/sonner";
import { SidebarConfigProvider } from "@/contexts/sidebar-context";
import { inter } from "@/lib/fonts";
export const metadata: Metadata = {
title: "Shadcn Dashboard",
description: "A dashboard built with Next.js and shadcn/ui",
title: "İşletmem KovakCRM",
description: "Multi-tenant CRM — KovakSoft",
};
export default function RootLayout({
@@ -16,13 +17,12 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
<html lang="en" className={`${inter.variable} antialiased`}>
<html lang="tr" className={`${inter.variable} antialiased`}>
<body className={inter.className}>
<ThemeProvider defaultTheme="system" storageKey="nextjs-ui-theme">
<SidebarConfigProvider>
{children}
</SidebarConfigProvider>
<ThemeProvider defaultTheme="system" storageKey="isletmem-ui-theme">
<SidebarConfigProvider>{children}</SidebarConfigProvider>
</ThemeProvider>
<Toaster richColors closeButton />
</body>
</html>
);