Constantin
94 lines
3.1 KiB
React
94 lines
3.1 KiB
React
import { useState, useEffect } from 'react';
|
|
import { FolderOpen, Users, HardDrive } from 'lucide-react';
|
|
import { fileAPI } from '../services/api';
|
|
|
|
function Files() {
|
|
const [users, setUsers] = useState([]);
|
|
const [status, setStatus] = useState(null);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
fetchFilesData();
|
|
}, []);
|
|
|
|
const fetchFilesData = async () => {
|
|
try {
|
|
const [usersResponse, statusResponse] = await Promise.all([
|
|
fileAPI.getUsers(),
|
|
fileAPI.getStatus()
|
|
]);
|
|
|
|
setUsers(usersResponse.data);
|
|
setStatus(statusResponse.data);
|
|
} catch (error) {
|
|
console.error('Failed to fetch files data:', error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div className="mb-8">
|
|
<h1 className="text-2xl font-bold text-gray-900">File Storage</h1>
|
|
<p className="mt-2 text-gray-600">
|
|
Manage WebDAV file storage services
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* Status */}
|
|
<div className="card">
|
|
<div className="flex items-center mb-4">
|
|
<HardDrive className="h-6 w-6 text-primary-500 mr-2" />
|
|
<h3 className="text-lg font-medium text-gray-900">Service Status</h3>
|
|
</div>
|
|
{status ? (
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between">
|
|
<span className="text-sm text-gray-500">WebDAV:</span>
|
|
<span className="text-sm font-medium text-success-600">Running</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-sm text-gray-500">Storage:</span>
|
|
<span className="text-sm font-medium text-success-600">Available</span>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<p className="text-gray-500 text-sm">Status unavailable</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Users */}
|
|
<div className="card">
|
|
<div className="flex items-center mb-4">
|
|
<Users className="h-6 w-6 text-primary-500 mr-2" />
|
|
<h3 className="text-lg font-medium text-gray-900">Storage Users</h3>
|
|
</div>
|
|
<div className="space-y-2">
|
|
{users.length > 0 ? (
|
|
users.map((user, index) => (
|
|
<div key={index} className="flex justify-between items-center p-2 bg-gray-50 rounded">
|
|
<span className="text-sm font-medium">{user.username}</span>
|
|
<span className="text-sm text-gray-500">{user.storage_used || '0'} MB</span>
|
|
</div>
|
|
))
|
|
) : (
|
|
<p className="text-gray-500 text-sm">No storage users configured</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Files; |