feat: always show add ward card on index (#1233)

Author: DasProffi

tasks/components/cards/AddCard.tsx

@@ -19,7 +19,7 @@ export const AddCard = ({
     <div
       onClick={onClick}
       className={clsx(
-        'card-md row justify-center items-center gap-x-1 text-gray-400 border-gray-400 h-full border-2 border-dashed hover:brightness-95',
+        'card-md row justify-center items-center gap-x-1 text-gray-400 border-gray-400 h-full border-2 border-dashed hover:brightness-95 min-h-28',
         { 'cursor-pointer': !!onClick },
         className
       )}

tasks/components/cards/EditCard.tsx

@@ -20,7 +20,7 @@ export const EditCard = ({
   return (
     <div
       className={clsx(
-        'card-md row w-full h-full gap-x-4 justify-between overflow-hidden',
+        'card-md row w-full h-full gap-x-4 justify-between overflow-hidden min-h-28',
         {
           'pr-2': !!onEditClick,
           'cursor-pointer': !!onClick,

tasks/components/layout/DashboardDisplay.tsx

@@ -86,24 +86,20 @@ export const DashboardDisplay = ({
       </LoadingAndErrorComponent>
       <LoadingAndErrorComponent isLoading={isLoadingWards}>
         <div className="col gap-y-1">
-          {wards && wards.length > 0 && (
-            <>
-              <span className="textstyle-title-normal">{translation.wards}</span>
-              <div className="grid @max-md:grid-cols-1 @xl:grid-cols-2 @4xl:grid-cols-3 gap-6">
-                {wards?.map(ward => (
-                  <WardCard
-                    key={ward.id}
-                    ward={ward}
-                    onClick={() => router.push(`/ward/${ward.id}`)}
-                  />
-                ))}
-                <AddCard
-                  text={translation.addWard}
-                  onClick={() => router.push(`/organizations/${organization?.id}`)}
-                />
-              </div>
-            </>
-          )}
+          <span className="textstyle-title-normal">{translation.wards}</span>
+          <div className="grid @max-md:grid-cols-1 @xl:grid-cols-2 @4xl:grid-cols-3 gap-6">
+            {wards && wards.length > 0 && wards?.map(ward => (
+              <WardCard
+                key={ward.id}
+                ward={ward}
+                onClick={() => router.push(`/ward/${ward.id}`)}
+              />
+            ))}
+            <AddCard
+              text={translation.addWard}
+              onClick={() => router.push(`/organizations/${organization?.id}`)}
+            />
+          </div>
         </div>
       </LoadingAndErrorComponent>
     </div>

tasks/components/layout/OrganizationDisplay.tsx

@@ -19,7 +19,7 @@ type OrganizationDisplayTranslation = {
 
 const defaultOrganizationDisplayTranslations: Record<Languages, OrganizationDisplayTranslation> = {
   en: {
-    addOrganization: 'Add new Organization',
+    addOrganization: 'Add Organization',
     yourOrganizations: 'Your Organizations'
   },
   de: {

tasks/components/layout/WardDisplay.tsx

@@ -53,35 +53,32 @@ export const WardDisplay = ({
         isLoading={isLoading}
         hasError={isError}
       >
-        {wards && (
-          <div className="grid @max-md:grid-cols-1 @xl:grid-cols-2 @4xl:grid-cols-3 gap-6">
-            {wards.map(ward => (
-              <WardCard
-                key={ward.id}
-                ward={ward}
-                onEditClick={() => context.updateContext({
-                  ...context.state,
-                  wardId: ward.id
-                })}
-                onClick={() => {
-                  router.push(`/ward/${ward.id}`).catch(console.error)
-                }}
-                className={clsx({
-                  'border-2 border-primary': selectedWardId === ward.id
-                })}
-              />
-            ))}
-            <AddCard
-              className="min-h-[76px]"
-              text={translation.addWard}
-              onClick={() => context.updateContext({
+        <div className="grid @max-md:grid-cols-1 @xl:grid-cols-2 @4xl:grid-cols-3 gap-6">
+          {wards && wards.map(ward => (
+            <WardCard
+              key={ward.id}
+              ward={ward}
+              onEditClick={() => context.updateContext({
                 ...context.state,
-                wardId: ''
+                wardId: ward.id
+              })}
+              onClick={() => {
+                router.push(`/ward/${ward.id}`).catch(console.error)
+              }}
+              className={clsx({
+                'border-2 border-primary': selectedWardId === ward.id
               })}
-              // TODO isSelected={!selectedWardId}
             />
-          </div>
-        )}
+          ))}
+          <AddCard
+            text={translation.addWard}
+            onClick={() => context.updateContext({
+              ...context.state,
+              wardId: ''
+            })}
+            // TODO isSelected={!selectedWardId}
+          />
+        </div>
       </LoadingAndErrorComponent>
     </div>
   )