feat(our-work): add our work page with table, filters and query

app/Root/config/routes.ts

@@ -81,9 +81,22 @@ const editUser: RouteConfig = {
 const ourWorks: RouteConfig = {
     index: true,
     path: '/our-works',
-    load: () => import('#views/OurWorks'),
+    load: () => import('#views/OurWorks/WorksList'),
     visibility: 'is-authenticated',
 };
+
+const createWorks: RouteConfig = {
+    path: '/our-works/new',
+    load: () => import('#views/OurWorks/WorksForm'),
+    visibility: 'is-authenticated',
+};
+
+const editWorks: RouteConfig = {
+    path: '/our-works/:id/edit',
+    load: () => import('#views/OurWorks/WorksForm'),
+    visibility: 'is-authenticated',
+};
+
 const preparedness: RouteConfig = {
     index: true,
     path: '/preparedness',
@@ -128,6 +141,8 @@ const routes = {
     createUser,
     editUser,
     ourWorks,
+    createWorks,
+    editWorks,
     preparedness,
     dataAndReports,
     documents,

app/components/EmbedPreview/index.tsx

@@ -0,0 +1,54 @@
+import { useMemo } from 'react';
+import { Container } from '@ifrc-go/ui';
+import {
+    _cs,
+    isDefined,
+    isNotDefined,
+} from '@togglecorp/fujs';
+
+import useDebouncedValue from '#hooks/useDebouncedValue';
+import { getSafeUrl } from '#utils/common';
+
+import styles from './styles.module.css';
+
+export interface Props {
+    className?: string;
+    url: string | undefined | null;
+    title?: string;
+    placeholder?: string;
+}
+
+function EmbedPreview({
+    className,
+    url,
+    title = 'Embed Preview',
+    placeholder = 'Enter a valid embed link to see a live preview',
+}: Props) {
+    const debouncedUrl = useDebouncedValue(url, 500);
+    const previewUrl = useMemo(() => getSafeUrl(debouncedUrl), [debouncedUrl]);
+
+    return (
+        <Container
+            className={_cs(styles.previewSection, className)}
+            heading={title}
+            withHeaderBorder
+            withBackground
+            empty={isNotDefined(previewUrl)}
+            emptyMessage={placeholder}
+            withoutMessageIcon
+        >
+            {isDefined(previewUrl) && (
+                <iframe
+                    src={previewUrl}
+                    title={title}
+                    className={styles.previewIframe}
+                    sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+                    referrerPolicy="no-referrer"
+                    allowFullScreen
+                />
+            )}
+        </Container>
+    );
+}
+
+export default EmbedPreview;

app/components/EmbedPreview/styles.module.css

@@ -0,0 +1,13 @@
+.preview-section {
+    position: sticky;
+    top: var(--go-ui-spacing-md, 1rem);
+    height: calc(100vh - 12rem);
+    min-height: 30rem;
+    overflow: hidden;
+}
+
+.preview-iframe {
+    border: none;
+    width: 100%;
+    height: 100%;
+}

app/components/StatusCell/index.tsx

@@ -0,0 +1,23 @@
+import { ListView } from '@ifrc-go/ui';
+
+export interface Props {
+    isActive: boolean;
+}
+
+function StatusCell({ isActive }: Props) {
+    return (
+        <ListView
+            layout="inline"
+            spacing="sm"
+        >
+            <span
+                className={isActive
+                    ? 'status-indicator-active'
+                    : 'status-indicator-inactive'}
+            />
+            <span>{isActive ? 'Active' : 'Inactive'}</span>
+        </ListView>
+    );
+}
+
+export default StatusCell;

app/index.css

@@ -36,4 +36,21 @@ p {
 a {
     text-decoration: none;
     color: inherit;
+}
+
+.status-indicator-active,
+.status-indicator-inactive {
+    display: inline-block;
+    border-radius: 50%;
+    width: var(--go-ui-spacing-sm);
+    height: var(--go-ui-spacing-sm);
+}
+
+
+.status-indicator-active {
+    background-color: var(--go-ui-color-positive);
+}
+
+.status-indicator-inactive {
+    background-color: var(--go-ui-color-negative);
 }

app/utils/common.ts

@@ -1,3 +1,4 @@
+import { isFalsyString } from '@togglecorp/fujs';
 import { nonFieldError } from '@togglecorp/toggle-form';
 
 import type { AdminAreaLevel } from '#generated/types/graphql';
@@ -63,3 +64,26 @@ export function transformToFormError(
 export type REGION_LEVEL = AdminAreaLevel.Region;
 export type ZONE_LEVEL = AdminAreaLevel.Zone;
 export type WOREDA_LEVEL = AdminAreaLevel.Woreda;
+
+const SAFE_URL_PROTOCOLS = ['http:', 'https:'];
+
+export function getSafeUrl(value: string | null | undefined): string | undefined {
+    if (isFalsyString(value)) {
+        return undefined;
+    }
+    try {
+        const parsed = new URL(value);
+        return SAFE_URL_PROTOCOLS.includes(parsed.protocol) ? parsed.href : undefined;
+    } catch {
+        return undefined;
+    }
+}
+
+export function safeUrlCondition(value: string | null | undefined) {
+    if (isFalsyString(value)) {
+        return undefined;
+    }
+    return getSafeUrl(value)
+        ? undefined
+        : 'Enter a valid URL starting with http:// or https://';
+}