mirror of
https://github.com/9technologygroup/patchmon.net.git
synced 2025-11-10 08:55:44 +00:00
634 lines
20 KiB
JavaScript
634 lines
20 KiB
JavaScript
import { useQuery } from "@tanstack/react-query";
|
|
import {
|
|
AlertTriangle,
|
|
ArrowDown,
|
|
ArrowUp,
|
|
ArrowUpDown,
|
|
Check,
|
|
Columns,
|
|
Database,
|
|
Eye,
|
|
Globe,
|
|
GripVertical,
|
|
Lock,
|
|
RefreshCw,
|
|
Search,
|
|
Server,
|
|
Shield,
|
|
ShieldCheck,
|
|
Unlock,
|
|
Users,
|
|
X,
|
|
} from "lucide-react";
|
|
import React, { useMemo, useState } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { repositoryAPI } from "../utils/api";
|
|
|
|
const Repositories = () => {
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [filterType, setFilterType] = useState("all"); // all, secure, insecure
|
|
const [filterStatus, setFilterStatus] = useState("all"); // all, active, inactive
|
|
const [sortField, setSortField] = useState("name");
|
|
const [sortDirection, setSortDirection] = useState("asc");
|
|
const [showColumnSettings, setShowColumnSettings] = useState(false);
|
|
|
|
// Column configuration
|
|
const [columnConfig, setColumnConfig] = useState(() => {
|
|
const defaultConfig = [
|
|
{ id: "name", label: "Repository", visible: true, order: 0 },
|
|
{ id: "url", label: "URL", visible: true, order: 1 },
|
|
{ id: "distribution", label: "Distribution", visible: true, order: 2 },
|
|
{ id: "security", label: "Security", visible: true, order: 3 },
|
|
{ id: "status", label: "Status", visible: true, order: 4 },
|
|
{ id: "hostCount", label: "Hosts", visible: true, order: 5 },
|
|
{ id: "actions", label: "Actions", visible: true, order: 6 },
|
|
];
|
|
|
|
const saved = localStorage.getItem("repositories-column-config");
|
|
if (saved) {
|
|
try {
|
|
return JSON.parse(saved);
|
|
} catch (e) {
|
|
console.error("Failed to parse saved column config:", e);
|
|
}
|
|
}
|
|
return defaultConfig;
|
|
});
|
|
|
|
const updateColumnConfig = (newConfig) => {
|
|
setColumnConfig(newConfig);
|
|
localStorage.setItem(
|
|
"repositories-column-config",
|
|
JSON.stringify(newConfig),
|
|
);
|
|
};
|
|
|
|
// Fetch repositories
|
|
const {
|
|
data: repositories = [],
|
|
isLoading,
|
|
error,
|
|
refetch,
|
|
isFetching,
|
|
} = useQuery({
|
|
queryKey: ["repositories"],
|
|
queryFn: () => repositoryAPI.list().then((res) => res.data),
|
|
});
|
|
|
|
// Fetch repository statistics
|
|
const { data: stats } = useQuery({
|
|
queryKey: ["repository-stats"],
|
|
queryFn: () => repositoryAPI.getStats().then((res) => res.data),
|
|
});
|
|
|
|
// Get visible columns in order
|
|
const visibleColumns = columnConfig
|
|
.filter((col) => col.visible)
|
|
.sort((a, b) => a.order - b.order);
|
|
|
|
// Sorting functions
|
|
const handleSort = (field) => {
|
|
if (sortField === field) {
|
|
setSortDirection(sortDirection === "asc" ? "desc" : "asc");
|
|
} else {
|
|
setSortField(field);
|
|
setSortDirection("asc");
|
|
}
|
|
};
|
|
|
|
const getSortIcon = (field) => {
|
|
if (sortField !== field) return <ArrowUpDown className="h-4 w-4" />;
|
|
return sortDirection === "asc" ? (
|
|
<ArrowUp className="h-4 w-4" />
|
|
) : (
|
|
<ArrowDown className="h-4 w-4" />
|
|
);
|
|
};
|
|
|
|
// Column management functions
|
|
const toggleColumnVisibility = (columnId) => {
|
|
const newConfig = columnConfig.map((col) =>
|
|
col.id === columnId ? { ...col, visible: !col.visible } : col,
|
|
);
|
|
updateColumnConfig(newConfig);
|
|
};
|
|
|
|
const reorderColumns = (fromIndex, toIndex) => {
|
|
const newConfig = [...columnConfig];
|
|
const [movedColumn] = newConfig.splice(fromIndex, 1);
|
|
newConfig.splice(toIndex, 0, movedColumn);
|
|
|
|
// Update order values
|
|
const updatedConfig = newConfig.map((col, index) => ({
|
|
...col,
|
|
order: index,
|
|
}));
|
|
updateColumnConfig(updatedConfig);
|
|
};
|
|
|
|
const resetColumns = () => {
|
|
const defaultConfig = [
|
|
{ id: "name", label: "Repository", visible: true, order: 0 },
|
|
{ id: "url", label: "URL", visible: true, order: 1 },
|
|
{ id: "distribution", label: "Distribution", visible: true, order: 2 },
|
|
{ id: "security", label: "Security", visible: true, order: 3 },
|
|
{ id: "status", label: "Status", visible: true, order: 4 },
|
|
{ id: "hostCount", label: "Hosts", visible: true, order: 5 },
|
|
{ id: "actions", label: "Actions", visible: true, order: 6 },
|
|
];
|
|
updateColumnConfig(defaultConfig);
|
|
};
|
|
|
|
// Filter and sort repositories
|
|
const filteredAndSortedRepositories = useMemo(() => {
|
|
if (!repositories) return [];
|
|
|
|
// Filter repositories
|
|
const filtered = repositories.filter((repo) => {
|
|
const matchesSearch =
|
|
repo.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
repo.url.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
repo.distribution.toLowerCase().includes(searchTerm.toLowerCase());
|
|
|
|
// Check security based on URL if isSecure property doesn't exist
|
|
const isSecure =
|
|
repo.isSecure !== undefined
|
|
? repo.isSecure
|
|
: repo.url.startsWith("https://");
|
|
|
|
const matchesType =
|
|
filterType === "all" ||
|
|
(filterType === "secure" && isSecure) ||
|
|
(filterType === "insecure" && !isSecure);
|
|
|
|
const matchesStatus =
|
|
filterStatus === "all" ||
|
|
(filterStatus === "active" && repo.is_active === true) ||
|
|
(filterStatus === "inactive" && repo.is_active === false);
|
|
|
|
return matchesSearch && matchesType && matchesStatus;
|
|
});
|
|
|
|
// Sort repositories
|
|
const sorted = filtered.sort((a, b) => {
|
|
let aValue = a[sortField];
|
|
let bValue = b[sortField];
|
|
|
|
// Handle special cases
|
|
if (sortField === "security") {
|
|
aValue = a.isSecure ? "Secure" : "Insecure";
|
|
bValue = b.isSecure ? "Secure" : "Insecure";
|
|
} else if (sortField === "status") {
|
|
aValue = a.is_active ? "Active" : "Inactive";
|
|
bValue = b.is_active ? "Active" : "Inactive";
|
|
}
|
|
|
|
if (typeof aValue === "string") {
|
|
aValue = aValue.toLowerCase();
|
|
bValue = bValue.toLowerCase();
|
|
}
|
|
|
|
if (aValue < bValue) return sortDirection === "asc" ? -1 : 1;
|
|
if (aValue > bValue) return sortDirection === "asc" ? 1 : -1;
|
|
return 0;
|
|
});
|
|
|
|
return sorted;
|
|
}, [
|
|
repositories,
|
|
searchTerm,
|
|
filterType,
|
|
filterStatus,
|
|
sortField,
|
|
sortDirection,
|
|
]);
|
|
|
|
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>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
|
|
<div className="flex items-center">
|
|
<AlertTriangle className="h-5 w-5 text-red-400 mr-2" />
|
|
<span className="text-red-700 dark:text-red-300">
|
|
Failed to load repositories: {error.message}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="h-[calc(100vh-7rem)] flex flex-col overflow-hidden">
|
|
{/* Page Header */}
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold text-secondary-900 dark:text-white">
|
|
Repositories
|
|
</h1>
|
|
<p className="text-sm text-secondary-600 dark:text-secondary-400 mt-1">
|
|
Manage and monitor your package repositories
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => refetch()}
|
|
disabled={isFetching}
|
|
className="btn-outline flex items-center gap-2"
|
|
title="Refresh repositories data"
|
|
>
|
|
<RefreshCw
|
|
className={`h-4 w-4 ${isFetching ? "animate-spin" : ""}`}
|
|
/>
|
|
{isFetching ? "Refreshing..." : "Refresh"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Summary Stats */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-4 gap-4 mb-6 flex-shrink-0">
|
|
<div className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200">
|
|
<div className="flex items-center">
|
|
<Database className="h-5 w-5 text-primary-600 mr-2" />
|
|
<div>
|
|
<p className="text-sm text-secondary-500 dark:text-white">
|
|
Total Repositories
|
|
</p>
|
|
<p className="text-xl font-semibold text-secondary-900 dark:text-white">
|
|
{stats?.totalRepositories || 0}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200">
|
|
<div className="flex items-center">
|
|
<Server className="h-5 w-5 text-success-600 mr-2" />
|
|
<div>
|
|
<p className="text-sm text-secondary-500 dark:text-white">
|
|
Active Repositories
|
|
</p>
|
|
<p className="text-xl font-semibold text-secondary-900 dark:text-white">
|
|
{stats?.activeRepositories || 0}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200">
|
|
<div className="flex items-center">
|
|
<Shield className="h-5 w-5 text-warning-600 mr-2" />
|
|
<div>
|
|
<p className="text-sm text-secondary-500 dark:text-white">
|
|
Secure (HTTPS)
|
|
</p>
|
|
<p className="text-xl font-semibold text-secondary-900 dark:text-white">
|
|
{stats?.secureRepositories || 0}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="card p-4 cursor-pointer hover:shadow-card-hover dark:hover:shadow-card-hover-dark transition-shadow duration-200">
|
|
<div className="flex items-center">
|
|
<ShieldCheck className="h-5 w-5 text-danger-600 mr-2" />
|
|
<div>
|
|
<p className="text-sm text-secondary-500 dark:text-white">
|
|
Security Score
|
|
</p>
|
|
<p className="text-xl font-semibold text-secondary-900 dark:text-white">
|
|
{stats?.securityPercentage || 0}%
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Repositories List */}
|
|
<div className="card flex-1 flex flex-col overflow-hidden min-h-0">
|
|
<div className="px-4 py-4 sm:p-4 flex-1 flex flex-col overflow-hidden min-h-0">
|
|
<div className="flex items-center justify-end mb-4">
|
|
{/* Empty selection controls area to match packages page spacing */}
|
|
</div>
|
|
|
|
{/* Table Controls */}
|
|
<div className="mb-4 space-y-4">
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
{/* Search */}
|
|
<div className="flex-1">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-secondary-400 dark:text-secondary-500" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search repositories..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="w-full pl-10 pr-4 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white placeholder-secondary-500 dark:placeholder-secondary-400"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Security Filter */}
|
|
<div className="sm:w-48">
|
|
<select
|
|
value={filterType}
|
|
onChange={(e) => setFilterType(e.target.value)}
|
|
className="w-full px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white"
|
|
>
|
|
<option value="all">All Security Types</option>
|
|
<option value="secure">HTTPS Only</option>
|
|
<option value="insecure">HTTP Only</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Status Filter */}
|
|
<div className="sm:w-48">
|
|
<select
|
|
value={filterStatus}
|
|
onChange={(e) => setFilterStatus(e.target.value)}
|
|
className="w-full px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white"
|
|
>
|
|
<option value="all">All Statuses</option>
|
|
<option value="active">Active Only</option>
|
|
<option value="inactive">Inactive Only</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Columns Button */}
|
|
<div className="flex items-center">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowColumnSettings(true)}
|
|
className="flex items-center gap-2 px-3 py-2 text-sm text-secondary-700 dark:text-secondary-300 bg-white dark:bg-secondary-700 border border-secondary-300 dark:border-secondary-600 rounded-md hover:bg-secondary-50 dark:hover:bg-secondary-600 transition-colors"
|
|
>
|
|
<Columns className="h-4 w-4" />
|
|
Columns
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-hidden">
|
|
{filteredAndSortedRepositories.length === 0 ? (
|
|
<div className="text-center py-8">
|
|
<Database className="h-12 w-12 text-secondary-400 mx-auto mb-4" />
|
|
<p className="text-secondary-500 dark:text-secondary-300">
|
|
{repositories?.length === 0
|
|
? "No repositories found"
|
|
: "No repositories match your filters"}
|
|
</p>
|
|
{repositories?.length === 0 && (
|
|
<p className="text-sm text-secondary-400 dark:text-secondary-400 mt-2">
|
|
No repositories have been reported by your hosts yet
|
|
</p>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="h-full overflow-auto">
|
|
<table className="min-w-full divide-y divide-secondary-200 dark:divide-secondary-600">
|
|
<thead className="bg-secondary-50 dark:bg-secondary-700 sticky top-0 z-10">
|
|
<tr>
|
|
{visibleColumns.map((column) => (
|
|
<th
|
|
key={column.id}
|
|
className="px-4 py-2 text-center text-xs font-medium text-secondary-500 dark:text-secondary-300 uppercase tracking-wider"
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleSort(column.id)}
|
|
className="flex items-center gap-1 hover:text-secondary-700 dark:hover:text-secondary-200 transition-colors"
|
|
>
|
|
{column.label}
|
|
{getSortIcon(column.id)}
|
|
</button>
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white dark:bg-secondary-800 divide-y divide-secondary-200 dark:divide-secondary-600">
|
|
{filteredAndSortedRepositories.map((repo) => (
|
|
<tr
|
|
key={repo.id}
|
|
className="hover:bg-secondary-50 dark:hover:bg-secondary-700 transition-colors"
|
|
>
|
|
{visibleColumns.map((column) => (
|
|
<td
|
|
key={column.id}
|
|
className="px-4 py-2 whitespace-nowrap text-center"
|
|
>
|
|
{renderCellContent(column, repo)}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Column Settings Modal */}
|
|
{showColumnSettings && (
|
|
<ColumnSettingsModal
|
|
columnConfig={columnConfig}
|
|
onClose={() => setShowColumnSettings(false)}
|
|
onToggleVisibility={toggleColumnVisibility}
|
|
onReorder={reorderColumns}
|
|
onReset={resetColumns}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
// Render cell content based on column type
|
|
function renderCellContent(column, repo) {
|
|
switch (column.id) {
|
|
case "name":
|
|
return (
|
|
<div className="flex items-center">
|
|
<Database className="h-5 w-5 text-secondary-400 mr-3" />
|
|
<div>
|
|
<div className="text-sm font-medium text-secondary-900 dark:text-white">
|
|
{repo.name}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
case "url":
|
|
return (
|
|
<div
|
|
className="text-sm text-secondary-900 dark:text-white max-w-xs truncate"
|
|
title={repo.url}
|
|
>
|
|
{repo.url}
|
|
</div>
|
|
);
|
|
case "distribution":
|
|
return (
|
|
<div className="text-sm text-secondary-900 dark:text-white">
|
|
{repo.distribution}
|
|
</div>
|
|
);
|
|
case "security": {
|
|
const isSecure =
|
|
repo.isSecure !== undefined
|
|
? repo.isSecure
|
|
: repo.url.startsWith("https://");
|
|
return (
|
|
<div className="flex items-center justify-center">
|
|
{isSecure ? (
|
|
<div className="flex items-center gap-1 text-green-600">
|
|
<Lock className="h-4 w-4" />
|
|
<span className="text-sm">Secure</span>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-1 text-orange-600">
|
|
<Unlock className="h-4 w-4" />
|
|
<span className="text-sm">Insecure</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
case "status":
|
|
return (
|
|
<span
|
|
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
|
|
repo.is_active
|
|
? "bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300"
|
|
: "bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300"
|
|
}`}
|
|
>
|
|
{repo.is_active ? "Active" : "Inactive"}
|
|
</span>
|
|
);
|
|
case "hostCount":
|
|
return (
|
|
<div className="flex items-center justify-center gap-1 text-sm text-secondary-900 dark:text-white">
|
|
<Users className="h-4 w-4" />
|
|
<span>{repo.host_count}</span>
|
|
</div>
|
|
);
|
|
case "actions":
|
|
return (
|
|
<Link
|
|
to={`/repositories/${repo.id}`}
|
|
className="text-primary-600 hover:text-primary-900 flex items-center gap-1"
|
|
>
|
|
View
|
|
<Eye className="h-3 w-3" />
|
|
</Link>
|
|
);
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
};
|
|
|
|
// Column Settings Modal Component
|
|
const ColumnSettingsModal = ({
|
|
columnConfig,
|
|
onClose,
|
|
onToggleVisibility,
|
|
onReorder,
|
|
onReset,
|
|
}) => {
|
|
const [draggedIndex, setDraggedIndex] = useState(null);
|
|
|
|
const handleDragStart = (e, index) => {
|
|
setDraggedIndex(index);
|
|
e.dataTransfer.effectAllowed = "move";
|
|
};
|
|
|
|
const handleDragOver = (e) => {
|
|
e.preventDefault();
|
|
e.dataTransfer.dropEffect = "move";
|
|
};
|
|
|
|
const handleDrop = (e, dropIndex) => {
|
|
e.preventDefault();
|
|
if (draggedIndex !== null && draggedIndex !== dropIndex) {
|
|
onReorder(draggedIndex, dropIndex);
|
|
}
|
|
setDraggedIndex(null);
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div className="bg-white dark:bg-secondary-800 rounded-lg p-6 w-full max-w-md">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h3 className="text-lg font-medium text-secondary-900 dark:text-white">
|
|
Column Settings
|
|
</h3>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="text-secondary-400 hover:text-secondary-600 dark:text-secondary-500 dark:hover:text-secondary-300"
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
{columnConfig.map((column, index) => (
|
|
<div
|
|
key={column.id}
|
|
draggable
|
|
onDragStart={(e) => handleDragStart(e, index)}
|
|
onDragOver={handleDragOver}
|
|
onDrop={(e) => handleDrop(e, index)}
|
|
className="flex items-center justify-between p-3 bg-secondary-50 dark:bg-secondary-700 rounded-lg cursor-move hover:bg-secondary-100 dark:hover:bg-secondary-600 transition-colors"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<GripVertical className="h-4 w-4 text-secondary-400" />
|
|
<span className="text-sm font-medium text-secondary-900 dark:text-white">
|
|
{column.label}
|
|
</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => onToggleVisibility(column.id)}
|
|
className={`w-4 h-4 rounded border-2 flex items-center justify-center ${
|
|
column.visible
|
|
? "bg-primary-600 border-primary-600"
|
|
: "bg-white dark:bg-secondary-800 border-secondary-300 dark:border-secondary-600"
|
|
}`}
|
|
>
|
|
{column.visible && <Check className="h-3 w-3 text-white" />}
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex justify-between mt-6">
|
|
<button
|
|
type="button"
|
|
onClick={onReset}
|
|
className="px-4 py-2 text-sm text-secondary-600 dark:text-secondary-400 hover:text-secondary-800 dark:hover:text-secondary-200"
|
|
>
|
|
Reset to Default
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="px-4 py-2 bg-primary-600 text-white text-sm rounded-md hover:bg-primary-700 transition-colors"
|
|
>
|
|
Done
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Repositories;
|