feat: Added upcoming event component.

client/package.json

@@ -10,11 +10,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@tiptap/extension-underline": "^3.22.5",
+    "@tiptap/react": "^3.22.5",
+    "@tiptap/starter-kit": "^3.22.5",
     "axios": "^1.15.0",
-    "lucide-react": "^1.11.0",
+    "lucide-react": "^1.14.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "react-router-dom": "^7.13.1"
+    "react-hook-form": "^7.75.0",
+    "react-router-dom": "^7.13.1",
+    "zod": "^4.4.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

client/src/components/EventCard.tsx

@@ -0,0 +1,132 @@
+import "../style/common.css";
+import "../style/event.css";
+import { ImageBlock } from "./ImageBlock/ImageBlock";
+import { Clock, MapPin, ArrowRight } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+
+// Placeholder Constants
+export const DEFAULT_EVENT_IMAGE = "src/images/event-image.png";
+export const DEFAULT_EVENT_LABEL = "UPCOMING EVENT";
+export const DEFAULT_USER_ACTION = "SIGN UP";
+export const DEFAULT_ADMIN_ACTION = "EDIT EVENT";
+
+interface EventProps {
+  id: string; // Added id for routing to extended page
+  imageUrl: string;
+  title: string;
+  time: Date;
+  location: string;
+  description: string;
+  memberPrice?: string;
+  nonMemberPrice?: string;
+  role?: "admin" | "user";
+  status: "open" | "waitlist" | "ended";
+}
+
+const EventCard: React.FC<EventProps> = ({
+  id,
+  imageUrl,
+  title,
+  time,
+  location,
+  description,
+  memberPrice,
+  nonMemberPrice,
+  role = "user",
+  status,
+}) => {
+  const navigate = useNavigate();
+
+  // Format date: e.g. "2nd April - 6PM"
+  const formatDate = (date: Date) => {
+    const day = date.getDate();
+    const month = date.toLocaleString("default", { month: "long" });
+    const hours = date.getHours();
+    const ampm = hours >= 12 ? "PM" : "AM";
+    const hour12 = hours % 12 || 12;
+
+    const getOrdinal = (n: number) => {
+      const s = ["th", "st", "nd", "rd"];
+      const v = n % 100;
+      return n + (s[(v - 20) % 10] || s[v] || s[0]);
+    };
+
+    return `${getOrdinal(day)} ${month} - ${hour12}${ampm}`;
+  };
+
+  const handleActionClick = () => {
+    // Eventually navigate to the extended page
+    // For now, we'll just log the intent
+    console.log(`Navigating to extended page for event: ${id} as ${role}`);
+    navigate(`/Events/${id}`);
+  };
+
+  return (
+    <div className="event-card">
+      <div className="event-content">
+        <div className="event-info">
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <span className="event-label">{DEFAULT_EVENT_LABEL}</span>
+            <span className={`event-status status-${status}`}>
+              {status.toUpperCase()}
+            </span>
+          </div>
+          <h2 className="event-title">{title}</h2>
+
+          <div className="event-meta">
+            <div className="meta-item">
+              <Clock size={16} className="meta-icon" />
+              <span>{formatDate(time)}</span>
+            </div>
+            <div className="meta-item">
+              <MapPin size={16} className="meta-icon" />
+              <span>{location}</span>
+            </div>
+          </div>
+
+          <div className="event-tags">
+            {memberPrice && (
+              <span className="event-tag">{memberPrice} Members</span>
+            )}
+            {nonMemberPrice && (
+              <span className="event-tag">{nonMemberPrice} Non-Members</span>
+            )}
+          </div>
+
+          <hr className="event-divider" />
+
+          <div
+            className="event-description"
+            dangerouslySetInnerHTML={{ __html: description }} // Need to make sure data is sanitised.
+          />
+
+          <button className="rsvp-button" onClick={handleActionClick}>
+            {role === "admin" ? DEFAULT_ADMIN_ACTION : DEFAULT_USER_ACTION}
+            <ArrowRight size={18} />
+          </button>
+        </div>
+      </div>
+      <div className="event-image-container">
+        <ImageBlock
+          pageKey={imageUrl || DEFAULT_EVENT_IMAGE}
+          role="user"
+          alt={title}
+          style={{
+            width: "100%",
+            height: "100%",
+            borderRadius: "20px",
+            overflow: "hidden",
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default EventCard;

client/src/components/Form/CurrencyInput.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import type { UseFormRegisterReturn } from "react-hook-form";
+
+interface CurrencyInputProps {
+  register: UseFormRegisterReturn;
+  placeholder?: string;
+}
+
+const CurrencyInput: React.FC<CurrencyInputProps> = ({
+  register,
+  placeholder,
+}) => {
+  const handlePriceKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const isNumber = /\d/.test(e.key);
+    const isDot = e.key === ".";
+    const isNavigation = [
+      "Backspace",
+      "Delete",
+      "ArrowLeft",
+      "ArrowRight",
+      "Tab",
+      "Enter",
+    ].includes(e.key);
+
+    if (isNavigation || e.ctrlKey || e.metaKey) return;
+
+    const currentVal = e.currentTarget.value;
+    const selectionStart = e.currentTarget.selectionStart ?? 0;
+
+    if (isDot && currentVal.includes(".")) {
+      e.preventDefault();
+      return;
+    }
+
+    if (currentVal.includes(".") && isNumber) {
+      const dotIndex = currentVal.indexOf(".");
+      const decimals = currentVal.split(".")[1];
+      if (decimals && decimals.length >= 2 && selectionStart > dotIndex) {
+        e.preventDefault();
+        return;
+      }
+    }
+
+    if (!isNumber && !isDot) {
+      e.preventDefault();
+    }
+  };
+
+  return (
+    <div className="currency-input-wrapper">
+      <span className="currency-prefix">$</span>
+      <input
+        type="text"
+        placeholder={placeholder}
+        onKeyDown={handlePriceKeyDown}
+        {...register}
+      />
+    </div>
+  );
+};
+
+export default CurrencyInput;

client/src/components/Form/FormField.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+interface FormFieldProps {
+  label: string;
+  error?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const FormField: React.FC<FormFieldProps> = ({
+  label,
+  error,
+  children,
+  className = "",
+}) => {
+  return (
+    <div className={`form-group ${className}`}>
+      <label>{label}</label>
+      {children}
+      {error && <span className="error-text">{error}</span>}
+    </div>
+  );
+};
+
+export default FormField;

client/src/components/RichTextEditor.tsx

@@ -0,0 +1,115 @@
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Underline from "@tiptap/extension-underline";
+import { useEffect, useState } from "react";
+import {
+  Bold,
+  Italic,
+  Underline as UnderlineIcon,
+  List,
+  ListOrdered,
+  Undo,
+  Redo,
+} from "lucide-react";
+
+interface RichTextEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+const RichTextEditor = ({ value, onChange }: RichTextEditorProps) => {
+  const [, setUpdateCount] = useState(0);
+
+  const editor = useEditor({
+    extensions: [StarterKit, Underline],
+    content: value,
+    onUpdate: ({ editor }) => {
+      onChange(editor.getHTML());
+    },
+    onTransaction: () => {
+      setUpdateCount((prev) => prev + 1);
+    },
+  });
+
+  useEffect(() => {
+    if (editor && value !== editor.getHTML()) {
+      editor.commands.setContent(value);
+    }
+  }, [value, editor]);
+
+  if (!editor) {
+    return null;
+  }
+
+  return (
+    <div className="tiptap-editor-container">
+      <div className="editor-toolbar">
+        <button
+          type="button"
+          onClick={() => editor.chain().focus().toggleBold().run()}
+          className={editor.isActive("bold") ? "is-active" : ""}
+          title="Bold (Ctrl+B)"
+        >
+          <Bold size={18} />
+        </button>
+        <button
+          type="button"
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+          className={editor.isActive("italic") ? "is-active" : ""}
+          title="Italic (Ctrl+I)"
+        >
+          <Italic size={18} />
+        </button>
+        <button
+          type="button"
+          onClick={() => editor.chain().focus().toggleUnderline().run()}
+          className={editor.isActive("underline") ? "is-active" : ""}
+          title="Underline (Ctrl+U)"
+        >
+          <UnderlineIcon size={18} />
+        </button>
+
+        <div className="divider" />
+
+        <button
+          type="button"
+          onClick={() => editor.chain().focus().toggleBulletList().run()}
+          className={editor.isActive("bulletList") ? "is-active" : ""}
+          title="Bullet List"
+        >
+          <List size={18} />
+        </button>
+        <button
+          type="button"
+          onClick={() => editor.chain().focus().toggleOrderedList().run()}
+          className={editor.isActive("orderedList") ? "is-active" : ""}
+          title="Numbered List"
+        >
+          <ListOrdered size={18} />
+        </button>
+
+        <div className="divider" />
+
+        <button
+          type="button"
+          onClick={() => editor.chain().focus().undo().run()}
+          disabled={!editor.can().undo()}
+          title="Undo"
+        >
+          <Undo size={18} />
+        </button>
+        <button
+          type="button"
+          onClick={() => editor.chain().focus().redo().run()}
+          disabled={!editor.can().redo()}
+          title="Redo"
+        >
+          <Redo size={18} />
+        </button>
+      </div>
+      <EditorContent editor={editor} className="tiptap-content" />
+    </div>
+  );
+};
+
+export default RichTextEditor;

client/src/main/App.tsx

@@ -15,6 +15,7 @@ import Contact from "../pages/Contact.tsx";
 import Sponsors from "../pages/Sponsors.tsx";
 import Events from "../pages/Events.tsx";
 import About from "../pages/About.tsx";
+import AdminEventEditor from "../pages/AdminEventEditor.tsx";
 import SignUp from "../pages/Signup.tsx";
 
 const App = () => {
@@ -29,6 +30,7 @@ const App = () => {
             <Route path="" element={<Home />} />
             <Route path="About" element={<About />} />
             <Route path="Events" element={<Events />} />
+            <Route path="Events/:eventId" element={<AdminEventEditor />} />
             <Route path="Sponsors" element={<Sponsors />} />
             <Route path="Contact" element={<Contact />} />
             <Route path="Faq" element={<Faq />} />