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

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

@@ -1,25 +1,38 @@
 // 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">
-          {/* {t('text-7day-subscription')} */}
-          You have a 7-day free subscription.
+        {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>
-        <div className='p-2 bg-green-50'>
-
-        <p className='text-green-500'>5 days left</p>
+        )}
+        {!(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')} */}
+          {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 */}
+      <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"

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="flex gap-7">
-      <div className="bg-white w-1/3 p-8 rounded-xl">
+      <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 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} />