feat(ui): alışveriş listeleri, akıllı öneri paneli ve alışveriş modu

- /alisveris, /alisveris/:id ve /alisveris/:id/mod sayfaları; odak ve 30 sn yenileme
- stok önerileri paneli, kalem ekle/düzenle/taşı, mağazaya gruplu kontrol listesi
- dashboard Alışveriş kartı, kenar menü, ürün tipi formunda hacimli işareti

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/app/(app)/alisveris/[id]/mod/page.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { ShoppingModeView } from "@/features/shopping/components/shopping-mode";
+import { getShoppingList } from "@/features/shopping/service";
+import { tr } from "@/i18n/tr";
+import { requireActiveHousehold } from "@/lib/dal";
+
+export const metadata: Metadata = { title: tr.shopping.mode.title };
+
+/** /alisveris/:id/mod — alışverişe çıkış: mağazaya göre gruplu kontrol listesi. */
+export default async function ShoppingModePage({
+  params,
+  searchParams,
+}: PageProps<"/alisveris/[id]/mod">) {
+  const { user, household } = await requireActiveHousehold("viewer");
+  const [{ id }, query] = await Promise.all([params, searchParams]);
+  const data = await getShoppingList(user.id, household.id, id);
+  if (!data) notFound();
+  return (
+    <ShoppingModeView data={data} choice={query.plan === "single" ? "single" : "recommended"} />
+  );
+}

src/app/(app)/alisveris/[id]/page.tsx

@@ -0,0 +1,17 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { ShoppingListDetailView } from "@/features/shopping/components/list-detail";
+import { getShoppingList } from "@/features/shopping/service";
+import { tr } from "@/i18n/tr";
+import { requireActiveHousehold } from "@/lib/dal";
+
+export const metadata: Metadata = { title: tr.shopping.title };
+
+/** /alisveris/:id — liste kalemleri, stok önerileri ve akıllı mağaza önerisi. */
+export default async function ShoppingListPage({ params }: PageProps<"/alisveris/[id]">) {
+  const { user, household } = await requireActiveHousehold("viewer");
+  const { id } = await params;
+  const data = await getShoppingList(user.id, household.id, id);
+  if (!data) notFound();
+  return <ShoppingListDetailView data={data} />;
+}

src/app/(app)/alisveris/page.tsx

@@ -0,0 +1,30 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { PageHeader } from "@/components/page-header";
+import { ShoppingListsView } from "@/features/shopping/components/lists-view";
+import { listShoppingLists } from "@/features/shopping/service";
+import { tr } from "@/i18n/tr";
+import { requireActiveHousehold } from "@/lib/dal";
+
+export const metadata: Metadata = { title: tr.shopping.title };
+
+/** /alisveris — aktif ve tamamlanan alışveriş listeleri. */
+export default async function ShoppingPage() {
+  const { user, household } = await requireActiveHousehold("viewer");
+  const data = await listShoppingLists(user.id, household.id);
+  if (!data) notFound();
+  return (
+    <>
+      <PageHeader title={tr.shopping.title} description={tr.shopping.description} />
+      {!data.canWrite ? (
+        <p className="text-sm text-muted-foreground">{tr.shopping.readOnly}</p>
+      ) : null}
+      <ShoppingListsView
+        active={data.active}
+        completed={data.completed}
+        suggestions={data.suggestions}
+        canWrite={data.canWrite}
+      />
+    </>
+  );
+}

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

@@ -11,6 +11,7 @@ import { getBudget } from "@/features/budgets/service";
 import { ContactsDueBanner } from "@/features/contacts/components/due-banner";
 import { getNetWorth } from "@/features/net-worth/service";
 import { OverdueBanner } from "@/features/recurring/components/overdue-banner";
+import { ShoppingCard } from "@/features/shopping/components/shopping-card";
 import { LowStockCard } from "@/features/stock/components/low-stock-card";
 import { tr } from "@/i18n/tr";
 import { requireActiveHousehold } from "@/lib/dal";
@@ -106,9 +107,14 @@ export default async function DashboardPage() {
       <Suspense fallback={null}>
         <DailyPlanCard userId={user.id} householdId={household.id} />
       </Suspense>
-      <Suspense fallback={null}>
+      <div className="grid gap-4 lg:grid-cols-2 lg:items-start">
-        <LowStockCard userId={user.id} householdId={household.id} />
+        <Suspense fallback={null}>
-      </Suspense>
+          <LowStockCard userId={user.id} householdId={household.id} />
+        </Suspense>
+        <Suspense fallback={null}>
+          <ShoppingCard userId={user.id} householdId={household.id} />
+        </Suspense>
+      </div>
     </>
   );
 }

src/components/layout/nav-config.ts

@@ -28,7 +28,7 @@ export type NavItem = {
 
 /** Şu an tamamlanmış en yüksek faz — sayfalar eklendikçe artar. */
 /** Alt fazlar ondalıkla: 6.1 = Faz 6a. */
-export const CURRENT_PHASE = 12.2;
+export const CURRENT_PHASE = 13.1;
 
 export const isAvailable = (item: NavItem) => item.phase <= CURRENT_PHASE;
 
@@ -43,7 +43,7 @@ export const MAIN_NAV: NavItem[] = [
   { href: "/butce", label: tr.nav.budget, icon: Target, phase: 10.1 },
   { href: "/stok", label: tr.nav.stock, icon: Package, phase: 11.1 },
   { href: "/magazalar", label: tr.nav.stores, icon: Store, phase: 12.1 },
-  { href: "/alisveris", label: tr.nav.shopping, icon: ShoppingCart, phase: 13 },
+  { href: "/alisveris", label: tr.nav.shopping, icon: ShoppingCart, phase: 13.1 },
   { href: "/raporlar", label: tr.nav.reports, icon: ChartColumn, phase: 14 },
   { href: "/ayarlar", label: tr.nav.settings, icon: Settings, phase: 5 },
 ];

src/features/shopping/components/item-dialog.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import { ResponsiveDialog } from "@/components/responsive-dialog";
+import { Button } from "@/components/ui/button";
+import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { tr } from "@/i18n/tr";
+import { SHOPPING_ITEM_KINDS, type ShoppingItemKind } from "@/shared/shopping";
+import { quantityInput } from "@/shared/stock";
+import { addShoppingItemAction, updateShoppingItemAction } from "../actions";
+import type { ItemOptions, ShoppingItemView } from "../service";
+
+const t = tr.shopping;
+const f = t.fields;
+type Errors = Record<string, string | undefined>;
+
+/** Kalem ekle (ürün tipi / belirli marka / serbest metin) ya da düzenle (miktar, not). */
+export function ShoppingItemDialog({
+  listId,
+  item,
+  options,
+  onClose,
+}: {
+  listId: string;
+  item: ShoppingItemView | null;
+  options: ItemOptions;
+  onClose: () => void;
+}) {
+  const [v, setV] = useState({
+    kind: (item?.kind ?? "type") as ShoppingItemKind,
+    productTypeId: item?.productTypeId ?? "",
+    productId: item?.productId ?? "",
+    text: item?.text ?? "",
+    quantity: item?.quantity != null ? quantityInput(item.quantity) : "",
+    unit: item?.kind === "text" ? item.unit : "",
+    note: item?.note ?? "",
+  });
+  const [errors, setErrors] = useState<Errors>({});
+  const [busy, setBusy] = useState(false);
+  const set = <K extends keyof typeof v>(k: K, x: (typeof v)[K]) => setV((s) => ({ ...s, [k]: x }));
+
+  const typeUnit = options.types.find((x) => x.id === v.productTypeId)?.unit ?? "";
+  const unitSuffix =
+    v.kind === "type" ? (item?.unit ?? typeUnit) : v.kind === "product" ? t.packageUnit : "";
+  const productGroups = new Map<string, ItemOptions["products"]>();
+  for (const p of options.products)
+    productGroups.set(p.typeName, [...(productGroups.get(p.typeName) ?? []), p]);
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    const r = item
+      ? await updateShoppingItemAction(listId, item.id, {
+          quantity: v.quantity,
+          text: v.text,
+          unit: v.unit,
+          note: v.note,
+        })
+      : await addShoppingItemAction(listId, v);
+    setBusy(false);
+    if (r.ok) {
+      toast.success(item ? t.toast.itemSaved : t.toast.itemAdded);
+      onClose();
+    } else setErrors({ ...r.fieldErrors, root: r.fieldErrors ? undefined : r.error });
+  }
+
+  return (
+    <ResponsiveDialog
+      open
+      onOpenChange={(o) => !o && onClose()}
+      title={item ? t.editItemTitle : t.addItemTitle}
+      description={item && item.kind !== "text" ? item.label : undefined}
+      footer={
+        <>
+          <Button variant="outline" type="button" onClick={onClose}>
+            {tr.common.cancel}
+          </Button>
+          <Button type="submit" form="shopping-item-form" disabled={busy}>
+            {tr.common.save}
+          </Button>
+        </>
+      }
+    >
+      <form id="shopping-item-form" onSubmit={submit} noValidate>
+        <FieldGroup>
+          {item ? null : (
+            <Field>
+              <FieldLabel>{f.kind}</FieldLabel>
+              <Tabs value={v.kind} onValueChange={(x) => set("kind", x as ShoppingItemKind)}>
+                <TabsList className="w-full">
+                  {SHOPPING_ITEM_KINDS.map((k) => (
+                    <TabsTrigger key={k} value={k}>
+                      {t.kinds[k]}
+                    </TabsTrigger>
+                  ))}
+                </TabsList>
+              </Tabs>
+              <FieldDescription>{t.kindHints[v.kind]}</FieldDescription>
+            </Field>
+          )}
+          {!item && v.kind === "type" ? (
+            <Field data-invalid={Boolean(errors.productTypeId)}>
+              <FieldLabel htmlFor="si-type">{f.productType}</FieldLabel>
+              <Select value={v.productTypeId} onValueChange={(x) => set("productTypeId", x)}>
+                <SelectTrigger
+                  id="si-type"
+                  className="w-full"
+                  aria-invalid={Boolean(errors.productTypeId)}
+                >
+                  <SelectValue placeholder={t.validation.productType} />
+                </SelectTrigger>
+                <SelectContent className="max-h-72">
+                  {options.types.map((x) => (
+                    <SelectItem key={x.id} value={x.id}>
+                      {x.name} <span className="text-xs text-muted-foreground">({x.unit})</span>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {errors.productTypeId ? <FieldError>{errors.productTypeId}</FieldError> : null}
+            </Field>
+          ) : null}
+          {!item && v.kind === "product" ? (
+            <Field data-invalid={Boolean(errors.productId)}>
+              <FieldLabel htmlFor="si-product">{f.product}</FieldLabel>
+              <Select value={v.productId} onValueChange={(x) => set("productId", x)}>
+                <SelectTrigger
+                  id="si-product"
+                  className="w-full"
+                  aria-invalid={Boolean(errors.productId)}
+                >
+                  <SelectValue placeholder={t.validation.product} />
+                </SelectTrigger>
+                <SelectContent className="max-h-72">
+                  {[...productGroups.entries()].map(([group, rows]) => (
+                    <SelectGroup key={group}>
+                      <SelectLabel>{group}</SelectLabel>
+                      {rows.map((p) => (
+                        <SelectItem key={p.id} value={p.id}>
+                          {p.label}{" "}
+                          <span className="text-xs text-muted-foreground">({p.packageLabel})</span>
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  ))}
+                </SelectContent>
+              </Select>
+              {errors.productId ? <FieldError>{errors.productId}</FieldError> : null}
+            </Field>
+          ) : null}
+          {v.kind === "text" ? (
+            <Field data-invalid={Boolean(errors.text)}>
+              <FieldLabel htmlFor="si-text">{f.text}</FieldLabel>
+              <Input
+                id="si-text"
+                value={v.text}
+                placeholder={f.textPlaceholder}
+                onChange={(e) => set("text", e.target.value)}
+                aria-invalid={Boolean(errors.text)}
+                autoFocus={!item}
+              />
+              {errors.text ? <FieldError>{errors.text}</FieldError> : null}
+            </Field>
+          ) : null}
+          <div className="grid grid-cols-2 gap-3">
+            <Field data-invalid={Boolean(errors.quantity)}>
+              <FieldLabel htmlFor="si-qty">
+                {v.kind === "product" ? f.packages : f.quantity}
+                {unitSuffix ? ` (${unitSuffix})` : ""}
+              </FieldLabel>
+              <Input
+                id="si-qty"
+                inputMode="decimal"
+                value={v.quantity}
+                onChange={(e) => set("quantity", e.target.value)}
+                className="text-right tabular-nums"
+                aria-invalid={Boolean(errors.quantity)}
+              />
+              {errors.quantity ? <FieldError>{errors.quantity}</FieldError> : null}
+            </Field>
+            {v.kind === "text" ? (
+              <Field>
+                <FieldLabel htmlFor="si-unit">{f.unit}</FieldLabel>
+                <Input
+                  id="si-unit"
+                  value={v.unit}
+                  placeholder={f.unitPlaceholder}
+                  onChange={(e) => set("unit", e.target.value)}
+                />
+              </Field>
+            ) : null}
+          </div>
+          {v.kind !== "text" ? (
+            <FieldDescription className="-mt-2">{f.quantityHint}</FieldDescription>
+          ) : null}
+          <Field>
+            <FieldLabel htmlFor="si-note">{f.itemNote}</FieldLabel>
+            <Input
+              id="si-note"
+              value={v.note}
+              placeholder={f.itemNotePlaceholder}
+              onChange={(e) => set("note", e.target.value)}
+            />
+          </Field>
+          {errors.root ? <FieldError>{errors.root}</FieldError> : null}
+        </FieldGroup>
+      </form>
+    </ResponsiveDialog>
+  );
+}

src/features/shopping/components/list-detail.tsx

@@ -0,0 +1,491 @@
+"use client";
+
+import {
+  ArrowLeft,
+  ArrowRightLeft,
+  Check,
+  EllipsisVertical,
+  Package,
+  Pencil,
+  Plus,
+  ShoppingCart,
+  Sparkles,
+  Tag,
+  Trash2,
+  X,
+} from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { toast } from "sonner";
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { PageHeader } from "@/components/page-header";
+import { ResponsiveDialog } from "@/components/responsive-dialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Field, FieldLabel } from "@/components/ui/field";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useAutoRefresh } from "@/hooks/use-auto-refresh";
+import { tr } from "@/i18n/tr";
+import { cn } from "@/lib/utils";
+import { SHOPPING_REFRESH_MS } from "@/shared/shopping";
+import { formatStock } from "@/shared/stock";
+import {
+  approveSuggestionsAction,
+  deleteShoppingListAction,
+  dismissSuggestionAction,
+  moveShoppingItemAction,
+  removeShoppingItemAction,
+} from "../actions";
+import type { ShoppingItemView, ShoppingListDetail, SuggestionView } from "../service";
+import { ShoppingItemDialog } from "./item-dialog";
+import { ShoppingListDialog } from "./list-dialog";
+import { PlanPanel } from "./plan-panel";
+
+const t = tr.shopping;
+
+function SuggestionsPanel({
+  listId,
+  suggestions,
+  canWrite,
+}: {
+  listId: string;
+  suggestions: SuggestionView[];
+  canWrite: boolean;
+}) {
+  const [busy, setBusy] = useState<string | null>(null);
+  const s = t.suggestions;
+
+  async function approve(ids: string[]) {
+    setBusy(ids.length > 1 ? "all" : ids[0]!);
+    const r = await approveSuggestionsAction(listId, ids);
+    setBusy(null);
+    if (r.ok) toast.success(t.toast.suggestionsAdded(r.data.added));
+    else toast.error(r.error);
+  }
+  async function dismiss(id: string) {
+    setBusy(id);
+    const r = await dismissSuggestionAction(id);
+    setBusy(null);
+    if (r.ok) toast.success(t.toast.dismissed);
+    else toast.error(r.error);
+  }
+
+  return (
+    <section
+      aria-labelledby="sugg-h"
+      className="flex flex-col gap-3 rounded-xl border border-amber-500/40 bg-amber-500/5 p-4"
+    >
+      <div className="flex flex-wrap items-start gap-3">
+        <div className="min-w-0 flex-1">
+          <h2 id="sugg-h" className="flex items-center gap-1.5 font-medium">
+            <Sparkles className="size-4 text-amber-600" aria-hidden />
+            {s.title}
+          </h2>
+          <p className="text-sm text-muted-foreground">{s.description}</p>
+        </div>
+        {canWrite && suggestions.length > 1 ? (
+          <Button
+            size="sm"
+            variant="outline"
+            disabled={busy !== null}
+            onClick={() => approve(suggestions.map((x) => x.productTypeId))}
+          >
+            <Plus />
+            {s.addAll}
+          </Button>
+        ) : null}
+      </div>
+      <ul className="divide-y rounded-lg border bg-card">
+        {suggestions.map((x) => {
+          const reasons = [
+            x.suggestion.waste
+              ? tr.stock.suggestions.wasteReduced(
+                  x.suggestion.waste.purchases,
+                  x.suggestion.waste.pct,
+                )
+              : null,
+          ].filter(Boolean);
+          return (
+            <li key={x.productTypeId} className="flex flex-wrap items-center gap-x-3 gap-y-2 p-3">
+              <div className="min-w-0 flex-1">
+                <p className="truncate font-medium">
+                  <Link href={`/stok/${x.productTypeId}`} className="hover:underline">
+                    {x.name}
+                  </Link>
+                </p>
+                <p className="text-xs text-muted-foreground tabular-nums">
+                  {s.line(
+                    formatStock(Math.max(0, x.current), x.unit),
+                    formatStock(x.target, x.unit),
+                    x.pct,
+                  )}
+                </p>
+                <p className="text-sm tabular-nums">
+                  {s.suggested(formatStock(x.suggestedQuantity, x.unit))}
+                  {reasons.length ? (
+                    <span className="text-xs text-muted-foreground"> · {reasons.join(" · ")}</span>
+                  ) : null}
+                </p>
+              </div>
+              {canWrite ? (
+                <div className="flex gap-2">
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    disabled={busy !== null}
+                    title={s.dismissHint}
+                    onClick={() => dismiss(x.productTypeId)}
+                  >
+                    <X />
+                    {s.dismiss}
+                  </Button>
+                  <Button
+                    size="sm"
+                    disabled={busy !== null}
+                    onClick={() => approve([x.productTypeId])}
+                  >
+                    <Check />
+                    {s.add}
+                  </Button>
+                </div>
+              ) : null}
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}
+
+const KIND_ICON = { type: Package, product: Tag, text: null } as const;
+
+function ItemRow({
+  item,
+  canWrite,
+  onEdit,
+  onMove,
+  onRemove,
+}: {
+  item: ShoppingItemView;
+  canWrite: boolean;
+  onEdit: () => void;
+  onMove: () => void;
+  onRemove: () => void;
+}) {
+  const Icon = KIND_ICON[item.kind];
+  return (
+    <li className={cn("flex items-center gap-3 p-3", item.checked && "bg-muted/30")}>
+      <span
+        aria-hidden
+        className="flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground"
+      >
+        {item.checked ? (
+          <Check className="size-4 text-income" />
+        ) : Icon ? (
+          <Icon className="size-4" />
+        ) : (
+          <span className="text-xs">Aa</span>
+        )}
+      </span>
+      <div className="min-w-0 flex-1">
+        <p
+          className={cn(
+            "truncate font-medium",
+            item.checked && "text-muted-foreground line-through",
+          )}
+        >
+          {item.kind === "type" && item.productTypeId ? (
+            <Link href={`/stok/${item.productTypeId}`} className="hover:underline">
+              {item.label}
+            </Link>
+          ) : item.kind === "product" && item.productId ? (
+            <Link href={`/stok/urunler/${item.productId}`} className="hover:underline">
+              {item.label}
+            </Link>
+          ) : (
+            item.label
+          )}
+        </p>
+        {item.detail || item.stock ? (
+          <p className="truncate text-xs text-muted-foreground">
+            {item.stock ? t.stockLine(item.stock.current, item.stock.target) : item.detail}
+          </p>
+        ) : null}
+        <div className="mt-1 flex flex-wrap items-center gap-1.5">
+          {item.checked ? <Badge variant="secondary">{tr.shopping.mode.inCart}</Badge> : null}
+          {item.source === "suggestion" ? (
+            <Badge variant="outline" className="gap-1">
+              <Sparkles className="size-3" aria-hidden />
+              {t.fromSuggestion}
+            </Badge>
+          ) : null}
+          {item.archived ? <Badge variant="secondary">{t.archivedRef}</Badge> : null}
+          {item.note ? <span className="text-xs text-muted-foreground">{item.note}</span> : null}
+        </div>
+      </div>
+      <span className="shrink-0 text-sm tabular-nums">{item.quantityLabel}</span>
+      {canWrite ? (
+        <DropdownMenu modal={false}>
+          <DropdownMenuTrigger asChild>
+            <Button size="icon-sm" variant="ghost" aria-label={`${item.label}: ${t.actions.more}`}>
+              <EllipsisVertical />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onSelect={onEdit}>
+              <Pencil />
+              {t.actions.edit}
+            </DropdownMenuItem>
+            <DropdownMenuItem onSelect={onMove}>
+              <ArrowRightLeft />
+              {t.actions.moveTo}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem variant="destructive" onSelect={onRemove}>
+              <Trash2 />
+              {t.actions.remove}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ) : null}
+    </li>
+  );
+}
+
+function MoveDialog({
+  listId,
+  item,
+  lists,
+  onClose,
+}: {
+  listId: string;
+  item: ShoppingItemView;
+  lists: { id: string; name: string }[];
+  onClose: () => void;
+}) {
+  const [target, setTarget] = useState(lists[0]?.id ?? "");
+  const [busy, setBusy] = useState(false);
+  async function submit() {
+    setBusy(true);
+    const r = await moveShoppingItemAction(listId, item.id, target);
+    setBusy(false);
+    if (r.ok) {
+      toast.success(t.toast.moved);
+      onClose();
+    } else toast.error(r.error);
+  }
+  return (
+    <ResponsiveDialog
+      open
+      onOpenChange={(o) => !o && onClose()}
+      title={t.moveTitle}
+      description={t.moveDescription(item.label)}
+      footer={
+        <>
+          <Button variant="outline" onClick={onClose}>
+            {tr.common.cancel}
+          </Button>
+          <Button onClick={submit} disabled={busy || !target}>
+            {t.actions.moveTo}
+          </Button>
+        </>
+      }
+    >
+      {lists.length ? (
+        <Field>
+          <FieldLabel htmlFor="sm-target">{t.moveTarget}</FieldLabel>
+          <Select value={target} onValueChange={setTarget}>
+            <SelectTrigger id="sm-target" className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {lists.map((l) => (
+                <SelectItem key={l.id} value={l.id}>
+                  {l.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </Field>
+      ) : (
+        <p className="text-sm text-muted-foreground">{t.noOtherLists}</p>
+      )}
+    </ResponsiveDialog>
+  );
+}
+
+/** /alisveris/:id — kalemler, stok önerileri (onayla/reddet), akıllı mağaza önerisi. */
+export function ShoppingListDetailView({ data }: { data: ShoppingListDetail }) {
+  const router = useRouter();
+  const { list, items, canWrite } = data;
+  const [adding, setAdding] = useState(false);
+  const [editing, setEditing] = useState<ShoppingItemView | null>(null);
+  const [moving, setMoving] = useState<ShoppingItemView | null>(null);
+  const [editingList, setEditingList] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  useAutoRefresh(SHOPPING_REFRESH_MS);
+
+  async function remove(item: ShoppingItemView) {
+    const r = await removeShoppingItemAction(list.id, item.id);
+    if (r.ok) toast.success(t.toast.itemRemoved);
+    else toast.error(r.error);
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Button variant="ghost" size="sm" asChild className="-ml-2 w-fit">
+        <Link href="/alisveris">
+          <ArrowLeft />
+          {t.actions.back}
+        </Link>
+      </Button>
+      <div className="flex items-start gap-3">
+        <div className="min-w-0 flex-1">
+          <PageHeader
+            title={list.name}
+            description={
+              <>
+                {t.itemCount(list.itemCount)}
+                {list.checkedCount ? ` · ${t.checkedCount(list.checkedCount, list.itemCount)}` : ""}
+                {list.note ? ` · ${list.note}` : ""}
+              </>
+            }
+          />
+        </div>
+        {canWrite ? (
+          <DropdownMenu modal={false}>
+            <DropdownMenuTrigger asChild>
+              <Button size="icon-sm" variant="ghost" aria-label={t.actions.more}>
+                <EllipsisVertical />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onSelect={() => setEditingList(true)}>
+                <Pencil />
+                {t.actions.editList}
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem variant="destructive" onSelect={() => setDeleting(true)}>
+                <Trash2 />
+                {t.actions.deleteList}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ) : null}
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        {canWrite ? (
+          <Button size="sm" onClick={() => setAdding(true)}>
+            <Plus />
+            {t.actions.addItem}
+          </Button>
+        ) : null}
+        {items.length && list.status === "active" ? (
+          <Button size="sm" variant="outline" asChild>
+            <Link href={`/alisveris/${list.id}/mod`}>
+              <ShoppingCart />
+              {t.actions.goShopping}
+            </Link>
+          </Button>
+        ) : null}
+      </div>
+
+      <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_minmax(0,26rem)] xl:items-start">
+        <div className="flex flex-col gap-4">
+          {data.suggestions.length ? (
+            <SuggestionsPanel listId={list.id} suggestions={data.suggestions} canWrite={canWrite} />
+          ) : null}
+          {items.length ? (
+            <ul className="divide-y rounded-xl border bg-card">
+              {items.map((i) => (
+                <ItemRow
+                  key={i.id}
+                  item={i}
+                  canWrite={canWrite}
+                  onEdit={() => setEditing(i)}
+                  onMove={() => setMoving(i)}
+                  onRemove={() => remove(i)}
+                />
+              ))}
+            </ul>
+          ) : (
+            <p className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
+              {t.emptyList}
+            </p>
+          )}
+        </div>
+        <PlanPanel plan={data.plan} items={items} />
+      </div>
+
+      {adding || editing ? (
+        <ShoppingItemDialog
+          listId={list.id}
+          item={editing}
+          options={data.options}
+          onClose={() => {
+            setAdding(false);
+            setEditing(null);
+          }}
+        />
+      ) : null}
+      {moving ? (
+        <MoveDialog
+          listId={list.id}
+          item={moving}
+          lists={data.otherLists}
+          onClose={() => setMoving(null)}
+        />
+      ) : null}
+      {editingList ? (
+        <ShoppingListDialog list={list} onClose={() => setEditingList(false)} />
+      ) : null}
+      <AlertDialog open={deleting} onOpenChange={setDeleting}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t.deleteTitle}</AlertDialogTitle>
+            <AlertDialogDescription>{t.deleteDescription(list.name)}</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{tr.common.cancel}</AlertDialogCancel>
+            <Button
+              variant="destructive"
+              onClick={async () => {
+                setDeleting(false);
+                const r = await deleteShoppingListAction(list.id);
+                if (r.ok) {
+                  toast.success(t.toast.deleted);
+                  router.push("/alisveris");
+                } else toast.error(r.error);
+              }}
+            >
+              {t.actions.deleteList}
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}

src/features/shopping/components/list-dialog.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { toast } from "sonner";
+import { ResponsiveDialog } from "@/components/responsive-dialog";
+import { Button } from "@/components/ui/button";
+import { Field, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { tr } from "@/i18n/tr";
+import { saveShoppingListAction } from "../actions";
+
+const t = tr.shopping;
+
+/** Yeni liste / listeyi düzenle. Yeni liste açılınca detayına gider. */
+export function ShoppingListDialog({
+  list,
+  onClose,
+}: {
+  list: { id: string; name: string; note: string } | null;
+  onClose: () => void;
+}) {
+  const router = useRouter();
+  const [v, setV] = useState({ name: list?.name ?? "", note: list?.note ?? "" });
+  const [errors, setErrors] = useState<Record<string, string | undefined>>({});
+  const [busy, setBusy] = useState(false);
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    const r = await saveShoppingListAction(list?.id ?? null, v);
+    setBusy(false);
+    if (!r.ok) {
+      setErrors({ ...r.fieldErrors, root: r.fieldErrors ? undefined : r.error });
+      return;
+    }
+    toast.success(t.toast.saved);
+    onClose();
+    if (!list && r.data && typeof r.data === "object" && "id" in r.data)
+      router.push(`/alisveris/${r.data.id}`);
+  }
+
+  return (
+    <ResponsiveDialog
+      open
+      onOpenChange={(o) => !o && onClose()}
+      title={list ? t.editTitle : t.createTitle}
+      footer={
+        <>
+          <Button variant="outline" type="button" onClick={onClose}>
+            {tr.common.cancel}
+          </Button>
+          <Button type="submit" form="shopping-list-form" disabled={busy}>
+            {tr.common.save}
+          </Button>
+        </>
+      }
+    >
+      <form id="shopping-list-form" onSubmit={submit} noValidate>
+        <FieldGroup>
+          <Field data-invalid={Boolean(errors.name)}>
+            <FieldLabel htmlFor="sl-name">{t.fields.name}</FieldLabel>
+            <Input
+              id="sl-name"
+              value={v.name}
+              placeholder={t.fields.namePlaceholder}
+              onChange={(e) => setV((s) => ({ ...s, name: e.target.value }))}
+              aria-invalid={Boolean(errors.name)}
+              autoFocus
+            />
+            {errors.name ? <FieldError>{errors.name}</FieldError> : null}
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="sl-note">{t.fields.note}</FieldLabel>
+            <Input
+              id="sl-note"
+              value={v.note}
+              onChange={(e) => setV((s) => ({ ...s, note: e.target.value }))}
+            />
+          </Field>
+          {errors.root ? <FieldError>{errors.root}</FieldError> : null}
+        </FieldGroup>
+      </form>
+    </ResponsiveDialog>
+  );
+}

src/features/shopping/components/lists-view.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { CheckCircle2, ListChecks, Plus, Sparkles } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { useAutoRefresh } from "@/hooks/use-auto-refresh";
+import { tr } from "@/i18n/tr";
+import { formatDate } from "@/shared/format";
+import { SHOPPING_REFRESH_MS } from "@/shared/shopping";
+import type { ShoppingListSummary } from "../service";
+import { ShoppingListDialog } from "./list-dialog";
+
+const t = tr.shopping;
+
+function ListCard({ list }: { list: ShoppingListSummary }) {
+  const done = list.status === "completed";
+  const Icon = done ? CheckCircle2 : ListChecks;
+  return (
+    <li>
+      <Link
+        href={`/alisveris/${list.id}`}
+        className="flex h-full flex-col gap-2 rounded-xl border bg-card p-4 transition-colors hover:bg-accent/40 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
+      >
+        <div className="flex items-start gap-3">
+          <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted">
+            <Icon className="size-4.5 text-muted-foreground" aria-hidden />
+          </span>
+          <div className="min-w-0 flex-1">
+            <p className="truncate font-medium">{list.name}</p>
+            <p className="text-xs text-muted-foreground tabular-nums">
+              {t.itemCount(list.itemCount)}
+              {list.checkedCount && !done
+                ? ` · ${t.checkedCount(list.checkedCount, list.itemCount)}`
+                : ""}
+            </p>
+          </div>
+        </div>
+        {list.preview.length ? (
+          <p className="line-clamp-2 text-sm text-muted-foreground">
+            {list.preview.join(", ")}
+            {list.itemCount > list.preview.length ? "…" : ""}
+          </p>
+        ) : (
+          <p className="text-sm text-muted-foreground">{t.emptyList}</p>
+        )}
+        <p className="mt-auto text-xs text-muted-foreground">
+          {done && list.completedAt
+            ? t.completedAt(formatDate(list.completedAt))
+            : t.updated(formatDate(list.updatedAt))}
+        </p>
+      </Link>
+    </li>
+  );
+}
+
+/** /alisveris: aktif ve tamamlanan listeler, yeni liste, bekleyen stok önerileri. */
+export function ShoppingListsView({
+  active,
+  completed,
+  suggestions,
+  canWrite,
+}: {
+  active: ShoppingListSummary[];
+  completed: ShoppingListSummary[];
+  suggestions: number;
+  canWrite: boolean;
+}) {
+  const [creating, setCreating] = useState(false);
+  useAutoRefresh(SHOPPING_REFRESH_MS);
+
+  return (
+    <div className="flex flex-col gap-6">
+      {suggestions > 0 ? (
+        <p className="flex items-start gap-2 rounded-lg border border-amber-500/40 bg-amber-500/5 p-3 text-sm">
+          <Sparkles className="mt-0.5 size-4 shrink-0 text-amber-600" aria-hidden />
+          {t.suggestionsBanner(suggestions)}
+        </p>
+      ) : null}
+      <section className="flex flex-col gap-3">
+        <div className="flex items-center gap-3">
+          <h2 className="text-sm font-medium text-muted-foreground">{t.active}</h2>
+          {canWrite ? (
+            <Button size="sm" className="ml-auto" onClick={() => setCreating(true)}>
+              <Plus />
+              {t.newList}
+            </Button>
+          ) : null}
+        </div>
+        {active.length ? (
+          <ul className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+            {active.map((l) => (
+              <ListCard key={l.id} list={l} />
+            ))}
+          </ul>
+        ) : (
+          <p className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
+            {t.emptyActive}
+          </p>
+        )}
+      </section>
+      {completed.length ? (
+        <section className="flex flex-col gap-3">
+          <h2 className="text-sm font-medium text-muted-foreground">{t.completed}</h2>
+          <ul className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+            {completed.map((l) => (
+              <ListCard key={l.id} list={l} />
+            ))}
+          </ul>
+        </section>
+      ) : null}
+      {creating ? <ShoppingListDialog list={null} onClose={() => setCreating(false)} /> : null}
+    </div>
+  );
+}

src/features/shopping/components/plan-panel.tsx

@@ -0,0 +1,194 @@
+"use client";
+
+import { Globe, Info, Utensils } from "lucide-react";
+import { useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { StoreDot } from "@/features/prices/components/offers-list";
+import { tr } from "@/i18n/tr";
+import { formatMoney } from "@/shared/format";
+import { formatUnitPrice } from "@/shared/prices";
+import { formatQuantity } from "@/shared/quantity";
+import type { PlanOption } from "@/shared/shopping-plan";
+import type { ShoppingItemView, ShoppingPlanView } from "../service";
+
+const t = tr.shopping.plan;
+
+export type PlanChoice = "recommended" | "single";
+
+const sameStores = (a: PlanOption | null, b: PlanOption | null) =>
+  (a?.stores.map((s) => s.storeId).join() ?? "") === (b?.stores.map((s) => s.storeId).join() ?? "");
+
+/** "Tek mağaza en iyi seçenek: X" ya da "Önerilen dağılım: A (7 ürün), B (3 ürün): Y (Z tasarruf)". */
+export function planHeadline(plan: ShoppingPlanView): string | null {
+  const rec = plan.recommended;
+  if (!rec) return null;
+  const label = (id: string) => plan.stores[id]?.label ?? "—";
+  if (rec.stores.length === 1 && rec.missing.length === 0)
+    return t.singleBest(label(rec.stores[0]!.storeId), formatMoney(rec.totalMinor));
+  const parts = rec.stores.map((g) => t.part(label(g.storeId), g.lines.length)).join(", ");
+  const saving =
+    plan.savingMinor && plan.savingMinor > 0 ? ` (${t.saving(formatMoney(plan.savingMinor))})` : "";
+  return `${t.split(parts, formatMoney(rec.totalMinor))}${saving}`;
+}
+
+function PlanGroups({
+  option,
+  plan,
+  itemLabel,
+}: {
+  option: PlanOption;
+  plan: ShoppingPlanView;
+  itemLabel: Map<string, string>;
+}) {
+  return (
+    <div className="flex flex-col gap-3">
+      {option.stores.map((g) => {
+        const store = plan.stores[g.storeId];
+        return (
+          <section key={g.storeId} className="overflow-hidden rounded-lg border">
+            <header className="flex flex-wrap items-center gap-x-3 gap-y-1 border-b bg-muted/40 px-3 py-2">
+              <h3 className="flex min-w-0 items-center text-sm font-medium">
+                <StoreDot slot={store?.slot ?? 1} />
+                <span className="truncate">{store?.label ?? "—"}</span>
+                {store?.kind === "online" ? (
+                  <Globe className="ml-1.5 size-3.5 text-muted-foreground" aria-hidden />
+                ) : null}
+              </h3>
+              {g.mealCardMinor > 0 ? (
+                <Badge variant="outline" className="gap-1">
+                  <Utensils className="size-3" aria-hidden />
+                  {t.mealCard(formatMoney(g.mealCardMinor))}
+                </Badge>
+              ) : null}
+              <span className="ml-auto text-sm font-medium tabular-nums">
+                {formatMoney(g.subtotalMinor + g.deliveryFeeMinor)}
+              </span>
+            </header>
+            <ul className="divide-y">
+              {g.lines.map((l) => {
+                const p = plan.products[l.productId];
+                return (
+                  <li
+                    key={l.itemId}
+                    className="grid grid-cols-[minmax(0,1fr)_auto] gap-x-3 px-3 py-2 text-sm"
+                  >
+                    <span className="min-w-0">
+                      <span className="block truncate">{itemLabel.get(l.itemId) ?? "—"}</span>
+                      <span className="block truncate text-xs text-muted-foreground">
+                        {p
+                          ? p.label === itemLabel.get(l.itemId)
+                            ? p.packageLabel
+                            : `${p.label} · ${p.packageLabel}`
+                          : "—"}
+                        {p ? ` · ${formatUnitPrice(l.unitPriceMinor, p.typeUnit)}` : ""}
+                      </span>
+                    </span>
+                    <span className="text-right tabular-nums">
+                      <span className="block">{formatMoney(l.costMinor)}</span>
+                      {l.packages > 1 ? (
+                        <span className="block text-xs text-muted-foreground">
+                          {t.line(formatQuantity(l.packages * 1000), formatMoney(l.priceMinor))}
+                        </span>
+                      ) : null}
+                    </span>
+                  </li>
+                );
+              })}
+              {store?.kind === "online" ? (
+                <li className="flex justify-between px-3 py-2 text-xs text-muted-foreground">
+                  <span>
+                    {g.deliveryFeeMinor
+                      ? t.delivery(formatMoney(g.deliveryFeeMinor))
+                      : t.freeDelivery}
+                  </span>
+                  <span className="tabular-nums">
+                    {g.deliveryFeeMinor ? formatMoney(g.deliveryFeeMinor) : ""}
+                  </span>
+                </li>
+              ) : null}
+            </ul>
+          </section>
+        );
+      })}
+      {option.missing.length ? (
+        <p className="text-sm text-muted-foreground">
+          {t.missing}: {option.missing.map((id) => itemLabel.get(id) ?? "—").join(", ")}
+        </p>
+      ) : null}
+      <p className="flex justify-between border-t pt-2 text-sm font-medium">
+        <span>{t.total}</span>
+        <span className="tabular-nums">{formatMoney(option.totalMinor)}</span>
+      </p>
+    </div>
+  );
+}
+
+/** Liste detayında akıllı mağaza önerisi: özet cümle, önerilen / tek mağaza dağılımı. */
+export function PlanPanel({ plan, items }: { plan: ShoppingPlanView; items: ShoppingItemView[] }) {
+  const [choice, setChoice] = useState<PlanChoice>("recommended");
+  const itemLabel = new Map(items.map((i) => [i.id, i.label]));
+  const headline = planHeadline(plan);
+  const differs = plan.single && !sameStores(plan.single, plan.recommended);
+  const option = choice === "single" && differs ? plan.single! : plan.recommended;
+  const hasText = items.some((i) => i.kind === "text");
+
+  return (
+    <section className="flex flex-col gap-3 rounded-xl border bg-card p-4" aria-labelledby="plan-h">
+      <div>
+        <h2 id="plan-h" className="font-medium">
+          {t.title}
+        </h2>
+        <p className="text-sm text-muted-foreground">{t.description}</p>
+      </div>
+      {!option ? (
+        <p className="text-sm text-muted-foreground">{t.empty}</p>
+      ) : (
+        <>
+          {headline ? <p className="text-sm font-medium">{headline}</p> : null}
+          {plan.single && plan.single.missing.length && differs ? (
+            <p className="text-xs text-muted-foreground">
+              {t.singleMissing(plan.single.missing.length)}
+            </p>
+          ) : null}
+          {differs ? (
+            <Tabs value={choice} onValueChange={(x) => setChoice(x as PlanChoice)}>
+              <TabsList>
+                <TabsTrigger value="recommended">{t.recommended}</TabsTrigger>
+                <TabsTrigger value="single">{t.single}</TabsTrigger>
+              </TabsList>
+            </Tabs>
+          ) : null}
+          <PlanGroups option={option} plan={plan} itemLabel={itemLabel} />
+        </>
+      )}
+      {plan.unpriced.length ? (
+        <p className="text-sm">
+          <span className="font-medium">{t.unpriced}:</span>{" "}
+          <span className="text-muted-foreground">
+            {plan.unpriced.map((id) => itemLabel.get(id) ?? "—").join(", ")}
+          </span>
+          <span className="block text-xs text-muted-foreground">{t.unpricedHint}</span>
+        </p>
+      ) : null}
+      <ul className="flex flex-col gap-1 text-xs text-muted-foreground">
+        <li className="flex gap-1.5">
+          <Info className="mt-0.5 size-3 shrink-0" aria-hidden />
+          {t.threshold(formatMoney(plan.thresholdMinor))}
+        </li>
+        {plan.mealCardBalanceMinor > 0 ? (
+          <li className="flex gap-1.5">
+            <Utensils className="mt-0.5 size-3 shrink-0" aria-hidden />
+            {t.mealCardBalance(formatMoney(plan.mealCardBalanceMinor))}
+          </li>
+        ) : null}
+        {hasText ? (
+          <li className="flex gap-1.5">
+            <Info className="mt-0.5 size-3 shrink-0" aria-hidden />
+            {t.textItems}
+          </li>
+        ) : null}
+      </ul>
+    </section>
+  );
+}

src/features/shopping/components/shopping-card.tsx

@@ -0,0 +1,59 @@
+import { ShoppingCart, Sparkles } from "lucide-react";
+import Link from "next/link";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { tr } from "@/i18n/tr";
+import { getActiveListsSummary } from "../service";
+
+const t = tr.shopping;
+const LIMIT = 3;
+
+/** Dashboard: aktif alışveriş listeleri ve bekleyen stok önerileri. Liste ve öneri yoksa gizli. */
+export async function ShoppingCard({
+  userId,
+  householdId,
+}: {
+  userId: string;
+  householdId: string;
+}) {
+  const data = await getActiveListsSummary(userId, householdId);
+  if (!data || (!data.lists.length && !data.suggestions)) return null;
+  return (
+    <Card size="sm">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-base">
+          <ShoppingCart className="size-4 text-muted-foreground" aria-hidden />
+          {t.dashboard.title}
+        </CardTitle>
+        {data.suggestions ? (
+          <CardDescription className="flex items-center gap-1.5">
+            <Sparkles className="size-3.5 text-amber-600" aria-hidden />
+            {t.dashboard.suggestions(data.suggestions)}
+          </CardDescription>
+        ) : null}
+      </CardHeader>
+      <CardContent className="flex flex-col gap-3">
+        {data.lists.length ? (
+          <ul className="divide-y text-sm">
+            {data.lists.slice(0, LIMIT).map((l) => (
+              <li key={l.id} className="flex items-center justify-between gap-3 py-1.5">
+                <Link href={`/alisveris/${l.id}`} className="min-w-0 truncate hover:underline">
+                  {l.name}
+                </Link>
+                <span className="shrink-0 text-xs text-muted-foreground tabular-nums">
+                  {l.checkedCount
+                    ? t.checkedCount(l.checkedCount, l.itemCount)
+                    : t.itemCount(l.itemCount)}
+                </span>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p className="text-sm text-muted-foreground">{t.dashboard.empty}</p>
+        )}
+        <Link href="/alisveris" className="text-sm text-primary hover:underline">
+          {t.dashboard.open}
+        </Link>
+      </CardContent>
+    </Card>
+  );
+}

src/features/shopping/components/shopping-mode.tsx

@@ -0,0 +1,249 @@
+"use client";
+
+import { ArrowLeft, Check, Globe } from "lucide-react";
+import Link from "next/link";
+import { startTransition, useOptimistic } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { StoreDot } from "@/features/prices/components/offers-list";
+import { useAutoRefresh } from "@/hooks/use-auto-refresh";
+import { tr } from "@/i18n/tr";
+import { cn } from "@/lib/utils";
+import { formatMoney } from "@/shared/format";
+import { formatQuantity } from "@/shared/quantity";
+import { SHOPPING_REFRESH_MS } from "@/shared/shopping";
+import type { PlanLine } from "@/shared/shopping-plan";
+import { setShoppingItemCheckedAction } from "../actions";
+import type { ShoppingItemView, ShoppingListDetail } from "../service";
+import { planHeadline, type PlanChoice } from "./plan-panel";
+
+const t = tr.shopping;
+const m = t.mode;
+
+type Group = {
+  key: string;
+  title: string;
+  slot: number | null;
+  online: boolean;
+  hint?: string;
+  rows: { item: ShoppingItemView; line: PlanLine | null }[];
+};
+
+function Row({
+  item,
+  line,
+  product,
+  canWrite,
+  onToggle,
+}: {
+  item: ShoppingItemView;
+  line: PlanLine | null;
+  product: { label: string; packageLabel: string } | undefined;
+  canWrite: boolean;
+  onToggle: () => void;
+}) {
+  const sub = [
+    line
+      ? line.packages > 1
+        ? t.plan.line(formatQuantity(line.packages * 1000), formatMoney(line.priceMinor))
+        : formatMoney(line.priceMinor)
+      : null,
+    line && product && item.kind === "type" ? `${product.label} · ${product.packageLabel}` : null,
+    item.note || null,
+  ].filter(Boolean);
+  return (
+    <li>
+      <button
+        type="button"
+        role="checkbox"
+        aria-checked={item.checked}
+        aria-label={m.check(item.label)}
+        disabled={!canWrite}
+        onClick={onToggle}
+        className={cn(
+          "flex min-h-16 w-full items-center gap-4 px-4 py-3 text-left transition-colors hover:bg-accent/40 focus-visible:bg-accent/40 focus-visible:outline-none disabled:cursor-default",
+          item.checked && "bg-muted/40",
+        )}
+      >
+        <span
+          aria-hidden
+          className={cn(
+            "flex size-7 shrink-0 items-center justify-center rounded-md border-2",
+            item.checked ? "border-income bg-income text-white" : "border-muted-foreground/40",
+          )}
+        >
+          {item.checked ? <Check className="size-4.5" strokeWidth={3} /> : null}
+        </span>
+        <span className="min-w-0 flex-1">
+          <span
+            className={cn(
+              "block text-base font-medium",
+              item.checked && "text-muted-foreground line-through",
+            )}
+          >
+            {item.label}
+          </span>
+          {sub.length ? (
+            <span className="line-clamp-2 text-sm text-muted-foreground">{sub.join(" · ")}</span>
+          ) : null}
+        </span>
+        <span className="shrink-0 text-base tabular-nums">{item.quantityLabel}</span>
+      </button>
+    </li>
+  );
+}
+
+/** /alisveris/:id/mod — mağazaya göre gruplanmış, büyük dokunma alanlı kontrol listesi. */
+export function ShoppingModeView({
+  data,
+  choice,
+}: {
+  data: ShoppingListDetail;
+  choice: PlanChoice;
+}) {
+  useAutoRefresh(SHOPPING_REFRESH_MS);
+  const { list, plan, canWrite } = data;
+  const [items, setOptimistic] = useOptimistic(
+    data.items,
+    (state, change: { id: string; checked: boolean }) =>
+      state.map((i) => (i.id === change.id ? { ...i, checked: change.checked } : i)),
+  );
+  const option = (choice === "single" ? plan.single : null) ?? plan.recommended;
+  const byId = new Map(items.map((i) => [i.id, i]));
+
+  const groups: Group[] = [];
+  const placed = new Set<string>();
+  for (const g of option?.stores ?? []) {
+    const store = plan.stores[g.storeId];
+    const rows = g.lines.flatMap((line) => {
+      const item = byId.get(line.itemId);
+      if (!item) return [];
+      placed.add(item.id);
+      return [{ item, line }];
+    });
+    groups.push({
+      key: g.storeId,
+      title: store?.label ?? "—",
+      slot: store?.slot ?? null,
+      online: store?.kind === "online",
+      rows,
+    });
+  }
+  const rest = items.filter((i) => !placed.has(i.id));
+  if (rest.length)
+    groups.push({
+      key: "other",
+      title: m.other,
+      slot: null,
+      online: false,
+      hint: m.otherHint,
+      rows: rest.map((item) => ({ item, line: null })),
+    });
+
+  const done = items.filter((i) => i.checked).length;
+  const pct = items.length ? Math.round((done / items.length) * 100) : 0;
+
+  function toggle(item: ShoppingItemView) {
+    const checked = !item.checked;
+    startTransition(async () => {
+      setOptimistic({ id: item.id, checked });
+      const r = await setShoppingItemCheckedAction(list.id, item.id, checked);
+      if (!r.ok) toast.error(r.error);
+    });
+  }
+
+  const headline = planHeadline(plan);
+  const differs =
+    plan.single &&
+    plan.single.stores.map((s) => s.storeId).join() !==
+      plan.recommended?.stores.map((s) => s.storeId).join();
+
+  return (
+    <div className="mx-auto flex w-full max-w-2xl flex-col gap-4">
+      <Button variant="ghost" size="sm" asChild className="-ml-2 w-fit">
+        <Link href={`/alisveris/${list.id}`}>
+          <ArrowLeft />
+          {t.actions.backToList}
+        </Link>
+      </Button>
+      <div className="flex flex-col gap-2">
+        <h1 className="text-xl font-semibold">
+          {m.title}: {list.name}
+        </h1>
+        {headline ? <p className="text-sm text-muted-foreground">{headline}</p> : null}
+        {differs ? (
+          <nav aria-label={m.planChoice} className="flex gap-2">
+            {(["recommended", "single"] as const).map((c) => (
+              <Button
+                key={c}
+                size="sm"
+                variant={c === choice ? "secondary" : "ghost"}
+                asChild
+                aria-current={c === choice ? "page" : undefined}
+              >
+                <Link href={c === "single" ? "?plan=single" : "?"} replace scroll={false}>
+                  {c === "single" ? t.plan.single : t.plan.recommended}
+                </Link>
+              </Button>
+            ))}
+          </nav>
+        ) : null}
+      </div>
+
+      <div className="sticky top-14 z-10 -mx-4 bg-background/95 px-4 py-2 backdrop-blur">
+        <div className="flex items-center justify-between text-sm">
+          <span className="font-medium tabular-nums">{m.progress(done, items.length)}</span>
+          {done === items.length && items.length ? (
+            <span className="text-income">{m.allDone}</span>
+          ) : null}
+        </div>
+        <div
+          className="mt-1.5 h-2 overflow-hidden rounded-full bg-muted"
+          role="progressbar"
+          aria-valuemin={0}
+          aria-valuemax={items.length}
+          aria-valuenow={done}
+          aria-label={m.progress(done, items.length)}
+        >
+          <div
+            className="h-full rounded-full bg-income transition-all"
+            style={{ width: `${pct}%` }}
+          />
+        </div>
+      </div>
+
+      {groups.map((g) => {
+        const groupDone = g.rows.filter((r) => r.item.checked).length;
+        return (
+          <section key={g.key} className="overflow-hidden rounded-xl border bg-card">
+            <header className="flex items-center gap-2 border-b bg-muted/40 px-4 py-2.5">
+              <h2 className="flex min-w-0 items-center font-medium">
+                {g.slot ? <StoreDot slot={g.slot} /> : null}
+                <span className="truncate">{g.title}</span>
+                {g.online ? (
+                  <Globe className="ml-1.5 size-3.5 text-muted-foreground" aria-hidden />
+                ) : null}
+              </h2>
+              <span className="ml-auto text-sm text-muted-foreground tabular-nums">
+                {groupDone}/{g.rows.length}
+              </span>
+            </header>
+            {g.hint ? <p className="px-4 pt-2 text-xs text-muted-foreground">{g.hint}</p> : null}
+            <ul className="divide-y">
+              {g.rows.map(({ item, line }) => (
+                <Row
+                  key={item.id}
+                  item={item}
+                  line={line}
+                  product={line ? plan.products[line.productId] : undefined}
+                  canWrite={canWrite}
+                  onToggle={() => toggle(item)}
+                />
+              ))}
+            </ul>
+          </section>
+        );
+      })}
+    </div>
+  );
+}

src/features/stock/components/stock-dialogs.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { toast } from "sonner";
 import { ResponsiveDialog } from "@/components/responsive-dialog";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
 import {
@@ -73,6 +74,7 @@ export function ProductTypeFormDialog({
     step: item ? quantityInput(item.step) : "1",
     countEveryDays: item?.countEveryDays ? String(item.countEveryDays) : "",
     note: item?.note ?? "",
+    bulky: item?.bulky ?? false,
     initialQuantity: "",
   });
   const [errors, setErrors] = useState<Errors>({});
@@ -93,6 +95,7 @@ export function ProductTypeFormDialog({
       step: v.step,
       countEveryDays: v.countEveryDays,
       note: v.note,
+      bulky: v.bulky,
       initialQuantity: item ? "" : v.initialQuantity,
     });
     setBusy(false);
@@ -285,6 +288,17 @@ export function ProductTypeFormDialog({
           <FieldDescription className="-mt-2">
             {f.stepHint} {f.countEveryDaysHint}
           </FieldDescription>
+          <Field orientation="horizontal">
+            <Checkbox
+              id="pt-bulky"
+              checked={v.bulky}
+              onCheckedChange={(x) => set("bulky", x === true)}
+            />
+            <div className="flex flex-col gap-0.5">
+              <FieldLabel htmlFor="pt-bulky">{f.bulky}</FieldLabel>
+              <FieldDescription>{f.bulkyHint}</FieldDescription>
+            </div>
+          </Field>
           <Field>
             <FieldLabel htmlFor="pt-note">{f.note}</FieldLabel>
             <Input id="pt-note" value={v.note} onChange={(e) => set("note", e.target.value)} />

src/features/stock/components/stock-view.tsx

@@ -216,7 +216,12 @@ export function StockView({ data, options }: { data: Data; options: StockOption[
             <CardTitle className="text-base">{t.suggestions.title}</CardTitle>
             <CardDescription>{t.suggestions.description}</CardDescription>
           </CardHeader>
-          <CardContent>
+          <CardContent className="flex flex-col gap-3">
+            {data.suggestions.length ? (
+              <Link href="/alisveris" className="text-sm text-primary hover:underline">
+                {t.suggestions.toShopping}
+              </Link>
+            ) : null}
             {data.suggestions.length === 0 ? (
               <p className="text-sm text-muted-foreground">{t.suggestions.empty}</p>
             ) : (

src/hooks/use-auto-refresh.ts

@@ -0,0 +1,25 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+/**
+ * Paylaşılan veriler için hafif senkron: sayfa yeniden odaklanınca ve belirli aralıkla sunucu
+ * bileşenlerini yeniler (aile üyeleri aynı listeyi kullanır). Sekme gizliyken yenilemez.
+ */
+export function useAutoRefresh(intervalMs: number) {
+  const router = useRouter();
+  useEffect(() => {
+    const refresh = () => {
+      if (document.visibilityState === "visible") router.refresh();
+    };
+    const timer = window.setInterval(refresh, intervalMs);
+    window.addEventListener("focus", refresh);
+    document.addEventListener("visibilitychange", refresh);
+    return () => {
+      window.clearInterval(timer);
+      window.removeEventListener("focus", refresh);
+      document.removeEventListener("visibilitychange", refresh);
+    };
+  }, [router, intervalMs]);
+}