Merge branch 'develop' into migrate-to-aws

.github/workflows/sahil-website.yml

@@ -42,6 +42,21 @@ on:
         description: DynamoDB table for State lock
         default: "sahil-terraform-table-locks"
         type: string
+  push:
+    branches: ["develop", "main"]
+
+env:
+  PATH_TO_DOCKERFILE: infra/docker/Dockerfile.website
+  DOCKER_BUILD_DIR: .
+  IMAGE_TAG: sahil-website
+  LIFECYCLE_POLICY_FILE: policy.json
+  BACKEND_S3_BUCKET: sahil-terraform-state-bucket
+  BACKEND_IAM_ROLE: workload-assumable-role
+  GITHUB_IAM_ROLE: github-actions-role
+  AWS_ACCOUNT_ID: 060795911441
+  AWS_REGION: eu-west-1
+  BACKEND_DYNAMODB_TABLE: sahil-terraform-table-locks
+
 
 # concurrency required to avoid terraform lock contention during ECR provisioning
 concurrency: ci-${{ github.repository }}-website-docker-pipeline

apps/admin/src/Layout/layout.tsx

@@ -1,19 +1,33 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode, useEffect } from "react";
 import logo from "../../public/logo-alt.svg";
 import { useRouter } from "next/router";
 import { signOut, useSession } from "next-auth/react";
-import { Navbar } from "ui";
-type LayoutProps = {
-  children: ReactNode;
-};
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+import { UserProvider } from '@sahil/features/auth/UserContext';
+import { useGetUserById } from "@sahil/lib/hooks/users";
+import { SplashScreen, Navbar, ContentLayout } from "ui";
+
 import {
-  HiOutlineUsers,
-  HiOutlineQueueList,
-  HiOutlineMap,
+  HiOutlineBriefcase,
+  HiOutlineCube,
+  HiOutlineTruck,
+  HiOutlineBuildingStorefront,
+  HiMiniArrowLeftCircle, HiArrowPath,
   HiOutlineIdentification,
+  HiOutlineMap,
+  HiOutlineUsers,
   HiOutlineBuildingOffice2,
+  HiOutlineQueueList
 } from "react-icons/hi2";
 
+import { Button } from "ui";
+
+type LayoutProps = {
+  children: ReactNode;
+};
+
+
 const links = [
   {
     name: "Users",
@@ -42,26 +56,77 @@ const links = [
   },
 ];
 
+
 export default function Layout({ children, ...props }: LayoutProps) {
   const router = useRouter();
   const { data: session } = useSession();
+  const isAuthRoute = router.pathname.startsWith('/auth');
+
+  const { data: currentUser, loading: userLoading } = useGetUserById(session?.user?.id);
+  useEffect(() => {
+    NProgress.configure({ 
+      showSpinner: false,
+      trickleSpeed: 200,
+      minimum: 0.08
+    });
+
+    const handleStart = () => {
+      NProgress.start();
+    };
+
+    const handleStop = () => {
+      NProgress.done();
+    };
+
+    router.events.on('routeChangeStart', handleStart);
+    router.events.on('routeChangeComplete', handleStop);
+    router.events.on('routeChangeError', handleStop);
+
+    return () => {
+      router.events.off('routeChangeStart', handleStart);
+      router.events.off('routeChangeComplete', handleStop);
+      router.events.off('routeChangeError', handleStop);
+    };
+  }, [router]);
 
   const onSignOut = async () => {
     await signOut();
     router.push("/auth/signin");
   };
+
+  const handleBack = () => {
+    router.back();
+  };
+
+  const handleRefresh = () => {
+    router.replace(router.asPath);
+  };
+
+  if (!session && !isAuthRoute) {
+    return <SplashScreen />;
+  }
+
   return (
-    <>
-      {session?.user && (
+    <UserProvider session={session}>
         <Navbar
           links={links}
           logo={logo}
           header="Admin"
           onSignOut={onSignOut}
-          user={session?.user}
+          user={{
+            ...session?.user,
+            ...currentUser
+          }}
         />
-      )}
-      <main className={session?.user ? "p-4" : "p-0"}>{children}</main>
-    </>
+      <ContentLayout
+        isAuthRoute={isAuthRoute}
+        router={router}
+        handleBack={handleBack}
+        handleRefresh={handleRefresh}
+        bottomLinks={links}
+      >
+        {children}
+      </ContentLayout>
+    </UserProvider>
   );
 }

apps/admin/src/pages/agents/[agentId].tsx

@@ -0,0 +1,3 @@
+export default function AgentPage() {
+  return <div>Agent</div>;
+}

apps/admin/src/pages/agents/index.tsx

@@ -1,9 +1,25 @@
+import { useRouter } from "next/router";
+import { HiPlus, HiOutlineDocumentMagnifyingGlass } from "react-icons/hi2";
+import { ListAgents } from "@sahil/features/Agents/ListAgents";
+
 export default function Agents() {
+  const router = useRouter();
   return (
-    <section className="space-y-2">
-      <div>
-        <h1>Agents Page</h1>
+    <section className="space-y-4">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-xl">Agent</h1>
+        </div>
+        <div className="flex gap-2">
+          <button
+            className="btn btn-sm btn-primary"
+            onClick={() => router.push("/orders/new/order_details")}
+          >
+            <HiPlus /> New Agent
+          </button>
+        </div>
       </div>
+      <ListAgents />
     </section>
   );
 }

apps/admin/src/pages/clients/[clientId].tsx

@@ -0,0 +1,100 @@
+import { useRouter } from "next/router";
+import { useFetchSupplierByPK } from "@sahil/lib/hooks/suppliers";
+import { useFetchBusinessByPK } from "@sahil/lib/hooks/businesses";
+import {
+  SupplierOrderHistory,
+  SupplierProducts,
+  ServiceZones,
+  SupplierProfileOverview,
+} from "@sahil/features/Suppliers";
+import {
+  BusinessProfileOverview,
+  BusinessOrderHistory,
+} from "@sahil/features/businesses";
+import { Business, Suppliers } from "@sahil/lib/graphql/__generated__/graphql";
+
+export default function ClientPage() {
+  const router = useRouter();
+  const { clientId, type } = router.query;
+  const isSupplier = type === 'supplier';
+
+  if (!clientId || !type) {
+    return <div>Invalid client details</div>;
+  }
+
+  if (isSupplier) {
+    return <SupplierView clientId={clientId as string} />;
+  }
+
+  return <BusinessView clientId={clientId as string} />;
+}
+
+function SupplierView({ clientId }: { clientId: string }) {
+  const {
+    data: supplier,
+    error: supplierError,
+    loading: supplierLoading
+  } = useFetchSupplierByPK(clientId);
+
+  if (supplierLoading) {
+    return <p>Loading...</p>;
+  }
+
+  if (supplierError) {
+    return <div>Error loading supplier details</div>;
+  }
+
+  if (!supplier) {
+    return <div>Supplier not found</div>;
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col lg:flex-row sm:gap-1">
+        <div className="space-y-2">
+          <SupplierProfileOverview supplier={supplier as Suppliers} />
+          <ServiceZones />
+        </div>
+        <div className="basis-5/6 space-y-4">
+          <SupplierProducts
+            productsCount={supplier?.products_aggregate.aggregate?.count || 0}
+          />
+          <SupplierOrderHistory supplierId={clientId} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function BusinessView({ clientId }: { clientId: string }) {
+  const {
+    data: business,
+    error: businessError,
+    loading: businessLoading
+  } = useFetchBusinessByPK(clientId);
+
+  if (businessLoading) {
+    return <p>Loading...</p>;
+  }
+
+  if (businessError) {
+    return <div>Error loading business details</div>;
+  }
+
+  if (!business) {
+    return <div>Business not found</div>;
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col lg:flex-row sm:gap-1">
+        <div className="space-y-2">
+          <BusinessProfileOverview business={business as Business} />
+        </div>
+        <div className="basis-5/6 space-y-4">
+          <BusinessOrderHistory />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/admin/src/pages/clients/index.tsx

@@ -1,9 +1,13 @@
+import { useRouter } from "next/router";
+import { HiPlus, HiOutlineDocumentMagnifyingGlass } from "react-icons/hi2";
+import { ListClients } from "@sahil/features/Clients/ListClients";
+
 export default function Clients() {
+  const router = useRouter();
+
   return (
-    <section className="space-y-2">
-      <div>
-        <h1>Clients Page</h1>
-      </div>
-    </section>
+    <main className="container mx-auto px-4 py-6">
+      <ListClients />
+    </main>
   );
 }

apps/admin/src/pages/notifications/index.tsx

@@ -0,0 +1,9 @@
+import { ListNotifications } from "@sahil/features/Notifications/ListNotifications";
+
+export default function Notifications() {
+  return (
+    <section className="space-y-4">
+      <ListNotifications />
+    </section>
+  );
+}

apps/admin/src/pages/orders/[orderId].tsx

@@ -0,0 +1,3 @@
+export default function OrderPage() {
+  return <div>Order</div>;
+}

apps/admin/src/pages/orders/index.tsx

@@ -1,9 +1,32 @@
+import { useRouter } from "next/router";
+import { HiPlus, HiOutlineDocumentMagnifyingGlass } from "react-icons/hi2";
+import { ListOrders } from "@sahil/features/Orders/ListOrders";
+import { Card, Stats, Stat } from "ui";
+
 export default function Orders() {
+  const router = useRouter();
   return (
-    <section className="space-y-2">
-      <div>
-        <h1>Orders Page</h1>
-      </div>
+    <section className="space-y-4">
+      <Card>
+        <div className="flex justify-between items-center">
+          <div>
+            <h1 className="text-xl">Orders</h1>
+          </div>
+          <div className="flex gap-2">
+            <button className="btn btn-sm">
+              <HiOutlineDocumentMagnifyingGlass />
+              track Order
+            </button>
+            <button
+              className="btn btn-sm btn-primary"
+              onClick={() => router.push("/orders/new/order_details")}
+            >
+              <HiPlus /> New Order
+            </button>
+          </div>
+        </div>
+      </Card>
+      <ListOrders />
     </section>
   );
 }

apps/admin/src/pages/zones/[zoneId].tsx

@@ -0,0 +1,3 @@
+export default function ZonePage() {
+  return <div>Zone</div>;
+}

apps/admin/src/pages/zones/index.tsx

@@ -1,9 +1,25 @@
+import { useRouter } from "next/router";
+import { HiPlus, HiOutlineDocumentMagnifyingGlass } from "react-icons/hi2";
+import { ListZones } from "@sahil/features/Zones/ListZones";
+
 export default function Zones() {
+  const router = useRouter();
   return (
-    <section className="space-y-2">
-      <div>
-        <h1>Zones Page</h1>
+    <section className="space-y-4">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-xl">Zones</h1>
+        </div>
+        <div className="flex gap-2">
+          <button
+            className="btn btn-sm btn-primary"
+            onClick={() => router.push("/orders/new/order_details")}
+          >
+            <HiPlus /> New Zone
+          </button>
+        </div>
       </div>
+      <ListZones />
     </section>
   );
 }

apps/admin/src/pages/zones/new.tsx

@@ -0,0 +1,3 @@
+export default function NewZonePage() {
+  return <div>New Zone Page</div>;
+}