New Directory Setup (#2065)

* chore: moved app & space from apps to root

* chore: modified workspace configuration

* chore: modified dockerfiles for space and web

* chore: modified icons for space

* feat: updated files for new svg icons supported by next-images

* chore: added /spaces base path for next

* chore: added compose config for space

* chore: updated husky configuration

* chore: updated workflows for new configuration

* chore: changed app name to web

* fix: resolved build errors with web

* chore: reset file tracing root for both projects

* chore: added nginx config for deploy

* fix: eslint and tsconfig settings for space app

* husky setup fixes based on new dir

* eslint fixes

* prettier formatting

---------

Co-authored-by: Henit Chobisa <chobisa.henit@gmail.com>

web/components/workspace/completed-issues-graph.tsx

@@ -0,0 +1,84 @@
+// ui
+import { CustomMenu, LineGraph } from "components/ui";
+// constants
+import { MONTHS } from "constants/project";
+
+type Props = {
+  issues:
+    | {
+        week_in_month: number;
+        completed_count: number;
+      }[]
+    | undefined;
+  month: number;
+  setMonth: React.Dispatch<React.SetStateAction<number>>;
+};
+
+export const CompletedIssuesGraph: React.FC<Props> = ({ month, issues, setMonth }) => {
+  const weeks = month === 2 ? 4 : 5;
+
+  const data: any[] = [];
+
+  for (let i = 1; i <= weeks; i++) {
+    data.push({
+      week_in_month: `Week ${i}`,
+      completed_count: issues?.find((item) => item.week_in_month === i)?.completed_count ?? 0,
+    });
+  }
+
+  return (
+    <div>
+      <div className="mb-0.5 flex justify-between">
+        <h3 className="font-semibold">Issues closed by you</h3>
+        <CustomMenu label={<span className="text-sm">{MONTHS[month - 1]}</span>} noBorder>
+          {MONTHS.map((month, index) => (
+            <CustomMenu.MenuItem key={month} onClick={() => setMonth(index + 1)}>
+              {month}
+            </CustomMenu.MenuItem>
+          ))}
+        </CustomMenu>
+      </div>
+      <div className="rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-8 pl-4">
+        {data.every((item) => item.completed_count === 0) ? (
+          <div className="flex items-center justify-center h-72">
+            <h4 className="text-[#d687ff]">No issues closed this month</h4>
+          </div>
+        ) : (
+          <>
+            <LineGraph
+              height="250px"
+              data={[
+                {
+                  id: "completed_issues",
+                  color: "#d687ff",
+                  data: data.map((item) => ({
+                    x: item.week_in_month,
+                    y: item.completed_count,
+                  })),
+                },
+              ]}
+              margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+              customYAxisTickValues={data.map((item) => item.completed_count)}
+              colors={(datum) => datum.color}
+              enableSlices="x"
+              sliceTooltip={(datum) => (
+                <div className="rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
+                  {datum.slice.points[0].data.yFormatted}
+                  <span className="text-custom-text-200"> issues closed in </span>
+                  {datum.slice.points[0].data.xFormatted}
+                </div>
+              )}
+              theme={{
+                background: "rgb(var(--color-background-100))",
+              }}
+            />
+            <h4 className="mt-4 flex items-center justify-center gap-2 text-[#d687ff]">
+              <span className="h-2 w-2 bg-[#d687ff]" />
+              Completed Issues
+            </h4>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};