+
+
- )}
- />
+
+
-
- {assets.map((asset, index) => (
-
-
-
-
- {assetReady(asset) ? "Ready" : "Open"}
-
-
{`Asset ${index + 1}`}
-
-
-
-
-
-
-
-
-
setAssets((current) => current.map((item, currentIndex) => currentIndex === index ? { ...item, media, filePath: media.url } : item))}
- options={mediaOptions}
- hasInitialValue={Boolean(asset.media.assetId || asset.filePath)}
- inputName={`asset-media-${index}`}
- fileFieldName={asset.fileFieldName}
- allowClear
- clearLabel="Remove Asset"
- emptyValue={{ mode: "upload", assetId: "", url: "", label: "" }}
- />
-
- setAssets((current) => current.map((item, currentIndex) => currentIndex === index ? { ...item, [`alt${key}`]: value } : item))}
- />
-
- ))}
+
+ {firstIncompleteStep ? (
+
+ Save becomes available after all steps are complete.
+
+ ) : (
+
+ All steps are ready. You can save now.
+
+ )}
+
+
-
-
-
-
-
+
);
}
diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
index 404b848..cf742e2 100644
--- a/components/ui/tabs.tsx
+++ b/components/ui/tabs.tsx
@@ -22,16 +22,30 @@ function useTabsContext() {
}
type TabsProps = {
- defaultValue: string;
+ defaultValue?: string;
+ value?: string;
+ onValueChange?: (value: string) => void;
children: React.ReactNode;
className?: string;
};
-function Tabs({ defaultValue, children, className }: TabsProps) {
- const [value, setValue] = React.useState(defaultValue);
+function Tabs({ defaultValue, value, onValueChange, children, className }: TabsProps) {
+ const [internalValue, setInternalValue] = React.useState(defaultValue ?? "");
+ const activeValue = value ?? internalValue;
+
+ const setValue = React.useCallback(
+ (nextValue: string) => {
+ if (value === undefined) {
+ setInternalValue(nextValue);
+ }
+
+ onValueChange?.(nextValue);
+ },
+ [onValueChange, value],
+ );
return (
-
+
{children}
);
diff --git a/lib/admin-navigation.ts b/lib/admin-navigation.ts
index aae65c6..98993ba 100644
--- a/lib/admin-navigation.ts
+++ b/lib/admin-navigation.ts
@@ -138,7 +138,7 @@ export function getAdminNavigation(
active: portfolioChild === "new-project",
},
{
- label: "Add Category",
+ label: "Categories",
href: getAdminAppPath("/portfolio/categories"),
icon: Tags,
active: portfolioChild === "categories",
diff --git a/lib/portfolio-form-progress.ts b/lib/portfolio-form-progress.ts
new file mode 100644
index 0000000..349e54d
--- /dev/null
+++ b/lib/portfolio-form-progress.ts
@@ -0,0 +1,154 @@
+import type { PortfolioProjectViewMode, PortfolioSectionType } from "@prisma/client";
+
+export type PortfolioWizardStep = "basics" | "content" | "sections" | "assets";
+
+export type PortfolioWizardStepState = {
+ key: PortfolioWizardStep;
+ complete: boolean;
+ summary: string;
+};
+
+type ProjectBasicsProgressInput = {
+ categoryId: string;
+ slug: string;
+ clientName: string;
+ projectYear: string;
+ sortOrder: string;
+ viewMode: PortfolioProjectViewMode;
+};
+
+type ProjectContentProgressInput = {
+ titleAr: string;
+ titleEn: string;
+ titleDe: string;
+ serviceLabelAr: string;
+ serviceLabelEn: string;
+ serviceLabelDe: string;
+ summaryAr: string;
+ summaryEn: string;
+ summaryDe: string;
+};
+
+type ProjectSectionProgressInput = {
+ type: PortfolioSectionType;
+ titleAr: string;
+ titleEn: string;
+ titleDe: string;
+ bodyAr: string;
+ bodyEn: string;
+ bodyDe: string;
+ linkUrl: string;
+ mediaAssetId: string;
+};
+
+type ProjectAssetProgressInput = {
+ mediaAssetId: string;
+ altAr: string;
+ altEn: string;
+ altDe: string;
+};
+
+type PortfolioWizardProgressInput = {
+ basics: ProjectBasicsProgressInput;
+ content: ProjectContentProgressInput;
+ sections: ProjectSectionProgressInput[];
+ assets: ProjectAssetProgressInput[];
+};
+
+function hasText(value: string) {
+ return value.trim().length > 0;
+}
+
+function isValidSlug(value: string) {
+ return /^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(value.trim());
+}
+
+function isValidYear(value: string) {
+ const year = Number(value);
+
+ return Number.isInteger(year) && year >= 2000 && year <= 2100;
+}
+
+function isValidSortOrder(value: string) {
+ const sortOrder = Number(value);
+
+ return Number.isInteger(sortOrder) && sortOrder >= 0 && sortOrder <= 9999;
+}
+
+export function isPortfolioSectionReady(section: ProjectSectionProgressInput) {
+ const hasTitles = hasText(section.titleAr) && hasText(section.titleEn) && hasText(section.titleDe);
+
+ if (!hasTitles) {
+ return false;
+ }
+
+ if (section.type === "GALLERY") {
+ return hasText(section.mediaAssetId);
+ }
+
+ if (section.type === "LINK") {
+ return hasText(section.linkUrl);
+ }
+
+ return hasText(section.bodyAr) && hasText(section.bodyEn) && hasText(section.bodyDe);
+}
+
+export function isPortfolioAssetReady(asset: ProjectAssetProgressInput) {
+ return (
+ hasText(asset.mediaAssetId) &&
+ hasText(asset.altAr) &&
+ hasText(asset.altEn) &&
+ hasText(asset.altDe)
+ );
+}
+
+export function getPortfolioWizardProgress(
+ input: PortfolioWizardProgressInput,
+): PortfolioWizardStepState[] {
+ const completedSections = input.sections.filter(isPortfolioSectionReady).length;
+ const completedAssets = input.assets.filter(isPortfolioAssetReady).length;
+
+ return [
+ {
+ key: "basics",
+ complete:
+ hasText(input.basics.categoryId) &&
+ isValidSlug(input.basics.slug) &&
+ hasText(input.basics.clientName) &&
+ isValidYear(input.basics.projectYear) &&
+ isValidSortOrder(input.basics.sortOrder) &&
+ Boolean(input.basics.viewMode),
+ summary: "Category, slug, client, year, and order are set.",
+ },
+ {
+ key: "content",
+ complete:
+ hasText(input.content.titleAr) &&
+ hasText(input.content.titleEn) &&
+ hasText(input.content.titleDe) &&
+ hasText(input.content.serviceLabelAr) &&
+ hasText(input.content.serviceLabelEn) &&
+ hasText(input.content.serviceLabelDe) &&
+ hasText(input.content.summaryAr) &&
+ hasText(input.content.summaryEn) &&
+ hasText(input.content.summaryDe),
+ summary: "Title, service label, and summary exist in all locales.",
+ },
+ {
+ key: "sections",
+ complete: input.sections.length > 0 && completedSections === input.sections.length,
+ summary: `${completedSections}/${input.sections.length} sections ready.`,
+ },
+ {
+ key: "assets",
+ complete: input.assets.length > 0 && completedAssets === input.assets.length,
+ summary: `${completedAssets}/${input.assets.length} assets ready.`,
+ },
+ ];
+}
+
+export function getFirstIncompleteWizardStep(
+ steps: PortfolioWizardStepState[],
+): PortfolioWizardStep | null {
+ return steps.find((step) => !step.complete)?.key ?? null;
+}
diff --git a/tests/portfolio-validation.test.ts b/tests/portfolio-validation.test.ts
index 64f6d45..5350bc7 100644
--- a/tests/portfolio-validation.test.ts
+++ b/tests/portfolio-validation.test.ts
@@ -1,5 +1,11 @@
import { describe, expect, it } from "vitest";
+import {
+ getFirstIncompleteWizardStep,
+ getPortfolioWizardProgress,
+ isPortfolioAssetReady,
+ isPortfolioSectionReady,
+} from "../lib/portfolio-form-progress";
import {
assetInputSchema,
categoryInputSchema,
@@ -203,4 +209,87 @@ describe("portfolio validation", () => {
}),
).toThrow(/link/i);
});
+
+ it("calculates wizard progress and points to the first incomplete step", () => {
+ const progress = getPortfolioWizardProgress({
+ basics: {
+ categoryId: "cat_1",
+ slug: "case-study-entry",
+ clientName: "Client",
+ projectYear: "2025",
+ sortOrder: "1",
+ viewMode: "GRID",
+ },
+ content: {
+ titleAr: "عنوان",
+ titleEn: "Title",
+ titleDe: "Titel",
+ serviceLabelAr: "خدمة",
+ serviceLabelEn: "Service",
+ serviceLabelDe: "Service",
+ summaryAr: "",
+ summaryEn: "",
+ summaryDe: "",
+ },
+ sections: [
+ {
+ type: "RICH_TEXT",
+ titleAr: "العنوان",
+ titleEn: "Title",
+ titleDe: "Titel",
+ bodyAr: "النص",
+ bodyEn: "Body",
+ bodyDe: "Text",
+ linkUrl: "",
+ mediaAssetId: "",
+ },
+ ],
+ assets: [
+ {
+ mediaAssetId: "asset_1",
+ altAr: "بديل",
+ altEn: "Alt",
+ altDe: "Alt",
+ },
+ ],
+ });
+
+ expect(progress.find((step) => step.key === "basics")?.complete).toBe(true);
+ expect(progress.find((step) => step.key === "content")?.complete).toBe(false);
+ expect(getFirstIncompleteWizardStep(progress)).toBe("content");
+ });
+
+ it("marks sections and assets ready only when required fields are present", () => {
+ expect(
+ isPortfolioSectionReady({
+ type: "LINK",
+ titleAr: "رابط",
+ titleEn: "Link",
+ titleDe: "Link",
+ bodyAr: "",
+ bodyEn: "",
+ bodyDe: "",
+ linkUrl: "https://example.com",
+ mediaAssetId: "",
+ }),
+ ).toBe(true);
+
+ expect(
+ isPortfolioAssetReady({
+ mediaAssetId: "asset_1",
+ altAr: "بديل",
+ altEn: "Alt",
+ altDe: "Alt",
+ }),
+ ).toBe(true);
+
+ expect(
+ isPortfolioAssetReady({
+ mediaAssetId: "",
+ altAr: "بديل",
+ altEn: "Alt",
+ altDe: "Alt",
+ }),
+ ).toBe(false);
+ });
});