Merge pull request #51 from wilsuriel03/feature/v1-launch-preparation

Enhance Empty State Handling and Streamline Action Buttons
EqualifyEverything · Aug 12, 2024 · 8df5c92 · 8df5c92
2 parents 41522a9 + 8a7744c
commit 8df5c92
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 15 deletions.
diff --git a/src/routes/protected/properties/properties.tsx b/src/routes/protected/properties/properties.tsx
@@ -84,15 +84,33 @@ const Properties = () => {
         >
           Properties
         </h1>
-        <Link
-          to="/properties/add"
-          className="inline-flex h-9 items-center justify-end place-self-end whitespace-nowrap rounded-md bg-[#005031] px-4 py-3 text-base text-white shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#1D781D] focus-visible:ring-offset-2 max-sm:w-fit max-sm:px-3 max-sm:py-2.5"
-        >
-          Add Property
-        </Link>
+        {properties.length > 0 && (
+          <Link
+            to="/properties/add"
+            className="inline-flex h-9 items-center justify-end place-self-end whitespace-nowrap rounded-md bg-[#005031] px-4 py-3 text-base text-white shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#1D781D] focus-visible:ring-offset-2 max-sm:w-fit max-sm:px-3 max-sm:py-2.5"
+          >
+            Add Property
+          </Link>
+        )}
       </div>
       {isLoading ? (
         <LoadingProperties />
+      ) : properties.length === 0 ? (
+        <div className="mt-7 text-center">
+          <h2 className="text-xl font-semibold text-gray-700">
+            No Properties Added
+          </h2>
+          <p className="mt-2 text-gray-600">
+            You haven't added any properties yet. Get started by adding your
+            first property and monitor its accessibility status.
+          </p>
+          <Link
+            to="/properties/add"
+            className="mt-4 inline-flex h-9 items-center justify-center whitespace-nowrap rounded-md bg-[#005031] px-4 py-2 text-sm text-white shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#1D781D] focus-visible:ring-offset-2"
+          >
+            Add Your First Property
+          </Link>
+        </div>
       ) : (
         <section
           aria-labelledby="properties-list-heading"

diff --git a/src/routes/protected/reports/reports.tsx b/src/routes/protected/reports/reports.tsx
@@ -35,9 +35,9 @@ const ReportCard: React.FC<Report> = ({
         <p className="mt-2 text-sm text-gray-600">
           Active Issues: {activeIssues}
         </p>
-        <p className="text-sm mt-1 text-gray-500">
+        <p className="mt-1 text-sm text-gray-500">
           Most Common:
-          <div className="overflow-hidden overflow-ellipsis h-16">
+          <div className="h-16 overflow-hidden overflow-ellipsis">
             <p title={mostCommonIssue}>{mostCommonIssue}</p>
           </div>
         </p>
@@ -82,13 +82,15 @@ const Reports = () => {
         >
           Reports
         </h1>
-        <Link
-          to="/reports/create"
-          className="inline-flex h-9 items-center justify-end place-self-end whitespace-nowrap  rounded-md bg-[#005031] px-4 py-3 text-base text-white shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#1D781D] focus-visible:ring-offset-2 max-sm:w-fit max-sm:px-3 max-sm:py-2.5"
-          aria-label="Create a new report"
-        >
-          Create Report
-        </Link>
+        {reports.length > 0 && (
+          <Link
+            to="/reports/create"
+            className="inline-flex h-9 items-center justify-end place-self-end whitespace-nowrap  rounded-md bg-[#005031] px-4 py-3 text-base text-white shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#1D781D] focus-visible:ring-offset-2 max-sm:w-fit max-sm:px-3 max-sm:py-2.5"
+            aria-label="Create a new report"
+          >
+            Create Report
+          </Link>
+        )}
       </div>
       {isLoading ? (
         <section
@@ -99,6 +101,23 @@ const Reports = () => {
             <LoadingReport key={index} />
           ))}
         </section>
+      ) : reports.length === 0 ? (
+        <div className="mt-7 text-center">
+          <h2 className="text-xl font-semibold text-gray-700">
+            No Reports Yet
+          </h2>
+          <p className="mt-2 text-gray-600">
+            It looks like you haven't created any reports yet. Start your
+            journey towards better accessibility by creating your first report
+            today.
+          </p>
+          <Link
+            to="/reports/create"
+            className="mt-4 inline-flex h-9 items-center justify-center whitespace-nowrap rounded-md bg-[#005031] px-4 py-2 text-sm text-white shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#1D781D] focus-visible:ring-offset-2"
+          >
+            Create Your First Report
+          </Link>
+        </div>
       ) : (
         <section
           aria-labelledby="reports-list-heading"