project list

src/pages/taskmanager/project/components/ProjectCard.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { CSSProperties, FC } from "react";
 import { Link } from "react-router-dom";
 import { Pages } from "../../../../config/Pages";
 import type { ProjectItem } from "../types/ProjectTypes";
@@ -17,10 +17,20 @@ const hexToRgba = (hex: string, alpha: number) => {
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 };
 
-const getCardBackground = (background: string) => {
-  const color = /^#[0-9A-Fa-f]{6}$/i.test(background) ? background : (background.match(/#[0-9A-Fa-f]{6}/i)?.[0] ?? "#A8E6CF");
+const getCardBackgroundStyle = (project: ProjectItem): CSSProperties => {
+  if (project.backgroundPicture) {
+    return {
+      backgroundImage: `url(${project.backgroundPicture})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+    };
+  }
 
-  return `linear-gradient(135deg, ${color}, ${hexToRgba(color, 0.5)})`;
+  const color = project.backgroundColor ?? "#A8E6CF";
+
+  return {
+    background: `linear-gradient(135deg, ${color}, ${hexToRgba(color, 0.5)})`,
+  };
 };
 
 const ProjectCard: FC<Props> = ({ project, onDelete }) => {
@@ -31,7 +41,7 @@ const ProjectCard: FC<Props> = ({ project, onDelete }) => {
   return (
     <div className="bg-white rounded-[20px] overflow-hidden shadow-sm border border-border/40 p-3">
       <Link to={Pages.taskmanager.workspace + project.id}>
-        <div className="h-[84px] w-full rounded-[16px]" style={{ background: getCardBackground(project.background) }} />
+        <div className="h-[84px] w-full rounded-[16px]" style={getCardBackgroundStyle(project)} />
       </Link>
 
       <div className="flex items-center justify-between mt-3.5">

src/pages/taskmanager/project/components/ProjectListHeader.tsx

@@ -7,11 +7,15 @@ import { Pages } from "../../../../config/Pages";
 
 type Props = {
   title: string;
+  workspaceId?: string;
   onSettingsClick?: () => void;
 };
 
-const ProjectListHeader: FC<Props> = ({ title, onSettingsClick }) => {
+const ProjectListHeader: FC<Props> = ({ title, workspaceId, onSettingsClick }) => {
   const { t } = useTranslation("global");
+  const createProjectLink = workspaceId
+    ? `${Pages.taskmanager.createProject}?workspaceId=${workspaceId}`
+    : Pages.taskmanager.createProject;
 
   return (
     <div className="flex w-full justify-between items-center">
@@ -23,7 +27,7 @@ const ProjectListHeader: FC<Props> = ({ title, onSettingsClick }) => {
           <span>{t("sidebar.setting")}</span>
         </Button>
 
-        <Link to={Pages.taskmanager.createProject}>
+        <Link to={createProjectLink}>
           <Button onClick={onSettingsClick} className="flex items-center gap-2 whitespace-nowrap px-4">
             <Add size={18} color="white" />
             <span>{t("taskmanager.new_project")}</span>