Reina create line graph chart for cost breakdown by expenditure

src/components/BMDashboard/ExpenditureGraph/ExpenditureLineGraph.css

@@ -0,0 +1,86 @@
+.expenditure-chart-container {
+    padding: 20px;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    transition: all 0.3s ease;
+  }
+
+  .expenditure-chart-container.dark-mode {
+    background-color: var(--bg-color, #1b2a41);
+    color: var(--text-color, #ffffff);
+    box-shadow: 0 2px 4px rgba(255,255,255,0.05);
+  }
+
+  .expenditure-chart-container.dark-mode select,
+  .expenditure-chart-container.dark-mode input {
+    background-color: var(--section-bg, #253342);
+    color: var(--text-color, #ffffff);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+
+  .expenditure-chart-container.dark-mode select:focus,
+  .expenditure-chart-container.dark-mode input:focus {
+    border-color: var(--button-bg, #e8a71c);
+    outline: none;
+  }
+
+  .expenditure-chart-container.dark-mode .filter-controls {
+    background-color: var(--section-bg, #253342);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .expenditure-chart-container h1 {
+    font-size: 1.5rem;
+    margin-bottom: 20px;
+    font-weight: 600;
+  }
+
+  .project-filter {
+    margin: 20px;
+    justify-content: flex-end;
+    display: flex;
+    align-items: center;
+  }
+
+  .filter-group {
+    margin: 20px;
+    justify-content: flex-end;
+    display: flex;
+    align-items: center;
+  }
+
+  label {
+    margin: 20px;
+  }
+
+  #project-select {
+    margin-left: 15px;
+  }
+
+.project-filter {
+    margin: 20px;
+    justify-content:flex-end;
+    display: flex;
+    align-items: center;
+}
+
+.filter-group {
+    margin: 20px;
+    justify-content:flex-end;
+    display: flex;
+    align-items: center;
+}
+
+label {
+    margin: 20px;
+}
+
+#project-select {
+    margin-left: 15px;
+}
+
+.dark-mode .project-filter,
+.dark-mode .filter-group {
+    background-color: var (--card-bg);
+}