Feature: Add unread message notifications to admin badge

- Add isRead boolean field to Message model (default: false)
- Create migration to update database schema
- Update admin notifications to count unread messages
- Display unread message count in notification badge tooltip
- Admins now see all notifications: pending orders, design approvals, photo requests, unread messages
- Color-coded tooltip: orange (orders), blue (designs), clay (photos), pink (messages)

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

prisma/migrations/20260719065316_add_is_read_to_message/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Message" ADD COLUMN     "isRead" BOOLEAN NOT NULL DEFAULT false;

prisma/schema.prisma

@@ -175,6 +175,7 @@ model Message {
   proof     DesignProof @relation(fields: [proofId], references: [id], onDelete: Cascade)
   sender    String // "ADMIN" | "CUSTOMER"
   body      String
+  isRead    Boolean     @default(false)
   createdAt DateTime    @default(now())
 }
 

src/components/AdminNotifications.tsx

@@ -13,6 +13,7 @@ export default async function AdminNotifications() {
       pendingOrders,
       designApprovalsInReview,
       photoRequests,
+      unreadMessages,
     ] = await Promise.all([
       prisma.order.count({
         where: {
@@ -26,9 +27,12 @@ export default async function AdminNotifications() {
       prisma.customRequest.count({
         where: { status: 'PENDING' },
       }),
+      prisma.message.count({
+        where: { isRead: false },
+      }),
     ]);
 
-    const totalNotifications = pendingOrders + designApprovalsInReview + photoRequests;
+    const totalNotifications = pendingOrders + designApprovalsInReview + photoRequests + unreadMessages;
 
     return (
       <AdminNotificationsBadge
@@ -36,10 +40,11 @@ export default async function AdminNotifications() {
         pendingOrders={pendingOrders}
         designApprovals={designApprovalsInReview}
         photoRequests={photoRequests}
+        unreadMessages={unreadMessages}
       />
     );
   } catch (err) {
     console.error('Error fetching admin notifications:', err);
-    return <AdminNotificationsBadge total={0} pendingOrders={0} designApprovals={0} photoRequests={0} />;
+    return <AdminNotificationsBadge total={0} pendingOrders={0} designApprovals={0} photoRequests={0} unreadMessages={0} />;
   }
 }

src/components/AdminNotificationsBadge.tsx

@@ -7,6 +7,7 @@ interface AdminNotificationsBadgeProps {
   pendingOrders: number;
   designApprovals: number;
   photoRequests: number;
+  unreadMessages: number;
 }
 
 export default function AdminNotificationsBadge({
@@ -14,6 +15,7 @@ export default function AdminNotificationsBadge({
   pendingOrders,
   designApprovals,
   photoRequests,
+  unreadMessages,
 }: AdminNotificationsBadgeProps) {
   const [showTooltip, setShowTooltip] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
@@ -61,6 +63,12 @@ export default function AdminNotificationsBadge({
               <span className="font-bold text-clay">{photoRequests}</span>
             </div>
           )}
+          {unreadMessages > 0 && (
+            <div className="flex items-center justify-between py-2 px-3 bg-surface rounded">
+              <span className="text-muted">Unread messages</span>
+              <span className="font-bold text-splash-pink">{unreadMessages}</span>
+            </div>
+          )}
         </div>
       )}
     </div>