Merge pull request #1882 from ever-co/update/add-task-circular-progress

Update/add task circular progress

.cspell.json

@@ -5,6 +5,9 @@
 	"$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
 	"words": [
 		"appdev",
+		"adipiscing",
+		"amet",
+		"aliqua",
 		"signin",
 		"APPSTORE",
 		"barcodes",
@@ -19,7 +22,12 @@
 		"clsxm",
 		"commitlint",
 		"compodoc",
+		"consectetur",
+		"dolor",
+		"dolore",
 		"dummyimage",
+		"eiusmod",
+		"elit",
 		"envalid",
 		"everco",
 		"everteamsdesktop",
@@ -31,11 +39,14 @@
 		"heroicons",
 		"Huhn",
 		"icnsutils",
+		"incididunt",
 		"isdragging",
 		"isdraggingfrom",
 		"isdropdisabled",
+		"ipsum",
 		"JITSU",
 		"kanban",
+		"Lorem",
 		"libappindicator",
 		"lucide",
 		"mathieudutour",
@@ -56,6 +67,7 @@
 		"testid",
 		"Timesheet",
 		"tanstack",
+		"tempor",
 		"vcpu",
 		"Vercel",
 		"HUBSTAFF",
@@ -78,6 +90,7 @@
 		"hyperscript",
 		"nocheck",
 		"locatio",
+		"labore",
 		"falsey",
 		"unhang",
 		"popperjs",

apps/web/components/ui/svgs/circular-progress.tsx

@@ -0,0 +1,50 @@
+export default function CircularProgress({
+    radius=24,
+    cx=24,
+    cy=24,
+    percentage=55
+}: {
+    radius?: number,
+    cx?: number,
+    cy?: number,
+    percentage: number
+}) {
+    const circumference = radius * 2 * Math.PI;
+
+    return (
+        <>
+              <div
+                x-data="scrollProgress"
+                className="relative -rotate-90 inline-flex items-center justify-center overflow-hidden rounded-full"
+                >
+
+                <svg className="w-12 h-12">
+                    <circle
+                    className="text-gray-300"
+                    strokeWidth="8"
+                    stroke="currentColor"
+                    fill="transparent"
+                    r={radius}
+                    cx={cx}
+                    cy={cy}
+                    />
+                    <circle
+                    className="text-[#27AE60]"
+                    strokeWidth="8"
+                    strokeDasharray={circumference}
+                    strokeDashoffset={`calc(${circumference} - ${percentage / 100 * circumference})`}
+                    strokeLinecap="round"
+                    stroke="currentColor"
+                    fill="transparent"
+                    r={radius}
+                    cx={cx}
+                    cy={cy}
+                    />
+                </svg>
+                <span className="absolute text-xs font-normal text-black dark:text-white rotate-90" x-text={`${percentage}%`}>
+                    {percentage}H
+                </span>
+                </div>
+        </>
+    )
+}

apps/web/lib/components/kanban-card.tsx

@@ -2,6 +2,7 @@ import BugIcon from "@components/ui/svgs/bug";
 import Image from 'next/image';
 import VerticalThreeDot from "@components/ui/svgs/vertical-three-dot";
 import { DraggableProvided } from "react-beautiful-dnd";
+import CircularProgress from "@components/ui/svgs/circular-progress";
 
 function getStyle(provided: DraggableProvided, style: any) {
     if (!style) {
@@ -78,9 +79,7 @@ const stackImages = (index: number, length: number) => {
  * @param props 
  * @returns 
  */
-export default function Item(props: any) {
-
-
+export default function Item(props: any) {   
 
     const {
       item,
@@ -91,7 +90,7 @@ export default function Item(props: any) {
       isClone,
       index,
     } = props;
-
+   
     return (
       <section
         href={``}
@@ -111,17 +110,19 @@ export default function Item(props: any) {
         <div className="flex gap-1.5 border-b border-b-gray-200 pb-4">
             <div className="flex flex-col gap-5 grow">
                 <TagList tags={item.tags}/>
-                <div className="flex flex-row items-center gap-2 text-sm not-italic font-semibold">
-                    <div className="bg-indianRed rounded p-1">
+                <div className="flex flex-row flex-wrap items-center text-sm not-italic font-semibold">
+                    <span className="bg-indianRed rounded p-1 mr-1">
                         <BugIcon/>
-                    </div>
-                    <p className="text-grey text-normal">#213</p>
-                    <p className="text-black dark:text-white text-normal capitalize">{item.content}</p>
+                    </span>
+                    <span className="text-grey text-normal mr-1">#213</span>
+                    <span className="text-black dark:text-white text-normal capitalize">{item.content}</span>
 
                 </div>
             </div>
-            <div className="flex flex-col w-[48px] items-end">
+            <div className="flex flex-col justify-between w-[48px] items-end">
                 <VerticalThreeDot/>
+
+                <CircularProgress percentage={10}/>
             </div>
         </div>
         <div className="flex flex-row justify-between items-center pt-4">

apps/web/pages/kanban/index.tsx

@@ -27,7 +27,7 @@ const Kanban= () => {
         todo: [
             {
                 id: '1',
-                content: 'demo content',
+                content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
                 tags: [
                     {
                         id: 'tag-1',