evyos-center-server
/
prod-wag-backend-automate-services
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated components common header layouts

This commit is contained in:
Berkay 2025-05-03 13:51:02 +03:00
parent 1ce28ec5f0
commit 71c808a5c3
33 changed files with 769 additions and 809 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
WebServices/trash/menu/NavigatePages/index.tsx → Trash/menu/NavigatePages/index.tsx
View File

0
WebServices/trash/menu/NavigatePages/mock-data.ts → Trash/menu/NavigatePages/mock-data.ts
View File

0
WebServices/trash/menu/NavigatePages/page0001.tsx → Trash/menu/NavigatePages/page0001.tsx
View File

0
WebServices/trash/menu/leftMenu.tsx → Trash/menu/leftMenu.tsx
View File

0
WebServices/trash/menu/runner.tsx → Trash/menu/runner.tsx
View File

0
WebServices/trash/menu/store.tsx → Trash/menu/store.tsx
View File

2
WebServices/client-frontend/src/components/common/CardDisplay/CardDisplay.tsx
View File

@ -5,8 +5,6 @@ import { CardSkeleton } from "./CardSkeleton";
import { getFieldValue, getGridClasses } from "./utils";
import { CardDisplayProps } from "./schema";
// Interface moved to schema.ts
export function CardDisplay<T>({
showFields,
data,

55
WebServices/client-frontend/src/components/common/FormDisplay/CreateComponent.tsx
View File

@ -64,6 +64,7 @@ export function CreateComponent<T>({
formState: { errors },
setValue,
watch,
reset,
} = useForm<Record<string, any>>({
defaultValues,
resolver: validationSchema ? zodResolver(validationSchema) : undefined,
@ -71,6 +72,33 @@ export function CreateComponent<T>({
const formValues = watch();
// Get language-specific validation schema if available
useEffect(() => {
if (formProps.schemaPath) {
const loadLanguageValidationSchema = async () => {
try {
// Dynamic import of the schema module
const schemaModule = await import(formProps.schemaPath);
// Check if language-specific schema functions are available
if (schemaModule.getCreateApplicationSchema) {
const langValidationSchema = schemaModule.getCreateApplicationSchema(lang as "en" | "tr");
// Reset the form with the current values
reset(defaultValues);
// Update the validation schema in formProps for future validations
formProps.validationSchema = langValidationSchema;
}
} catch (error) {
console.error("Error loading language-specific validation schema:", error);
}
};
loadLanguageValidationSchema();
}
}, [lang, formProps.schemaPath, reset, defaultValues]);
// Handle form submission
const onSubmit: SubmitHandler<Record<string, any>> = async (data) => {
try {
@ -112,23 +140,17 @@ export function CreateComponent<T>({
// Translate group names for display dynamically
const getGroupTitle = (groupName: string) => {
// First check if there's a translation for the exact group key
// Check if we have a translation for this group name
if (t[groupName]) {
return t[groupName];
}
// Try to format the group name in a more readable way if no translation exists
// Convert camelCase or snake_case to Title Case with spaces
// If no translation is found, just format the name as a fallback
const formattedName = groupName
// Insert space before capital letters and uppercase the first letter
.replace(/([A-Z])/g, ' $1')
// Replace underscores with spaces
.replace(/_/g, ' ')
// Capitalize first letter
.replace(/^./, (str) => str.toUpperCase())
// Capitalize each word
.replace(/\b\w/g, (c) => c.toUpperCase());
return formattedName;
};
@ -233,6 +255,14 @@ export function CreateComponent<T>({
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div className="grid grid-cols-2 gap-4 pt-6 my-4">
<Button type="button" variant="outline" onClick={onCancel} className="w-full">
{t.cancel || "Cancel"}
</Button>
<Button type="submit" className="w-full">
{t.save || "Save"}
</Button>
</div>
<Card className="w-full mb-6">
<CardHeader>
<CardTitle>{t.create || "Create"}</CardTitle>
@ -265,14 +295,7 @@ export function CreateComponent<T>({
))}
</div>
<div className="flex justify-end space-x-2 pt-6">
<Button type="button" variant="outline" onClick={onCancel}>
{t.cancel || "Cancel"}
</Button>
<Button type="submit">
{t.save || "Save"}
</Button>
</div>
</CardContent>
</Card>
</form>

45
WebServices/client-frontend/src/components/common/FormDisplay/FormDisplay.tsx
View File

@ -19,9 +19,9 @@ export function FormDisplay<T>({
}: FormDisplayProps<T>) {
const [enhancedFormProps, setEnhancedFormProps] = useState(formProps);
// Dynamically import schema definitions if provided in formProps
// Update form props when language or mode changes
useEffect(() => {
const loadSchemaDefinitions = async () => {
const updateFormProps = async () => {
try {
// Check if schemaPath is provided in formProps
if (formProps.schemaPath) {
@ -40,12 +40,14 @@ export function FormDisplay<T>({
fieldDefs = schemaModule.viewFieldDefinitions;
}
// Get the appropriate validation schema based on mode
// Get the appropriate validation schema based on mode and language
let validationSchema;
if (mode === "create" && schemaModule.CreateApplicationSchema) {
validationSchema = schemaModule.CreateApplicationSchema;
} else if (mode === "update" && schemaModule.UpdateApplicationSchema) {
validationSchema = schemaModule.UpdateApplicationSchema;
if (mode === "create" && schemaModule.getCreateApplicationSchema) {
// Use language-aware schema factory function
validationSchema = schemaModule.getCreateApplicationSchema(lang as "en" | "tr");
} else if (mode === "update" && schemaModule.getUpdateApplicationSchema) {
// Use language-aware schema factory function
validationSchema = schemaModule.getUpdateApplicationSchema(lang as "en" | "tr");
} else if (mode === "view" && schemaModule.ViewApplicationSchema) {
validationSchema = schemaModule.ViewApplicationSchema;
} else if (schemaModule.ApplicationSchema) {
@ -55,22 +57,40 @@ export function FormDisplay<T>({
// Get the grouped field definitions structure if available
const groupedFieldDefs = schemaModule.baseFieldDefinitions || {};
// Update form props with schema information
// Update form props with schema information and current language
setEnhancedFormProps({
...formProps,
fieldDefinitions: fieldDefs || {},
validationSchema,
fieldsByMode: schemaModule.fieldsByMode || {},
groupedFieldDefinitions: groupedFieldDefs,
// Add current language to force child components to recognize changes
currentLang: lang,
// Add schema path for dynamic imports in child components
schemaPath: formProps.schemaPath
});
} else {
// If no schema path, just update with current language
setEnhancedFormProps({
...formProps,
currentLang: lang
});
}
} catch (error) {
console.error("Error loading schema definitions:", error);
// Even on error, update the language
setEnhancedFormProps({
...formProps,
currentLang: lang
});
}
};
loadSchemaDefinitions();
}, [formProps, mode, lang]); // Added lang as a dependency to ensure re-fetch when language changes
updateFormProps();
}, [formProps, mode, lang]); // Lang dependency ensures re-fetch when language changes
// Debug the props received by FormDisplay
// FormDisplay component renders different form modes based on the mode prop
// Render the appropriate component based on the mode
switch (mode) {
@ -89,9 +109,12 @@ export function FormDisplay<T>({
/>
);
case "update":
// Create a stable key for the component to ensure proper re-rendering
const updateKey = `update-${lang}-${(initialData as any)?.uu_id || 'new'}`;
return initialData ? (
<UpdateComponent<T>
key={`update-${lang}`} // Add key with lang to force re-render on language change
key={updateKey} // Add key with lang and item ID to force re-render
initialData={initialData}
refetch={refetch}
setMode={setMode}

104
WebServices/client-frontend/src/components/common/FormDisplay/UpdateComponent.tsx
View File

@ -1,5 +1,5 @@
"use client";
import React, { useState, useEffect } from "react";
import React, { useState, useEffect, useMemo } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { UpdateComponentProps, FieldDefinition } from "./types";
@ -26,29 +26,48 @@ export function UpdateComponent<T>({
}: UpdateComponentProps<T>) {
const t = translations[lang as keyof typeof translations] || {};
// Get field definitions from formProps if available
const fieldDefinitions = formProps.fieldDefinitions || {};
const validationSchema = formProps.validationSchema;
// Ensure field definitions are processed only once
const processedFieldDefinitions = useMemo(() => {
const processed = { ...fieldDefinitions };
// Make all fields editable except system fields
Object.entries(processed).forEach(([fieldName, definition]) => {
if (fieldName !== 'uu_id' && fieldName !== 'created_at' && fieldName !== 'updated_at') {
(processed[fieldName] as FieldDefinition).readOnly = false;
}
});
return processed;
}, [fieldDefinitions]);
const [groupedFields, setGroupedFields] = useState<Record<string, FieldDefinition[]>>({});
useEffect(() => {
if (Object.keys(fieldDefinitions).length > 0) {
if (Object.keys(processedFieldDefinitions).length > 0) {
const groups: Record<string, FieldDefinition[]> = {};
Object.entries(fieldDefinitions).forEach(([fieldName, definition]) => {
// Group the processed field definitions
Object.entries(processedFieldDefinitions).forEach(([fieldName, definition]) => {
// Convert to FieldDefinition type
const def = definition as FieldDefinition;
// Add the field name to the definition
const fieldDef = { ...def, name: fieldName };
// Add to the appropriate group
if (!groups[def.group]) {
groups[def.group] = [];
}
groups[def.group].push({ ...def, name: fieldName });
groups[def.group].push(fieldDef);
});
setGroupedFields(groups);
}
}, [fieldDefinitions]);
}, [processedFieldDefinitions]);
const defaultValues: Record<string, any> = {};
Object.entries(fieldDefinitions).forEach(([key, def]) => {
Object.entries(processedFieldDefinitions).forEach(([key, def]) => {
const fieldDef = def as FieldDefinition;
defaultValues[key] = fieldDef.defaultValue !== undefined ? fieldDef.defaultValue : "";
});
@ -57,6 +76,9 @@ export function UpdateComponent<T>({
Object.assign(defaultValues, initialData as Record<string, any>);
}
// Track the current language to detect changes
const [currentLang, setCurrentLang] = useState(lang);
const {
register,
handleSubmit,
@ -83,6 +105,53 @@ export function UpdateComponent<T>({
}
}, [initialData, reset]);
// Detect language changes and update validation schema
useEffect(() => {
// If language has changed, update the form
if (currentLang !== lang || formProps.currentLang !== lang) {
const updateValidationForLanguage = async () => {
try {
// If we have a schema path, dynamically load the schema for the current language
if (formProps.schemaPath) {
// Dynamic import of the schema module
const schemaModule = await import(formProps.schemaPath);
// Check if language-specific schema functions are available
if (schemaModule.getUpdateApplicationSchema) {
// Get the schema for the current language
const langValidationSchema = schemaModule.getUpdateApplicationSchema(lang as "en" | "tr");
// Save current form values
const formValues = watch();
// Reset the form with current values but clear errors
reset(formValues, {
keepDirty: true,
keepValues: true,
keepErrors: false
});
// Manually trigger validation after reset
setTimeout(() => {
// Trigger validation for all fields to show updated error messages
Object.keys(formValues).forEach(fieldName => {
trigger(fieldName);
});
}, 0);
// Update our tracked language
setCurrentLang(lang);
}
}
} catch (error) {
console.error("Error updating validation schema for language:", error);
}
};
updateValidationForLanguage();
}
}, [lang, formProps.currentLang, currentLang, formProps.schemaPath, reset, watch, trigger]);
const formValues = watch();
// Handle form submission
@ -149,10 +218,12 @@ export function UpdateComponent<T>({
// Translate group names for display dynamically
const getGroupTitle = (groupName: string) => {
// Check if we have a translation for this group name
if (t[groupName]) {
return t[groupName];
}
// If no translation is found, just format the name as a fallback
const formattedName = groupName
.replace(/([A-Z])/g, ' $1')
.replace(/_/g, ' ')
@ -289,6 +360,7 @@ export function UpdateComponent<T>({
<CardDescription>{t.updateDescription || "Update existing item"}</CardDescription>
</CardHeader>
<CardContent>
{/* Display validation errors summary if any */}
{Object.keys(errors).length > 0 && (
<Alert variant="destructive" className="mb-4">
@ -306,6 +378,15 @@ export function UpdateComponent<T>({
</Alert>
)}
<div className="grid grid-cols-2 gap-4 pt-6 my-4">
<Button type="button" variant="outline" onClick={onCancel} className="w-full">
{t.cancel || "Cancel"}
</Button>
<Button type="submit" className="w-full">
{t.save || "Save"}
</Button>
</div>
{/* Render fields grouped by their group property */}
<div className="space-y-6">
{Object.entries(groupedFields).map(([groupName, fields]) => (
@ -322,14 +403,7 @@ export function UpdateComponent<T>({
))}
</div>
<div className="flex justify-end space-x-2 pt-6">
<Button type="button" variant="outline" onClick={onCancel}>
{t.cancel || "Cancel"}
</Button>
<Button type="submit">
{t.save || "Save"}
</Button>
</div>
</CardContent>
</Card>
</form>

10
WebServices/client-frontend/src/components/common/HeaderSelections/LanguageSelectionComponent.tsx
View File

@ -1,14 +1,6 @@
"use client";
import React from "react";
export type Language = "en" | "tr";
interface LanguageSelectionComponentProps {
lang: Language;
setLang: (lang: Language) => void;
translations?: Record<string, any>;
className?: string;
}
import { Language, LanguageSelectionComponentProps } from "@/components/common/schemas";
export const LanguageSelectionComponent: React.FC<LanguageSelectionComponentProps> = ({
lang,

37
WebServices/client-frontend/src/components/common/hooks/useDashboardPage.ts
View File

@ -1,38 +1,16 @@
import { retrievePageByUrl } from "@/eventRouters/pageRetriever";
import { PageProps } from "@/validations/translations/translation";
import React, { ReactElement } from "react";
import React from "react";
export interface DashboardPageParams {
/**
* The active page path, e.g., "/application", "/dashboard"
*/
pageUrl: string;
/**
* The search parameters from Next.js
*/
searchParams: Promise<{ [key: string]: string | undefined }>;
}
export interface DashboardPageResult {
/**
* The active page path
*/
activePage: string;
/**
* The resolved search parameters
*/
searchParamsInstance: { [key: string]: string | undefined };
/**
* The current language, either from search params or default
*/
lang: "en" | "tr";
/**
* The page component to render
*/
PageComponent: React.FC<PageProps>;
}
@ -50,38 +28,29 @@ export async function useDashboardPage({
}: DashboardPageParams): Promise<DashboardPageResult> {
let searchParamsInstance: { [key: string]: string | undefined } = {};
const defaultLang = "en";
// Validate pageUrl
if (!pageUrl || typeof pageUrl !== "string") {
throw new Error(`Invalid page URL: ${pageUrl}`);
}
// Resolve search params
try {
searchParamsInstance = await searchParams;
} catch (err) {
console.error("Error resolving search parameters:", err);
// Still throw the error to be caught by Next.js error boundary
throw err;
}
// Determine language
const lang = (searchParamsInstance?.lang as "en" | "tr") || defaultLang;
// Validate language
if (lang !== "en" && lang !== "tr") {
console.warn(
`Invalid language "${lang}" specified, falling back to "${defaultLang}"`
);
}
// Get page component
const PageComponent = retrievePageByUrl(pageUrl);
// Check if page component exists
const PageComponent = retrievePageByUrl(pageUrl, lang);
if (!PageComponent) {
throw new Error(`Page component not found for URL: ${pageUrl}`);
}
return {
activePage: pageUrl,
searchParamsInstance,

10
WebServices/client-frontend/src/components/common/schemas.ts
View File

@ -1,4 +1,3 @@
// Carried schemas from any request and response
// Common request parameters interface
@ -35,3 +34,12 @@ export interface PagePagination {
orderType: string[];
query: Record<string, any>;
}
export type Language = "en" | "tr";
export interface LanguageSelectionComponentProps {
lang: Language;
setLang: (lang: Language) => void;
translations?: Record<string, any>;
className?: string;
}

17
WebServices/client-frontend/src/components/header/Header.tsx
View File

@ -12,9 +12,11 @@ import {
import { searchPlaceholder, menuLanguage } from "@/app/commons/pageDefaults";
import { logoutActiveSession } from "@/apicalls/login/login";
import { useRouter } from "next/navigation";
import { LanguageSelectionComponent } from "../common/HeaderSelections/LanguageSelectionComponent";
interface HeaderProps {
lang: "en" | "tr";
setLang: (lang: "en" | "tr") => void;
}
// Language dictionary for the dropdown menu
@ -96,7 +98,7 @@ const mockMessages = [
},
];
const Header: React.FC<HeaderProps> = ({ lang }) => {
const Header: React.FC<HeaderProps> = ({ lang, setLang }) => {
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const [isNotificationsOpen, setIsNotificationsOpen] = useState(false);
const [isMessagesOpen, setIsMessagesOpen] = useState(false);
@ -185,7 +187,8 @@ const Header: React.FC<HeaderProps> = ({ lang }) => {
};
return (
<header className="sticky top-0 bg-white shadow-md z-10 p-4 flex justify-between items-center">
<div className="w-full">
<header className="sticky top-0 bg-white shadow-md z-10 p-4 flex justify-between items-center w-full">
<h1 className="text-2xl font-semibold">{menuLanguage[lang]}</h1>
<div className="flex items-center space-x-4">
<input
@ -354,6 +357,15 @@ const Header: React.FC<HeaderProps> = ({ lang }) => {
)}
</div>
{/* Language selection */}
<div className="mr-4">
<LanguageSelectionComponent
lang={lang}
setLang={setLang}
className="border px-3 py-2 rounded-lg"
/>
</div>
{/* Profile dropdown */}
<div className="relative" ref={dropdownRef}>
<div
@ -399,6 +411,7 @@ const Header: React.FC<HeaderProps> = ({ lang }) => {
</div>
</div>
</header>
</div>
);
};

37
WebServices/client-frontend/src/components/layouts/DashboardLayout.tsx
View File

@ -1,41 +1,44 @@
"use client";
import React, { ReactNode } from "react";
import React, { useState, useEffect, ReactNode } from "react";
import Header from "@/components/header/Header";
import ClientMenu from "@/components/menu/menu";
import { DashboardLayoutProps } from "./schema";
import { Language } from "@/components/common/schemas";
interface DashboardLayoutProps {
// Page Content component to wrap the children
interface PageContentProps {
children: ReactNode;
lang: "en" | "tr";
activePage: string;
siteUrls: string[];
lang: Language;
}
/**
* A reusable dashboard layout component that provides consistent structure
* for all dashboard pages with sidebar, header, and content area.
*/
const PageContent: React.FC<PageContentProps> = ({ children, lang }) => {
return (
<div className="container mx-auto p-4">
{React.cloneElement(children as React.ReactElement<any>, { lang })}
</div>
);
};
export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
children,
lang,
activePage,
siteUrls,
}) => {
const [language, setLanguage] = useState<Language>(lang as Language);
return (
<div className="min-h-screen min-w-screen flex h-screen w-screen">
{/* Sidebar */}
<aside className="w-1/4 border-r p-4 overflow-y-auto">
<ClientMenu siteUrls={siteUrls} lang={lang} activePage={activePage} />
<ClientMenu lang={language} activePage={activePage} />
</aside>
{/* Main Content Area */}
<div className="flex flex-col w-3/4 overflow-y-auto">
{/* Header Component */}
<Header lang={lang} />
{/* Header Component - Either custom or default */}
<Header lang={language} setLang={setLanguage} />
{/* Page Content */}
<div className="container mx-auto p-4">
{children}
</div>
<PageContent lang={language}>{children}</PageContent>
</div>
</div>
);

2
WebServices/client-frontend/src/components/layouts/PageTemplate.tsx
View File

@ -86,7 +86,7 @@ export const PageTemplate: React.FC<PageTemplateProps> = ({
<LanguageSelectionComponent
lang={lang as Language}
translations={translations}
setLang={setLang || (() => { })}
setLang={setLang || (() => {})}
/>
{/* Additional header actions */}

7
WebServices/client-frontend/src/components/layouts/schema.ts Normal file
View File

@ -0,0 +1,7 @@
import { ReactNode } from "react";
export interface DashboardLayoutProps {
children: ReactNode;
lang: "en" | "tr";
activePage: string;
}

7
WebServices/management-frontend/src/app/(DashboardLayout)/application/page.tsx
View File

@ -8,7 +8,12 @@ async function DashboardPage({
}: {
searchParams: Promise<{ [key: string]: string | undefined }>;
}) {
const { activePage, searchParamsInstance, lang, PageComponent } = await useDashboardPage({
const {
activePage,
searchParamsInstance,
lang,
PageComponent,
} = await useDashboardPage({
pageUrl: "/application",
searchParams,
});

2
WebServices/management-frontend/src/components/common/CardDisplay/CardDisplay.tsx
View File

@ -5,8 +5,6 @@ import { CardSkeleton } from "./CardSkeleton";
import { getFieldValue, getGridClasses } from "./utils";
import { CardDisplayProps } from "./schema";
// Interface moved to schema.ts
export function CardDisplay<T>({
showFields,
data,

10
WebServices/management-frontend/src/components/common/HeaderSelections/LanguageSelectionComponent.tsx
View File

@ -1,14 +1,6 @@
"use client";
import React from "react";
export type Language = "en" | "tr";
interface LanguageSelectionComponentProps {
lang: Language;
setLang: (lang: Language) => void;
translations?: Record<string, any>;
className?: string;
}
import { Language, LanguageSelectionComponentProps } from "@/components/common/schemas";
export const LanguageSelectionComponent: React.FC<LanguageSelectionComponentProps> = ({
lang,

37
WebServices/management-frontend/src/components/common/hooks/useDashboardPage.ts
View File

@ -1,38 +1,16 @@
import { retrievePageByUrl } from "@/eventRouters/pageRetriever";
import { PageProps } from "@/validations/translations/translation";
import React, { ReactElement } from "react";
import React from "react";
export interface DashboardPageParams {
/**
* The active page path, e.g., "/application", "/dashboard"
*/
pageUrl: string;
/**
* The search parameters from Next.js
*/
searchParams: Promise<{ [key: string]: string | undefined }>;
}
export interface DashboardPageResult {
/**
* The active page path
*/
activePage: string;
/**
* The resolved search parameters
*/
searchParamsInstance: { [key: string]: string | undefined };
/**
* The current language, either from search params or default
*/
lang: "en" | "tr";
/**
* The page component to render
*/
PageComponent: React.FC<PageProps>;
}
@ -50,38 +28,29 @@ export async function useDashboardPage({
}: DashboardPageParams): Promise<DashboardPageResult> {
let searchParamsInstance: { [key: string]: string | undefined } = {};
const defaultLang = "en";
// Validate pageUrl
if (!pageUrl || typeof pageUrl !== "string") {
throw new Error(`Invalid page URL: ${pageUrl}`);
}
// Resolve search params
try {
searchParamsInstance = await searchParams;
} catch (err) {
console.error("Error resolving search parameters:", err);
// Still throw the error to be caught by Next.js error boundary
throw err;
}
// Determine language
const lang = (searchParamsInstance?.lang as "en" | "tr") || defaultLang;
// Validate language
if (lang !== "en" && lang !== "tr") {
console.warn(
`Invalid language "${lang}" specified, falling back to "${defaultLang}"`
);
}
// Get page component
const PageComponent = retrievePageByUrl(pageUrl);
// Check if page component exists
const PageComponent = retrievePageByUrl(pageUrl, lang);
if (!PageComponent) {
throw new Error(`Page component not found for URL: ${pageUrl}`);
}
return {
activePage: pageUrl,
searchParamsInstance,

10
WebServices/management-frontend/src/components/common/schemas.ts
View File

@ -1,4 +1,3 @@
// Carried schemas from any request and response
// Common request parameters interface
@ -35,3 +34,12 @@ export interface PagePagination {
orderType: string[];
query: Record<string, any>;
}
export type Language = "en" | "tr";
export interface LanguageSelectionComponentProps {
lang: Language;
setLang: (lang: Language) => void;
translations?: Record<string, any>;
className?: string;
}

23
WebServices/management-frontend/src/components/header/Header.tsx
View File

@ -12,9 +12,11 @@ import {
import { searchPlaceholder, menuLanguage } from "@/app/commons/pageDefaults";
import { logoutActiveSession } from "@/apicalls/login/login";
import { useRouter } from "next/navigation";
import { LanguageSelectionComponent } from "../common/HeaderSelections/LanguageSelectionComponent";
interface HeaderProps {
lang: "en" | "tr";
setLang: (lang: "en" | "tr") => void;
}
// Language dictionary for the dropdown menu
@ -96,7 +98,7 @@ const mockMessages = [
},
];
const Header: React.FC<HeaderProps> = ({ lang }) => {
const Header: React.FC<HeaderProps> = ({ lang, setLang }) => {
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const [isNotificationsOpen, setIsNotificationsOpen] = useState(false);
const [isMessagesOpen, setIsMessagesOpen] = useState(false);
@ -185,7 +187,8 @@ const Header: React.FC<HeaderProps> = ({ lang }) => {
};
return (
<header className="sticky top-0 bg-white shadow-md z-10 p-4 flex justify-between items-center">
<div className="w-full">
<header className="sticky top-0 bg-white shadow-md z-10 p-4 flex justify-between items-center w-full">
<h1 className="text-2xl font-semibold">{menuLanguage[lang]}</h1>
<div className="flex items-center space-x-4">
<input
@ -236,8 +239,7 @@ const Header: React.FC<HeaderProps> = ({ lang }) => {
notifications.map((notification) => (
<div
key={notification.id}
className={`px-4 py-2 border-b last:border-b-0 ${
!notification.read ? "bg-blue-50" : ""
className={`px-4 py-2 border-b last:border-b-0 ${!notification.read ? "bg-blue-50" : ""
}`}
>
<div className="flex justify-between">
@ -315,8 +317,7 @@ const Header: React.FC<HeaderProps> = ({ lang }) => {
messages.map((message) => (
<div
key={message.id}
className={`px-4 py-2 border-b last:border-b-0 ${
!message.read ? "bg-blue-50" : ""
className={`px-4 py-2 border-b last:border-b-0 ${!message.read ? "bg-blue-50" : ""
}`}
>
<div className="flex items-start">
@ -356,6 +357,15 @@ const Header: React.FC<HeaderProps> = ({ lang }) => {
)}
</div>
{/* Language selection */}
<div className="mr-4">
<LanguageSelectionComponent
lang={lang}
setLang={setLang}
className="border px-3 py-2 rounded-lg"
/>
</div>
{/* Profile dropdown */}
<div className="relative" ref={dropdownRef}>
<div
@ -401,6 +411,7 @@ const Header: React.FC<HeaderProps> = ({ lang }) => {
</div>
</div>
</header>
</div>
);
};

65
WebServices/management-frontend/src/components/layouts/DashboardLayout.tsx
View File

@ -1,69 +1,44 @@
"use client";
import React, { ReactNode } from "react";
import React, { useState, useEffect, ReactNode } from "react";
import Header from "@/components/header/Header";
import ClientMenu from "@/components/menu/menu";
import { DashboardLayoutProps } from "./schema";
import { Language } from "@/components/common/schemas";
interface DashboardLayoutProps {
// Page Content component to wrap the children
interface PageContentProps {
children: ReactNode;
lang: "en" | "tr";
activePage: string;
// Optional props for client-frontend application
sidebarContent?: ReactNode;
customHeader?: ReactNode;
pageInfo?: Record<string, string>;
searchPlaceholder?: Record<string, string>;
lang: Language;
}
/**
* A reusable dashboard layout component that provides consistent structure
* for all dashboard pages with sidebar, header, and content area.
*/
const PageContent: React.FC<PageContentProps> = ({ children, lang }) => {
return (
<div className="container mx-auto p-4">
{React.cloneElement(children as React.ReactElement<any>, { lang })}
</div>
);
};
export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
children,
lang,
activePage,
sidebarContent,
customHeader,
pageInfo,
searchPlaceholder,
}) => {
const [language, setLanguage] = useState<Language>(lang as Language);
return (
<div className="min-h-screen min-w-screen flex h-screen w-screen overflow-y-auto">
<div className="min-h-screen min-w-screen flex h-screen w-screen">
{/* Sidebar */}
<aside className="w-1/4 border-r p-4 overflow-y-auto">
{sidebarContent ? (
sidebarContent
) : (
<ClientMenu lang={lang} activePage={activePage} />
)}
<ClientMenu lang={language} activePage={activePage} />
</aside>
{/* Main Content Area */}
<div className="flex flex-col w-3/4 overflow-y-auto">
{/* Header Component - Either custom or default */}
{customHeader ? (
customHeader
) : pageInfo && searchPlaceholder ? (
<header className="sticky top-0 bg-white shadow-md z-10 p-4 flex justify-between items-center">
<h1 className="text-2xl font-semibold">{pageInfo[lang]}</h1>
<div className="flex items-center space-x-4">
<input
type="text"
placeholder={searchPlaceholder[lang]}
className="border px-3 py-2 rounded-lg"
/>
<div className="w-10 h-10 bg-gray-300 rounded-full"></div>
</div>
</header>
) : (
<Header lang={lang} />
)}
<Header lang={language} setLang={setLanguage} />
{/* Page Content */}
<div className={`${customHeader ? 'p-4 overflow-y-auto' : 'container mx-auto p-4'}`}>
{children}
</div>
<PageContent lang={language}>{children}</PageContent>
</div>
</div>
);

7
WebServices/management-frontend/src/components/layouts/schema.ts Normal file
View File

@ -0,0 +1,7 @@
import { ReactNode } from "react";
export interface DashboardLayoutProps {
children: ReactNode;
lang: "en" | "tr";
activePage: string;
}

45
WebServices/management-frontend/src/components/menu/NavigationMenu.tsx
View File

@ -1,53 +1,32 @@
"use client";
import React from "react";
import Link from "next/link";
const NavigationLanguage = {
en: {
"/dashboard": "Dashboard",
"/append/event": "Event Append",
"/append/service": "Service Append",
"/application": "Application",
"/employee": "Employee",
"/ocuppant": "Ocuppant",
},
tr: {
"/dashboard": "Kontrol Paneli",
"/append/event": "Event Append",
"/append/service": "Service Append",
"/application": "Application",
"/employee": "Employee",
"/ocuppant": "Ocuppant",
},
};
import React, { JSX } from "react";
import { getNavigationMenu } from "./type";
function NavigationMenu({
lang,
activePage,
}: {
lang: string;
lang: "en" | "tr";
activePage: string;
}) {
// Get the navigation items based on the selected language
const navItems =
NavigationLanguage[lang as keyof typeof NavigationLanguage] ||
NavigationLanguage.en;
const navItems = getNavigationMenu(lang);
function createLinkComponent(url: string, title: string): JSX.Element {
return (
<nav className="flex flex-col space-y-2 p-4">
{Object.entries(navItems).map(([url, title]) => (
<Link
key={url}
href={url}
className={`px-4 py-2 rounded-md transition-colors duration-200 ${
url === activePage
? "bg-emerald-500 text-white"
: "bg-white hover:bg-gray-100"
}`}
className={`px-4 py-2 rounded-md transition-colors duration-200 ${url === activePage ? "bg-emerald-500 text-white" : "bg-white hover:bg-gray-100"}`}
>
{title}
</Link>
))}
);
}
return (
<nav className="flex flex-col space-y-2 p-4">
{Object.entries(navItems).map(([url, title]) => createLinkComponent(url, title))}
</nav>
);
}

109
WebServices/management-frontend/src/components/menu/handler.tsx
View File

@ -1,109 +0,0 @@
"use client";
import Menu from "./store";
// Define TypeScript interfaces for menu structure
export interface LanguageTranslation {
tr: string;
en: string;
}
export interface MenuThirdLevel {
name: string;
lg: LanguageTranslation;
siteUrl: string;
}
export interface MenuSecondLevel {
name: string;
lg: LanguageTranslation;
subList: MenuThirdLevel[];
}
export interface MenuFirstLevel {
name: string;
lg: LanguageTranslation;
subList: MenuSecondLevel[];
}
// Define interfaces for the filtered menu structure
export interface FilteredMenuThirdLevel {
name: string;
lg: LanguageTranslation;
siteUrl: string;
}
export interface FilteredMenuSecondLevel {
name: string;
lg: LanguageTranslation;
subList: FilteredMenuThirdLevel[];
}
export interface FilteredMenuFirstLevel {
name: string;
lg: LanguageTranslation;
subList: FilteredMenuSecondLevel[];
}
/**
* Filters the menu structure based on intersections with provided URLs
* @param {string[]} siteUrls - Array of site URLs to check for intersection
* @returns {Array} - Filtered menu structure with only matching items
*/
export function transformMenu(siteUrls: string[]) {
// Process the menu structure
const filteredMenu: FilteredMenuFirstLevel[] = Menu.reduce(
(acc: FilteredMenuFirstLevel[], firstLevel: MenuFirstLevel) => {
// Create a new first level item with empty subList
const newFirstLevel: FilteredMenuFirstLevel = {
name: firstLevel.name,
lg: { ...firstLevel.lg },
subList: [],
};
// Process second level items
firstLevel.subList.forEach((secondLevel: MenuSecondLevel) => {
// Create a new second level item with empty subList
const newSecondLevel: FilteredMenuSecondLevel = {
name: secondLevel.name,
lg: { ...secondLevel.lg },
subList: [],
};
// Process third level items
secondLevel.subList.forEach((thirdLevel: MenuThirdLevel) => {
// Check if the third level's siteUrl matches exactly
if (
thirdLevel.siteUrl &&
siteUrls.some((url) => url === thirdLevel.siteUrl)
) {
// Create a modified third level item
const newThirdLevel: FilteredMenuThirdLevel = {
name: thirdLevel.name,
lg: { ...thirdLevel.lg },
siteUrl: thirdLevel.siteUrl,
};
// Add the modified third level to the second level's subList
newSecondLevel.subList.push(newThirdLevel);
}
});
// Only add the second level to the first level if it has any matching third level items
if (newSecondLevel.subList.length > 0) {
newFirstLevel.subList.push(newSecondLevel);
}
});
// Only add the first level to the result if it has any matching second level items
if (newFirstLevel.subList.length > 0) {
acc.push(newFirstLevel);
}
return acc;
},
[]
);
return filteredMenu;
}

50
WebServices/management-frontend/src/components/menu/menu.tsx
View File

@ -1,6 +1,6 @@
"use client";
import React, { useEffect, useState, Suspense } from "react";
import React, { useEffect, useState, Suspense, JSX } from "react";
import { retrieveUserSelection } from "@/apicalls/cookies/token";
import EmployeeProfileSection from "./EmployeeProfileSection";
import OccupantProfileSection from "./OccupantProfileSection";
@ -23,18 +23,13 @@ const dashboardLanguage = {
},
};
const ClientMenu: React.FC<ClientMenuProps> = ({ lang = "en", activePage }) => {
const t =
dashboardLanguage[lang as keyof typeof dashboardLanguage] ||
dashboardLanguage.en;
const ClientMenu: React.FC<ClientMenuProps> = ({ lang, activePage }) => {
const t = dashboardLanguage[lang as keyof typeof dashboardLanguage] || dashboardLanguage.en;
// State for loading indicator, user type, and user selection data
const [loading, setLoading] = useState<boolean>(true);
const [userType, setUserType] = useState<string | null>(null);
const [userSelectionData, setUserSelectionData] =
useState<UserSelection | null>(null);
const [userSelectionData, setUserSelectionData] = useState<UserSelection | null>(null);
// Fetch user selection data
useEffect(() => {
setLoading(true);
@ -52,6 +47,21 @@ const ClientMenu: React.FC<ClientMenuProps> = ({ lang = "en", activePage }) => {
})
.finally(() => setLoading(false));
}, []);
function createProfileComponent(): JSX.Element {
return (
loading ? (
<ProfileLoadingState loadingText={t.loading} />
) : userType === "employee" && userSelectionData ? (
<EmployeeProfileSection userSelectionData={userSelectionData} lang={lang as "en" | "tr"} />
) : userType === "occupant" && userSelectionData ? (
<OccupantProfileSection userSelectionData={userSelectionData} lang={lang as "en" | "tr"} />
) : (
<div className="text-center text-gray-500">{t.loading}</div>
)
)
}
return (
<div className="w-full bg-white shadow-sm rounded-lg overflow-hidden">
<div className="p-4 border-b border-gray-200">
@ -60,32 +70,14 @@ const ClientMenu: React.FC<ClientMenuProps> = ({ lang = "en", activePage }) => {
</h2>
</div>
{/* Profile Section with Suspense */}
<div className="p-4 border-b border-gray-200 bg-gray-50">
<Suspense
fallback={<div className="text-center py-4">{t.loading}</div>}
>
{loading ? (
<ProfileLoadingState loadingText={t.loading} />
) : userType === "employee" && userSelectionData ? (
<EmployeeProfileSection
userSelectionData={userSelectionData}
lang={lang as "en" | "tr"}
/>
) : userType === "occupant" && userSelectionData ? (
<OccupantProfileSection
userSelectionData={userSelectionData}
lang={lang as "en" | "tr"}
/>
) : (
<div className="text-center text-gray-500">{t.loading}</div>
)}
{createProfileComponent()}
</Suspense>
</div>
{/* Navigation Menu
<NavigationMenu transformedMenu={transformedMenu} lang={lang} /> */}
<NavigationMenu activePage={activePage} lang={lang} />
<NavigationMenu activePage={activePage} lang={lang as "en" | "tr"} />
</div>
);
};

21
WebServices/management-frontend/src/components/menu/type.ts Normal file
View File

@ -0,0 +1,21 @@
export const NavigationLanguage = {
en: {
"/dashboard": "Dashboard",
"/append/event": "Event Board",
"/append/service": "Service Board",
"/application": "Application Board",
},
tr: {
"/dashboard": "Kontrol Paneli",
"/append/event": "Event Paneli",
"/append/service": "Servis Paneli",
"/application": "Uygulama Paneli",
},
};
export function getNavigationMenu(lang: string) {
return (
NavigationLanguage[lang as keyof typeof NavigationLanguage] ||
NavigationLanguage.en
);
}

25
WebServices/management-frontend/src/eventRouters/application/page.tsx
View File

@ -12,17 +12,15 @@ import { CardDisplay } from "@/components/common/CardDisplay/CardDisplay";
import { FormMode } from "@/components/common/FormDisplay/types";
import { FormDisplay } from "@/components/common/FormDisplay/FormDisplay";
import { GridSelectionComponent, GridSize } from "@/components/common/HeaderSelections/GridSelectionComponent";
import { LanguageSelectionComponent, Language } from "@/components/common/HeaderSelections/LanguageSelectionComponent";
import { LanguageSelectionComponent } from "@/components/common/HeaderSelections/LanguageSelectionComponent";
import { getCreateApplicationSchema, getUpdateApplicationSchema } from "./schema";
import { translations } from "./language";
import { PageProps } from "@/validations/translations/translation";
import { useApiData } from "@/components/common";
import { Language } from "@/components/common/schemas";
const ApplicationPage: React.FC<PageProps> = ({ lang: initialLang = "en" }) => {
// Add local state for language to ensure it persists when changed
const [lang, setLang] = useState<Language>(initialLang as Language);
const ApplicationPage: React.FC<PageProps> = ({ lang }: { lang: Language }) => {
// Use the API data hook directly
const {
data,
pagination,
@ -45,8 +43,8 @@ const ApplicationPage: React.FC<PageProps> = ({ lang: initialLang = "en" }) => {
);
const [validationSchema, setValidationSchema] = useState(() =>
mode === 'create' ? getCreateApplicationSchema(lang as "en" | "tr") :
mode === 'update' ? getUpdateApplicationSchema(lang as "en" | "tr") :
mode === 'create' ? getCreateApplicationSchema(lang) :
mode === 'update' ? getUpdateApplicationSchema(lang) :
schema.ViewApplicationSchema
);
@ -63,8 +61,8 @@ const ApplicationPage: React.FC<PageProps> = ({ lang: initialLang = "en" }) => {
// Update validation schema when mode or language changes
useEffect(() => {
setValidationSchema(
mode === 'create' ? getCreateApplicationSchema(lang as "en" | "tr") :
mode === 'update' ? getUpdateApplicationSchema(lang as "en" | "tr") :
mode === 'create' ? getCreateApplicationSchema(lang) :
mode === 'update' ? getUpdateApplicationSchema(lang) :
schema.ViewApplicationSchema
);
}, [mode, lang]);
@ -98,7 +96,7 @@ const ApplicationPage: React.FC<PageProps> = ({ lang: initialLang = "en" }) => {
additionalFields: [
// {
// name: "status",
// label: translations[lang as "en" | "tr"].status,
// label: translations[lang].status,
// type: "select" as const,
// options: [
// { value: "active", label: "Active" },
@ -170,13 +168,6 @@ const ApplicationPage: React.FC<PageProps> = ({ lang: initialLang = "en" }) => {
gridCols={gridCols}
setGridCols={setGridCols}
/>
{/* Language Selection */}
<LanguageSelectionComponent
lang={lang}
translations={translations}
setLang={setLang}
/>
</div>
</div>

9
WebServices/management-frontend/src/eventRouters/pageRetriever.tsx
View File

@ -2,9 +2,12 @@ import { PageProps } from "../validations/translations/translation";
import { UnAuthorizedPage } from "./unauthorizedpage";
import menuPages from "./index";
export function retrievePageByUrl(url: string): React.FC<PageProps> {
export function retrievePageByUrl(url: string, lang: "en" | "tr"): React.FC<PageProps> {
if (url in menuPages) {
return menuPages[url as keyof typeof menuPages];
const PageComponent = menuPages[url as keyof typeof menuPages];
// Return a new component that passes the lang prop to the original component
return (props: PageProps) => <PageComponent {...props} lang={lang} />;
}
return UnAuthorizedPage;
// Also pass lang to UnAuthorizedPage
return (props: PageProps) => <UnAuthorizedPage {...props} lang={lang} />;
}

2
WebServices/management-frontend/src/validations/translations/translation.tsx
View File

@ -43,7 +43,7 @@ interface FilteredMenuFirstLevel {
interface PageProps {
lang: keyof LanguageTranslation;
queryParams: { [key: string]: string | undefined };
queryParams?: { [key: string]: string | undefined };
}
type PageComponent = React.ComponentType<PageProps>;

10
WebServices/management-frontend/tsconfig.json
View File

@ -22,6 +22,14 @@
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
"../../menu/EmployeeProfileSection.tsx",
"src/components/menu/NavigationMenu.tsx",
"../../menu/menu.tsx"
],
"exclude": ["node_modules"]
}