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