salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor-frontend-sites pages

Browse Source
This commit is contained in:
alorig
2025-11-20 09:14:38 +05:00
parent 8e7afa76cd
commit 09232aa1c0
5 changed files with 784 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/src/pages/Sites/List.tsx
View File

@@ -5,8 +5,8 @@
*/
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { PlusIcon, EditIcon, SettingsIcon, EyeIcon, TrashIcon, FilterIcon, SearchIcon, PlugIcon, FileTextIcon, MoreVerticalIcon, Building2Icon } from 'lucide-react';
import PageMeta from '../../components/common/PageMeta';
import PageHeader from '../../components/common/PageHeader';
import { Card } from '../../components/ui/card';
import Button from '../../components/ui/button/Button';
import SelectDropdown from '../../components/form/SelectDropdown';
@@ -17,6 +17,17 @@ import Badge from '../../components/ui/badge/Badge';
import FormModal, { FormField } from '../../components/common/FormModal';
import Alert from '../../components/ui/alert/Alert';
import Switch from '../../components/form/switch/Switch';
import {
PlusIcon,
PencilIcon,
EyeIcon,
TrashBinIcon,
GridIcon,
PlugInIcon,
FileIcon,
MoreDotIcon,
PageIcon
} from '../../icons';
import {
fetchSites,
createSite,
@@ -503,17 +514,16 @@ export default function SiteList() {
return (
<div className="p-6">
<PageMeta title="Sites Management - IGNY8" />
<PageHeader
title="Sites Management"
badge={{ icon: <GridIcon />, color: 'blue' }}
/>
<div className="mb-6">
<div className="flex items-center justify-between mb-4">
<div>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
Sites Management
</h1>
<p className="text-gray-600 dark:text-gray-400 mt-1">
Manage your sites, configure industries, and select sectors. Multiple sites can be active simultaneously.
</p>
</div>
<p className="text-sm text-gray-600 dark:text-gray-400">
Manage your sites, configure industries, and select sectors. Multiple sites can be active simultaneously.
</p>
<div className="flex gap-2">
<Button onClick={() => navigate('/sites/builder')} variant="outline">
<PlusIcon className="w-4 h-4 mr-2" />
@@ -537,7 +547,9 @@ export default function SiteList() {
{/* Filters */}
<Card className="p-4 mb-6">
<div className="flex items-center gap-2 mb-4">
<FilterIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
<div className="flex-shrink-0 size-8 rounded-lg bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-md">
<GridIcon className="h-4 w-4" />
</div>
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
Filters
</h2>
@@ -560,7 +572,9 @@ export default function SiteList() {
Search
</label>
<div className="relative">
<SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
<div className="absolute left-3 top-1/2 transform -translate-y-1/2">
<GridIcon className="w-4 h-4 text-gray-400" />
</div>
<input
type="text"
value={searchTerm}
@@ -645,14 +659,10 @@ export default function SiteList() {
) : (
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-3">
{filteredSites.map((site) => (
<Card key={site.id} className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/3 hover:shadow-lg transition-shadow">
<Card key={site.id} className="rounded-xl border-2 border-slate-200 bg-white dark:border-gray-800 dark:bg-white/3 hover:border-[var(--color-primary)] hover:shadow-lg transition-all">
<div className="relative p-5 pb-9">
<div className="mb-5 inline-flex h-10 w-10 items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
<rect width="40" height="40" rx="8" fill="#3B82F6"/>
<path d="M12 16L20 10L28 16V28C28 28.5304 27.7893 29.0391 27.4142 29.4142C27.0391 29.7893 26.5304 30 26 30H14C13.4696 30 12.9609 29.7893 12.5858 29.4142C12.2107 29.0391 12 28.5304 12 28V16Z" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M16 30V20H24V30" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
<div className="mb-5 size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-lg">
<GridIcon className="h-6 w-6" />
</div>
<h3 className="mb-3 text-lg font-semibold text-gray-800 dark:text-white/90">
{site.name}
@@ -712,7 +722,7 @@ export default function SiteList() {
className="w-full justify-center text-xs"
title="View Content"
>
<FileTextIcon className="w-3 h-3 mr-1" />
<FileIcon className="w-3 h-3 mr-1" />
Content
</Button>
<Button
@@ -722,7 +732,7 @@ export default function SiteList() {
className="w-full justify-center text-xs"
title="Manage Pages"
>
<FileTextIcon className="w-3 h-3 mr-1" />
<PageIcon className="w-3 h-3 mr-1" />
Pages
</Button>
</div>
@@ -737,7 +747,7 @@ export default function SiteList() {
className="shadow-theme-xs inline-flex h-9 items-center justify-center rounded-lg border border-gray-300 text-gray-700 dark:border-gray-700 dark:text-gray-400 px-3"
title="Configure Sectors"
>
<Building2Icon className="w-4 h-4 mr-1" />
<GridIcon className="w-4 h-4 mr-1" />
<span className="text-xs">Sectors</span>
</Button>
<Button
@@ -747,7 +757,7 @@ export default function SiteList() {
className="shadow-theme-xs inline-flex h-9 items-center justify-center rounded-lg border border-gray-300 text-gray-700 dark:border-gray-700 dark:text-gray-400 px-3"
title="Site Settings"
>
<SettingsIcon className="w-4 h-4 mr-1" />
<PlugInIcon className="w-4 h-4 mr-1" />
<span className="text-xs">Settings</span>
</Button>
</div>