@titas_mallick/wedding-site-gen 1.0.0

package/app/invitation/maker/dashboard.js

@@ -0,0 +1,81 @@
+"use client";
+
+import { Card, CardHeader, CardBody } from "@heroui/react";
+
+const Dash = ({ guests }) => {
+  const stats = {
+    reception: { bride: 0, groom: 0, total: 0 },
+    wedding: { bride: 0, groom: 0, total: 0 },
+    registration: { bride: 0, groom: 0, total: 0 },
+    rsvpStatus: { accepted: 0, pending: 0, declined: 0, total: guests.length },
+  };
+
+  guests.forEach((guest) => {
+    const side = guest.familySide === "groom" ? "groom" : "bride";
+    const count = guest.invitedGuests || 1;
+
+    guest.invitedFor.forEach((event) => {
+      if (stats[event]) {
+        stats[event][side] += count;
+        stats[event].total += count;
+      }
+    });
+
+    const rsvp = guest.rsvpStatus?.toLowerCase();
+    if (rsvp === "accepted") stats.rsvpStatus.accepted += 1;
+    else if (rsvp === "pending") stats.rsvpStatus.pending += 1;
+    else if (rsvp === "declined") stats.rsvpStatus.declined += 1;
+  });
+
+  const eventCards = [
+    { title: "Reception", data: stats.reception },
+    { title: "Wedding", data: stats.wedding },
+    { title: "Registration", data: stats.registration },
+  ];
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 p-4">
+      {eventCards.map((event, idx) => (
+        <Card key={idx} shadow="none" className="rounded-xl">
+          <CardHeader>
+            <h3 className="text-lg font-semibold">{event.title}</h3>
+          </CardHeader>
+          <CardBody className="space-y-1 text-sm ">
+            <p>Bride Side: {event.data.bride}</p>
+            <p>Groom Side: {event.data.groom}</p>
+            <p>Total: {event.data.total}</p>
+          </CardBody>
+        </Card>
+      ))}
+
+      <Card
+        shadow="none"
+        className="rounded-xl md:col-span-2 xl:col-span-3"
+      >
+        <CardHeader>
+          <h3 className="text-lg font-semibold">RSVP Summary</h3>
+        </CardHeader>
+        <CardBody className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm ">
+          <div>
+            <p>Accepted:</p>
+            <p className="font-medium">{stats.rsvpStatus.accepted}</p>
+          </div>
+          <div>
+            <p>Pending:</p>
+            <p className="font-medium">{stats.rsvpStatus.pending}</p>
+          </div>
+          <div>
+            <p>Declined:</p>
+            <p className="font-medium">{stats.rsvpStatus.declined}</p>
+          </div>
+          <div>
+            <p>Total Names:</p>
+            <p className="font-medium">{stats.rsvpStatus.total}</p>
+          </div>
+        </CardBody>
+      </Card>
+    </div>
+  );
+};
+
+export default Dash;

package/app/invitation/maker/guestAdder.js

@@ -0,0 +1,204 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  Input,
+  Textarea,
+  RadioGroup,
+  Radio,
+  CheckboxGroup,
+  Checkbox,
+} from "@heroui/react";
+import { fontSans, fontMono } from "@/config/fonts";
+
+const defaultForm = {
+  name: "",
+  contact: "",
+  familySide: "",
+  relation: "",
+  invitedFor: [],
+  invitedGuests: "1",
+  rsvpStatus: "pending",
+  notes: "",
+};
+
+export default function AddGuestModal({
+  isOpen,
+  onClose,
+  onAdd, // only onAdd, no onUpdate
+  existingGuest,
+}) {
+  const [formData, setFormData] = useState(defaultForm);
+
+  useEffect(() => {
+    if (existingGuest) {
+      setFormData(existingGuest);
+    } else {
+      setFormData(defaultForm);
+    }
+  }, [existingGuest]);
+
+  const handleChange = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  const handleRadioChange = (key, value) => {
+    setFormData({ ...formData, [key]: value });
+  };
+
+  const handleCheckboxChange = (key, values) => {
+    setFormData({ ...formData, [key]: values });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onAdd(formData); // always call onAdd for both add & update
+    onClose();
+    setFormData(defaultForm);
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={onClose}
+      backdrop="blur"
+      scrollBehavior="outside"
+    >
+      <ModalContent className="max-w-lg w-full">
+        {(close) => (
+          <form
+            onSubmit={(e) => {
+              handleSubmit(e);
+              close();
+            }}
+            className={`${fontSans.className} border-none outline-none`}
+          >
+            <ModalHeader className="text-2xl">
+              {existingGuest ? "Update Guest" : "Add New Guest"}
+            </ModalHeader>
+            <ModalBody>
+              <Input
+                isRequired
+                label="Guest Name"
+                placeholder="Enter guest name"
+                name="name"
+                value={formData.name}
+                onChange={handleChange}
+                variant="bordered"
+                labelPlacement="outside-top"
+                size="lg"
+                classNames={{
+                  input: "outline-none",
+                }}
+              />
+              <Input
+                label="Contact Info"
+                placeholder="Enter phone or email"
+                name="contact"
+                value={formData.contact}
+                onChange={handleChange}
+                variant="bordered"
+                size="lg"
+                labelPlacement="outside-top"
+                classNames={{
+                  input: "outline-none",
+                }}
+              />
+
+              <RadioGroup
+                isRequired
+                label="Family Side"
+                orientation="horizontal"
+                value={formData.familySide}
+                onValueChange={(val) => handleRadioChange("familySide", val)}
+              >
+                <Radio value="bride">Bride&apos;s Side</Radio>
+                <Radio value="groom">Groom&apos;s Side</Radio>
+              </RadioGroup>
+
+              <RadioGroup
+                isRequired
+                label="Relation to Couple"
+                orientation="horizontal"
+                value={formData.relation}
+                onValueChange={(val) => handleRadioChange("relation", val)}
+              >
+                <Radio value="family">Family</Radio>
+                <Radio value="colleague">Colleague</Radio>
+                <Radio value="friend">Friend</Radio>
+                <Radio value="other">Other</Radio>
+              </RadioGroup>
+
+              <CheckboxGroup
+                label="Invited For"
+                orientation="horizontal"
+                value={formData.invitedFor}
+                onValueChange={(val) => handleCheckboxChange("invitedFor", val)}
+                isRequired
+              >
+                <Checkbox value="registration">Registration</Checkbox>
+                <Checkbox value="wedding">Wedding</Checkbox>
+                <Checkbox value="reception">Reception</Checkbox>
+              </CheckboxGroup>
+
+              <Input
+                type="number"
+                label="Total Guests"
+                labelPlacement="outside-top"
+                placeholder="1"
+                name="invitedGuests"
+                min={1}
+                value={formData.invitedGuests}
+                onChange={handleChange}
+                variant="bordered"
+                size="lg"
+                classNames={{
+                  input: "outline-none",
+                }}
+              />
+
+              <RadioGroup
+                label="RSVP Status"
+                orientation="horizontal"
+                value={formData.rsvpStatus}
+                onValueChange={(val) => handleRadioChange("rsvpStatus", val)}
+              >
+                <Radio value="pending">Pending</Radio>
+                <Radio value="accepted">Accepted</Radio>
+                <Radio value="declined">Declined</Radio>
+                <Radio value="maybe">Maybe</Radio>
+              </RadioGroup>
+
+              <Textarea
+                label="Notes (Optional)"
+                placeholder="Enter any special notes"
+                name="notes"
+                value={formData.notes}
+                onChange={handleChange}
+                variant="bordered"
+                size="lg"
+                classNames={{
+                  input: "outline-none",
+                }}
+              />
+            </ModalBody>
+            <ModalFooter>
+              <Button variant="light" onPress={onClose}>
+                Cancel
+              </Button>
+              <Button color="primary" type="submit">
+                {existingGuest ? "Update Guest" : "Save Guest"}
+              </Button>
+            </ModalFooter>
+          </form>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+}

package/app/invitation/maker/guestShower.js

@@ -0,0 +1,287 @@
+"use client";
+
+import {
+  Chip,
+  Button,
+  Select,
+  SelectItem,
+  Card,
+  CardBody,
+  CardHeader,
+  CardFooter,
+  Link,
+} from "@heroui/react";
+import { fontSans, fontMono } from "@/config/fonts";
+import { useState, useMemo } from "react";
+
+const familyChipColor = {
+  bride: "primary",
+  groom: "secondary",
+};
+
+const rsvpChipColor = {
+  accepted: "success",
+  declined: "danger",
+  maybe: "warning",
+  pending: "default",
+};
+
+const rsvpBorderColor = {
+  accepted: "border-success",
+  declined: "border-danger",
+  maybe: "border-warning",
+  pending: "border-default",
+};
+
+const invitedForColor = {
+  registration: "success",
+  reception: "danger",
+  wedding: "warning",
+};
+
+export default function GuestTable({ guests, onEdit, onDelete, onAdd }) {
+  const [filters, setFilters] = useState({
+    familySide: "all",
+    invitedFor: "all",
+    relation: "all",
+    rsvpStatus: "all",
+  });
+
+  const handleFilterChange = (key, value) => {
+    setFilters((prev) => ({
+      ...prev,
+      [key]: value,
+    }));
+  };
+
+  const filteredGuests = useMemo(() => {
+    return guests.filter((guest) => {
+      if (
+        filters.familySide !== "all" &&
+        guest.familySide !== filters.familySide
+      )
+        return false;
+      if (
+        filters.invitedFor !== "all" &&
+        !guest.invitedFor.includes(filters.invitedFor)
+      )
+        return false;
+      if (filters.relation !== "all" && guest.relation !== filters.relation)
+        return false;
+      if (
+        filters.rsvpStatus !== "all" &&
+        guest.rsvpStatus !== filters.rsvpStatus
+      )
+        return false;
+      return true;
+    });
+  }, [guests, filters]);
+
+  return (
+    <div className={`${fontSans.className}`}>
+      {/* FILTER SECTION */}
+      <Card className="mb-4 w-full shadow-sm bg-transparent">
+        <CardBody className="p-2 flex flex-col gap-4 sm:flex-row sm:justify-between sm:items-center">
+          <Button onPress={onAdd} color="primary" className="w-full sm:w-auto">
+            Add Guest
+          </Button>
+
+          <div className="flex flex-wrap gap-3 w-full sm:w-auto justify-start sm:justify-end">
+            <Select
+              label="Family Side"
+              variant="bordered"
+              size="sm"
+              labelPlacement="inside"
+              className="min-w-[140px] max-w-[160px] flex-1 [&_label]:!pb-1.5 [&_[data-slot=value]]:!pt-1.5"
+              selectedKeys={[filters.familySide]}
+              onSelectionChange={(e) =>
+                handleFilterChange("familySide", Array.from(e)[0])
+              }
+            >
+              <SelectItem key="all">All</SelectItem>
+              <SelectItem key="bride">Bride</SelectItem>
+              <SelectItem key="groom">Groom</SelectItem>
+            </Select>
+
+            <Select
+              label="Invited For"
+              variant="bordered"
+              size="sm"
+              labelPlacement="inside"
+              className="min-w-[140px] max-w-[160px] flex-1 [&_label]:!pb-1.5 [&_[data-slot=value]]:!pt-1.5"
+              selectedKeys={[filters.invitedFor]}
+              onSelectionChange={(e) =>
+                handleFilterChange("invitedFor", Array.from(e)[0])
+              }
+            >
+              <SelectItem key="all">All</SelectItem>
+              <SelectItem key="registration">Registration</SelectItem>
+              <SelectItem key="wedding">Wedding</SelectItem>
+              <SelectItem key="reception">Reception</SelectItem>
+            </Select>
+
+            <Select
+              label="Relation"
+              variant="bordered"
+              size="sm"
+              labelPlacement="inside"
+              className="min-w-[140px] max-w-[160px] flex-1 [&_label]:!pb-1.5 [&_[data-slot=value]]:!pt-1.5"
+              selectedKeys={[filters.relation]}
+              onSelectionChange={(e) =>
+                handleFilterChange("relation", Array.from(e)[0])
+              }
+            >
+              <SelectItem key="all">All</SelectItem>
+              <SelectItem key="friend">Friend</SelectItem>
+              <SelectItem key="family">Family</SelectItem>
+              <SelectItem key="colleague">Colleague</SelectItem>
+              <SelectItem key="other">Other</SelectItem>
+            </Select>
+
+            <Select
+              label="RSVP"
+              variant="bordered"
+              size="sm"
+              labelPlacement="inside"
+              className="min-w-[140px] max-w-[160px] flex-1 [&_label]:!pb-1.5 [&_[data-slot=value]]:!pt-1.5"
+              selectedKeys={[filters.rsvpStatus]}
+              onSelectionChange={(e) =>
+                handleFilterChange("rsvpStatus", Array.from(e)[0])
+              }
+            >
+              <SelectItem key="all">All</SelectItem>
+              <SelectItem key="accepted">Accepted</SelectItem>
+              <SelectItem key="declined">Declined</SelectItem>
+              <SelectItem key="maybe">Maybe</SelectItem>
+              <SelectItem key="pending">Pending</SelectItem>
+            </Select>
+          </div>
+        </CardBody>
+      </Card>
+
+      {/* CARD VIEW (ALL SCREENS) */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 w-full">
+        {filteredGuests.map((guest, index) => (
+          <Card
+            key={index}
+            className={`flex text-left flex-col justify-between mb-2 border-t-4 ${rsvpBorderColor[guest.rsvpStatus]} shadow-md h-full`}
+          >
+            <CardHeader className="flex justify-between items-center px-4 pt-4 pb-2">
+              <div>
+                <p className="font-bold text-base">{guest.name}</p>
+                <p className="text-sm capitalize">
+                  {guest.relation} •{" "}
+                  <span className="capitalize">{guest.familySide}</span>
+                </p>
+              </div>
+              <Chip
+                size="sm"
+                color={familyChipColor[guest.familySide]}
+                variant="flat"
+                className="capitalize"
+              >
+                {guest.familySide}
+              </Chip>
+            </CardHeader>
+
+            <CardBody className="px-4 py-2 space-y-2 text-sm grow">
+              <p>
+                <strong>Contact:</strong>{" "}
+                {guest.contact?.length >= 2
+                  ? `${guest.contact.charAt(0)}${"*".repeat(
+                      guest.contact.length - 2
+                    )}${guest.contact.charAt(guest.contact.length - 1)}`
+                  : guest.contact}
+              </p>
+              <section>
+                <strong>Invited For:</strong>
+                <div className="flex flex-wrap gap-1 mt-1">
+                  {guest.invitedFor.map((item, i) => (
+                    <Chip
+                      key={i}
+                      variant="flat"
+                      size="sm"
+                      color={invitedForColor[item.toLowerCase()]}
+                      className={fontMono.className}
+                    >
+                      {item}
+                    </Chip>
+                  ))}
+                </div>
+              </section>
+              <p>
+                <strong>Guests Count:</strong> {guest.invitedGuests}
+              </p>
+              {guest.notes && (
+                <p>
+                  <strong>Notes:</strong> {guest.notes}
+                </p>
+              )}
+              <div className="flex flex-wrap gap-1 mt-2">
+                <Link
+                  color="foreground"
+                  showAnchorIcon
+                  href={`./${guest.id}`}
+                  className="bg-yellow-500 text-black dark:text-white px-3 py-1 rounded hover:bg-yellow-700"
+                >
+                  invitation
+                </Link>
+                <button
+                  onClick={() => {
+                    if (navigator.share) {
+                      navigator
+                        .share({
+                          title: "Wedding Invitation",
+                          text: `Join us! Here’s your invitation link:`,
+                          url: `${window.location.origin}/invitation/${guest.id}`,
+                        })
+                        .catch((error) =>
+                          console.error("Error sharing", error)
+                        );
+                    } else {
+                      alert("Sharing is not supported in this browser.");
+                    }
+                  }}
+                  className="bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700"
+                >
+                  Share
+                </button>
+                {guest.contact && (
+                  <a
+                    href={`https://wa.me/${guest.contact.replace(/[^0-9]/g, "")}?text=${encodeURIComponent(
+                      `Hi! You are invited to Titas & Sukanya's wedding. Here's your invitation link: ${window.location.origin}/${guest.id}`
+                    )}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="bg-green-600 text-white px-3 py-1 rounded hover:bg-green-700"
+                  >
+                    WhatsApp
+                  </a>
+                )}
+              </div>
+            </CardBody>
+
+            <CardFooter className="flex justify-end gap-2 px-4 pb-4 pt-2">
+              <Button
+                size="sm"
+                variant="bordered"
+                color="primary"
+                onPress={() => onEdit(guest)}
+              >
+                Edit
+              </Button>
+              <Button
+                size="sm"
+                variant="bordered"
+                color="danger"
+                onPress={() => onDelete(guest)}
+              >
+                Delete
+              </Button>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

package/app/invitation/maker/layout.tsx

@@ -0,0 +1,11 @@
+export default function PricingLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="flex flex-col items-center justify-center gap-4 md:px-20 py-8 md:py-10">
+      <div className="inline-block text-center justify-center">{children}</div>
+    </section>
+  );
+}