"use client"

import TitleCard from "@/components/TitleCard/TitleCard"
import { DashboardContent } from "@/types/staticContent/dashboard.content.type"
import { getClientDictionary } from "@/utils/getClientDictionary"
import { ROUTES } from "@/utils/Routing"
import { useAuthStore } from "@/zustand/auth/useAuthStore"
import Link from "next/link"

type Props = {}

const page = (props: Props) => {
    const { language } = useAuthStore();
    const DASHBOARD = getClientDictionary(language, 'dashboard') as DashboardContent;

    const AuditDashboardCardContent = [
        {
            iconName: "icon-projects",
            title: "Active Projects",
            numbers: 8,
            smallTitle: "3 due this month",
            trade: "up",
            profitNumber: "12%",
            timeDuration: "vs last quarter",
            linkUrl: ROUTES.AUDIT_PROJECTS,
        },
        {
            iconName: "icon-caution",
            title: "Open Issues",
            numbers: 24,
            smallTitle: "5 high priority",
            trade: "down",
            profitNumber: "8%",
            timeDuration: "vs last month",
            linkUrl: ROUTES.AUDIT_PROJECTS,
        },
        {
            iconName: "icon-clock",
            title: "Pending Responses",
            numbers: 12,
            smallTitle: "4 overdue",
            profitNumber: "",
            timeDuration: "",
            linkUrl: ROUTES.AUDIT_PROJECTS,
        },
        {
            iconName: "icon-check-rounded",
            title: "Completed This Month",
            numbers: 15,
            smallTitle: "Audits & assessments",
            trade: "up",
            profitNumber: "25%",
            timeDuration: "vs last month",
            linkUrl: ROUTES.AUDIT_ASSESSMENT,
        },
    ]
    return (
        <>
            <TitleCard
                title={DASHBOARD.DASHBOARD}
                description={DASHBOARD.DASHBOARD_DESCRIPTION}
            />


            <div className="mb-6 p-3 border border-grey2b rounded-md bg-theme-bg flex items-center flex-wrap gap-3">
                <div>
                    <div className="flex items-stretch gap-1.5">
                        <button type="button" className="text-white text-xs md:text-sm leading-tight flex flex-col justify-between items-center min-w-12 min-h-12 md:min-w-15 md:min-h-15 py-2 px-3 bg-primary rounded-md cursor-pointer duration-300 ease-in-out hover:bg-primary-c5">
                            <i className="icon icon-add w-3.5 h-3.5 md:w-4.5 md:h-4.5 bg-white duration-300 ease-in-out group group-hover:bg-white"></i>
                            New Project
                        </button>
                        <button type="button" className="text-light text-xs md:text-sm leading-tight flex flex-col justify-between items-center min-w-12 min-h-12 md:min-w-15 md:min-h-15 py-2 px-3 bg-card-bg rounded-md cursor-pointer duration-300 ease-in-out opacity-70 hover:opacity-100">
                            <i className="icon icon-caution w-3.5 h-3.5 md:w-4.5 md:h-4.5 bg-light duration-300 ease-in-out group group-hover:bg-white"></i>
                            Log Issue
                        </button>
                    </div>
                    <span className="text-xs font-normal text-light leading-tight block text-center opacity-50 border-t border-light/30 pt-1 mt-1.5">Quick Actions</span>
                </div>
                <div>
                    <div className="flex items-stretch gap-1.5">
                        <button type="button" className="text-light text-xs md:text-sm leading-tight flex flex-col justify-between items-center min-w-12 min-h-12 md:min-w-15 md:min-h-15 py-2 px-3 bg-card-bg rounded-md cursor-pointer duration-300 ease-in-out opacity-70 hover:opacity-100">
                            <i className="icon icon-download w-3.5 h-3.5 md:w-4.5 md:h-4.5 bg-light duration-300 ease-in-out group group-hover:bg-white"></i>
                            Export
                        </button>
                    </div>
                    <span className="text-xs font-normal text-light leading-tight block text-center opacity-50 border-t border-light/30 pt-1 mt-1.5">Export</span>
                </div>
                <div>
                    <div className="flex items-stretch gap-1.5">
                        <button type="button" className="text-light text-xs md:text-sm leading-tight flex flex-col justify-between items-center min-w-12 min-h-12 md:min-w-15 md:min-h-15 py-2 px-3 bg-card-bg rounded-md cursor-pointer duration-300 ease-in-out opacity-70 hover:opacity-100">
                            <i className="icon icon-widgets w-3.5 h-3.5 md:w-4.5 md:h-4.5 bg-light duration-300 ease-in-out group group-hover:bg-white"></i>
                            Widgets
                        </button>
                        <button type="button" className="text-light text-xs md:text-sm leading-tight flex flex-col justify-between items-center min-w-12 min-h-12 md:min-w-15 md:min-h-15 py-2 px-3 bg-card-bg rounded-md cursor-pointer duration-300 ease-in-out opacity-70 hover:opacity-100">
                            <i className="icon icon-settings w-3.5 h-3.5 md:w-4.5 md:h-4.5 bg-light duration-300 ease-in-out group group-hover:bg-white"></i>
                            Settings
                        </button>
                    </div>
                    <span className="text-xs font-normal text-light leading-tight block text-center opacity-50 border-t border-light/30 pt-1 mt-1.5">Customize</span>
                </div>
            </div>

            <div className="mb-6 grid xs:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
                {AuditDashboardCardContent?.map((items, i) => {
                    return (
                        <div key={i} className="relative bg-secondary border border-grey2b hover:border-primary rounded-xl md:rounded-2xl p-3 sm:p-4">
                            <div className="flex justify-between items-start gap-2">
                                <div>
                                    <h3 className="text-sm xl:text-base font-medium text-grey99 leading-tight capitalize mb-1.5">{items?.title}</h3>
                                    <p className="text-base md:text-2xl 2xl:text-3xl font-semibold text-light mb-1">{items?.numbers}</p>
                                    {items?.smallTitle &&
                                        <span className="block text-xs xl:text-sm text-grey99 leading-tight">{items?.smallTitle}</span>
                                    }

                                </div>
                                <div className="w-9 h-9 2xl:w-10 2xl:h-10 rounded-md bg-dark-green3c flex justify-center items-center shrink-0">
                                    <i
                                        className={`icon ${items?.iconName} bg-primary-c1 w-5 h-5 2xl:w-6 2xl:h-6`}
                                    ></i>
                                </div>
                            </div>
                            {items?.profitNumber && items?.timeDuration &&
                                <span className="flex items-center gap-1 mt-3 text-xs xl:text-sm text-grey99 leading-tight">
                                    <span
                                        className={`text-sm xl:text-base leading-tight inline-flex items-center ${items.trade === "down" ? "text-red" : "text-green"
                                            }`}
                                    >
                                        <i
                                            className={`icon icon-arrow-up w-4 h-4 xl:w-4.5 xl:h-4.5 ${items.trade === "down" ? "rotate-180 bg-red" : "bg-green"
                                                }`}
                                        ></i>

                                        {items.profitNumber}
                                    </span>
                                    {items.timeDuration}
                                </span>
                            }
                            {items?.linkUrl &&
                                <Link href={items?.linkUrl} className="text-[0px] leading-0 absolute inset-0 w-full h-full cursor-pointer">Link</Link>
                            }
                        </div>
                    );
                })}

            </div>

            <div className="mt-4 lg:mt-6 2xl:mt-7.5 grid lg:grid-cols-2 gap-3 sm:gap-4 lg:gap-6 2xl:gap-7.5">

                {/* My Work In Progress */}
                <div className="border border-grey2b rounded-xl lg:rounded-2xl overflow-hidden">

                    <div className="flex items-center justify-between gap-2.5 px-4 py-3 md:p-4 bg-secondary border-b border-grey2b">
                        <h3 className="text-sm xl:text-base font-medium leading-tight text-light">My Work In Progress</h3>
                        <i className="icon icon-three-dots w-5 h-5 md:w-6 md:h-6 bg-grey99 cursor-pointer">...</i>
                    </div>

                    <div className="flex flex-col">
                        <div className="w-full flex items-start gap-2.5 justify-between py-3 px-4 border-b border-grey2b cursor-pointer duration-300 ease-in-out hover:bg-secondary27">
                            <div className="w-full">
                                <div className="flex items-start gap-1.5">
                                    <i className="icon icon-alert w-3.5 h-3.5 md:w-4 md:h-4 bg-red shrink-0 mt-0.5"></i>
                                    <span className="text-sm xl:text-base font-medium leading-tight text-light">Review Q3 Financial Controls</span>
                                </div>
                                <p className="text-xs xl:text-sm text-grey99">2024-AUD-015</p>
                            </div>
                            <div className="flex items-center justify-end flex-wrap gap-2 w-auto">
                                <div className="flex items-center gap-1.5">
                                    <i className="icon icon-clock w-3 h-3 xl:w-3.5 xl:h-3.5 bg-grey99 shrink-0"></i>
                                    <span className="text-xs xl:text-sm font-medium text-grey99">Jan 25, 2026</span>
                                </div>
                                <span className="inline-block px-2 py-0.5 text-xs font-medium rounded-2xl text-white border bg-primary border-primary shrink-0">In Progress</span>
                            </div>
                        </div>

                        <div className="w-full flex items-start gap-2.5 justify-between py-3 px-4 border-b border-grey2b cursor-pointer duration-300 ease-in-out hover:bg-secondary27">
                            <div className="w-full">
                                <div className="flex items-start gap-1.5 mb-1">
                                    {/* <i className="icon icon-alert w-3.5 h-3.5 md:w-4 md:h-4 bg-red shrink-0 mt-0.5"></i> */}
                                    <span className="text-sm xl:text-base font-medium leading-tight text-light">Complete Vendor Assessment</span>
                                </div>
                                <p className="text-xs xl:text-sm text-grey99">2024-AUD-015</p>
                            </div>
                            <div className="flex items-center justify-end flex-wrap gap-2 w-auto">
                                <div className="flex items-center gap-1.5">
                                    <i className="icon icon-clock w-3 h-3 xl:w-3.5 xl:h-3.5 bg-grey99 shrink-0"></i>
                                    <span className="text-xs xl:text-sm font-medium text-grey99">Jan 25, 2026</span>
                                </div>
                                <span className="inline-block px-2 py-0.5 text-xs font-medium rounded-2xl text-white border bg-red border-red shrink-0">overdue</span>
                            </div>
                        </div>

                        <div className="w-full flex items-start gap-2.5 justify-between py-3 px-4 border-b border-grey2b cursor-pointer duration-300 ease-in-out hover:bg-secondary27">
                            <div className="w-full">
                                <div className="flex items-start gap-1.5 mb-1">
                                    <i className="icon icon-alert w-3.5 h-3.5 md:w-4 md:h-4 bg-red shrink-0 mt-0.5"></i>
                                    <span className="text-sm xl:text-base font-medium leading-tight text-light">Complete Vendor Assessment</span>
                                </div>
                                <p className="text-xs xl:text-sm text-grey99">2024-AUD-015</p>
                            </div>
                            <div className="flex items-center justify-end flex-wrap gap-2 w-auto">
                                <div className="flex items-center gap-1.5 mb-1">
                                    <i className="icon icon-clock w-3 h-3 xl:w-3.5 xl:h-3.5 bg-grey99 shrink-0"></i>
                                    <span className="text-xs xl:text-sm font-medium text-grey99">Jan 25, 2026</span>
                                </div>
                                <span className="inline-block px-2 py-0.5 text-xs font-medium rounded-2xl text-white border bg-blue border-blue shrink-0">Pending</span>
                            </div>
                        </div>

                        <div className="w-full flex items-start gap-2.5 justify-between py-3 px-4 border-b border-grey2b cursor-pointer duration-300 ease-in-out hover:bg-secondary27">
                            <div className="w-full">
                                <div className="flex items-start gap-1.5 mb-1">
                                    <i className="icon icon-alert w-3.5 h-3.5 md:w-4 md:h-4 bg-red shrink-0 mt-0.5"></i>
                                    <span className="text-sm xl:text-base font-medium leading-tight text-light">Prepare Audit Report Draft</span>
                                </div>
                                <p className="text-xs xl:text-sm text-grey99">2024-AUD-015</p>
                            </div>
                            <div className="flex items-center justify-end flex-wrap gap-2 w-auto">
                                <div className="flex items-center gap-1.5">
                                    <i className="icon icon-clock w-3 h-3 xl:w-3.5 xl:h-3.5 bg-grey99 shrink-0"></i>
                                    <span className="text-xs xl:text-sm font-medium text-grey99">Jan 25, 2026</span>
                                </div>
                                <span className="inline-block px-2 py-0.5 text-xs font-medium rounded-2xl text-white border bg-primary border-primary shrink-0">In Progress</span>
                            </div>
                        </div>
                    </div>
                    <div className="py-3 px-4">
                        <Link href={"#"} className="text-primary text-xs xl:text-sm font-medium leading-tight hover:underline duration-300 ease-in-out">View All Tasks</Link>
                    </div>
                </div>

                {/* My Projects */}
                <div className="border border-grey2b  rounded-xl lg:rounded-2xl overflow-hidden">

                    <div className="flex items-center justify-between gap-2.5 px-4 py-3 md:p-4 bg-secondary border-b border-grey2b">
                        <h3 className="text-sm xl:text-base font-medium leading-tight text-light">My Projects</h3>
                        <i className="icon icon-three-dots w-5 h-5 md:w-6 md:h-6 bg-grey99 cursor-pointer">...</i>
                    </div>

                    <div className="flex flex-col">
                        <div className="w-full py-3 px-4 border-b border-grey2b cursor-pointer duration-300 ease-in-out hover:bg-secondary27">
                            <div className="mb-2  flex items-center gap-2.5 justify-between ">
                                <div>
                                    <span className="text-sm xl:text-base font-medium leading-tight text-light">Financial Controls Audit</span>
                                    <p className="text-xs xl:text-sm text-grey99">2024-AUD-015</p>
                                </div>
                                <div className="shrink-0">
                                    <span className="inline-block px-2 py-0.5 text-xs font-medium rounded-2xl text-white border bg-primary border-primary shrink-0">Active</span>
                                </div>
                            </div>
                            <div className="flex items-center justify-between gap-4">
                                <span className="w-full bg-grey-f3 h-1.5 rounded-2xl relative overflow-hidden">
                                    <span className="bg-primary h-full absolute left-0 top-0" style={{ width: "80%" }}></span>
                                </span>
                                <span className=" min-w-9 text-end text-xs xl:text-sm leading-tight text-grey99 shrink-0">80%</span>
                            </div>
                        </div>

                        <div className="w-full py-3 px-4 border-b border-grey2b cursor-pointer duration-300 ease-in-out hover:bg-secondary27">
                            <div className="mb-2  flex items-center gap-2.5 justify-between ">
                                <div>
                                    <span className="text-sm xl:text-base font-medium leading-tight text-light">IT Security Assessment</span>
                                    <p className="text-xs xl:text-sm text-grey99">2024-AUD-015</p>
                                </div>
                                <div className="shrink-0">
                                    <span className="inline-block px-2 py-0.5 text-xs font-medium rounded-2xl text-yellow border bg-yellow-50 border-yellow shrink-0">Draft</span>
                                </div>
                            </div>
                            <div className="flex items-center justify-between gap-4">
                                <span className="w-full bg-grey-f3 h-1.5 rounded-2xl relative overflow-hidden">
                                    <span className="bg-primary h-full absolute left-0 top-0" style={{ width: "30%" }}></span>
                                </span>
                                <span className=" min-w-9 text-end text-xs xl:text-sm leading-tight text-grey99 shrink-0">30%</span>
                            </div>
                        </div>

                        <div className="w-full py-3 px-4 border-b border-grey2b cursor-pointer duration-300 ease-in-out hover:bg-secondary27">
                            <div className="mb-2  flex items-center gap-2.5 justify-between ">
                                <div>
                                    <span className="text-sm xl:text-base font-medium leading-tight text-light">Vendor Due Diligence</span>
                                    <p className="text-xs xl:text-sm text-grey99">2024-AUD-015</p>
                                </div>
                                <div className="shrink-0">
                                    <span className="inline-block px-2 py-0.5 text-xs font-medium rounded-2xl text-white border bg-primary border-primary shrink-0">Active</span>
                                </div>
                            </div>
                            <div className="flex items-center justify-between gap-4">
                                <span className="w-full bg-grey-f3 h-1.5 rounded-2xl relative overflow-hidden">
                                    <span className="bg-primary h-full absolute left-0 top-0" style={{ width: "50%" }}></span>
                                </span>
                                <span className=" min-w-9 text-end text-xs xl:text-sm leading-tight text-grey99 shrink-0">50%</span>
                            </div>
                        </div>

                        <div className="w-full py-3 px-4 border-b border-grey2b cursor-pointer duration-300 ease-in-out hover:bg-secondary27">
                            <div className="mb-2  flex items-center gap-2.5 justify-between ">
                                <div>
                                    <span className="text-sm xl:text-base font-medium leading-tight text-light">SOX Compliance Review</span>
                                    <p className="text-xs xl:text-sm text-grey99">2024-AUD-015</p>
                                </div>
                                <div className="shrink-0">
                                    <span className="inline-block px-2 py-0.5 text-xs font-medium rounded-2xl text-white border bg-green border-green shrink-0">Complete</span>
                                </div>
                            </div>
                            <div className="flex items-center justify-between gap-4">
                                <span className="w-full bg-grey-f3 h-1.5 rounded-2xl relative overflow-hidden">
                                    <span className="bg-primary h-full absolute left-0 top-0" style={{ width: "100%" }}></span>
                                </span>
                                <span className=" min-w-9 text-end text-xs xl:text-sm leading-tight text-grey99 shrink-0">100%</span>
                            </div>
                        </div>
                    </div>

                    <div className="py-3 px-4">
                        <Link href={"#"} className="text-primary text-xs xl:text-sm font-medium leading-tight hover:underline duration-300 ease-in-out">View All Tasks</Link>
                    </div>

                </div>

                {/* Pending Issues */}
                <div className="border border-grey2b  rounded-xl lg:rounded-2xl overflow-hidden">

                    <div className="flex items-center justify-between gap-2.5 px-4 py-3 md:p-4 bg-secondary border-b border-grey2b">
                        <h3 className="text-sm xl:text-base font-medium leading-tight text-light">Pending Issues</h3>
                        <i className="icon icon-three-dots w-5 h-5 md:w-6 md:h-6 bg-grey99 cursor-pointer">...</i>
                    </div>

                    <div className="flex flex-col">
                        <div className="w-full flex items-start gap-2.5 justify-between py-3 px-4 border-b border-grey2b cursor-pointer duration-300 ease-in-out hover:bg-secondary27">
                            <div className="flex items-start gap-2.5">
                                <i className="icon icon-caution w-4 h-4 xl:w-4.5 xl:h-4.5 bg-red shrink-0 mt-1"></i>
                                <div>
                                    <span className="block text-sm xl:text-base font-medium leading-tight text-light mb-1">Complete Vendor Assessment</span>
                                    <ul className="flex items-center flex-wrap gap-x-2.5 gap-y-1">
                                        <li className="relative text-xs xl:text-sm text-grey99 leading-tight before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-1/2 before:w-1 before:h-1 before:rounded-full before:bg-grey99 pl-2.5 first:before:hidden first:pl-0">ISS-001</li>
                                        <li className="relative text-xs xl:text-sm text-grey99 leading-tight before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-1/2 before:w-1 before:h-1 before:rounded-full before:bg-grey99 pl-2.5 first:before:hidden first:pl-0">2024-AUD-015</li>
                                        <li className="relative text-xs xl:text-sm text-grey99 leading-tight before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-1/2 before:w-1 before:h-1 before:rounded-full before:bg-grey99 pl-2.5 first:before:hidden first:pl-0">12d open</li>
                                    </ul>
                                </div>
                            </div>
                            <div className="flex items-center gap-2">
                                <span className="inline-block px-2 py-0.5 text-xs font-medium rounded-2xl text-white border bg-blue border-blue shrink-0">Open</span>
                            </div>
                        </div>

                        <div className="w-full flex items-start gap-2.5 justify-between py-3 px-4 border-b border-grey2b cursor-pointer duration-300 ease-in-out hover:bg-secondary27">
                            <div className="flex items-start gap-2.5">
                                <i className="icon icon-caution w-4 h-4 xl:w-4.5 xl:h-4.5 bg-yellow shrink-0 mt-1"></i>
                                <div>
                                    <span className="block text-sm xl:text-base font-medium leading-tight text-light mb-1">Password policy non-compliance</span>
                                    <ul className="flex items-center flex-wrap gap-x-2.5 gap-y-1">
                                        <li className="relative text-xs xl:text-sm text-grey99 leading-tight before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-1/2 before:w-1 before:h-1 before:rounded-full before:bg-grey99 pl-2.5 first:before:hidden first:pl-0">ISS-001</li>
                                        <li className="relative text-xs xl:text-sm text-grey99 leading-tight before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-1/2 before:w-1 before:h-1 before:rounded-full before:bg-grey99 pl-2.5 first:before:hidden first:pl-0">2024-AUD-015</li>
                                        <li className="relative text-xs xl:text-sm text-grey99 leading-tight before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-1/2 before:w-1 before:h-1 before:rounded-full before:bg-grey99 pl-2.5 first:before:hidden first:pl-0">12d open</li>
                                    </ul>
                                </div>
                            </div>
                            <div className="flex items-center gap-2">
                                <span className="inline-block px-2 py-0.5 text-xs font-medium rounded-2xl text-white border bg-blue border-blue shrink-0">Pending</span>
                            </div>
                        </div>

                        <div className="w-full flex items-start gap-2.5 justify-between py-3 px-4 border-b border-grey2b cursor-pointer duration-300 ease-in-out hover:bg-secondary27">
                            <div className="flex items-start gap-2.5">
                                <i className="icon icon-caution w-4 h-4 xl:w-4.5 xl:h-4.5 bg-grey99 shrink-0 mt-1"></i>
                                <div>
                                    <span className="block text-sm xl:text-base font-medium leading-tight text-light mb-1">Missing vendor documentation</span>
                                    <ul className="flex items-center flex-wrap gap-x-2.5 gap-y-1">
                                        <li className="relative text-xs xl:text-sm text-grey99 leading-tight before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-1/2 before:w-1 before:h-1 before:rounded-full before:bg-grey99 pl-2.5 first:before:hidden first:pl-0">ISS-001</li>
                                        <li className="relative text-xs xl:text-sm text-grey99 leading-tight before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-1/2 before:w-1 before:h-1 before:rounded-full before:bg-grey99 pl-2.5 first:before:hidden first:pl-0">2024-AUD-015</li>
                                        <li className="relative text-xs xl:text-sm text-grey99 leading-tight before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-1/2 before:w-1 before:h-1 before:rounded-full before:bg-grey99 pl-2.5 first:before:hidden first:pl-0">12d open</li>
                                    </ul>
                                </div>
                            </div>
                            <div className="flex items-center gap-2">
                                <span className="inline-block px-2 py-0.5 text-xs font-medium rounded-2xl text-white border bg-blue border-blue shrink-0">Open</span>
                            </div>
                        </div>
                    </div>

                    <div className="py-3 px-4 flex items-center justify-between gap-2">
                        <Link href={"#"} className="text-primary text-xs xl:text-sm font-medium leading-tight hover:underline duration-300 ease-in-out">View All Issues</Link>
                        <span className="text-xs xl:text-sm font-medium leading-tight text-grey99">3 high priority issues</span>
                    </div>
                </div>

                {/* Recent Activity */}
                <div className="border border-grey2b  rounded-xl lg:rounded-2xl overflow-hidden">
                    <div className="flex items-center justify-between gap-2.5 px-4 py-3 md:p-4 bg-secondary border-b border-grey2b">
                        <h3 className="text-sm xl:text-base font-medium leading-tight text-light">Recent Activity</h3>
                        <i className="icon icon-three-dots w-5 h-5 md:w-6 md:h-6 bg-grey99 cursor-pointer">...</i>
                    </div>

                    <div className="flex flex-col">
                        <div className="w-full py-3 px-4 flex items-stretch gap-4 group">
                            <div className="flex flex-col items-center">
                                <i className="icon icon-check-rounded bg-green w-4 h-4 shrink-0"></i>
                                <div className="w-px h-full bg-grey2b mt-1"></div>
                            </div>
                            <div className="flex flex-col gap-0.5">
                                <h3 className="text-sm xl:text-base leading-tight font-medium text-light mb-0!">Fieldwork Completed</h3>
                                <span className="text-xs xl:text-sm leading-tight text-grey99">IT Security Assessment</span>
                                <span className="text-xs xl:text-sm leading-tight text-grey99 group-last:hidden">Today, 2:30 PM</span>
                            </div>
                        </div>

                        <div className="w-full py-3 px-4 flex items-stretch gap-4 group">
                            <div className="flex flex-col items-center">
                                <i className="icon icon-check-rounded bg-green w-4 h-4 shrink-0"></i>
                                <div className="w-px h-full bg-grey2b mt-1 group-last:hidden"></div>
                            </div>
                            <div className="flex flex-col gap-0.5">
                                <h3 className="text-sm xl:text-base leading-tight font-medium text-light mb-0!">Issue Released</h3>
                                <span className="text-xs xl:text-sm leading-tight text-grey99">IT Security Assessment</span>
                                <span className="text-xs xl:text-sm leading-tight text-grey99">Today, 11:15 AM</span>
                            </div>
                        </div>

                        <div className="w-full py-3 px-4 flex items-stretch gap-4 group">
                            <div className="flex flex-col items-center">
                                <i className="w-4 h-4 shrink-0 rounded-full border border-grey99"></i>
                                <div className="w-px h-full bg-grey2b mt-1 group-last:hidden"></div>
                            </div>
                            <div className="flex flex-col gap-0.5">
                                <h3 className="text-sm xl:text-base leading-tight font-medium text-grey99 mb-0!">Draft Report Due</h3>
                                <span className="text-xs xl:text-sm leading-tight text-grey99">IT Security Assessment</span>
                                <span className="text-xs xl:text-sm leading-tight text-grey99">Tomorrow</span>
                            </div>
                        </div>

                        <div className="w-full py-3 px-4 flex items-stretch gap-4 group">
                            <div className="flex flex-col items-center">
                                <i className="w-4 h-4 shrink-0 rounded-full border border-grey99"></i>
                                <div className="w-px h-full bg-grey2b mt-1 group-last:hidden"></div>
                            </div>
                            <div className="flex flex-col gap-0.5">
                                <h3 className="text-sm xl:text-base leading-tight font-medium text-grey99 mb-0!">Planning Meeting</h3>
                                <span className="text-xs xl:text-sm leading-tight text-grey99">Q2 Audit Schedule</span>
                                <span className="text-xs xl:text-sm leading-tight text-grey99">Jan 25, 10:00 AM</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </>
    )
}

export default page