Module Update

src/modules/textbooks/components/textbook-form-dialog.tsx

@@ -0,0 +1,132 @@
+"use client"
+
+import { useState } from "react"
+import { Plus } from "lucide-react"
+import { useFormStatus } from "react-dom"
+import { Button } from "@/shared/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/shared/components/ui/dialog"
+import { Input } from "@/shared/components/ui/input"
+import { Label } from "@/shared/components/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/components/ui/select"
+import { createTextbookAction } from "../actions"
+import { toast } from "sonner"
+
+function SubmitButton() {
+  const { pending } = useFormStatus()
+  return (
+    <Button type="submit" disabled={pending}>
+      {pending ? "Saving..." : "Save changes"}
+    </Button>
+  )
+}
+
+export function TextbookFormDialog() {
+  const [open, setOpen] = useState(false)
+
+  // Using simple form action without useActionState hook for simplicity in this demo environment
+  // In production with React 19/Next 15, we'd use useActionState
+  const handleSubmit = async (formData: FormData) => {
+    const result = await createTextbookAction(null, formData)
+    if (result.success) {
+      toast.success(result.message)
+      setOpen(false)
+    } else {
+      toast.error(result.message)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button>
+          <Plus className="mr-2 h-4 w-4" />
+          Add Textbook
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Add New Textbook</DialogTitle>
+          <DialogDescription>
+            Create a new digital textbook. Click save when you're done.
+          </DialogDescription>
+        </DialogHeader>
+        <form action={handleSubmit}>
+          <div className="grid gap-4 py-4">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="title" className="text-right">
+                Title
+              </Label>
+              <Input
+                id="title"
+                name="title"
+                placeholder="e.g. Advanced Calculus"
+                className="col-span-3"
+                required
+              />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="subject" className="text-right">
+                Subject
+              </Label>
+              <Select name="subject" required>
+                <SelectTrigger className="col-span-3">
+                  <SelectValue placeholder="Select subject" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Mathematics">Mathematics</SelectItem>
+                  <SelectItem value="Physics">Physics</SelectItem>
+                  <SelectItem value="History">History</SelectItem>
+                  <SelectItem value="English">English</SelectItem>
+                  <SelectItem value="Chemistry">Chemistry</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="grade" className="text-right">
+                Grade
+              </Label>
+              <Select name="grade" required>
+                <SelectTrigger className="col-span-3">
+                  <SelectValue placeholder="Select grade" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Grade 10">Grade 10</SelectItem>
+                  <SelectItem value="Grade 11">Grade 11</SelectItem>
+                  <SelectItem value="Grade 12">Grade 12</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="publisher" className="text-right">
+                Publisher
+              </Label>
+              <Input
+                id="publisher"
+                name="publisher"
+                placeholder="e.g. Next Education"
+                className="col-span-3"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <SubmitButton />
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}