Showcase demo

.devcontainer/Dockerfile

@@ -33,6 +33,7 @@ RUN mkdir -p /etc/apt/keyrings \
     && apt-get update \
     && apt-get install nodejs -y \
     && npm install -g npm@11.5.2 \
+    && npm install -g @openai/codex \
     && rm -rf /var/lib/apt/lists/*
 
 # Use a non-root user per https://code.visualstudio.com/remote/advancedcontainers/add-nonroot-user

.devcontainer/devcontainer.json

@@ -4,7 +4,7 @@
     "service": "frontend",
     "remoteUser": "vscode",
     "forwardPorts": [5173],
-    "postCreateCommand": "npm install",
+    "postCreateCommand": "npm install && sudo npm install -g @anthropic-ai/claude-code",
     "customizations": {
         "vscode": {
             "extensions": [
@@ -37,6 +37,13 @@
                     "editor.defaultFormatter": "esbenp.prettier-vscode"
                 }
             }
-        }
+        },
+        "mounts": [
+            "source=claude-code-config-${devcontainerId},target=/home/vscode/.claude,type=volume"
+        ],
+        "containerEnv": {
+            "CLAUDE_CONFIG_DIR": "/home/vscode/.claude"
+        },
+        "containerUser": "vscode"
     }
 }

.devcontainer/docker-compose.yml

@@ -10,3 +10,4 @@ services:
         command: /bin/sh -c "while sleep 1000; do :; done"
         environment:
             - windir # Defined on Windows but not on other platforms
+        privileged: true

.env.template

@@ -0,0 +1,8 @@
+#FIREBASE SETUP
+VITE_FIREBASE_API_KEY=""
+VITE_FIREBASE_AUTH_DOMAIN=""
+VITE_FIREBASE_PROJECT_ID=""
+VITE_FIREBASE_STORAGE_BUCKET=""
+VITE_FIREBASE_MESSAGING_SENDER_ID=""
+VITE_FIREBASE_APP_ID=""
+VITE_FIREBASE_MEASUREMENT_ID=""

.gitignore

@@ -4,3 +4,9 @@
 # React Router
 /.react-router/
 /build/
+
+#environment files
+.env
+
+# Firebase service account key — never commit this
+scripts/service-account.json

README.md

@@ -53,3 +53,7 @@ Inside the dev container, you can use the following commands:
 | `npm run lint:fix`  | Lints and automatically fixes issues.                      |
 | `npm run format`    | Formats the code using Prettier.                           |
 | `npm run typecheck` | Runs the TypeScript compiler to check for type errors.     |
+
+## Feature Notes
+
+- Image messaging rollout and Firebase setup details: [`docs/chat-image-messaging.md`](/workspace/docs/chat-image-messaging.md)

app/app.css

@@ -8,9 +8,69 @@
 
 html,
 body {
-    @apply bg-white dark:bg-gray-950;
+    @apply bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-100;
 
     @media (prefers-color-scheme: dark) {
         color-scheme: dark;
     }
 }
+
+.search-hint {
+    position: absolute;
+    left: 0;
+    right: 0;
+    white-space: nowrap;
+    transform-origin: center;
+}
+
+.search-hint-active {
+    animation: search-hint-settle 420ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.search-hint-leave {
+    animation: search-hint-leave 420ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.search-hint-enter {
+    animation: search-hint-enter 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+@keyframes search-hint-settle {
+    from {
+        opacity: 0;
+        transform: translate3d(-10px, 0, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes search-hint-leave {
+    from {
+        opacity: 1;
+        transform: translate3d(0, 0, 0) rotateX(0deg);
+        clip-path: inset(0 0 0 0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(12px, -8px, 0) rotateX(75deg);
+        clip-path: inset(0 100% 0 0);
+    }
+}
+
+@keyframes search-hint-enter {
+    from {
+        opacity: 0;
+        transform: translate3d(-12px, 8px, 0) rotateX(-75deg);
+        clip-path: inset(0 0 0 100%);
+    }
+
+    to {
+        opacity: 1;
+        transform: translate3d(0, 0, 0) rotateX(0deg);
+        clip-path: inset(0 0 0 0);
+    }
+}

app/components/ReferralCard.tsx

@@ -0,0 +1,120 @@
+import { MoreHorizontal, ExternalLink } from "lucide-react";
+import type { ReferralWithProvider } from "~/types/referral";
+
+interface ReferralCardProps {
+    referral: ReferralWithProvider;
+    onEdit: () => void;
+    onDelete: (id: string) => void;
+}
+
+export default function ReferralCard({
+    referral,
+    onEdit,
+    onDelete,
+}: ReferralCardProps) {
+    const contactName =
+        `${referral.referralFirstName ?? ""} ${referral.referralLastName ?? ""}`.trim() ||
+        "Unknown";
+    const title = referral.referralTitle || "";
+    const phone = referral.referralPhone || "";
+    const email = referral.referralEmail || "";
+    const websiteUrl = referral.websiteUrl?.trim() || "";
+
+    const socialWorkerName = referral.socialWorker
+        ? `${referral.socialWorker.firstName ?? ""} ${referral.socialWorker.lastName ?? ""}`.trim()
+        : "";
+
+    const statusColors: Record<string, string> = {
+        pending: "bg-yellow-100 text-yellow-800",
+        accepted: "bg-green-100 text-green-800",
+        completed: "bg-blue-100 text-blue-800",
+        rejected: "bg-red-100 text-red-800",
+    };
+    const statusStyle =
+        statusColors[referral.status] || "bg-gray-100 text-gray-800";
+
+    return (
+        <article className="relative rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition-colors">
+            {/* Options Menu */}
+            <div className="absolute right-2 top-2 group z-10">
+                <button
+                    type="button"
+                    className="p-1 text-gray-900 hover:text-gray-500 transition"
+                    aria-label="More options"
+                >
+                    <MoreHorizontal className="h-5 w-5" />
+                </button>
+
+                <div className="absolute right-0 top-full hidden w-32 flex-col pt-1 group-hover:flex">
+                    <div className="flex flex-col overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg">
+                        <button
+                            onClick={onEdit}
+                            className="px-4 py-2 text-left text-[14px] text-gray-700 hover:bg-gray-50 transition-colors"
+                        >
+                            Edit
+                        </button>
+                        <button
+                            onClick={() => {
+                                if (window.confirm("Delete this referral?")) {
+                                    onDelete(referral.id);
+                                }
+                            }}
+                            className="px-4 py-2 text-left text-[14px] text-red-600 hover:bg-red-50 transition-colors border-t border-gray-100"
+                        >
+                            Delete
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            {/* Status Badge */}
+            <span
+                className={`absolute right-2 top-10 rounded-full px-2.5 py-0.5 text-[11px] font-semibold capitalize ${statusStyle}`}
+            >
+                {referral.status}
+            </span>
+
+            {/* Content */}
+            <div className="pr-8">
+                <h3 className="text-[15px] font-bold text-gray-900 leading-tight">
+                    {contactName}
+                </h3>
+                {title ? (
+                    <p className="text-[14px] font-bold text-gray-900 leading-tight">
+                        {title}
+                    </p>
+                ) : null}
+
+                <div className="mt-2 text-[14px] text-gray-900 leading-snug">
+                    {phone ? <p>{phone}</p> : null}
+                    {email ? <p>{email}</p> : null}
+                </div>
+
+                {socialWorkerName ? (
+                    <p className="mt-3 text-[14px] font-bold text-gray-900">
+                        Referred By: {socialWorkerName}
+                    </p>
+                ) : null}
+
+                <div className="mt-2">
+                    {websiteUrl ? (
+                        <a
+                            href={websiteUrl}
+                            target="_blank"
+                            rel="noreferrer"
+                            className="inline-flex items-center gap-1.5 rounded bg-[#A3D146] px-4 py-1.5 text-[14px] font-medium text-black hover:bg-[#92BC3F] transition-colors"
+                        >
+                            Website
+                            <ExternalLink className="h-3.5 w-3.5" />
+                        </a>
+                    ) : (
+                        <span className="inline-flex items-center gap-1.5 rounded bg-gray-100 px-4 py-1.5 text-[14px] font-medium text-gray-400 cursor-not-allowed">
+                            Website
+                            <ExternalLink className="h-3.5 w-3.5" />
+                        </span>
+                    )}
+                </div>
+            </div>
+        </article>
+    );
+}