dashboard update
This commit is contained in:
Jake Kasper
@@ -1,4 +1,5 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { UsersIcon, CogIcon, BuildingOfficeIcon, ChartBarIcon } from '@heroicons/react/24/outline';
|
||||
import { adminAPI } from '../../services/api';
|
||||
import LoadingSpinner from '../../components/UI/LoadingSpinner';
|
||||
@@ -117,17 +118,26 @@ const AdminDashboard = () => {
|
||||
<div className="card">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h3>
|
||||
<div className="space-y-3">
|
||||
<button className="w-full text-left p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors">
|
||||
<Link
|
||||
to="/admin/users"
|
||||
className="block w-full text-left p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="font-medium text-gray-900">Manage Users</div>
|
||||
<div className="text-sm text-gray-500">View and manage user accounts</div>
|
||||
</button>
|
||||
<button className="w-full text-left p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors">
|
||||
<div className="font-medium text-gray-900">System Settings</div>
|
||||
<div className="text-sm text-gray-500">Configure system preferences</div>
|
||||
</button>
|
||||
<button className="w-full text-left p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors">
|
||||
<div className="font-medium text-gray-900">View Logs</div>
|
||||
<div className="text-sm text-gray-500">Check system and application logs</div>
|
||||
</Link>
|
||||
<Link
|
||||
to="/admin/products"
|
||||
className="block w-full text-left p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="font-medium text-gray-900">Manage Products</div>
|
||||
<div className="text-sm text-gray-500">Add and manage lawn care products</div>
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => window.open(`${process.env.REACT_APP_API_URL}/admin/system/health`, '_blank')}
|
||||
className="w-full text-left p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="font-medium text-gray-900">System Health</div>
|
||||
<div className="text-sm text-gray-500">Check system status and health</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,254 @@
|
||||
import React from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { PlusIcon, MapPinIcon, TrashIcon, PencilIcon } from '@heroicons/react/24/outline';
|
||||
import { propertiesAPI } from '../../services/api';
|
||||
import LoadingSpinner from '../../components/UI/LoadingSpinner';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
const Properties = () => {
|
||||
const [properties, setProperties] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showCreateForm, setShowCreateForm] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
address: '',
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
totalArea: ''
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
fetchProperties();
|
||||
}, []);
|
||||
|
||||
const fetchProperties = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await propertiesAPI.getAll();
|
||||
setProperties(response.data.data || []);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch properties:', error);
|
||||
toast.error('Failed to load properties');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
const propertyData = {
|
||||
...formData,
|
||||
latitude: formData.latitude ? parseFloat(formData.latitude) : null,
|
||||
longitude: formData.longitude ? parseFloat(formData.longitude) : null,
|
||||
totalArea: formData.totalArea ? parseFloat(formData.totalArea) : null
|
||||
};
|
||||
|
||||
await propertiesAPI.create(propertyData);
|
||||
toast.success('Property created successfully!');
|
||||
setShowCreateForm(false);
|
||||
setFormData({ name: '', address: '', latitude: '', longitude: '', totalArea: '' });
|
||||
fetchProperties();
|
||||
} catch (error) {
|
||||
console.error('Failed to create property:', error);
|
||||
toast.error(error.response?.data?.message || 'Failed to create property');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id, name) => {
|
||||
if (window.confirm(`Are you sure you want to delete "${name}"?`)) {
|
||||
try {
|
||||
await propertiesAPI.delete(id);
|
||||
toast.success('Property deleted successfully');
|
||||
fetchProperties();
|
||||
} catch (error) {
|
||||
console.error('Failed to delete property:', error);
|
||||
toast.error('Failed to delete property');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900 mb-6">Properties</h1>
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<LoadingSpinner size="lg" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900 mb-6">Properties</h1>
|
||||
<div className="card">
|
||||
<p className="text-gray-600">Property management coming soon...</p>
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Properties</h1>
|
||||
<p className="text-gray-600">Manage your lawn care properties</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowCreateForm(true)}
|
||||
className="btn-primary flex items-center gap-2"
|
||||
>
|
||||
<PlusIcon className="h-5 w-5" />
|
||||
Add Property
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Create Property Form */}
|
||||
{showCreateForm && (
|
||||
<div className="card mb-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Add New Property</h3>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="label">Property Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
className="input"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
placeholder="e.g., Main Lawn, Front Yard"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="label">Address</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input"
|
||||
value={formData.address}
|
||||
onChange={(e) => setFormData({ ...formData, address: e.target.value })}
|
||||
placeholder="123 Main St, City, State"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="label">Latitude</label>
|
||||
<input
|
||||
type="number"
|
||||
step="any"
|
||||
className="input"
|
||||
value={formData.latitude}
|
||||
onChange={(e) => setFormData({ ...formData, latitude: e.target.value })}
|
||||
placeholder="40.7128"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="label">Longitude</label>
|
||||
<input
|
||||
type="number"
|
||||
step="any"
|
||||
className="input"
|
||||
value={formData.longitude}
|
||||
onChange={(e) => setFormData({ ...formData, longitude: e.target.value })}
|
||||
placeholder="-74.0060"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="label">Total Area (sq ft)</label>
|
||||
<input
|
||||
type="number"
|
||||
step="any"
|
||||
className="input"
|
||||
value={formData.totalArea}
|
||||
onChange={(e) => setFormData({ ...formData, totalArea: e.target.value })}
|
||||
placeholder="5000"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<button type="submit" className="btn-primary">
|
||||
Create Property
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setShowCreateForm(false);
|
||||
setFormData({ name: '', address: '', latitude: '', longitude: '', totalArea: '' });
|
||||
}}
|
||||
className="btn-secondary"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Properties List */}
|
||||
{properties.length === 0 ? (
|
||||
<div className="card text-center py-12">
|
||||
<MapPinIcon className="h-16 w-16 text-gray-300 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">No Properties Yet</h3>
|
||||
<p className="text-gray-600 mb-6">Get started by adding your first property</p>
|
||||
<button
|
||||
onClick={() => setShowCreateForm(true)}
|
||||
className="btn-primary"
|
||||
>
|
||||
Add Your First Property
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{properties.map((property) => (
|
||||
<div key={property.id} className="card">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900">{property.name}</h3>
|
||||
{property.address && (
|
||||
<p className="text-sm text-gray-600 flex items-center mt-1">
|
||||
<MapPinIcon className="h-4 w-4 mr-1" />
|
||||
{property.address}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Link
|
||||
to={`/properties/${property.id}`}
|
||||
className="p-1 text-gray-400 hover:text-blue-600 transition-colors"
|
||||
>
|
||||
<PencilIcon className="h-4 w-4" />
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => handleDelete(property.id, property.name)}
|
||||
className="p-1 text-gray-400 hover:text-red-600 transition-colors"
|
||||
>
|
||||
<TrashIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 text-sm">
|
||||
{property.totalArea && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Total Area:</span>
|
||||
<span className="font-medium">{property.totalArea.toLocaleString()} sq ft</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Sections:</span>
|
||||
<span className="font-medium">{property.sectionCount || 0}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Created:</span>
|
||||
<span className="font-medium">
|
||||
{new Date(property.createdAt).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 pt-4 border-t border-gray-200">
|
||||
<Link
|
||||
to={`/properties/${property.id}`}
|
||||
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
||||
>
|
||||
View Details →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user