@@ -4,6 +4,7 @@ import Head from 'next/head'
44import { supabase } from 'common/supabaseClient'
55import NewSchedule from 'lib/components/event-schedule-new'
66import FeedCoupons from 'common/components/perks/feed-coupons'
7+ import { Dialog , DialogContent } from 'lib/components/ui/dialog'
78
89// Format Atproto event to our calendar component format
910const formatATProtoEvent = ( atprotoEvent : any ) => {
@@ -57,6 +58,15 @@ const AdminPage = () => {
5758 const [ statusFilter , setStatusFilter ] = useState < 'all' | 'needs_review' | 'changes_need_review' | 'approved' > ( 'all' )
5859 const [ editingComments , setEditingComments ] = useState < Set < string > > ( new Set ( ) )
5960 const [ commentValues , setCommentValues ] = useState < Record < string , string > > ( { } )
61+ const [ expandedJson , setExpandedJson ] = useState < {
62+ isOpen : boolean
63+ title : string
64+ data : any
65+ } > ( {
66+ isOpen : false ,
67+ title : '' ,
68+ data : null ,
69+ } )
6070
6171 const fetchEvents = async ( ) => {
6272 try {
@@ -352,6 +362,22 @@ const AdminPage = () => {
352362 setCommentValues ( newCommentValues )
353363 }
354364
365+ const handleExpandJson = ( title : string , data : any ) => {
366+ setExpandedJson ( {
367+ isOpen : true ,
368+ title,
369+ data,
370+ } )
371+ }
372+
373+ const handleCloseJsonDialog = ( ) => {
374+ setExpandedJson ( {
375+ isOpen : false ,
376+ title : '' ,
377+ data : null ,
378+ } )
379+ }
380+
355381 // Filter events based on status filter
356382 const filteredEvents = events . filter ( event => {
357383 if ( statusFilter === 'needs_review' ) {
@@ -639,6 +665,15 @@ const AdminPage = () => {
639665 </ div >
640666 ) }
641667
668+ { ! event . contact && recordData . organizer && recordData . organizer . contact && (
669+ < div className = "mt-1" >
670+ < span className = "text-xs text-blue-600 font-medium" > Contact: </ span >
671+ < span className = "text-xs text-gray-700" >
672+ { recordData . organizer . contact }
673+ </ span >
674+ </ div >
675+ ) }
676+
642677 { /* Status Badge */ }
643678 < div className = "mt-1 space-y-1" >
644679 { hasChanges ? (
@@ -675,25 +710,60 @@ const AdminPage = () => {
675710 < div className = "lg:col-span-5" >
676711 { hasChanges ? (
677712 < div className = "space-y-2" >
678- < div className = "bg-green-50 rounded-md p-3 max-h-32 overflow-y-auto" >
679- < div className = "text-xs font-medium text-green-800 mb-1" >
680- ✓ Currently Live (Approved):
713+ < div className = "bg-green-50 rounded-md p-3 max-h-32 overflow-y-auto relative" >
714+ < div className = "flex items-center justify-between mb-1" >
715+ < div className = "text-xs font-medium text-green-800" >
716+ ✓ Currently Live (Approved):
717+ </ div >
718+ < button
719+ onClick = { ( ) =>
720+ handleExpandJson (
721+ 'Currently Live (Approved)' ,
722+ event . record_passed_review
723+ )
724+ }
725+ className = "text-xs text-green-600 hover:text-green-800 underline"
726+ >
727+ Expand
728+ </ button >
681729 </ div >
682730 < pre className = "text-xs text-green-700 whitespace-pre-wrap break-words" >
683731 { JSON . stringify ( event . record_passed_review , null , 2 ) }
684732 </ pre >
685733 </ div >
686- < div className = "bg-orange-50 rounded-md p-3 max-h-32 overflow-y-auto" >
687- < div className = "text-xs font-medium text-orange-800 mb-1" >
688- 📝 Latest Update (Needs Review):
734+ < div className = "bg-orange-50 rounded-md p-3 max-h-32 overflow-y-auto relative" >
735+ < div className = "flex items-center justify-between mb-1" >
736+ < div className = "text-xs font-medium text-orange-800" >
737+ 📝 Latest Update (Needs Review):
738+ </ div >
739+ < button
740+ onClick = { ( ) =>
741+ handleExpandJson (
742+ 'Latest Update (Needs Review)' ,
743+ event . record_needs_review
744+ )
745+ }
746+ className = "text-xs text-orange-600 hover:text-orange-800 underline"
747+ >
748+ Expand
749+ </ button >
689750 </ div >
690751 < pre className = "text-xs text-orange-700 whitespace-pre-wrap break-words" >
691752 { JSON . stringify ( event . record_needs_review , null , 2 ) }
692753 </ pre >
693754 </ div >
694755 </ div >
695756 ) : (
696- < div className = "bg-gray-50 rounded-md p-3 max-h-40 overflow-y-auto" >
757+ < div className = "bg-gray-50 rounded-md p-3 max-h-40 overflow-y-auto relative" >
758+ < div className = "flex items-center justify-between mb-2" >
759+ < div className = "text-xs font-medium text-gray-700" > Event Data:</ div >
760+ < button
761+ onClick = { ( ) => handleExpandJson ( 'Event Data' , recordData ) }
762+ className = "text-xs text-gray-600 hover:text-gray-800 underline"
763+ >
764+ Expand
765+ </ button >
766+ </ div >
697767 < pre className = "text-xs text-gray-700 whitespace-pre-wrap break-words" >
698768 { JSON . stringify ( recordData , null , 2 ) }
699769 </ pre >
@@ -866,6 +936,25 @@ const AdminPage = () => {
866936 setSelectedDay = { ( ) => { } }
867937 />
868938 </ div >
939+
940+ { /* JSON Expansion Dialog */ }
941+ < Dialog open = { expandedJson . isOpen } onOpenChange = { handleCloseJsonDialog } >
942+ < DialogContent className = "max-w-4xl max-h-[80vh] overflow-auto" >
943+ < div className = "flex flex-col h-full" >
944+ < div className = "flex items-center justify-between mb-4" >
945+ < h3 className = "text-lg font-semibold text-gray-900" > { expandedJson . title } </ h3 >
946+ < button onClick = { handleCloseJsonDialog } className = "text-gray-400 hover:text-gray-600" >
947+ ✕
948+ </ button >
949+ </ div >
950+ < div className = "flex-1 overflow-auto bg-gray-50 rounded-md p-4" >
951+ < pre className = "text-sm text-gray-700 whitespace-pre-wrap break-words" >
952+ { JSON . stringify ( expandedJson . data , null , 2 ) }
953+ </ pre >
954+ </ div >
955+ </ div >
956+ </ DialogContent >
957+ </ Dialog >
869958 </ >
870959 ) : (
871960 < div className = "max-w-md mx-auto" >
0 commit comments