wdd4wvvv
This commit is contained in:
parent
941dde2154
commit
b9fccefab1
@ -133,3 +133,65 @@ All page routes in the Phosphat Report application have been updated to be fully
|
||||
- Minimal impact on bundle size
|
||||
|
||||
All routes now provide an excellent mobile experience while maintaining full desktop functionality.
|
||||
|
||||
## Additional Routes Updated (Final Batch)
|
||||
|
||||
### 9. **Reclamation Locations (reclamation-locations.tsx)**
|
||||
- ✅ **Dual Layout System**: Desktop table + Mobile cards
|
||||
- ✅ Mobile cards showing location name, report count, and actions
|
||||
- ✅ Responsive header layout
|
||||
- ✅ Mobile-friendly action buttons
|
||||
|
||||
### 10. **Dredger Locations (dredger-locations.tsx)**
|
||||
- ✅ **Dual Layout System**: Desktop table + Mobile cards
|
||||
- ✅ Mobile cards with location details, class badges, and actions
|
||||
- ✅ Responsive class indicators and badges
|
||||
- ✅ Mobile-optimized form layout
|
||||
|
||||
### 11. **Foreman Management (foreman.tsx)**
|
||||
- ✅ **Dual Layout System**: Desktop table + Mobile cards
|
||||
- ✅ Mobile cards with foreman details and actions
|
||||
- ✅ Responsive header and button layouts
|
||||
- ✅ Mobile-friendly form modal
|
||||
|
||||
### 12. **Report View Modal (ReportViewModal.tsx)**
|
||||
- ✅ **Mobile-Responsive Modal**: Proper sizing and spacing
|
||||
- ✅ Mobile-friendly button layout (stacked on mobile)
|
||||
- ✅ Responsive modal content with proper padding
|
||||
- ✅ Full-width buttons on mobile devices
|
||||
- ✅ Improved touch targets for mobile interaction
|
||||
|
||||
### 13. **Report Sheet View Modal (ReportSheetViewModal.tsx)**
|
||||
- ✅ **Mobile-Responsive Modal**: Optimized for mobile viewing
|
||||
- ✅ Responsive statistics grid layout
|
||||
- ✅ Mobile-friendly export and print buttons
|
||||
- ✅ Proper modal sizing and content flow
|
||||
- ✅ Touch-optimized interface elements
|
||||
|
||||
## Complete Mobile Coverage
|
||||
|
||||
### ✅ **All Routes Now Mobile-Friendly:**
|
||||
1. Dashboard ✅
|
||||
2. Reports Management ✅
|
||||
3. Employee Management ✅
|
||||
4. Report Sheets ✅
|
||||
5. New Report Form ✅
|
||||
6. Areas Management ✅
|
||||
7. Equipment Management ✅
|
||||
8. Reclamation Locations ✅
|
||||
9. Dredger Locations ✅
|
||||
10. Foreman Management ✅
|
||||
11. Authentication Pages ✅
|
||||
12. Settings Pages ✅
|
||||
13. Modal Components ✅
|
||||
|
||||
### ✅ **Comprehensive Mobile Features:**
|
||||
- **Responsive Tables**: All data tables convert to mobile cards
|
||||
- **Touch-Friendly**: Proper button sizes and spacing
|
||||
- **Modal Optimization**: All modals work perfectly on mobile
|
||||
- **Form Responsiveness**: All forms adapt to mobile screens
|
||||
- **Navigation**: Mobile-first navigation patterns
|
||||
- **Typography**: Responsive text sizing throughout
|
||||
- **Grid Systems**: Flexible layouts for all screen sizes
|
||||
|
||||
The entire Phosphat Report application is now fully mobile-responsive with consistent design patterns and excellent user experience across all devices.
|
||||
@ -97,15 +97,15 @@ export default function ReportSheetViewModal({ isOpen, onClose, sheet }: ReportS
|
||||
<div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onClick={onClose}></div>
|
||||
|
||||
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-7xl sm:w-full">
|
||||
<div className="bg-white px-6 pt-6 pb-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-xl font-bold text-gray-900">Report Sheet - {new Date(sheet.date).toLocaleDateString('en-GB')}</h3>
|
||||
<div className="flex space-x-2">
|
||||
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-7xl sm:w-full max-w-full mx-4 sm:mx-0">
|
||||
<div className="bg-white px-4 sm:px-6 pt-4 sm:pt-6 pb-4">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4 space-y-2 sm:space-y-0">
|
||||
<h3 className="text-lg sm:text-xl font-bold text-gray-900">Report Sheet - {new Date(sheet.date).toLocaleDateString('en-GB')}</h3>
|
||||
<div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleExportExcel}
|
||||
className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
|
||||
className="inline-flex items-center justify-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 w-full sm:w-auto"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
@ -189,7 +189,7 @@ export default function ReportSheetViewModal({ isOpen, onClose, sheet }: ReportS
|
||||
}
|
||||
}
|
||||
}}
|
||||
className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
||||
className="inline-flex items-center justify-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 w-full sm:w-auto"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
|
||||
@ -209,7 +209,7 @@ export default function ReportSheetViewModal({ isOpen, onClose, sheet }: ReportS
|
||||
</div>
|
||||
|
||||
{/* Combined Report Sheet Layout */}
|
||||
<div id="reportframe" className="max-h-[80vh] overflow-y-auto bg-white p-6 border border-gray-300" style={{ fontFamily: 'Arial, sans-serif' }}>
|
||||
<div id="reportframe" className="max-h-[80vh] overflow-y-auto bg-white p-2 sm:p-6 border border-gray-300" style={{ fontFamily: 'Arial, sans-serif' }}>
|
||||
<ReportSheetHeader sheet={sheet} />
|
||||
<ReportSheetInfo sheet={sheet} />
|
||||
<ReportSheetDredgerSection sheet={sheet} />
|
||||
@ -250,7 +250,7 @@ export default function ReportSheetViewModal({ isOpen, onClose, sheet }: ReportS
|
||||
Stoppage Summary Statistics
|
||||
</h4>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
|
||||
{/* Total Stoppage Time */}
|
||||
<div className="bg-white rounded-lg p-4 shadow-sm border border-gray-200">
|
||||
<h5 className="text-sm font-medium text-gray-600 mb-3 uppercase tracking-wide">Total Stoppage Time</h5>
|
||||
|
||||
@ -15,15 +15,15 @@ export default function ReportViewModal({ isOpen, onClose, report }: ReportViewM
|
||||
<div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onClick={onClose}></div>
|
||||
|
||||
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-5xl sm:w-full">
|
||||
<div className="bg-white px-6 pt-6 pb-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-xl font-bold text-gray-900">Report View</h3>
|
||||
<div className="flex space-x-2">
|
||||
<div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-5xl sm:w-full max-w-full mx-4 sm:mx-0">
|
||||
<div className="bg-white px-4 sm:px-6 pt-4 sm:pt-6 pb-4">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4 space-y-2 sm:space-y-0">
|
||||
<h3 className="text-lg sm:text-xl font-bold text-gray-900">Report View</h3>
|
||||
<div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => exportReportToExcel(report).catch(console.error)}
|
||||
className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
|
||||
className="inline-flex items-center justify-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 w-full sm:w-auto"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
@ -107,7 +107,7 @@ export default function ReportViewModal({ isOpen, onClose, report }: ReportViewM
|
||||
}
|
||||
}
|
||||
}}
|
||||
className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
||||
className="inline-flex items-center justify-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 w-full sm:w-auto"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
|
||||
@ -127,7 +127,7 @@ export default function ReportViewModal({ isOpen, onClose, report }: ReportViewM
|
||||
</div>
|
||||
|
||||
{/* ISO Standard Report Layout */}
|
||||
<div id="reportframe" className="max-h-[80vh] overflow-y-auto bg-white p-6 border border-gray-300" style={{ fontFamily: 'Arial, sans-serif' }}>
|
||||
<div id="reportframe" className="max-h-[80vh] overflow-y-auto bg-white p-2 sm:p-6 border border-gray-300" style={{ fontFamily: 'Arial, sans-serif' }}>
|
||||
<ReportHeader />
|
||||
<ReportInfo report={report} />
|
||||
<ReportDredgerSection report={report} />
|
||||
@ -154,7 +154,7 @@ function ReportHeader() {
|
||||
<table className="w-full border-collapse">
|
||||
<tbody>
|
||||
<tr>
|
||||
{/* border-r border-black */}
|
||||
{/* border-r border-black */}
|
||||
<td className=" p-2 text-center" style={{ width: '25%' }}>
|
||||
<img
|
||||
src="/logo03.png"
|
||||
|
||||
@ -194,14 +194,14 @@ export default function DredgerLocations() {
|
||||
return (
|
||||
<DashboardLayout user={user}>
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-center space-y-4 sm:space-y-0">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Dredger Locations Management</h1>
|
||||
<h1 className="text-xl sm:text-2xl font-bold text-gray-900">Dredger Locations Management</h1>
|
||||
<p className="mt-1 text-sm text-gray-600">Manage dredger locations with different classes</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200"
|
||||
className="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200"
|
||||
>
|
||||
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
@ -210,10 +210,11 @@ export default function DredgerLocations() {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Locations Table */}
|
||||
{/* Locations Table - Desktop */}
|
||||
<div className="bg-white shadow-sm rounded-lg overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<div className="hidden sm:block">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
@ -285,7 +286,63 @@ export default function DredgerLocations() {
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Locations Cards - Mobile */}
|
||||
<div className="sm:hidden">
|
||||
<div className="space-y-4 p-4">
|
||||
{dredgerLocations.map((location) => (
|
||||
<div key={location.id} className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex items-center">
|
||||
<div className={`h-10 w-10 rounded-full flex items-center justify-center ${getClassBadge(location.class)}`}>
|
||||
{getClassIcon(location.class)}
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<div className="text-sm font-medium text-gray-900">{location.name}</div>
|
||||
<div className="text-xs text-gray-500">{location.class.toUpperCase()}</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
||||
{location._count.reports} reports
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getClassBadge(location.class)}`}>
|
||||
{location.class.toUpperCase()} - {location.class === 's' ? 'Standard' : location.class === 'd' ? 'Deep' : 'Special'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col space-y-2">
|
||||
<button
|
||||
onClick={() => handleEdit(location)}
|
||||
className="w-full text-center px-3 py-2 text-sm text-indigo-600 bg-indigo-50 rounded-md hover:bg-indigo-100 transition-colors duration-150"
|
||||
>
|
||||
Edit Location
|
||||
</button>
|
||||
<Form method="post" className="w-full">
|
||||
<input type="hidden" name="intent" value="delete" />
|
||||
<input type="hidden" name="id" value={location.id} />
|
||||
<button
|
||||
type="submit"
|
||||
onClick={(e) => {
|
||||
if (!confirm("Are you sure you want to delete this dredger location?")) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}}
|
||||
className="w-full text-center px-3 py-2 text-sm text-red-600 bg-red-50 rounded-md hover:bg-red-100 transition-colors duration-150"
|
||||
>
|
||||
Delete Location
|
||||
</button>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{dredgerLocations.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
|
||||
@ -120,14 +120,14 @@ export default function Foreman() {
|
||||
return (
|
||||
<DashboardLayout user={user}>
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-center space-y-4 sm:space-y-0">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Foreman Management</h1>
|
||||
<h1 className="text-xl sm:text-2xl font-bold text-gray-900">Foreman Management</h1>
|
||||
<p className="mt-1 text-sm text-gray-600">Manage site foremen and supervisors</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200"
|
||||
className="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200"
|
||||
>
|
||||
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
@ -136,10 +136,11 @@ export default function Foreman() {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Foremen Table */}
|
||||
{/* Foremen Table - Desktop */}
|
||||
<div className="bg-white shadow-sm rounded-lg overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<div className="hidden sm:block">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
@ -205,7 +206,59 @@ export default function Foreman() {
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Foremen Cards - Mobile */}
|
||||
<div className="sm:hidden">
|
||||
<div className="space-y-4 p-4">
|
||||
{foremen.map((foreman) => (
|
||||
<div key={foreman.id} className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex items-center">
|
||||
<div className="h-10 w-10 rounded-full bg-indigo-500 flex items-center justify-center">
|
||||
<span className="text-sm font-medium text-white">
|
||||
{foreman.name.charAt(0).toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<div className="text-sm font-medium text-gray-900">{foreman.name}</div>
|
||||
<div className="text-xs text-gray-500">Site Foreman</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
|
||||
#{foreman.id}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col space-y-2">
|
||||
<button
|
||||
onClick={() => handleEdit(foreman)}
|
||||
className="w-full text-center px-3 py-2 text-sm text-indigo-600 bg-indigo-50 rounded-md hover:bg-indigo-100 transition-colors duration-150"
|
||||
>
|
||||
Edit Foreman
|
||||
</button>
|
||||
<Form method="post" className="w-full">
|
||||
<input type="hidden" name="intent" value="delete" />
|
||||
<input type="hidden" name="id" value={foreman.id} />
|
||||
<button
|
||||
type="submit"
|
||||
onClick={(e) => {
|
||||
if (!confirm("Are you sure you want to delete this foreman?")) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}}
|
||||
className="w-full text-center px-3 py-2 text-sm text-red-600 bg-red-50 rounded-md hover:bg-red-100 transition-colors duration-150"
|
||||
>
|
||||
Delete Foreman
|
||||
</button>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{foremen.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
|
||||
@ -125,14 +125,14 @@ export default function ReclamationLocations() {
|
||||
return (
|
||||
<DashboardLayout user={user}>
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-center space-y-4 sm:space-y-0">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Reclamation Locations Management</h1>
|
||||
<h1 className="text-xl sm:text-2xl font-bold text-gray-900">Reclamation Locations Management</h1>
|
||||
<p className="mt-1 text-sm text-gray-600">Manage shoreline reclamation locations</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200"
|
||||
className="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200"
|
||||
>
|
||||
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
@ -141,10 +141,11 @@ export default function ReclamationLocations() {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Locations Table */}
|
||||
{/* Locations Table - Desktop */}
|
||||
<div className="bg-white shadow-sm rounded-lg overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<div className="hidden sm:block">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
@ -210,7 +211,58 @@ export default function ReclamationLocations() {
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Locations Cards - Mobile */}
|
||||
<div className="sm:hidden">
|
||||
<div className="space-y-4 p-4">
|
||||
{reclamationLocations.map((location) => (
|
||||
<div key={location.id} className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex items-center">
|
||||
<div className="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
|
||||
<svg className="h-5 w-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<div className="text-sm font-medium text-gray-900">{location.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
||||
{location._count.reports} reports
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col space-y-2">
|
||||
<button
|
||||
onClick={() => handleEdit(location)}
|
||||
className="w-full text-center px-3 py-2 text-sm text-indigo-600 bg-indigo-50 rounded-md hover:bg-indigo-100 transition-colors duration-150"
|
||||
>
|
||||
Edit Location
|
||||
</button>
|
||||
<Form method="post" className="w-full">
|
||||
<input type="hidden" name="intent" value="delete" />
|
||||
<input type="hidden" name="id" value={location.id} />
|
||||
<button
|
||||
type="submit"
|
||||
onClick={(e) => {
|
||||
if (!confirm("Are you sure you want to delete this reclamation location?")) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}}
|
||||
className="w-full text-center px-3 py-2 text-sm text-red-600 bg-red-50 rounded-md hover:bg-red-100 transition-colors duration-150"
|
||||
>
|
||||
Delete Location
|
||||
</button>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{reclamationLocations.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user