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

Section 2 Completed

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-03 09:07:47 +00:00
parent 4d6ee21408
commit f1ba0aa531
2 changed files with 46 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/plans/FINAL-PRELAUNCH.md
View File

@@ -12,13 +12,13 @@ Update the rules files, to follow the rules in all changes for styles, for compo
2.1 ✅ - All logos and images to update for dark and light color scheme layout, and logo design final as well as favicon, and move images to right folder
2.2 - Sidebar menu rearrange for items that need rearranging, and reduce padding/spacing
2.2 ✅ - Sidebar menu rearrange for items that need rearranging, and reduce padding/spacing
2.3 - Fix the sidebar active/selected menu and hover color
2.3 ✅ - Fix the sidebar active/selected menu and hover color
2.4 ✅ - Assign manually the colors to each module, and verify and fix that in each page and progress bar consistent colors are used, across module pages, automation and dashboard
2.5 - Use colors in setup, sites and account and all its subpages
2.5 ✅ - Use colors in setup, sites and account and all its subpages
---

85
frontend/src/pages/Sites/Settings.tsx
View File

@@ -29,7 +29,7 @@ import {
import { useSiteStore } from '../../store/siteStore';
import WordPressIntegrationForm from '../../components/sites/WordPressIntegrationForm';
import { integrationApi, SiteIntegration } from '../../services/integration.api';
import { GridIcon, PlugInIcon, PaperPlaneIcon, DocsIcon, BoltIcon, FileIcon, ChevronDownIcon, CloseIcon, PlusIcon, RefreshCwIcon, FileTextIcon, ImageIcon, SaveIcon, Loader2Icon, ArrowRightIcon, SettingsIcon, GlobeIcon, LayersIcon } from '../../icons';
import { GridIcon, PlugInIcon, PaperPlaneIcon, DocsIcon, BoltIcon, FileIcon, ChevronDownIcon, CloseIcon, PlusIcon, RefreshCwIcon, FileTextIcon, ImageIcon, SaveIcon, Loader2Icon, ArrowRightIcon, SettingsIcon, GlobeIcon, LayersIcon, CheckCircleIcon } from '../../icons';
import Badge from '../../components/ui/badge/Badge';
import { Dropdown } from '../../components/ui/dropdown/Dropdown';
import { DropdownItem } from '../../components/ui/dropdown/DropdownItem';
@@ -1566,21 +1566,19 @@ export default function SiteSettings() {
</p>
<div className="space-y-4">
{/* Industry Selection - Dropdown style from wizard */}
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Select Industry
Industry *
</label>
<Select
options={industries.map((industry) => ({
value: industry.slug,
label: industry.name,
}))}
placeholder="Select an industry..."
defaultValue={selectedIndustry}
<SelectDropdown
options={industries.map(i => ({ value: i.slug, label: i.name }))}
value={selectedIndustry}
onChange={(value) => {
setSelectedIndustry(value);
setSelectedSectors([]);
}}
placeholder="Select an industry"
/>
{selectedIndustry && (
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
@@ -1589,45 +1587,48 @@ export default function SiteSettings() {
)}
</div>
{selectedIndustry && (
{/* Sector Selection - Badge style from wizard */}
{selectedIndustry && getIndustrySectors().length > 0 && (
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Select Sectors (max 5)
Sectors * <span className="text-gray-400 font-normal">(Select up to 5)</span>
</label>
<div className="space-y-2 max-h-48 overflow-y-auto border border-gray-200 rounded-lg p-3 dark:border-gray-700">
{getIndustrySectors().map((sector) => (
<div
key={sector.slug}
className="flex items-start space-x-3 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800"
>
<Checkbox
checked={selectedSectors.includes(sector.slug)}
onChange={(checked) => {
if (checked) {
if (selectedSectors.length >= 5) {
toast.error('Maximum 5 sectors allowed per site');
return;
<div className="flex flex-wrap gap-2 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg max-h-48 overflow-y-auto">
{getIndustrySectors().map((sector) => {
const isSelected = selectedSectors.includes(sector.slug);
return (
<Badge
key={sector.slug}
tone={isSelected ? 'success' : 'neutral'}
variant="soft"
className={`cursor-pointer transition-all ${isSelected ? 'ring-2 ring-success-500' : 'hover:bg-gray-200 dark:hover:bg-gray-700'}`}
>
<span
onClick={() => {
if (isSelected) {
setSelectedSectors(selectedSectors.filter(s => s !== sector.slug));
} else {
if (selectedSectors.length >= 5) {
toast.error('Maximum 5 sectors allowed per site');
return;
}
setSelectedSectors([...selectedSectors, sector.slug]);
}
setSelectedSectors([...selectedSectors, sector.slug]);
} else {
setSelectedSectors(selectedSectors.filter(s => s !== sector.slug));
}
}}
/>
<div className="flex-1">
<div className="font-medium text-sm text-gray-900 dark:text-white">
}}
className="flex items-center"
>
{isSelected && <CheckCircleIcon className="w-3 h-3 mr-1" />}
{sector.name}
</div>
<div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 line-clamp-1">
{sector.description}
</div>
</div>
</div>
))}
</span>
</Badge>
);
})}
</div>
<p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
Selected: {selectedSectors.length} / 5 sectors
</p>
{selectedSectors.length > 0 && (
<p className="text-xs text-gray-500 mt-2">
{selectedSectors.length} sector{selectedSectors.length !== 1 ? 's' : ''} selected
</p>
)}
</div>
)}