feat / add dummy data and banner for drifted project

src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/@sidebar/OrganizationSidebar.tsx

@@ -12,7 +12,7 @@ import { FreeTrialComponent } from '@/components/SubscriptionCards';
 import { Skeleton } from '@/components/ui/skeleton';
 import { getIsStripeTestMode } from '@/utils/server/stripe-utils';
 import { differenceInDays } from 'date-fns';
-import { Activity, FileText, Home, Layers, MessageCircle, Users } from 'lucide-react';
+import { Activity, FileText, FlagIcon, Home, Layers, MessageCircle, Users } from 'lucide-react';
 
 
 const isStripeTestMode = getIsStripeTestMode()
@@ -86,6 +86,11 @@ async function OrganizationSidebarInternal({
             href={`/org/${organizationId}/projects`}
             icon={<Layers className="size-4 text-foreground" />}
           />
+          <SidebarLink
+            label="Drifts"
+            href={`/org/${organizationId}/drifts`}
+            icon={<FlagIcon className="size-4 text-foreground" />}
+          />
           <SidebarLink
             label="Teams"
             href={`/org/${organizationId}/teams`}

src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/drifts/DriftedProjectsWithPagination.tsx

@@ -0,0 +1,90 @@
+import { Pagination } from "@/components/Pagination";
+import { getLoggedInUserOrganizationRole } from "@/data/user/organizations";
+import { getAllProjectsListInOrganization, getProjectIdsInOrganization, getProjectsCountForUser, getProjectsList, getProjectsTotalCount, getSlimProjectsForUser } from "@/data/user/projects";
+import { serverGetLoggedInUser } from "@/utils/server/serverGetLoggedInUser";
+import { projectsfilterSchema } from "@/utils/zod-schemas/params";
+import { OrganizationProjectsTable } from "../projects/OrganizationProjectsTable";
+import { DriftAlert, generateDummyDriftAlerts } from "./drift-alerts";
+
+
+
+export async function UserDriftedProjectsWithPagination({
+    organizationId,
+    searchParams,
+}: { organizationId: string; searchParams: unknown }) {
+    const filters = projectsfilterSchema.parse(searchParams);
+
+    const projectIdsForDriftAlerts = await getProjectIdsInOrganization(organizationId, 2);
+
+    // Once drift_alerts table is created, we will use that to fetch the alerts and check the count to be greater than 0
+    // For now, we are adding dummy alerts from dummyData.ts 
+
+    // using dummy data to get drifted project ids
+    // TODO: once drift_alerts table is created, we will use that to fetch the alerts and check the count to be greater than 0
+
+    const driftAlerts: DriftAlert[] = generateDummyDriftAlerts(projectIdsForDriftAlerts);
+
+    // get unique project ids from the drift alerts
+    const driftedProjectIds = Array.from(new Set(driftAlerts.map(alert => alert.project_id)));
+
+    const [{ id: userId }, userRole] = await Promise.all([
+        serverGetLoggedInUser(),
+        getLoggedInUserOrganizationRole(organizationId),
+    ]);
+
+    // const [projects, totalPages] = await Promise.all([
+    //     getProjectsListForUser({ ...filters, organizationId, userRole, userId }),
+    //     getProjectsCountForUser({ ...filters, organizationId, userId }),
+    // ]);
+
+    const [projects, totalPages] = await Promise.all([
+        getSlimProjectsForUser({ projectIds: driftedProjectIds, userRole, userId }),
+        getProjectsCountForUser({ ...filters, organizationId, userId }),
+    ]);
+
+
+
+    return (
+        <>
+            <OrganizationProjectsTable projects={projects} />
+            <Pagination totalPages={totalPages} />
+        </>
+    );
+}
+
+export async function AllProjectsTableWithPagination({
+    organizationId,
+    searchParams,
+}: { organizationId: string; searchParams: unknown }) {
+    const filters = projectsfilterSchema.parse(searchParams);
+    const [projects, totalPages] = await Promise.all([
+        getAllProjectsListInOrganization({ ...filters, organizationId }),
+        getProjectsTotalCount({ ...filters, organizationId }),
+    ]);
+    return (
+        <>
+            <OrganizationProjectsTable projects={projects} />
+            <Pagination totalPages={totalPages} />
+        </>
+    );
+}
+
+
+export async function ProjectsTableWithPagination({
+    organizationId,
+    teamId,
+    searchParams,
+}: { organizationId: string; teamId: number | null; searchParams: unknown }) {
+    const filters = projectsfilterSchema.parse(searchParams);
+    const [projects, totalPages] = await Promise.all([
+        getProjectsList({ ...filters, organizationId, teamId }),
+        getProjectsTotalCount({ ...filters, organizationId }),
+    ]);
+
+    return (
+        <>
+            <OrganizationProjectsTable projects={projects} />
+            <Pagination totalPages={totalPages} />
+        </>
+    );
+}

src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/drifts/drift-alerts.ts

@@ -0,0 +1,30 @@
+// types/driftTypes.ts
+// clearly dummy data is being generated here as no drift_alerts table is there yet
+
+import { randomUUID } from 'crypto';
+
+export type DriftAlert = {
+  id: string;
+  project_id: string;
+  job_id: string;
+  timestamp: string;
+  is_resolved: boolean;
+};
+
+export const generateDummyDriftAlerts = (projectIds: string[]) => {
+  const alerts: DriftAlert[] = [];
+  const numAlerts = 10; // You can adjust this number as needed
+
+  for (let i = 0; i < numAlerts; i++) {
+    const alert: DriftAlert = {
+      id: randomUUID(),
+      project_id: projectIds[Math.floor(Math.random() * projectIds.length)],
+      job_id: randomUUID(),
+      timestamp: new Date().toISOString(),
+      is_resolved: Math.random() < 0.5, // 50% chance of being resolved
+    };
+    alerts.push(alert);
+  }
+
+  return alerts;
+};

src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/drifts/loading.tsx

@@ -0,0 +1,91 @@
+import { Card } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+
+export default function ProjectsTableLoadingFallback() {
+  return <div className="p-2 mt-8">
+    <div className="mb-6">
+      <Skeleton className="h-6 w-48" />
+      <Skeleton className="mt-2 h-4 w-64" />
+    </div>
+    <div className="mb-4 flex w-full justify-between">
+      <Skeleton className="h-10 w-64" />
+      <Skeleton className="h-10 w-48" />
+    </div>
+    <Card className='p-4'>
+
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>
+              <Skeleton className="h-4 w-24" />
+            </TableHead>
+            <TableHead>
+              <Skeleton className="h-4 w-16" />
+            </TableHead>
+            <TableHead>
+              <Skeleton className="h-4 w-24" />
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>
+              <Skeleton className="h-4 w-32" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-20" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-32" />
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <Skeleton className="h-4 w-32" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-20" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-32" />
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <Skeleton className="h-4 w-32" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-20" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-32" />
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <Skeleton className="h-4 w-32" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-20" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-32" />
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <Skeleton className="h-4 w-32" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-20" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-32" />
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </Card>
+  </div>
+}

src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/drifts/page.tsx

@@ -0,0 +1,46 @@
+import { PageHeading } from "@/components/PageHeading";
+import { T } from "@/components/ui/Typography";
+import {
+  projectsfilterSchema,
+  teamParamSchema
+} from "@/utils/zod-schemas/params";
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import type { DashboardProps } from "../page";
+import { UserDriftedProjectsWithPagination } from "./DriftedProjectsWithPagination";
+
+export const metadata: Metadata = {
+  title: "Projects",
+  description: "You can create projects within teams, or within your organization.",
+};
+
+export default async function DriftsPage({
+  params,
+  searchParams,
+}: DashboardProps) {
+  const { organizationId, teamId } = teamParamSchema.parse(params);
+  const filters = projectsfilterSchema.parse(searchParams);
+
+  return (
+    <div className="flex flex-col space-y-4 max-w-5xl mt-8">
+      <PageHeading
+        title="Drifts"
+        subTitle="You can see the drifted projects within teams, or within your organization."
+      />
+      {
+        <Suspense
+          fallback={
+            <T.P className="text-muted-foreground my-6">
+              Loading drifts...
+            </T.P>
+          }
+        >
+          <UserDriftedProjectsWithPagination
+            organizationId={organizationId}
+            searchParams={searchParams}
+          />
+        </Suspense>
+      }
+    </div>
+  );
+}

src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/(specific-organization-pages)/projects/ProjectsWithPagination.tsx

@@ -6,6 +6,7 @@ import { projectsfilterSchema } from "@/utils/zod-schemas/params";
 import { OrganizationProjectsTable } from "./OrganizationProjectsTable";
 
 export type ProjectListType = {
+    id: string;
     name: string;
     latest_action_on: string | null;
     created_at: string;

src/app/(dynamic-pages)/(authenticated-pages)/(application-pages)/org/[organizationId]/team/[teamId]/(specific-team-pages)/@sidebar/TeamSidebar.tsx

@@ -4,7 +4,7 @@ import { SidebarLink } from '@/components/SidebarLink';
 import { fetchSlimOrganizations } from '@/data/user/organizations';
 import { getOrganizationOfTeam } from '@/data/user/teams';
 import { cn } from '@/utils/cn';
-import { Activity, FileText, Home, Layers, MessageCircle, Users } from 'lucide-react';
+import { Activity, FileText, FlagIcon, Home, Layers, MessageCircle, Users } from 'lucide-react';
 import { Suspense } from 'react';
 
 async function TeamSidebarInternal({ organizationId }: { organizationId: string }) {
@@ -33,6 +33,11 @@ async function TeamSidebarInternal({ organizationId }: { organizationId: string
                     href={`/org/${organizationId}/projects`}
                     icon={<Layers className="size-4 text-foreground" />}
                 />
+                <SidebarLink
+                    label="Drifts"
+                    href={`/org/${organizationId}/drifts`}
+                    icon={<FlagIcon className="size-4 text-foreground" />}
+                />
                 <SidebarLink
                     label="Teams"
                     href={`/org/${organizationId}/teams`}