initial scaffolding

tinker_tickets_react/src/Components/Comments/CommentForm.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { marked } from "marked";
+import type { CommentData } from "../../types/comments";
+
+interface CommentFormProps {
+  onAdd: (comment: CommentData) => void;
+}
+
+const CommentForm: React.FC<CommentFormProps> = ({ onAdd }) => {
+  const [text, setText] = useState<string>("");
+  const [markdownEnabled, setMarkdownEnabled] = useState<boolean>(false);
+  const [preview, setPreview] = useState<boolean>(false);
+
+  function handleSubmit() {
+    if (!text.trim()) return;
+
+    const newComment: CommentData = {
+      user_name: "User",
+      comment_text: text,
+      created_at: new Date().toISOString(),
+      markdown_enabled: markdownEnabled,
+    };
+
+    onAdd(newComment);
+    setText("");
+    setPreview(false);
+  }
+
+  return (
+    <div className="comment-form">
+      <textarea
+        placeholder="Add a comment..."
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+      />
+
+      <div className="comment-controls">
+        <label className="toggle-label">
+          <input
+            type="checkbox"
+            checked={markdownEnabled}
+            onChange={() => setMarkdownEnabled((prev) => !prev)}
+          />
+          Enable Markdown
+        </label>
+
+        <label className="toggle-label">
+          <input
+            type="checkbox"
+            disabled={!markdownEnabled}
+            checked={preview}
+            onChange={() => setPreview((prev) => !prev)}
+          />
+          Preview Markdown
+        </label>
+
+        <button className="btn" onClick={handleSubmit}>
+          Add Comment
+        </button>
+      </div>
+
+      {markdownEnabled && preview && (
+        <div
+          className="markdown-preview"
+          dangerouslySetInnerHTML={{ __html: marked(text) }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default CommentForm;

tinker_tickets_react/src/Components/Comments/CommentItem.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { marked } from "marked";
+import type { CommentData } from "../../types/comments";
+
+interface CommentItemProps {
+  comment: CommentData;
+}
+
+const CommentItem: React.FC<CommentItemProps> = ({ comment }) => {
+  const { user_name, created_at, comment_text, markdown_enabled } = comment;
+
+  const formattedDate = new Date(created_at).toLocaleString();
+
+  return (
+    <div className="comment">
+      <div className="comment-header">
+        <span className="comment-user">{user_name}</span>
+        <span className="comment-date">{formattedDate}</span>
+      </div>
+
+      <div className="comment-text">
+        {markdown_enabled ? (
+          <div
+            dangerouslySetInnerHTML={{
+              __html: marked(comment_text),
+            }}
+          />
+        ) : (
+          comment_text.split("\n").map((line, i) => <div key={i}>{line}</div>)
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CommentItem;

tinker_tickets_react/src/Components/Comments/CommentList.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import CommentItem from "./CommentItem";
+import type { CommentData } from "../../types/comments";
+
+interface CommentListProps {
+  comments: CommentData[];
+}
+
+const CommentList: React.FC<CommentListProps> = ({ comments }) => {
+  return (
+    <div className="comments-list">
+      {comments.map((c, idx) => (
+        <CommentItem key={idx} comment={c} />
+      ))}
+    </div>
+  );
+};
+
+export default CommentList;

tinker_tickets_react/src/Components/Comments/CommentSection.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import CommentForm from "./CommentForm";
+import CommentList from "./CommentList";
+import type { CommentData } from "../../types/comments";
+
+interface CommentsSectionProps {
+  comments: CommentData[];
+  setComments: React.Dispatch<React.SetStateAction<CommentData[]>>;
+}
+
+const CommentsSection: React.FC<CommentsSectionProps> = ({
+  comments,
+  setComments,
+}) => {
+  function handleAddComment(newComment: CommentData) {
+    setComments((prev) => [newComment, ...prev]);
+  }
+
+  return (
+    <div className="comments-section">
+      <h2>Comments</h2>
+
+      <CommentForm onAdd={handleAddComment} />
+
+      <CommentList comments={comments} />
+    </div>
+  );
+};
+
+export default CommentsSection;

tinker_tickets_react/src/Components/CreateTicket/CreateTicket.tsx

@@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import TicketForm from "./TicketForm";
+
+const CreateTicket: React.FC = () => {
+  const [error, setError] = useState<string | null>(null);
+
+  return (
+    <div className="ticket-container">
+      <div className="ticket-header">
+        <h2>Create New Ticket</h2>
+      </div>
+
+      {error && <div className="error-message">{error}</div>}
+
+      <TicketForm onError={setError} />
+    </div>
+  );
+};
+
+export default CreateTicket;

tinker_tickets_react/src/Components/CreateTicket/TicketForm.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+import TicketFieldRow from "./TicketRow";
+import TicketTextarea from "./TicketText";
+import type { TicketFormData } from "../../types/ticket";
+
+interface TicketFormProps {
+  onError: (msg: string | null) => void;
+}
+
+const TicketForm: React.FC<TicketFormProps> = ({ onError }) => {
+  const [form, setForm] = useState<TicketFormData>({
+    title: "",
+    status: "Open",
+    priority: "4",
+    category: "General",
+    type: "Issue",
+    description: "",
+  });
+
+  function updateField(field: keyof TicketFormData, value: string) {
+    setForm(prev => ({ ...prev, [field]: value }));
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+
+    if (!form.title.trim() || !form.description.trim()) {
+      onError("Title and description are required.");
+      return;
+    }
+
+    console.log("Submitting:", form);
+    // Later: POST to Express/PHP
+  }
+
+  return (
+    <form className="ticket-form" onSubmit={handleSubmit}>
+      <div className="ticket-details">
+        <div className="detail-group">
+          <label>Title</label>
+          <input
+            type="text"
+            value={form.title}
+            onChange={e => updateField("title", e.target.value)}
+            required
+          />
+        </div>
+
+        <TicketFieldRow form={form} updateField={updateField} />
+
+        <TicketTextarea
+          label="Description"
+          value={form.description}
+          onChange={value => updateField("description", value)}
+          required
+        />
+      </div>
+
+      <div className="ticket-footer">
+        <button type="submit" className="btn primary">Create Ticket</button>
+        <button
+          type="button"
+          className="btn back-btn"
+          onClick={() => (window.location.href = "/")}
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default TicketForm;

tinker_tickets_react/src/Components/CreateTicket/TicketRow.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import TicketSelect from "./TicketSelect";
+import type { TicketFormData } from "../../types/ticket";
+
+interface TicketRowProps {
+  form: TicketFormData;
+  updateField: (field: keyof TicketFormData, value: string) => void;
+}
+
+const TicketRow: React.FC<TicketRowProps> = ({ form, updateField }) => {
+  return (
+    <div className="detail-group status-priority-row">
+      <TicketSelect
+        label="Status"
+        field="status"
+        value={form.status}
+        updateField={updateField}
+        options={[
+          { value: "Open", label: "Open" },
+          { value: "Closed", label: "Closed" },
+        ]}
+      />
+
+      <TicketSelect
+        label="Priority"
+        field="priority"
+        value={form.priority}
+        updateField={updateField}
+        options={[
+          { value: "1", label: "P1 - Critical Impact" },
+          { value: "2", label: "P2 - High Impact" },
+          { value: "3", label: "P3 - Medium Impact" },
+          { value: "4", label: "P4 - Low Impact" },
+        ]}
+      />
+
+      <TicketSelect
+        label="Category"
+        field="category"
+        value={form.category}
+        updateField={updateField}
+        options={[
+          { value: "Hardware", label: "Hardware" },
+          { value: "Software", label: "Software" },
+          { value: "Network", label: "Network" },
+          { value: "Security", label: "Security" },
+          { value: "General", label: "General" },
+        ]}
+      />
+
+      <TicketSelect
+        label="Type"
+        field="type"
+        value={form.type}
+        updateField={updateField}
+        options={[
+          { value: "Maintenance", label: "Maintenance" },
+          { value: "Install", label: "Install" },
+          { value: "Task", label: "Task" },
+          { value: "Upgrade", label: "Upgrade" },
+          { value: "Issue", label: "Issue" },
+        ]}
+      />
+    </div>
+  );
+};
+
+export default TicketRow;

tinker_tickets_react/src/Components/CreateTicket/TicketSelect.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import type { SelectOption, TicketFormData } from "../../types/ticket";
+
+interface TicketSelectProps {
+  label: string;
+  field: keyof TicketFormData;
+  value: string;
+  options: SelectOption[];
+  updateField: (field: keyof TicketFormData, value: string) => void;
+}
+
+const TicketSelect: React.FC<TicketSelectProps> = ({
+  label,
+  field,
+  value,
+  options,
+  updateField,
+}) => {
+  return (
+    <div className="detail-quarter">
+      <label>{label}</label>
+
+      <select
+        value={value}
+        onChange={e => updateField(field, e.target.value)}
+      >
+        {options.map(opt => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+export default TicketSelect;

tinker_tickets_react/src/Components/CreateTicket/TicketText.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+interface TicketTextProps {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  required?: boolean;
+}
+
+const TicketText: React.FC<TicketTextProps> = ({
+  label,
+  value,
+  onChange,
+  required,
+}) => {
+  return (
+    <div className="detail-group full-width">
+      <label>{label}</label>
+
+      <textarea
+        rows={15}
+        value={value}
+        required={required}
+        onChange={e => onChange(e.target.value)}
+      />
+    </div>
+  );
+};
+
+export default TicketText;

tinker_tickets_react/src/Components/DashboardView/DashboardHeader.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+const DashboardHeader: React.FC = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="dashboard-header">
+      <h1>Tinker Tickets</h1>
+
+      <button
+        className="btn create-ticket"
+        onClick={() => navigate("/ticket/create")}
+      >
+        New Ticket
+      </button>
+    </div>
+  );
+};
+
+export default DashboardHeader;

tinker_tickets_react/src/Components/DashboardView/DashboardView.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import type { TicketListItem } from "../../types/ticket";
+import ticketData from "../../mockData/tickets.json";
+import DashboardHeader from "./DashboardHeader";
+import Pagination from "./Pagination";
+import SearchBar from "./SearchBar";
+import TicketTable from "./TicketTable";
+
+const DashboardView: React.FC = () => {
+  const [tickets] = useState<TicketListItem[]>(ticketData);
+  const [search, setSearch] = useState<string>("");
+  const [sortCol, setSortCol] = useState<keyof TicketListItem>("ticket_id");
+  const [sortDir, setSortDir] = useState<"asc" | "desc">("desc");
+  const [page, setPage] = useState<number>(1);
+
+  const pageSize = 10;
+
+  const filtered = tickets.filter(
+    (t) =>
+      t.title.toLowerCase().includes(search.toLowerCase()) ||
+      t.ticket_id.toLowerCase().includes(search.toLowerCase())
+  );
+
+  const sorted = [...filtered].sort((a, b) => {
+    const A = a[sortCol];
+    const B = b[sortCol];
+
+    if (A < B) return sortDir === "asc" ? -1 : 1;
+    if (A > B) return sortDir === "asc" ? 1 : -1;
+    return 0;
+  });
+
+  const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));
+  const paged = sorted.slice((page - 1) * pageSize, page * pageSize);
+
+  return (
+    <div>
+      <DashboardHeader />
+
+      <SearchBar value={search} onChange={setSearch} />
+
+      <div className="table-controls">
+        <div>Total Tickets: {filtered.length}</div>
+
+        <Pagination page={page} totalPages={totalPages} onChange={setPage} />
+      </div>
+
+      <TicketTable
+        tickets={paged}
+        sortCol={sortCol}
+        sortDir={sortDir}
+        onSort={(col) =>
+          col === sortCol
+            ? setSortDir(sortDir === "asc" ? "desc" : "asc")
+            : (setSortCol(col), setSortDir("asc"))
+        }
+      />
+    </div>
+  );
+};
+
+export default DashboardView;

tinker_tickets_react/src/Components/DashboardView/Pagination.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+interface PaginationProps {
+  page: number;
+  totalPages: number;
+  onChange: (p: number) => void;
+}
+
+const Pagination: React.FC<PaginationProps> = ({
+  page,
+  totalPages,
+  onChange,
+}) => {
+  return (
+    <div className="pagination">
+      <button disabled={page === 1} onClick={() => onChange(page - 1)}>
+        «
+      </button>
+
+      {Array.from({ length: totalPages }, (_, i) => i + 1).map((num) => (
+        <button
+          key={num}
+          className={page === num ? "active" : ""}
+          onClick={() => onChange(num)}
+        >
+          {num}
+        </button>
+      ))}
+
+      <button disabled={page === totalPages} onClick={() => onChange(page + 1)}>
+        »
+      </button>
+    </div>
+  );
+};
+
+export default Pagination;

tinker_tickets_react/src/Components/DashboardView/SearchBar.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+interface SearchBarProps {
+  value: string;
+  onChange: (v: string) => void;
+}
+
+const SearchBar: React.FC<SearchBarProps> = ({ value, onChange }) => {
+  return (
+    <div className="search-container">
+      <input
+        className="search-box"
+        type="text"
+        placeholder="Search tickets..."
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+      />
+
+      {value && (
+        <button className="clear-search-btn" onClick={() => onChange("")}>
+          Clear
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default SearchBar;

tinker_tickets_react/src/Components/DashboardView/TicketTable.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import type { TicketListItem } from "../../types/ticket";
+
+interface TicketTableProps {
+  tickets: TicketListItem[];
+  sortCol: keyof TicketListItem;
+  sortDir: "asc" | "desc";
+  onSort: (col: keyof TicketListItem) => void;
+}
+
+const columns: { key: keyof TicketListItem; label: string }[] = [
+  { key: "ticket_id", label: "Ticket ID" },
+  { key: "priority", label: "Priority" },
+  { key: "title", label: "Title" },
+  { key: "category", label: "Category" },
+  { key: "type", label: "Type" },
+  { key: "status", label: "Status" },
+  { key: "created_at", label: "Created" },
+  { key: "updated_at", label: "Updated" },
+];
+
+const TicketTable: React.FC<TicketTableProps> = ({
+  tickets,
+  sortCol,
+  sortDir,
+  onSort,
+}) => {
+  const navigate = useNavigate();
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          {columns.map((col) => (
+            <th
+              key={col.key}
+              onClick={() => onSort(col.key)}
+              className={sortCol === col.key ? `sort-${sortDir}` : ""}
+            >
+              {col.label}
+            </th>
+          ))}
+        </tr>
+      </thead>
+
+      <tbody>
+        {tickets.length === 0 && (
+          <tr>
+            <td colSpan={8}>No tickets found</td>
+          </tr>
+        )}
+
+        {tickets.map((t) => (
+          <tr key={t.ticket_id} className={`priority-${t.priority}`}>
+            <td>
+              <a
+                className="ticket-link"
+                onClick={() => navigate(`/ticket/${t.ticket_id}`)}
+              >
+                {t.ticket_id}
+              </a>
+            </td>
+            <td>{t.priority}</td>
+            <td>{t.title}</td>
+            <td>{t.category}</td>
+            <td>{t.type}</td>
+            <td>
+              <span className={`status-${t.status.replace(" ", "-")}`}>
+                {t.status}
+              </span>
+            </td>
+            <td>{new Date(t.created_at).toLocaleString()}</td>
+            <td>{new Date(t.updated_at).toLocaleString()}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default TicketTable;

tinker_tickets_react/src/Components/TicketView/TicketDescription.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+interface TicketDescriptionProps {
+  description: string;
+}
+
+const TicketDescription: React.FC<TicketDescriptionProps> = ({
+  description,
+}) => {
+  return (
+    <div className="detail-group full-width">
+      <label>Description</label>
+      <textarea value={description} disabled />
+    </div>
+  );
+};
+
+export default TicketDescription;

tinker_tickets_react/src/Components/TicketView/TicketHeader.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import type { TicketData } from "../../types/ticket";
+
+interface TicketHeaderProps {
+  ticket: TicketData;
+}
+
+const TicketHeader: React.FC<TicketHeaderProps> = ({ ticket }) => {
+  return (
+    <div className="ticket-header">
+      <h2>
+        <input className="editable title-input" value={ticket.title} disabled />
+      </h2>
+
+      <div className="ticket-subheader">
+        <div className="ticket-id">UUID {ticket.ticket_id}</div>
+
+        <div className="header-controls">
+          <div className="status-priority-group">
+            <span className={`status-${ticket.status.replace(" ", "-")}`}>
+              {ticket.status}
+            </span>
+
+            <span className={`priority-indicator priority-${ticket.priority}`}>
+              P{ticket.priority}
+            </span>
+          </div>
+
+          <button className="btn">Edit Ticket</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TicketHeader;

tinker_tickets_react/src/Components/TicketView/TicketTabs.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+interface TicketTabsProps {
+  active: "description" | "comments";
+  setActiveTab: (tab: "description" | "comments") => void;
+}
+
+const TicketTabs: React.FC<TicketTabsProps> = ({ active, setActiveTab }) => {
+  return (
+    <div className="ticket-tabs">
+      <button
+        className={`tab-btn ${active === "description" ? "active" : ""}`}
+        onClick={() => setActiveTab("description")}
+      >
+        Description
+      </button>
+
+      <button
+        className={`tab-btn ${active === "comments" ? "active" : ""}`}
+        onClick={() => setActiveTab("comments")}
+      >
+        Comments
+      </button>
+    </div>
+  );
+};
+
+export default TicketTabs;

tinker_tickets_react/src/Components/TicketView/TicketView.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+
+import TicketHeader from "./TicketHeader";
+import TicketTabs from "./TicketTabs";
+import TicketDescription from "./TicketDescription";
+
+import type { CommentData } from "../../types/comments";
+import type { TicketData } from "../../types/ticket";
+import CommentsSection from "../Comments/CommentSection";
+
+import mockTicket from "../../mockData/ticket.json";
+import mockComment from "../../mockData/comments.json";
+
+const TicketView: React.FC = () => {
+  const [ticket] = useState<TicketData>(mockTicket);
+  const [comments, setComments] = useState<CommentData[]>(mockComment);
+  const [activeTab, setActiveTab] = useState<"description" | "comments">(
+    "description"
+  );
+
+  return (
+    <div className={`ticket-container priority-${ticket.priority}`}>
+      <TicketHeader ticket={ticket} />
+
+      <TicketTabs active={activeTab} setActiveTab={setActiveTab} />
+
+      {activeTab === "description" && (
+        <TicketDescription description={ticket.description} />
+      )}
+
+      {activeTab === "comments" && (
+        <CommentsSection comments={comments} setComments={setComments} />
+      )}
+
+      <div className="ticket-footer">
+        <button
+          className="btn back-btn"
+          onClick={() => (window.location.href = "/")}
+        >
+          Back to Dashboard
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default TicketView;