dark mode, show project for the selected team

ever-co · Feb 10, 2025 · e64a212 · e64a212
1 parent 5a3f28e
commit e64a212
Show file tree

Hide file tree

Showing 10 changed files with 194 additions and 88 deletions.
diff --git a/apps/web/app/[locale]/projects/[id]/page.tsx b/apps/web/app/[locale]/projects/[id]/page.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import { MainLayout } from '@/lib/layout';
+import { useOrganizationTeams } from '@/app/hooks';
+import { withAuthentication } from '@/lib/app/authenticator';
+
+function Page() {
+	const { isTrackingEnabled } = useOrganizationTeams();
+	return (
+		<MainLayout
+			showTimer={isTrackingEnabled}
+			className="!p-0 pb-1 !overflow-hidden w-full"
+			childrenClassName="w-full h-full"
+			mainHeaderSlot={
+				<div className="flex flex-col p-4 dark:bg-dark--theme">
+					<div className="flex flex-col items-start justify-between gap-3">
+						<div className="flex items-center justify-center h-10 gap-8">
+							<h3 className=" text-3xl font-medium">Project</h3>
+						</div>
+					</div>
+				</div>
+			}
+		></MainLayout>
+	);
+}
+
+export default withAuthentication(Page, { displayName: 'ProjectPage' });
diff --git a/...e]/project/[id]/components/data-table.tsx → ...ocale]/projects/components/data-table.tsx b/...e]/project/[id]/components/data-table.tsx → ...ocale]/projects/components/data-table.tsx
@@ -183,10 +183,12 @@ export function DataTableProject(props: { data: ProjectTableDataType[] }) {
 			header: () => <div>{t('common.MEMBERS')}</div>,
 			cell: ({ row }) => {
 				const members =
-					row.original?.members?.map((el) => ({
-						imageUrl: el?.employee?.user?.imageUrl,
-						name: el?.employee?.fullName
-					})) || [];
+					row.original?.members
+						?.filter((el) => !el.isManager)
+						?.map((el) => ({
+							imageUrl: el?.employee?.user?.imageUrl,
+							name: el?.employee?.fullName
+						})) || [];
 
 				return members?.length > 0 ? <AvatarStack avatars={members} /> : null;
 			}

diff --git a/...le]/project/[id]/components/grid-item.tsx → ...locale]/projects/components/grid-item.tsx b/...le]/project/[id]/components/grid-item.tsx → ...locale]/projects/components/grid-item.tsx
@@ -24,10 +24,12 @@ export default function GridItem(props: IGridItemProps) {
 
 	const members = useMemo(
 		() =>
-			data?.members?.map((el) => ({
-				imageUrl: el?.employee?.user?.imageUrl,
-				name: el?.employee?.fullName
-			})) || [],
+			data?.members
+				?.filter((el) => !el.isManager)
+				?.map((el) => ({
+					imageUrl: el?.employee?.user?.imageUrl,
+					name: el?.employee?.fullName
+				})) || [],
 		[data?.members]
 	);
 
@@ -83,12 +85,16 @@ export default function GridItem(props: IGridItemProps) {
 
 				<div className="w-full items-center flex gap-6">
 					<p className=" font-medium">{t('common.STATUS')}</p>
-					<div
-						style={{ backgroundColor: statusColorsMap.get(data?.status) ?? '#e5e7eb' }}
-						className="rounded px-4 py-1"
-					>
-						{data?.status ?? '-'}
-					</div>
+					{data?.status ? (
+						<div
+							style={{ backgroundColor: statusColorsMap.get(data?.status) ?? 'transparent' }}
+							className="rounded px-4 py-1"
+						>
+							{data?.status}
+						</div>
+					) : (
+						'-'
+					)}
 				</div>
 
 				<div className="w-full flex items-center gap-10">

diff --git a/...roject/[id]/components/page-component.tsx → ...e]/projects/components/page-component.tsx b/...roject/[id]/components/page-component.tsx → ...e]/projects/components/page-component.tsx
@@ -17,6 +17,7 @@ import GridItem from './grid-item';
 import { DataTableProject } from './data-table';
 import { LAST_SELECTED_PROJECTS_VIEW } from '@/app/constants';
 import { useTranslations } from 'next-intl';
+import { usePathname } from 'next/navigation';
 
 type TViewMode = 'GRID' | 'LIST';
 
@@ -36,6 +37,12 @@ function PageComponent() {
 		from: startOfMonth(new Date()),
 		to: endOfMonth(new Date())
 	});
+	const { activeTeam } = useOrganizationTeams();
+	const pathname = usePathname();
+	const projects = useMemo(
+		() => (pathname.split('/')[1] == 'all-teams' ? organizationProjects : activeTeam?.projects),
+		[activeTeam?.projects, organizationProjects, pathname]
+	);
 	const viewItems: { title: string; name: TViewMode; icon: any }[] = useMemo(
 		() => [
 			{
@@ -54,7 +61,7 @@ function PageComponent() {
 	const t = useTranslations();
 
 	const { total, onPageChange, itemsPerPage, itemOffset, endOffset, setItemsPerPage, currentItems } =
-		usePagination<IProject>(organizationProjects);
+		usePagination<IProject>(projects ?? []);
 
 	useEffect(() => {
 		getOrganizationProjects();
@@ -69,7 +76,7 @@ function PageComponent() {
 				<div className="flex flex-col p-4 dark:bg-dark--theme">
 					<div className="flex flex-col items-start justify-between gap-3">
 						<div className="flex items-center justify-center h-10 gap-8">
-							<h3 className=" text-3xl font-medium">Projects</h3>
+							<h3 className=" text-3xl font-medium">{t('pages.projects.projectTitle.PLURAL')}</h3>
 						</div>
 						<div className=" h-14 flex items-center justify-between w-full">
 							<div className="w-[20rem] h-full flex items-end justify-center">
@@ -101,7 +108,7 @@ function PageComponent() {
 
 							<div className="h-full flex items-end">
 								<Button variant="grey" className=" text-primary font-medium">
-									<Plus size={15} /> <span>Create New Project</span>
+									<Plus size={15} /> <span>{t('pages.projects.CREATE_NEW_PROJECT')}</span>
 								</Button>
 							</div>
 						</div>
@@ -110,28 +117,33 @@ function PageComponent() {
 			}
 		>
 			<div className="flex flex-col p-4 w-full h-full  gap-6 dark:bg-dark--theme mt-6">
-				<div className="border rounded-lg bg-white  p-3 space-y-6">
+				<div className="border bg-light--theme-light dark:bg-transparent rounded-lg p-3 space-y-6">
 					<div className=" rounded flex items-center justify-between font-light">
-						<div className="w-80 flex border  h-[2.2rem] items-center px-4 rounded-lg">
+						<div className="w-80 flex border dark:border-white   h-[2.2rem] items-center px-4 rounded-lg">
 							<Search size={15} className=" text-slate-300" />{' '}
-							<InputField placeholder="Search ..." className=" h-full border-none" noWrapper />
+							<InputField
+								placeholder="Search ..."
+								className=" h-full border-none bg-transparent dark:bg-transparent"
+								noWrapper
+							/>
 						</div>
 						<div className="flex gap-3">
 							<DatePickerWithRange
 								defaultValue={dateRange}
 								onChange={() => {
 									/* TODO: Implement date range handling */
 								}}
+								className="bg-transparent dark:bg-transparent dark:border-white"
 							/>
 							<Button
 								type="button"
-								className=" border-gray-200 hover:bg-slate-100 text-sm min-w-fit text-black h-[2.2rem] font-light"
+								className=" border-gray-200 !border hover:bg-slate-100 dark:border text-sm min-w-fit text-black h-[2.2rem] font-light"
 								variant="outline"
 							>
 								<ListFilterPlus size={15} /> <span>{t('common.FILTER')}</span>
 							</Button>
 							<ExportModeSelect
-								className="hover:bg-slate-100"
+								className="hover:bg-slate-100 bg-transparent dark:bg-transparent dark:border-white"
 								onChange={() => {
 									/* TODO: Implement export handling */
 								}}
@@ -146,7 +158,7 @@ function PageComponent() {
 						</div>
 					</div>
 					{selectedView === 'LIST' ? (
-						<div className="w-full">
+						<div key="list" className="w-full">
 							<DataTableProject
 								data={currentItems.map((el) => ({
 									project: {
@@ -163,7 +175,7 @@ function PageComponent() {
 									teams: el.teams
 								}))}
 							/>
-							<div className=" bg-white dark:bg-dark--theme px-4 py-4 flex">
+							<div className=" dark:bg-dark--theme px-4 py-4 flex">
 								<Paginate
 									total={total}
 									onPageChange={onPageChange}
@@ -177,7 +189,7 @@ function PageComponent() {
 							</div>
 						</div>
 					) : selectedView === 'GRID' ? (
-						<div className=" w-full flex-wrap flex gap-3">
+						<div key="grid" className=" w-full flex-wrap flex gap-3">
 							{currentItems
 								.map((el) => ({
 									project: {
@@ -204,4 +216,4 @@ function PageComponent() {
 	);
 }
 
-export default withAuthentication(PageComponent, { displayName: 'ProjectPage' });
+export default withAuthentication(PageComponent, { displayName: 'ProjectsPage' });
diff --git a/apps/web/app/[locale]/project/[id]/page.tsx → apps/web/app/[locale]/projects/page.tsx b/apps/web/app/[locale]/project/[id]/page.tsx → apps/web/app/[locale]/projects/page.tsx
diff --git a/apps/web/app/hooks/features/useOrganizationProjects.ts b/apps/web/app/hooks/features/useOrganizationProjects.ts
@@ -6,7 +6,7 @@ import {
 	createOrganizationProjectAPI
 } from '@app/services/client/api';
 import { userState } from '@app/stores';
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useAtom } from 'jotai';
 import { useQuery } from '../useQuery';
 import { organizationProjectsState } from '@/app/stores/organization-projects';
@@ -64,15 +64,20 @@ export function useOrganizationProjects() {
 		[getOrganizationProjectQueryCall]
 	);
 
-	const getOrganizationProjects = useCallback(async () => {
-		try {
-			const res = await getOrganizationProjectsQueryCall();
+	const getOrganizationProjects = useCallback(
+		async ({ queries }: { queries?: Record<string, string> } = {}) => {
+			try {
+				const res = await getOrganizationProjectsQueryCall({ queries });
 
-			setOrganizationProjects(res.data.items);
-		} catch (error) {
-			console.log(error);
-		}
-	}, [getOrganizationProjectsQueryCall, setOrganizationProjects]);
+				console.log(res.data);
+
+				return res.data;
+			} catch (error) {
+				console.log(error);
+			}
+		},
+		[getOrganizationProjectsQueryCall]
+	);
 
 	const createOrganizationProject = useCallback(
 		async (data: { name: string }) => {
@@ -92,6 +97,12 @@ export function useOrganizationProjects() {
 		[createOrganizationProjectQueryCall, organizationProjects, setOrganizationProjects]
 	);
 
+	useEffect(() => {
+		getOrganizationProjects().then((data) => {
+			setOrganizationProjects(data?.items ?? []);
+		});
+	}, []);
+
 	return {
 		editOrganizationProjectSetting,
 		editOrganizationProjectSettingLoading,

diff --git a/apps/web/app/services/client/api/organization-projects.ts b/apps/web/app/services/client/api/organization-projects.ts
@@ -21,7 +21,7 @@ export function getOrganizationProjectAPI(id: string, tenantId?: string) {
 	});
 }
 
-export function getOrganizationProjectsAPI() {
+export function getOrganizationProjectsAPI({ queries }: { queries?: Record<string, string> } = {}) {
 	const organizationId = getOrganizationIdCookie();
 	const tenantId = getTenantIdCookie();
 
@@ -36,6 +36,12 @@ export function getOrganizationProjectsAPI() {
 		obj[`relations[${i}]`] = relation;
 	});
 
+	if (queries) {
+		Object.entries(queries).forEach(([key, value]) => {
+			obj[key] = value;
+		});
+	}
+
 	const query = qs.stringify(obj);
 
 	return get<PaginationResponse<IProject>>(`/organization-projects?${query}`, {