@@ -50,6 +50,11 @@ export default function ProjectDatabase() {
5050 // Expand/Collapse State
5151 const [ expandedTables , setExpandedTables ] = useState < Record < number , boolean > > ( { } ) ;
5252
53+ // Delete Table State
54+ const [ deleteDialogOpen , setDeleteDialogOpen ] = useState ( false ) ;
55+ const [ tableToDelete , setTableToDelete ] = useState < DynTableDef | null > ( null ) ;
56+ const [ deleteLoading , setDeleteLoading ] = useState ( false ) ;
57+
5358
5459 useEffect ( ( ) => {
5560 if ( projectId ) {
@@ -180,6 +185,27 @@ export default function ProjectDatabase() {
180185 } ;
181186
182187
188+ const openDeleteDialog = ( table : DynTableDef ) => {
189+ setTableToDelete ( table ) ;
190+ setDeleteDialogOpen ( true ) ;
191+ } ;
192+
193+ const confirmDeleteTable = async ( ) => {
194+ if ( ! tableToDelete ) return ;
195+ setDeleteLoading ( true ) ;
196+ try {
197+ await dynamicDBService . deleteTable ( projectId , tableToDelete . id ) ;
198+ setDeleteDialogOpen ( false ) ;
199+ setTableToDelete ( null ) ;
200+ fetchTables ( ) ;
201+ } catch ( err ) {
202+ console . error ( "Failed to delete table" , err ) ;
203+ // In a real app, show a toast here
204+ } finally {
205+ setDeleteLoading ( false ) ;
206+ }
207+ } ;
208+
183209 if ( loadingProject ) {
184210 return < div className = "flex h-screen items-center justify-center bg-slate-50" > < Loader2 className = "animate-spin text-sky-600" /> </ div > ;
185211 }
@@ -383,6 +409,42 @@ export default function ProjectDatabase() {
383409 </ DialogFooter >
384410 </ DialogContent >
385411 </ Dialog >
412+
413+ { /* Delete Confirmation Dialog */ }
414+ < Dialog open = { deleteDialogOpen } onOpenChange = { setDeleteDialogOpen } >
415+ < DialogContent >
416+ < DialogHeader >
417+ < DialogTitle className = "text-red-600 flex items-center gap-2" >
418+ < Trash2 className = "h-5 w-5" /> Delete Table
419+ </ DialogTitle >
420+ < DialogDescription >
421+ Are you sure you want to delete the table < strong > { tableToDelete ?. alias } </ strong > ?
422+ < br /> < br />
423+ This action cannot be undone and will permanently delete all data in this table.
424+ </ DialogDescription >
425+ </ DialogHeader >
426+ < DialogFooter >
427+ < Button variant = "outline" onClick = { ( ) => setDeleteDialogOpen ( false ) } disabled = { deleteLoading } >
428+ Cancel
429+ </ Button >
430+ < Button
431+ variant = "destructive"
432+ onClick = { confirmDeleteTable }
433+ disabled = { deleteLoading }
434+ className = "bg-red-600 hover:bg-red-700"
435+ >
436+ { deleteLoading ? (
437+ < >
438+ < Loader2 className = "mr-2 h-4 w-4 animate-spin" />
439+ Deleting...
440+ </ >
441+ ) : (
442+ "Delete Table"
443+ ) }
444+ </ Button >
445+ </ DialogFooter >
446+ </ DialogContent >
447+ </ Dialog >
386448 </ div >
387449
388450 { /* Tables List */ }
@@ -408,6 +470,18 @@ export default function ProjectDatabase() {
408470 </ div >
409471 </ div >
410472 < div className = "flex items-center space-x-2" >
473+ < Button
474+ size = "icon"
475+ variant = "ghost"
476+ className = "h-8 w-8 text-red-500 hover:text-red-700 hover:bg-red-100"
477+ onClick = { ( e ) => {
478+ e . stopPropagation ( ) ;
479+ openDeleteDialog ( t ) ;
480+ } }
481+ title = "Drop Table"
482+ >
483+ < Trash2 className = "h-4 w-4" />
484+ </ Button >
411485 < Button size = "sm" variant = "ghost" className = "text-sky-600" onClick = { ( e ) => {
412486 e . stopPropagation ( ) ;
413487 openAddColDialog ( t ) ;
0 commit comments