added resizable bar import

Frontend/power-tracker/src/pages/overview.tsx

@@ -6,21 +6,10 @@ import LineChart from '../components/LineChart';
 import { RefreshCw, Minus, Plus } from 'lucide-react';
 import TopBar from '@/components/topbar';
 import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "@/components/ui/sheet"
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable"
 import axios from 'axios';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@radix-ui/react-accordion';
 import { Button } from '@/components/ui/button';
@@ -141,6 +130,7 @@ function Overview() {
                 </div>
               </div>
               
+              {/* DATE FROM PICKER */}
               <label className='text-primary text-sm'>Date From</label>
               <div className='flex'>
                 <DatePicker width={280} dates={startDate} setDate={setStartDate} allowedDate={new Date()}/>
@@ -167,6 +157,7 @@ function Overview() {
                 </div> 
               </div>
 
+              {/* DATE TO PICKER */}
               <label className='text-primary text-sm'>Date To</label>
               <div className='flex mb-[10px]'>
                 <DatePicker width={280} dates={endDate} setDate={setEndDate} allowedDate={startDate} />
@@ -193,9 +184,7 @@ function Overview() {
                 </div>
               </div>
               
-              
-              <div>
-
+              {/* DATE HELPER BUTTONS */}
               <div className="flex items-center justify-between mb-[5px]">
                 <Button className="w-[100px] h-[30px]" variant="outline" onClick={e => {
                     var sdate: Date = new Date;
@@ -222,12 +211,11 @@ function Overview() {
                   <Button className="w-[100px] h-[30px]" variant="outline" onClick={e => {setStartDate(new Date()); var d = new Date(); d.setTime(d.getTime() - 7 * millisInDays); setEndDate(d); setInterval(30)}}>Last week</Button>
                 </div>
               </div>
+
               <br/>
 
               <div className="flex items-center align-center justify-center mb-[10px]"><Button className="h-[25px] w-[25px]" variant="outline" size="icon" onClick={e => setRecall(!recall)}><RefreshCw className='h-[15px] w-[15px]'/></Button></div>
 
-            </div>
-
             <div className ="rounded-md border shadow-md py-[10px] px-[5px]">
               {buildingsState.buildings.map((building, i) => {
                   return (