feat: enhance subscription components with active subscription status and improved layout

src/components/dashboard/widgets/subscription/subscription.tsx

@@ -1,32 +1,45 @@
 // components/Subscription.tsx
+import { useGetActiveSubscription } from '@/data/subscription';
 import Image from 'next/image';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 const Subscription: React.FC = () => {
   const { t } = useTranslation('common'); // Specify the namespace if using multiple
+  const { data: activeData, isLoading: isActiveLoading } =
+    useGetActiveSubscription();
+  console.log(activeData);
+
   return (
     <div className="col-span-full rounded-lg bg-light p-6 md:p-7">
       <div className="mb-5 flex items-center justify-between md:mb-7">
-        <h3 className="before:content-'' relative mt-1 bg-light text-lg font-semibold text-heading before:absolute before:-top-px before:h-7 before:w-1 before:rounded-tr-md before:rounded-br-md before:bg-accent ltr:before:-left-6 rtl:before:-right-6 md:before:-top-0.5 md:ltr:before:-left-7 md:rtl:before:-right-7 lg:before:h-8">
+        {activeData?.status === 'no_subscription' && (
+   <h3 className=" bg-red-100 w-full p-3 text-red-700 -mt-3 relative text-lg rounded-lg">
+              You dont have active subscription
+            </h3>
+        )}
+        {!(activeData?.status === 'no_subscription') && <h3 className="before:content-'' relative mt-1 bg-light text-lg font-semibold text-heading before:absolute before:-top-px before:h-7 before:w-1 before:rounded-tr-md before:rounded-br-md before:bg-accent ltr:before:-left-6 rtl:before:-right-6 md:before:-top-0.5 md:ltr:before:-left-7 md:rtl:before:-right-7 lg:before:h-8">
           {/* {t('text-7day-subscription')} */}
-          You have a 7-day free subscription.
-        </h3>
-        <div className='p-2 bg-green-50'>
-
-        <p className='text-green-500'>5 days left</p>
-        </div>
+          {activeData?.subscription?.title}
+        </h3>}
+        {activeData?.days_left && (
+          <div className="p-2 bg-green-50">
+            <p className="text-green-500">{activeData?.days_left} days left</p>
+          </div>
+        )}
       </div>
 
       {/* <div className="grid w-full grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-4"> */}
-        <div className="relative w-full max-w-[1500px] h-52"> {/* Use relative positioning for next/image with fill */}
-          <Image
-            src="/image/subscriptions/Frame 1000005697.webp"
-            alt="subscription plan"
-            layout="fill"
-            objectFit="scale-down"
-          />
-        </div>
+      <div className="relative w-full max-w-[1500px] h-52">
+        {' '}
+        {/* Use relative positioning for next/image with fill */}
+        <Image
+          src="/image/subscriptions/Frame 1000005697.webp"
+          alt="subscription plan"
+          layout="fill"
+          objectFit="scale-down"
+        />
+      </div>
       {/* </div> */}
     </div>
   );

src/pages/subscriptions/active-section.tsx

@@ -3,6 +3,7 @@ import { useGetActiveSubscription } from '@/data/subscription';
 import { FaStar } from 'react-icons/fa';
 import Image from 'next/image';
 import background from '../../../public/image/Frame 1000005757.webp';
+import { RiErrorWarningFill } from 'react-icons/ri';
 
 const ActiveSubscriptionSection: React.FC = () => {
   const { data: activeData, isLoading: isActiveLoading } =
@@ -25,9 +26,19 @@ const ActiveSubscriptionSection: React.FC = () => {
     return <div>Loading...</div>;
   }
 
+  if (activeData?.status === 'no_subscription') {
+    return (
+      <div className="bg-white w-full p-6 rounded-xl">
+        <div className=" text-[#BB1F17] flex items-center gap-2">
+          <RiErrorWarningFill size={28} />
+          <p>You dont have active subscription</p>
+        </div>
+      </div>
+    );
+  }
   return (
-    <div className="flex gap-7">
-      <div className="bg-white w-1/3 p-8 rounded-xl">
+    <div className="flex gap-7 flex-col lg:flex-row">
+      <div className="bg-white w-full p-8 rounded-xl lg:w-1/3">
         <div className="mb-8 border p-2 rounded-lg flex items-center gap-2 max-w-fit">
           <FaStar
             size={20}
@@ -43,7 +54,7 @@ const ActiveSubscriptionSection: React.FC = () => {
           <Image src={background} alt="subscription type" />
         </div>
       </div>
-      <div className="bg-white w-4/6 p-8 rounded-xl gap-y-6 gap-x-8">
+      <div className="bg-white w-full p-8 rounded-xl gap-y-6 gap-x-8 lg:w-8/12">
         <div className="flex flex-col border w-full h-full rounded-lg justify-between p-4 text-sm font-light">
           <div className="flex justify-between">
             <p className="text-gray-500">Start Your Plan</p>

src/pages/subscriptions/plans-section.tsx

@@ -66,12 +66,12 @@ const PlansSection: React.FC = () => {
             Change your current workspace plan
           </p>
         </div>
-        <div className="bg-[rgba(31,41,55,0.05)] flex items-center self-end p-2 rounded-lg gap-2">
+        <div className="bg-[rgba(31,41,55,0.05)] items-center self-end p-2 rounded-lg gap-2 hidden lg:flex">
           <p>Support</p>
           <RiHeadphoneLine />
         </div>
       </div>
-      <div className="grid grid-cols-4 gap-8">
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-4">
         {allSubscriptions?.results.map((item) => (
           <div className="border p-6 rounded-lg" key={item.id}>
             <div className="border bg-[#F3F4F6] p-2 rounded-xl flex gap-10 items-end mb-6">
@@ -109,7 +109,7 @@ const PlansSection: React.FC = () => {
         <h1 className="text-2xl font-medium mb-4">
           Features of All Subscriptions
         </h1>
-        <div className="border p-8 grid grid-cols-2 gap-8 text-[#666666] text-sm rounded-lg">
+        <div className="border p-8 grid grid-cols-1 gap-8 text-[#666666] text-sm rounded-lg lg:grid-cols-2">
           <div className="flex items-start gap-2">
             <div className="mt-1">
               <FaRegCheckCircle color="#1DCE1D" size={15} />