assignment 2 ui changes

2026-09-24 16:43:54 -05:00
parent 4f6c68ad29
commit 98801089e5
10 changed files with 159 additions and 1 deletions
@@ -0,0 +1,60 @@
+import { useState } from "react";
+
+export const NOTES_MAX_LENGTH = 1000;
+
+interface OrderNotesProps {
+  notes: string;
+  onSave: (notes: string) => Promise<void>;
+}
+
+export function OrderNotesPanel({ notes, onSave }: OrderNotesProps) {
+  const [draft, setDraft] = useState(notes);
+  const [isSaving, setIsSaving] = useState(false);
+  const trimmed = draft.trim();
+  const isDisabled = isSaving || trimmed.length === 0 || trimmed === notes;
+
+  async function handleSave() {
+    if (isDisabled) {
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      await onSave(trimmed);
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
+  return (
+    <section className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
+      <div className="mb-3 flex items-center justify-between">
+        <h3 className="text-sm font-semibold text-slate-700">Internal notes</h3>
+        <span className="text-xs text-slate-500">{draft.length}/{NOTES_MAX_LENGTH}</span>
+      </div>
+      {notes ? (
+        <p className="mb-3 whitespace-pre-wrap text-sm text-slate-700">{notes}</p>
+      ) : (
+        <p className="mb-3 text-sm text-slate-400">No internal notes yet. Add context for teammates following up on this order.</p>
+      )}
+      <textarea
+        className="w-full resize-y rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 focus:border-blue-500 focus:outline-none"
+        maxLength={NOTES_MAX_LENGTH}
+        onChange={(event) => setDraft(event.target.value)}
+        placeholder="Add internal notes..."
+        rows={3}
+        value={draft}
+      />
+      <div className="mt-3 flex justify-end">
+        <button
+          className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
+          disabled={isDisabled}
+          onClick={() => void handleSave()}
+          type="button"
+        >
+          {isSaving ? "Saving..." : "Save notes"}
+        </button>
+      </div>
+    </section>
+  );
+}