fix: mobile responsiveness

Author: Praizee

app/layout.js

@@ -18,7 +18,7 @@ export const metadata = {
     },
   },
   openGraph: {
-    images: "/assets/svg/Logo.svg",
+    images: "/public/Logo.png",
   },
 };
 

assets/png/Logo.png

@@ -8,32 +8,32 @@ const DashboardIcon = () => {
       height="24"
       viewBox="0 0 24 24"
       fill="none"
-      className="hover:scale-110 animation duration-200"
     >
       <path
-        className="fill-[#0D062D] dark:fill-slate-200"
         d="M7.24 2H5.34C3.15 2 2 3.15 2 5.33V7.23C2 9.41 3.15 10.56 5.33 10.56H7.23C9.41 10.56 10.56 9.41 10.56 7.23V5.33C10.57 3.15 9.42 2 7.24 2Z"
-      ></path>
+        fill="#0D062D"
+      />
       <path
         opacity="0.4"
         d="M18.6699 2H16.7699C14.5899 2 13.4399 3.15 13.4399 5.33V7.23C13.4399 9.41 14.5899 10.56 16.7699 10.56H18.6699C20.8499 10.56 21.9999 9.41 21.9999 7.23V5.33C21.9999 3.15 20.8499 2 18.6699 2Z"
-        className="fill-[#0D062D] dark:fill-slate-500"
-      ></path>
+        fill="#0D062D"
+      />
       <path
         d="M18.6699 13.4301H16.7699C14.5899 13.4301 13.4399 14.5801 13.4399 16.7601V18.6601C13.4399 20.8401 14.5899 21.9901 16.7699 21.9901H18.6699C20.8499 21.9901 21.9999 20.8401 21.9999 18.6601V16.7601C21.9999 14.5801 20.8499 13.4301 18.6699 13.4301Z"
-        className="fill-[#0D062D] dark:fill-slate-200"
-      ></path>
+        fill="#0D062D"
+      />
       <path
         opacity="0.4"
         d="M7.24 13.4301H5.34C3.15 13.4301 2 14.5801 2 16.7601V18.6601C2 20.8501 3.15 22.0001 5.33 22.0001H7.23C9.41 22.0001 10.56 20.8501 10.56 18.6701V16.7701C10.57 14.5801 9.42 13.4301 7.24 13.4301Z"
-        className="fill-[#0D062D] dark:fill-slate-500"
-      ></path>
+        fill="#0D062D"
+      />
     </svg>
   );
 };
 
 export default DashboardIcon;
 
+// default
 {
   /* <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
   <path d="M7.24 2H5.34C3.15 2 2 3.15 2 5.33V7.23C2 9.41 3.15 10.56 5.33 10.56H7.23C9.41 10.56 10.56 9.41 10.56 7.23V5.33C10.57 3.15 9.42 2 7.24 2Z" fill="#0D062D"/>
@@ -42,3 +42,34 @@ export default DashboardIcon;
   <path opacity="0.4" d="M7.24 13.4301H5.34C3.15 13.4301 2 14.5801 2 16.7601V18.6601C2 20.8501 3.15 22.0001 5.33 22.0001H7.23C9.41 22.0001 10.56 20.8501 10.56 18.6701V16.7701C10.57 14.5801 9.42 13.4301 7.24 13.4301Z" fill="#0D062D"/>
 </svg> */
 }
+
+// styled (not displaying)
+{
+  /* <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      className="hover:scale-110 animation duration-200"
+    >
+      <path
+        className="fill-[#0D062D] dark:fill-slate-200"
+        d="M7.24 2H5.34C3.15 2 2 3.15 2 5.33V7.23C2 9.41 3.15 10.56 5.33 10.56H7.23C9.41 10.56 10.56 9.41 10.56 7.23V5.33C10.57 3.15 9.42 2 7.24 2Z"
+      ></path>
+      <path
+        opacity="0.4"
+        d="M18.6699 2H16.7699C14.5899 2 13.4399 3.15 13.4399 5.33V7.23C13.4399 9.41 14.5899 10.56 16.7699 10.56H18.6699C20.8499 10.56 21.9999 9.41 21.9999 7.23V5.33C21.9999 3.15 20.8499 2 18.6699 2Z"
+        className="fill-[#0D062D] dark:fill-slate-500"
+      ></path>
+      <path
+        d="M18.6699 13.4301H16.7699C14.5899 13.4301 13.4399 14.5801 13.4399 16.7601V18.6601C13.4399 20.8401 14.5899 21.9901 16.7699 21.9901H18.6699C20.8499 21.9901 21.9999 20.8401 21.9999 18.6601V16.7601C21.9999 14.5801 20.8499 13.4301 18.6699 13.4301Z"
+        className="fill-[#0D062D] dark:fill-slate-200"
+      ></path>
+      <path
+        opacity="0.4"
+        d="M7.24 13.4301H5.34C3.15 13.4301 2 14.5801 2 16.7601V18.6601C2 20.8501 3.15 22.0001 5.33 22.0001H7.23C9.41 22.0001 10.56 20.8501 10.56 18.6701V16.7701C10.57 14.5801 9.42 13.4301 7.24 13.4301Z"
+        className="fill-[#0D062D] dark:fill-slate-500"
+      ></path>
+    </svg> */
+}

assets/svg/DashboardIcon.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+const DownloadIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+    >
+      <path
+        d="M6 11.8334C5.93333 11.8334 5.87333 11.82 5.80667 11.7934C5.62 11.72 5.5 11.5334 5.5 11.3334V7.33337C5.5 7.06004 5.72667 6.83337 6 6.83337C6.27333 6.83337 6.5 7.06004 6.5 7.33337V10.1267L6.98 9.64671C7.17333 9.45337 7.49333 9.45337 7.68667 9.64671C7.88 9.84004 7.88 10.16 7.68667 10.3534L6.35333 11.6867C6.26 11.78 6.12667 11.8334 6 11.8334Z"
+        fill="#292D32"
+      />
+      <path
+        d="M5.99964 11.8334C5.87297 11.8334 5.7463 11.7867 5.6463 11.6867L4.31297 10.3534C4.11964 10.16 4.11964 9.84004 4.31297 9.64671C4.5063 9.45338 4.8263 9.45338 5.01964 9.64671L6.35297 10.98C6.5463 11.1734 6.5463 11.4934 6.35297 11.6867C6.25297 11.7867 6.1263 11.8334 5.99964 11.8334Z"
+        fill="#292D32"
+      />
+      <path
+        d="M9.99967 15.1667H5.99967C2.37967 15.1667 0.833008 13.62 0.833008 10V6.00004C0.833008 2.38004 2.37967 0.833374 5.99967 0.833374H9.33301C9.60634 0.833374 9.83301 1.06004 9.83301 1.33337C9.83301 1.60671 9.60634 1.83337 9.33301 1.83337H5.99967C2.92634 1.83337 1.83301 2.92671 1.83301 6.00004V10C1.83301 13.0734 2.92634 14.1667 5.99967 14.1667H9.99967C13.073 14.1667 14.1663 13.0734 14.1663 10V6.66671C14.1663 6.39337 14.393 6.16671 14.6663 6.16671C14.9397 6.16671 15.1663 6.39337 15.1663 6.66671V10C15.1663 13.62 13.6197 15.1667 9.99967 15.1667Z"
+        fill="#292D32"
+      />
+      <path
+        d="M14.6663 7.1667H11.9997C9.71967 7.1667 8.83301 6.28003 8.83301 4.00003V1.33337C8.83301 1.13337 8.95301 0.9467 9.13967 0.873366C9.32634 0.793366 9.53967 0.840033 9.68634 0.980033L15.0197 6.31337C15.1597 6.45337 15.2063 6.67337 15.1263 6.86003C15.0463 7.0467 14.8663 7.1667 14.6663 7.1667ZM9.83301 2.54003V4.00003C9.83301 5.72003 10.2797 6.1667 11.9997 6.1667H13.4597L9.83301 2.54003Z"
+        fill="#292D32"
+      />
+    </svg>
+  );
+};
+
+export default DownloadIcon;

assets/svg/DownloadIcon.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Link from "next/link";
-import { Flex, ProgressBar, Text } from "@tremor/react";
+import { ProgressBar } from "@tremor/react";
 
 import { CardTitle, CardHeader, CardContent, Card } from "@/components/ui/card";
 import OrderIcon from "@/assets/svg/OrderIcon";
@@ -14,34 +14,52 @@ import SalesGraph from "@/assets/svg/SalesGraph";
 import IncomeIcon from "@/assets/svg/IncomeIcon";
 import IncomeGraph from "@/assets/svg/IncomeGraph";
 import CustomBarChart from "../others/CustomBarChart";
-import { BarChartGraph } from "../others/BarChartGraph";
 import OrdersTable from "../others/OrdersTable";
 
 const Dashboard = () => {
   return (
-    <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-6 z-10">
+    <main className="fle flex-1 flex-co gap-4 p-4 md:gap-8 md:p-6 z-10">
       <div className="space-y-6">
         {/* charts */}
-        <div className="lg:flex gap-6">
+        <div className="lg:flex gap-6 space-y-6 lg:space-y-0">
           <Card className="flex flex-1 flex-col ">
             {/* max-w-[50rem] */}
             <CardHeader>
-              <CardTitle>Sales Trends</CardTitle>
+              <CardTitle className="text-lg font-semibold text-[#26282C] dark:text-gray-50 flex justify-between">
+                Sales Trends
+                <span className="space-x-2 text-sm font-medium">
+                  <label for="period">Sort by:</label>
+                  <select
+                    name="period"
+                    id="period"
+                    className="bg-transparent  border border-[#E1DFDF] dark:border-gray-100 rounded-3xl px-3 py-1 text-sm font-medium"
+                  >
+                    <option value="weekly" className="dark:bg-gray-800">
+                      Weekly
+                    </option>
+                    <option value="monthly" className="dark:bg-gray-800">
+                      Monthly
+                    </option>
+                    <option value="yearly" className="dark:bg-gray-800">
+                      Yearly
+                    </option>
+                  </select>
+                </span>
+              </CardTitle>
             </CardHeader>
             <CardContent>
-              {/* <BarChartGraph className="aspect-[4/3]" /> */}
               <CustomBarChart />
             </CardContent>
           </Card>
 
-          <div className="flex-none grid md:grid-cols-2 gap-6">
+          <div className="flex-none lg:mt-0 grid grid-cols-2 gap-6">
             {/* order */}
             <div className="space-y-2 max-w-[16rem] bg-white dark:bg-black/50 border border-[#EDF2F7] dark:border-[#EDF2F7]/50 p-4 rounded-[0.875rem]">
               <span className="flex gap-4 justify-between">
                 <OrderIcon className="w-5 h-5" />
                 <OrderGraph />
               </span>
-              <p className="text-[#898989] dark:text-gray-20 font-medium text-lg">
+              <p className="text-[#898989] dark:text-gray-200 font-medium text-lg">
                 Total Order
               </p>
               <p className="text-[#3A3F51] dark:text-gray-50 font-semibold text-2xl">
@@ -61,7 +79,7 @@ const Dashboard = () => {
                 <RefundIcon className="w-5 h-5" />
                 <RefundGraph />
               </span>
-              <p className="text-[#898989] dark:text-gray-20 font-medium text-lg">
+              <p className="text-[#898989] dark:text-gray-200 font-medium text-lg">
                 Total Refund
               </p>
               <p className="text-[#3A3F51] dark:text-gray-50 font-semibold text-2xl">
@@ -81,7 +99,7 @@ const Dashboard = () => {
                 <SalesIcon className="w-5 h-5" />
                 <SalesGraph />
               </span>
-              <p className="text-[#898989] dark:text-gray-20 font-medium text-lg">
+              <p className="text-[#898989] dark:text-gray-200 font-medium text-lg">
                 Average Sales
               </p>
               <p className="text-[#3A3F51] dark:text-gray-50 font-semibold text-2xl">
@@ -101,7 +119,7 @@ const Dashboard = () => {
                 <IncomeIcon className="w-5 h-5" />
                 <IncomeGraph />
               </span>
-              <p className="text-[#898989] dark:text-gray-20 font-medium text-lg">
+              <p className="text-[#898989] dark:text-gray-200 font-medium text-lg">
                 Total Income
               </p>
               <p className="text-[#3A3F51] dark:text-gray-50 font-semibold text-2xl">
@@ -117,7 +135,7 @@ const Dashboard = () => {
           </div>
         </div>
 
-        <div className="lg:flex gap-6">
+        <div className="lg:flex gap-6 space-y-6 lg:space-y-0">
           <Card className="flex flex-1 flex-col">
             {/* w-[50rem] */}
             <CardHeader>
@@ -211,7 +229,7 @@ const Dashboard = () => {
       </div>
 
       {/* footer */}
-      <div className="">
+      <div className="pt-4">
         <p className="text-center text-[#26282C] dark:text-gray-50">
           Geegpay ©{new Date().getFullYear()} Created by{" "}
           <Link