fix: qa sites overview

src/routes/(console)/project-[project]/sites/+page.svelte

@@ -53,6 +53,8 @@
             }
         });
     });
+
+    $: console.log(data.siteList);
 </script>
 
 <Container>

src/routes/(console)/project-[project]/sites/grid.svelte

@@ -4,14 +4,13 @@
     import { timeFromNow } from '$lib/helpers/date';
     import type { Models } from '@appwrite.io/console';
     import { Card, Icon, Layout, Popover, Tooltip, Typography } from '@appwrite.io/pink-svelte';
-    import { getFrameworkIcon } from './store';
+    import { generateSiteDeploymentDesc, getFrameworkIcon } from './store';
     import { SvgIcon } from '$lib/components';
     import { app } from '$lib/stores/app';
     import { getApiEndpoint } from '$lib/stores/sdk';
     import AddCollaboratorModal from './(components)/addCollaboratorModal.svelte';
     import SitesActionMenu from './sitesActionMenu.svelte';
     import { capitalize } from '$lib/helpers/string';
-    import { timer } from '$lib/helpers/timeConversion';
     import { IconExclamation } from '@appwrite.io/pink-icons-svelte';
     import { Link } from '$lib/elements';
 
@@ -37,14 +36,6 @@
         const endpoint = getApiEndpoint();
         return endpoint + `/storage/buckets/screenshots/files/${fileId}/view?project=console`;
     }
-
-    function generateDesc(site: Models.Site) {
-        if (site.latestDeploymentStatus === 'building') {
-            return `Deployment building ${timer(site.latestDeploymentCreatedAt)}`;
-        } else {
-            return `Deployed ${timeFromNow(site.deploymentCreatedAt)}`;
-        }
-    }
 </script>
 
 <Layout.Grid columns={3} columnsXS={1} columnsXXS={1}>
@@ -54,7 +45,7 @@
             padding="xxs">
             <Card.Media
                 title={site.name}
-                description={generateDesc(site)}
+                description={generateSiteDeploymentDesc(site)}
                 src={getScreenshot($app.themeInUse, site)}
                 alt={site.name}
                 avatar>

src/routes/(console)/project-[project]/sites/store.ts

@@ -1,3 +1,5 @@
+import { timeFromNow } from '$lib/helpers/date';
+import { timer } from '$lib/helpers/timeConversion';
 import type { Column } from '$lib/helpers/types';
 import { Framework, type Models } from '@appwrite.io/console';
 
@@ -9,8 +11,8 @@ export function getEnumFromModel(model: Models.Framework): Framework {
 
 export const columns = writable<Column[]>([
     { id: 'name', title: 'Name', type: 'string', width: { min: 100 } },
-    // { id: 'domains', title: 'Domains', type: 'string', show: true, width: 120 },
-    { id: '$updatedAt', title: 'Updated', type: 'datetime', width: { min: 120 } },
+    // { id: 'domains', title: 'Domains', type: 'string' },
+    { id: 'deployed', title: 'Deployed', type: 'datetime', width: { min: 120 } },
     { id: '$createdAt', title: 'Created', type: 'datetime', width: { min: 120 } }
 ]);
 
@@ -49,3 +51,11 @@ export function getFrameworkIcon(framework: string) {
             return 'empty';
     }
 }
+
+export function generateSiteDeploymentDesc(site: Models.Site) {
+    if (site.latestDeploymentStatus === 'building') {
+        return `Deployment building ${timer(site.latestDeploymentCreatedAt)}`;
+    } else {
+        return `Deployed ${timeFromNow(site.deploymentCreatedAt)}`;
+    }
+}

src/routes/(console)/project-[project]/sites/table.svelte

@@ -1,13 +1,18 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { toLocaleDateTime } from '$lib/helpers/date';
-    import { Avatar, Layout, Table } from '@appwrite.io/pink-svelte';
+    import { timeFromNow, toLocaleDateTime } from '$lib/helpers/date';
+    import { Avatar, Icon, Layout, Popover, Table, Typography } from '@appwrite.io/pink-svelte';
     import { columns, getFrameworkIcon } from './store';
     import type { Models } from '@appwrite.io/console';
     import SitesActionMenu from './sitesActionMenu.svelte';
     import AddCollaboratorModal from './(components)/addCollaboratorModal.svelte';
     import { SvgIcon } from '$lib/components';
+    import { capitalize } from '$lib/helpers/string';
+    import { IconExclamation } from '@appwrite.io/pink-icons-svelte';
+    import { Link } from '$lib/elements';
+    import { timer } from '$lib/helpers/timeConversion';
+    import DualTimeView from '$lib/components/dualTimeView.svelte';
 
     export let siteList: Models.SiteList;
 
@@ -37,8 +42,41 @@
                             </Avatar>
                             {site.name}
                         </Layout.Stack>
-                    {:else if column.id === '$updatedAt'}
-                        {toLocaleDateTime(site[column.id])}
+                    {:else if column.id === 'domains'}
+                        {site[column.id]}
+                    {:else if column.id === 'deployed'}
+                        {#if site.latestDeploymentStatus === 'building'}
+                            Building {timer(site.latestDeploymentCreatedAt)}
+                        {:else if site.latestDeploymentStatus === 'failed'}
+                            <Popover let:toggle portal>
+                                <button on:mouseenter={(e) => toggle(e)}>
+                                    <Layout.Stack
+                                        direction="row"
+                                        alignItems="center"
+                                        gap="xxs"
+                                        inline>
+                                        {capitalize(timeFromNow(site.deploymentCreatedAt))}
+
+                                        <Icon
+                                            icon={IconExclamation}
+                                            size="s"
+                                            color="--bgcolor-warning" />
+                                    </Layout.Stack>
+                                </button>
+                                <svelte:fragment slot="tooltip">
+                                    <Typography.Text variant="m-400">
+                                        Last deployment failed {timeFromNow(
+                                            site.latestDeploymentCreatedAt
+                                        )}. <Link
+                                            href={`${base}/project-${$page.params.project}/sites/site-${site.$id}/deployments/deployment-${site.latestDeploymentId}`}>
+                                            View logs
+                                        </Link>
+                                    </Typography.Text>
+                                </svelte:fragment>
+                            </Popover>
+                        {:else}
+                            <DualTimeView time={site.latestDeploymentCreatedAt} />
+                        {/if}
                     {:else if column.id === '$createdAt'}
                         {toLocaleDateTime(site[column.id])}
                     {/if}