site setting add toy category setup

src/app/[locale]/admin/site-settings/page.tsx

@@ -1,16 +1,70 @@
 
+'use client';
+
+import { useState } from 'react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { getI18n } from "@/locales/server";
+import { useI18n } from "@/locales/client"; // Changed from getI18n
-import { Save } from "lucide-react";
+import { Save, PlusCircle, Trash2 } from "lucide-react";
+import { Separator } from '@/components/ui/separator';
+import { useToast } from '@/hooks/use-toast';
 
-// This is a placeholder page. Actual functionality would require state management and API calls.
+// Initial categories, mimicking what's in AddToyForm for demonstration
+const initialToyCategoryValues = [
+  'Educational', 'Vehicles', 'Electronics', 'Plush Toys', 'Musical', 
+  'Outdoor', 'Board Games', 'Action Figures', 'Dolls', 'Puzzles', 
+  'Arts & Crafts', 'Building Blocks'
+];
 
-export default async function AdminSiteSettingsPage() {
+export default function AdminSiteSettingsPage() {
-  const t = await getI18n();
+  const t = useI18n();
-  const currentSiteTitle = "ToyShare"; // Mock current site title
+  const { toast } = useToast();
+
+  // State for site title
+  const [currentSiteTitle, setCurrentSiteTitle] = useState("ToyShare"); // Mock current site title
+  const [newSiteTitle, setNewSiteTitle] = useState("");
+  const [isTitleSaving, setIsTitleSaving] = useState(false);
+
+  // State for toy categories
+  const [categories, setCategories] = useState<string[]>(initialToyCategoryValues);
+  const [newCategoryName, setNewCategoryName] = useState("");
+  const [isCategoriesSaving, setIsCategoriesSaving] = useState(false);
+
+  const handleSiteTitleSave = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsTitleSaving(true);
+    // Mock API call
+    await new Promise(resolve => setTimeout(resolve, 700));
+    setCurrentSiteTitle(newSiteTitle || currentSiteTitle); // Update mock current title
+    setNewSiteTitle(""); // Clear input
+    toast({ title: t('admin.site_settings.title_saved_toast') });
+    setIsTitleSaving(false);
+  };
+
+  const handleAddCategory = () => {
+    if (newCategoryName.trim() && !categories.includes(newCategoryName.trim())) {
+      setCategories([...categories, newCategoryName.trim()]);
+      setNewCategoryName("");
+    } else if (categories.includes(newCategoryName.trim())) {
+      toast({ title: "Category exists", description: "This category name already exists.", variant: "destructive" });
+    }
+  };
+
+  const handleRemoveCategory = (categoryToRemove: string) => {
+    setCategories(categories.filter(cat => cat !== categoryToRemove));
+  };
+
+  const handleSaveCategories = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsCategoriesSaving(true);
+    // Mock API call to save categories
+    await new Promise(resolve => setTimeout(resolve, 700));
+    console.log("Categories saved (mock):", categories);
+    toast({ title: t('admin.site_settings.categories_saved_toast') });
+    setIsCategoriesSaving(false);
+  };
 
   return (
     <div className="space-y-8">
@@ -19,10 +73,11 @@ export default async function AdminSiteSettingsPage() {
         <p className="text-muted-foreground">{t('admin.site_settings.description')}</p>
       </div>
 
-      <Card className="shadow-md max-w-2xl">
+      <Card className="shadow-md">
         <CardHeader>
-          <CardTitle className="text-xl font-headline">{t('admin.site_settings.title')}</CardTitle>
+          <CardTitle className="text-xl font-headline">{t('admin.site_settings.general_settings_card_title')}</CardTitle>
         </CardHeader>
+        <form onSubmit={handleSiteTitleSave}>
           <CardContent className="space-y-6">
             <div className="space-y-2">
               <Label htmlFor="currentTitle">{t('admin.site_settings.current_title_label')}</Label>
@@ -30,16 +85,88 @@ export default async function AdminSiteSettingsPage() {
             </div>
             <div className="space-y-2">
               <Label htmlFor="newTitle">{t('admin.site_settings.new_title_label')}</Label>
-            <Input id="newTitle" placeholder="Enter new site title" />
+              <Input 
+                id="newTitle" 
+                value={newSiteTitle}
+                onChange={(e) => setNewSiteTitle(e.target.value)}
+                placeholder="Enter new site title" 
+                disabled={isTitleSaving}
+              />
             </div>
           </CardContent>
           <CardFooter>
-          <Button>
+            <Button type="submit" disabled={isTitleSaving}>
               <Save className="mr-2 h-4 w-4" />
-            {t('admin.site_settings.save_button')}
+              {isTitleSaving ? t('add_toy_form.saving_button') : t('admin.site_settings.save_title_button')}
             </Button>
           </CardFooter>
+        </form>
       </Card>
+
+      <Separator />
+
+      <Card className="shadow-md">
+        <CardHeader>
+          <CardTitle className="text-xl font-headline">{t('admin.site_settings.toy_category_card_title')}</CardTitle>
+        </CardHeader>
+        <form onSubmit={handleSaveCategories}>
+          <CardContent className="space-y-6">
+            <div>
+              <Label className="text-base font-medium">{t('admin.site_settings.current_categories_label')}</Label>
+              {categories.length > 0 ? (
+                <ul className="mt-2 space-y-2">
+                  {categories.map((cat, index) => (
+                    <li key={index} className="flex items-center justify-between p-2 border rounded-md bg-card hover:bg-muted/50">
+                      <span className="text-sm">{cat}</span>
+                      <Button 
+                        type="button" 
+                        variant="ghost" 
+                        size="sm" 
+                        onClick={() => handleRemoveCategory(cat)}
+                        className="text-destructive hover:text-destructive"
+                        disabled={isCategoriesSaving}
+                      >
+                        <Trash2 className="mr-1 h-4 w-4" />
+                        {t('admin.site_settings.remove_category_button')}
+                      </Button>
+                    </li>
+                  ))}
+                </ul>
+              ) : (
+                <p className="text-sm text-muted-foreground mt-2">{t('admin.site_settings.no_categories_yet')}</p>
+              )}
+            </div>
+
+            <Separator />
+
+            <div className="space-y-2">
+              <Label htmlFor="newCategoryName" className="text-base">{t('admin.site_settings.new_category_label')}</Label>
+              <div className="flex gap-2">
+                <Input 
+                  id="newCategoryName"
+                  value={newCategoryName}
+                  onChange={(e) => setNewCategoryName(e.target.value)}
+                  placeholder={t('admin.site_settings.category_name_placeholder')}
+                  disabled={isCategoriesSaving}
+                />
+                <Button type="button" onClick={handleAddCategory} variant="outline" disabled={isCategoriesSaving || !newCategoryName.trim()}>
+                  <PlusCircle className="mr-2 h-4 w-4" />
+                  {t('admin.site_settings.add_category_button')}
+                </Button>
+              </div>
+            </div>
+          </CardContent>
+          <CardFooter>
+            <Button type="submit" disabled={isCategoriesSaving}>
+              <Save className="mr-2 h-4 w-4" />
+              {isCategoriesSaving ? t('add_toy_form.saving_button') : t('admin.site_settings.save_categories_button')}
+            </Button>
+          </CardFooter>
+        </form>
+      </Card>
+       <p className="text-xs text-muted-foreground text-center">
+        Note: Category management is currently for UI demonstration. Changes here do not dynamically update the Add Toy form's categories.
+      </p>
     </div>
   );
 }

src/locales/en.ts

@@ -199,10 +199,21 @@ export default {
   'admin.overview.manage_toys_button': 'Manage Toys',
   'admin.overview.go_to_site_settings_button': 'Go to Site Settings',
   'admin.site_settings.title': 'Site Settings',
-  'admin.site_settings.description': 'Manage global site settings.',
+  'admin.site_settings.description': 'Manage global site settings and toy categories.',
+  'admin.site_settings.general_settings_card_title': 'General Settings',
   'admin.site_settings.current_title_label': 'Current Site Title',
   'admin.site_settings.new_title_label': 'New Site Title',
-  'admin.site_settings.save_button': 'Save Site Title',
+  'admin.site_settings.save_title_button': 'Save Site Title',
+  'admin.site_settings.toy_category_card_title': 'Toy Category Management',
+  'admin.site_settings.current_categories_label': 'Current Categories',
+  'admin.site_settings.no_categories_yet': 'No categories defined yet.',
+  'admin.site_settings.remove_category_button': 'Remove',
+  'admin.site_settings.new_category_label': 'New Category Name',
+  'admin.site_settings.add_category_button': 'Add Category',
+  'admin.site_settings.category_name_placeholder': 'Enter category name',
+  'admin.site_settings.save_categories_button': 'Save Categories',
+  'admin.site_settings.categories_saved_toast': 'Toy categories (mock) saved!',
+  'admin.site_settings.title_saved_toast': 'Site title (mock) saved!',
   'admin.users.title': 'User Management',
   'admin.users.description': 'View and manage user accounts and permissions.',
   'admin.users.table_header_name': 'Name',
@@ -219,7 +230,6 @@ export default {
   'admin.toys.table_header_actions': 'Actions',
   'admin.toys.edit_button': 'Edit Toy',
   'admin.toys.no_toys_found': 'No toys found.',
-
   'dashboard.rental_history.title': 'My Rental History',
   'dashboard.rental_history.description': 'View your past toy rentals.',
   'dashboard.rental_history.no_history_title': 'No Rental History Yet',

src/locales/zh-TW.ts

@@ -199,10 +199,21 @@ export default {
   'admin.overview.manage_toys_button': '管理玩具',
   'admin.overview.go_to_site_settings_button': '前往網站設定',
   'admin.site_settings.title': '網站設定',
-  'admin.site_settings.description': '管理全域網站設定。',
+  'admin.site_settings.description': '管理全域網站設定和玩具分類。',
+  'admin.site_settings.general_settings_card_title': '一般設定',
   'admin.site_settings.current_title_label': '目前網站標題',
   'admin.site_settings.new_title_label': '新網站標題',
-  'admin.site_settings.save_button': '儲存網站標題',
+  'admin.site_settings.save_title_button': '儲存網站標題',
+  'admin.site_settings.toy_category_card_title': '玩具分類管理',
+  'admin.site_settings.current_categories_label': '目前分類',
+  'admin.site_settings.no_categories_yet': '尚未定義分類。',
+  'admin.site_settings.remove_category_button': '移除',
+  'admin.site_settings.new_category_label': '新分類名稱',
+  'admin.site_settings.add_category_button': '新增分類',
+  'admin.site_settings.category_name_placeholder': '輸入分類名稱',
+  'admin.site_settings.save_categories_button': '儲存分類',
+  'admin.site_settings.categories_saved_toast': '玩具分類（模擬）已儲存！',
+  'admin.site_settings.title_saved_toast': '網站標題（模擬）已儲存！',
   'admin.users.title': '使用者管理',
   'admin.users.description': '查看和管理使用者帳戶及權限。',
   'admin.users.table_header_name': '名稱',
@@ -219,7 +230,6 @@ export default {
   'admin.toys.table_header_actions': '操作',
   'admin.toys.edit_button': '編輯玩具',
   'admin.toys.no_toys_found': '找不到玩具。',
-
   'dashboard.rental_history.title': '我的租借歷史',
   'dashboard.rental_history.description': '查看您過去的玩具租借記錄。',
   'dashboard.rental_history.no_history_title': '尚無租借歷史',