From 3c2421fb8bc5f58b37da01ba080837f1ae9f2606 Mon Sep 17 00:00:00 2001 From: moh Date: Sun, 20 Sep 2026 16:39:59 +0200 Subject: [PATCH] STYLED - Convert the add-project form from a 4-tab wizard to one page - Remove the tab navigation, per-step sidebar, and Previous/Next buttons; render Basics, Localized Content, Sections and Assets stacked on a single scrollable page - Drop the now-unused wizard step machinery (currentStep state, wizardSteps, StepStateBadge, step stat card) and related imports - Keep the same fields, validation, and save gating (Basics + Localized Content required; sections/assets optional) --- components/admin/portfolio-project-form.tsx | 183 ++------------------ 1 file changed, 12 insertions(+), 171 deletions(-) diff --git a/components/admin/portfolio-project-form.tsx b/components/admin/portfolio-project-form.tsx index 0926108..dcbf243 100644 --- a/components/admin/portfolio-project-form.tsx +++ b/components/admin/portfolio-project-form.tsx @@ -8,10 +8,7 @@ import { BriefcaseBusiness, CalendarDays, CheckCircle2, - ChevronLeft, - ChevronRight, CircleAlert, - CircleDashed, Files, FolderTree, Grid2x2, @@ -43,7 +40,6 @@ import { SelectTrigger, SelectValue, } from "@/components/ui/select"; -import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Textarea } from "@/components/ui/textarea"; import { moveArrayItem } from "@/lib/array"; import { getAdminAppPath } from "@/lib/admin-routing"; @@ -52,7 +48,6 @@ import { getPortfolioWizardProgress, isPortfolioAssetReady, isPortfolioSectionReady, - type PortfolioWizardStep, } from "@/lib/portfolio-form-progress"; import type { MediaOption } from "@/lib/media"; import type { PortfolioCategoryView, PortfolioProjectView } from "@/lib/portfolio"; @@ -148,33 +143,6 @@ const viewModeOptions: Array<{ { value: "CASE_STUDY", label: "Case Study", description: "Structured challenge/solution/outcome view. Sections 1–3 become the lead panels.", icon: BriefcaseBusiness }, ]; -const wizardSteps: Array<{ - key: PortfolioWizardStep; - label: string; - description: string; -}> = [ - { - key: "basics", - label: "Basics", - description: "Category, slug, client, year, and status.", - }, - { - key: "content", - label: "Localized Content", - description: "Title, service label, and summary in all locales.", - }, - { - key: "sections", - label: "Sections (optional)", - description: "Optional — build the project story with ordered content blocks.", - }, - { - key: "assets", - label: "Assets & Media (optional)", - description: "Optional — cover and gallery assets from the media library.", - }, -]; - function createMediaFieldState(params: { kind: "IMAGE"; assetId?: string | null; @@ -379,30 +347,6 @@ function SectionHeader({ ); } -function StepStateBadge({ - complete, - active, - showValidation, -}: { - complete: boolean; - active: boolean; - showValidation: boolean; -}) { - if (complete) { - return Complete; - } - - if (showValidation) { - return Needs Attention; - } - - if (active) { - return Current; - } - - return Incomplete; -} - function SubmitButton() { const { pending } = useFormStatus(); @@ -508,27 +452,6 @@ export function PortfolioProjectForm({ const initialProjectState = createInitialState(project, availableCategories); const initialSections = createInitialSections(project); const initialAssets = createInitialAssets(project); - const initialProgress = getPortfolioWizardProgress({ - basics: initialProjectState, - content: initialProjectState, - sections: initialSections.map((section) => ({ - type: section.type, - titleAr: section.titleAr, - titleEn: section.titleEn, - titleDe: section.titleDe, - bodyAr: section.bodyAr, - bodyEn: section.bodyEn, - bodyDe: section.bodyDe, - linkUrl: section.linkUrl, - mediaAssetId: section.media.assetId, - })), - assets: initialAssets.map((asset) => ({ - mediaAssetId: asset.media.assetId, - altAr: asset.altAr, - altEn: asset.altEn, - altDe: asset.altDe, - })), - }); const [projectState, setProjectState] = useState(initialProjectState); const [coverMedia, setCoverMedia] = useState( createMediaFieldState({ @@ -540,9 +463,6 @@ export function PortfolioProjectForm({ ); const [sections, setSections] = useState(initialSections); const [assets, setAssets] = useState(initialAssets); - const [currentStep, setCurrentStep] = useState( - getFirstIncompleteWizardStep(initialProgress) ?? "basics", - ); const [showValidation, setShowValidation] = useState(false); const sectionsInputRef = useRef(null); const assetsInputRef = useRef(null); @@ -571,7 +491,6 @@ export function PortfolioProjectForm({ })), }); const firstIncompleteStep = getFirstIncompleteWizardStep(progress); - const currentStepIndex = wizardSteps.findIndex((step) => step.key === currentStep); const selectedCategory = availableCategories.find((category) => category.id === projectState.categoryId) ?? null; const projectLabel = @@ -627,7 +546,6 @@ export function PortfolioProjectForm({ event.preventDefault(); setShowValidation(true); - setCurrentStep(firstIncompleteStep); }} > @@ -657,11 +575,6 @@ export function PortfolioProjectForm({
-
-

Complete the highlighted step before saving.

+

Some required fields are still missing.

- The wizard moved to the first incomplete step so the missing fields are easier to find. + Fill the Basics and Localized Content fields below, then save.

@@ -688,53 +601,8 @@ export function PortfolioProjectForm({ - setCurrentStep(value as PortfolioWizardStep)}> -
- - - {wizardSteps.map((step, index) => { - const stepProgress = progress.find((entry) => entry.key === step.key); - const isActive = currentStep === step.key; - - return ( - -
-
-
- - {index + 1} - -
-

{step.label}

-
-
- {stepProgress?.complete ? ( - - ) : ( - - )} -
- -
- - ); - })} - - - -
- +
+
- +
- +
- +
- +
- +
- +
@@ -1310,38 +1178,11 @@ export function PortfolioProjectForm({
- -
- +
-
-
- - -
- +
{firstIncompleteStep ? (