dashboard update
This commit is contained in:
Jake Kasper
@@ -1,4 +1,5 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
import { UsersIcon, CogIcon, BuildingOfficeIcon, ChartBarIcon } from '@heroicons/react/24/outline';
|
import { UsersIcon, CogIcon, BuildingOfficeIcon, ChartBarIcon } from '@heroicons/react/24/outline';
|
||||||
import { adminAPI } from '../../services/api';
|
import { adminAPI } from '../../services/api';
|
||||||
import LoadingSpinner from '../../components/UI/LoadingSpinner';
|
import LoadingSpinner from '../../components/UI/LoadingSpinner';
|
||||||
@@ -117,17 +118,26 @@ const AdminDashboard = () => {
|
|||||||
<div className="card">
|
<div className="card">
|
||||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h3>
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h3>
|
||||||
<div className="space-y-3">
|
<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="font-medium text-gray-900">Manage Users</div>
|
||||||
<div className="text-sm text-gray-500">View and manage user accounts</div>
|
<div className="text-sm text-gray-500">View and manage user accounts</div>
|
||||||
</button>
|
</Link>
|
||||||
<button className="w-full text-left p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors">
|
<Link
|
||||||
<div className="font-medium text-gray-900">System Settings</div>
|
to="/admin/products"
|
||||||
<div className="text-sm text-gray-500">Configure system preferences</div>
|
className="block w-full text-left p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors"
|
||||||
</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">Manage Products</div>
|
||||||
<div className="font-medium text-gray-900">View Logs</div>
|
<div className="text-sm text-gray-500">Add and manage lawn care products</div>
|
||||||
<div className="text-sm text-gray-500">Check system and application logs</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>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</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 = () => {
|
||||||
|
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 (
|
return (
|
||||||
<div className="p-6">
|
<div className="p-6">
|
||||||
<h1 className="text-2xl font-bold text-gray-900 mb-6">Properties</h1>
|
<div className="flex justify-between items-center mb-6">
|
||||||
<div className="card">
|
<div>
|
||||||
<p className="text-gray-600">Property management coming soon...</p>
|
<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>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user