diff --git a/litellm/proxy/_experimental/out/_next/static/4mrMigZY9ob7yaIDjXpX6/_buildManifest.js b/litellm/proxy/_experimental/out/_next/static/4mrMigZY9ob7yaIDjXpX6/_buildManifest.js
new file mode 100644
index 000000000..f779caa02
--- /dev/null
+++ b/litellm/proxy/_experimental/out/_next/static/4mrMigZY9ob7yaIDjXpX6/_buildManifest.js
@@ -0,0 +1 @@
+self.__BUILD_MANIFEST={__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/_error":["static/chunks/pages/_error-d6107f1aac0c574c.js"],sortedPages:["/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
\ No newline at end of file
diff --git a/litellm/proxy/_experimental/out/_next/static/4mrMigZY9ob7yaIDjXpX6/_ssgManifest.js b/litellm/proxy/_experimental/out/_next/static/4mrMigZY9ob7yaIDjXpX6/_ssgManifest.js
new file mode 100644
index 000000000..5b3ff592f
--- /dev/null
+++ b/litellm/proxy/_experimental/out/_next/static/4mrMigZY9ob7yaIDjXpX6/_ssgManifest.js
@@ -0,0 +1 @@
+self.__SSG_MANIFEST=new Set([]);self.__SSG_MANIFEST_CB&&self.__SSG_MANIFEST_CB()
\ No newline at end of file
diff --git a/litellm/proxy/_experimental/out/_next/static/chunks/app/layout-c2bd88af86acab19.js b/litellm/proxy/_experimental/out/_next/static/chunks/app/layout-c2bd88af86acab19.js
new file mode 100644
index 000000000..fe5260feb
--- /dev/null
+++ b/litellm/proxy/_experimental/out/_next/static/chunks/app/layout-c2bd88af86acab19.js
@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[185],{11837:function(n,e,t){Promise.resolve().then(t.t.bind(t,99646,23)),Promise.resolve().then(t.t.bind(t,63385,23))},63385:function(){},99646:function(n){n.exports={style:{fontFamily:"'__Inter_c23dc8', '__Inter_Fallback_c23dc8'",fontStyle:"normal"},className:"__className_c23dc8"}}},function(n){n.O(0,[971,69,744],function(){return n(n.s=11837)}),_N_E=n.O()}]);
\ No newline at end of file
diff --git a/litellm/proxy/_experimental/out/_next/static/chunks/app/page-5a7453e3903c5d60.js b/litellm/proxy/_experimental/out/_next/static/chunks/app/page-5a7453e3903c5d60.js
new file mode 100644
index 000000000..afa8fef16
--- /dev/null
+++ b/litellm/proxy/_experimental/out/_next/static/chunks/app/page-5a7453e3903c5d60.js
@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[931],{79615:function(e,t,s){Promise.resolve().then(s.bind(s,75985))},75985:function(e,t,s){"use strict";s.r(t),s.d(t,{default:function(){return X}});var l=s(3827),r=s(64090),n=s(47907),a=s(8792),o=s(2179),i=e=>{let{userID:t,userRole:s,userEmail:r}=e;return console.log("User ID:",t),console.log("userEmail:",r),(0,l.jsxs)("nav",{className:"left-0 right-0 top-0 flex justify-between items-center h-12 mb-4",children:[(0,l.jsx)("div",{className:"text-left mx-4 my-2 absolute top-0 left-0",children:(0,l.jsx)("div",{className:"flex flex-col items-center",children:(0,l.jsx)(a.default,{href:"/",children:(0,l.jsx)("button",{className:"text-gray-800 text-2xl px-4 py-1 rounded text-center",children:"\uD83D\uDE85 LiteLLM"})})})}),(0,l.jsx)("div",{className:"text-right mx-4 my-2 absolute top-0 right-0",children:(0,l.jsxs)(o.Z,{variant:"secondary",children:[r,(0,l.jsxs)("p",{children:["Role: ",s]}),(0,l.jsxs)("p",{children:["ID: ",t]})]})})]})},c=s(80588);let d=async(e,t,s)=>{try{if(console.log("Form Values in keyCreateCall:",s),s.description&&(s.metadata||(s.metadata={}),s.metadata.description=s.description,delete s.description,s.metadata=JSON.stringify(s.metadata)),s.metadata){console.log("formValues.metadata:",s.metadata);try{s.metadata=JSON.parse(s.metadata)}catch(e){throw c.ZP.error("Failed to parse metadata: "+e),Error("Failed to parse metadata: "+e)}}console.log("Form Values after check:",s);let l=await fetch("/key/generate",{method:"POST",headers:{Authorization:"Bearer ".concat(e),"Content-Type":"application/json"},body:JSON.stringify({user_id:t,...s})});if(!l.ok){let e=await l.text();throw c.ZP.error("Failed to create key: "+e),console.error("Error response from the server:",e),Error("Network response was not ok")}let r=await l.json();return console.log("API Response:",r),r}catch(e){throw console.error("Failed to create key:",e),e}},u=async(e,t)=>{try{console.log("in keyDeleteCall:",t),c.ZP.info("Making key delete request");let s=await fetch("/key/delete",{method:"POST",headers:{Authorization:"Bearer ".concat(e),"Content-Type":"application/json"},body:JSON.stringify({keys:[t]})});if(!s.ok){let e=await s.text();throw c.ZP.error("Failed to delete key: "+e),Error("Network response was not ok")}let l=await s.json();return console.log(l),c.ZP.success("API Key Deleted"),l}catch(e){throw console.error("Failed to create key:",e),e}},m=async(e,t,s)=>{try{let l="/user/info";"App Owner"==s&&(l="".concat(l,"/?user_id=").concat(t)),c.ZP.info("Requesting user data");let r=await fetch(l,{method:"GET",headers:{Authorization:"Bearer ".concat(e),"Content-Type":"application/json"}});if(!r.ok){let e=await r.text();throw c.ZP.error(e),Error("Network response was not ok")}let n=await r.json();return c.ZP.info("Received user data"),n}catch(e){throw console.error("Failed to create key:",e),e}},h=async(e,t)=>{try{let s="/spend/logs";console.log("in keySpendLogsCall:",s);let l=await fetch("".concat(s,"/?api_key=").concat(t),{method:"GET",headers:{Authorization:"Bearer ".concat(e),"Content-Type":"application/json"}});if(!l.ok){let e=await l.text();throw c.ZP.error(e),Error("Network response was not ok")}let r=await l.json();return console.log(r),r}catch(e){throw console.error("Failed to create key:",e),e}},x=async(e,t,s,l,r,n)=>{try{let t="/spend/logs";t="App Owner"==s?"".concat(t,"/?user_id=").concat(l,"&start_date=").concat(r,"&end_date=").concat(n):"".concat(t,"/?start_date=").concat(r,"&end_date=").concat(n);let a=await fetch(t,{method:"GET",headers:{Authorization:"Bearer ".concat(e),"Content-Type":"application/json"}});if(!a.ok){let e=await a.text();throw c.ZP.error(e),Error("Network response was not ok")}let o=await a.json();return console.log(o),o}catch(e){throw console.error("Failed to create key:",e),e}},p=async(e,t)=>{try{let s="/spend/users";console.log("in spendUsersCall:",s);let l=await fetch("".concat(s,"/?user_id=").concat(t),{method:"GET",headers:{Authorization:"Bearer ".concat(e),"Content-Type":"application/json"}});if(!l.ok){let e=await l.text();throw c.ZP.error(e),Error("Network response was not ok")}let r=await l.json();return console.log(r),r}catch(e){throw console.error("Failed to get spend for user",e),e}};var j=s(10384),g=s(46453),y=s(71801),f=s(13969),w=s(12143),Z=s(77171),k=s(29714),b=s(88707),N=s(1861);let{Option:S}=f.default;var v=e=>{let{userID:t,userRole:s,accessToken:n,data:a,setData:i}=e,[u]=w.Z.useForm(),[m,h]=(0,r.useState)(!1),[x,p]=(0,r.useState)(null),f=()=>{h(!1),u.resetFields()},S=()=>{h(!1),p(null),u.resetFields()},v=async e=>{try{c.ZP.info("Making API Call"),e.models&&""!==e.models.trim()?e.models=e.models.split(",").map(e=>e.trim()):e.models=[],h(!0);let s=await d(n,t,e);i(e=>e?[...e,s]:[s]),p(s.key),c.ZP.success("API Key Created"),u.resetFields()}catch(e){console.error("Error creating the key:",e)}};return(0,l.jsxs)("div",{children:[(0,l.jsx)(o.Z,{className:"mx-auto",onClick:()=>h(!0),children:"+ Create New Key"}),(0,l.jsx)(Z.Z,{title:"Create Key",visible:m,width:800,footer:null,onOk:f,onCancel:S,children:(0,l.jsxs)(w.Z,{form:u,onFinish:v,labelCol:{span:6},wrapperCol:{span:16},labelAlign:"left",children:["App Owner"===s||"Admin"===s?(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(w.Z.Item,{label:"Key Name",name:"key_alias",children:(0,l.jsx)(k.Z,{})}),(0,l.jsx)(w.Z.Item,{label:"Team ID",name:"team_id",children:(0,l.jsx)(k.Z,{placeholder:"ai_team"})}),(0,l.jsx)(w.Z.Item,{label:"Models (Comma Separated). Eg: gpt-3.5-turbo,gpt-4",name:"models",children:(0,l.jsx)(k.Z,{placeholder:"gpt-4,gpt-3.5-turbo"})}),(0,l.jsx)(w.Z.Item,{label:"Max Budget (USD)",name:"max_budget",children:(0,l.jsx)(b.Z,{step:.01,precision:2,width:200})}),(0,l.jsx)(w.Z.Item,{label:"Duration (eg: 30s, 30h, 30d)",name:"duration",children:(0,l.jsx)(k.Z,{})}),(0,l.jsx)(w.Z.Item,{label:"Metadata",name:"metadata",children:(0,l.jsx)(k.Z.TextArea,{rows:4,placeholder:"Enter metadata as JSON"})})]}):(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(w.Z.Item,{label:"Key Name",name:"key_alias",children:(0,l.jsx)(k.Z,{})}),(0,l.jsx)(w.Z.Item,{label:"Team ID (Contact Group)",name:"team_id",children:(0,l.jsx)(k.Z,{placeholder:"ai_team"})}),(0,l.jsx)(w.Z.Item,{label:"Description",name:"description",children:(0,l.jsx)(k.Z.TextArea,{placeholder:"Enter description",rows:4})})]}),(0,l.jsx)("div",{style:{textAlign:"right",marginTop:"10px"},children:(0,l.jsx)(N.ZP,{htmlType:"submit",children:"Create Key"})})]})}),x&&(0,l.jsx)(Z.Z,{title:"Save your key",visible:m,onOk:f,onCancel:S,footer:null,children:(0,l.jsxs)(g.Z,{numItems:1,className:"gap-2 w-full",children:[(0,l.jsx)(j.Z,{numColSpan:1,children:(0,l.jsxs)("p",{children:["Please save this secret key somewhere safe and accessible. For security reasons, ",(0,l.jsx)("b",{children:"you will not be able to view it again"})," ","through your LiteLLM account. If you lose this secret key, you will need to generate a new one."]})}),(0,l.jsx)(j.Z,{numColSpan:1,children:null!=x?(0,l.jsxs)(y.Z,{children:["API Key: ",x]}):(0,l.jsx)(y.Z,{children:"Key being created, this might take 30s"})})]})})]})},_=s(33393),D=s(13810),E=s(61244),T=s(10827),C=s(3851),I=s(2044),A=s(64167),O=s(74480),P=s(7178),F=s(42440),R=s(9853),U=s(67989),K=s(56863),M=e=>{let{token:t,accessToken:s,keySpend:n,keyBudget:a,keyName:i}=e,[c,d]=(0,r.useState)(!1),[u,m]=(0,r.useState)(null),[x,p]=(0,r.useState)(null),j=async()=>{try{if(null==s||null==t)return;console.log("accessToken: ".concat(s,"; token: ").concat(t));let e=await h(s,t);console.log("Response:",e);let l=Object.values(e).reduce((e,t)=>{let s=new Date(t.startTime),l=new Intl.DateTimeFormat("en-US",{day:"2-digit",month:"short"}).format(s);return e[l]=(e[l]||0)+t.spend,e},{}),r=Object.entries(l);r.sort((e,t)=>{let[s]=e,[l]=t,r=new Date(s),n=new Date(l);return r.getTime()-n.getTime()});let n=Object.fromEntries(r);console.log(n);let a=Object.values(e).reduce((e,t)=>{let s=t.user;return e[s]=(e[s]||0)+t.spend,e},{});console.log(l),console.log(a);let o=[];for(let[e,t]of Object.entries(n))o.push({day:e,spend:t});let i=Object.entries(a).sort((e,t)=>t[1]-e[1]).slice(0,5).map(e=>{let[t,s]=e;return{name:t,value:s}});m(o),p(i),console.log("arrayBarChart:",o)}catch(e){console.error("There was an error fetching the data",e)}};return t?(0,l.jsxs)("div",{children:[(0,l.jsx)(o.Z,{className:"mx-auto",onClick:()=>{console.log("Show Modal triggered"),d(!0),j()},children:"View Spend Report"}),(0,l.jsxs)(Z.Z,{visible:c,width:1e3,onOk:()=>{d(!1)},onCancel:()=>{d(!1)},footer:null,children:[(0,l.jsxs)(F.Z,{style:{textAlign:"left"},children:["Key Name: ",i]}),(0,l.jsxs)(K.Z,{children:["Monthly Spend $",n]}),(0,l.jsx)(D.Z,{className:"mt-6 mb-6",children:u&&(0,l.jsx)(R.Z,{className:"mt-6",data:u,colors:["green"],index:"day",categories:["spend"],yAxisWidth:48})}),(0,l.jsx)(F.Z,{className:"mt-6",children:"Top 5 Users Spend (USD)"}),(0,l.jsx)(D.Z,{className:"mb-6",children:x&&(0,l.jsx)(U.Z,{className:"mt-6",data:x,color:"teal"})})]})]}):null},L=e=>{let{userID:t,accessToken:s,data:n,setData:a}=e,[i,c]=(0,r.useState)(!1),[d,m]=(0,r.useState)(!1),[h,x]=(0,r.useState)(null),p=async e=>{null!=n&&(x(e),m(!0))},j=async()=>{if(null!=h&&null!=n){try{await u(s,h);let e=n.filter(e=>e.token!==h);a(e)}catch(e){console.error("Error deleting the key:",e)}m(!1),x(null)}};if(null!=n)return console.log("RERENDER TRIGGERED"),(0,l.jsxs)(D.Z,{className:"w-full mx-auto flex-auto overflow-y-auto max-h-[50vh] mb-4",children:[(0,l.jsx)(F.Z,{children:"API Keys"}),(0,l.jsxs)(T.Z,{className:"mt-5",children:[(0,l.jsx)(A.Z,{children:(0,l.jsxs)(P.Z,{children:[(0,l.jsx)(O.Z,{children:"Key Alias"}),(0,l.jsx)(O.Z,{children:"Secret Key"}),(0,l.jsx)(O.Z,{children:"Spend (USD)"}),(0,l.jsx)(O.Z,{children:"Key Budget (USD)"}),(0,l.jsx)(O.Z,{children:"Team ID"}),(0,l.jsx)(O.Z,{children:"Metadata"}),(0,l.jsx)(O.Z,{children:"Models"}),(0,l.jsx)(O.Z,{children:"TPM / RPM Limits"}),(0,l.jsx)(O.Z,{children:"Expires"})]})}),(0,l.jsx)(C.Z,{children:n.map(e=>(console.log(e),"litellm-dashboard"===e.team_id)?null:(0,l.jsxs)(P.Z,{children:[(0,l.jsx)(I.Z,{children:null!=e.key_alias?(0,l.jsx)(y.Z,{children:e.key_alias}):(0,l.jsx)(y.Z,{children:"Not Set"})}),(0,l.jsx)(I.Z,{children:(0,l.jsx)(y.Z,{children:e.key_name})}),(0,l.jsx)(I.Z,{children:(0,l.jsx)(y.Z,{children:e.spend})}),(0,l.jsx)(I.Z,{children:null!=e.max_budget?(0,l.jsx)(y.Z,{children:e.max_budget}):(0,l.jsx)(y.Z,{children:"Unlimited Budget"})}),(0,l.jsx)(I.Z,{children:(0,l.jsx)(y.Z,{children:e.team_id})}),(0,l.jsx)(I.Z,{children:(0,l.jsx)(y.Z,{children:JSON.stringify(e.metadata)})}),(0,l.jsx)(I.Z,{children:(0,l.jsx)(y.Z,{children:JSON.stringify(e.models)})}),(0,l.jsx)(I.Z,{children:(0,l.jsxs)(y.Z,{children:["TPM Limit: ",e.tpm_limit?e.tpm_limit:"Unlimited"," ",(0,l.jsx)("br",{})," RPM Limit:"," ",e.rpm_limit?e.rpm_limit:"Unlimited"]})}),(0,l.jsx)(I.Z,{children:null!=e.expires?(0,l.jsx)(y.Z,{children:e.expires}):(0,l.jsx)(y.Z,{children:"Never expires"})}),(0,l.jsx)(I.Z,{children:(0,l.jsx)(E.Z,{onClick:()=>p(e.token),icon:_.Z,size:"sm"})}),(0,l.jsx)(I.Z,{children:(0,l.jsx)(M,{token:e.token,accessToken:s,keySpend:e.spend,keyBudget:e.max_budget,keyName:e.key_name})})]},e.token))})]}),d&&(0,l.jsx)("div",{className:"fixed z-10 inset-0 overflow-y-auto",children:(0,l.jsxs)("div",{className:"flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0",children:[(0,l.jsx)("div",{className:"fixed inset-0 transition-opacity","aria-hidden":"true",children:(0,l.jsx)("div",{className:"absolute inset-0 bg-gray-500 opacity-75"})}),(0,l.jsx)("span",{className:"hidden sm:inline-block sm:align-middle sm:h-screen","aria-hidden":"true",children:"​"}),(0,l.jsxs)("div",{className:"inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full",children:[(0,l.jsx)("div",{className:"bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4",children:(0,l.jsx)("div",{className:"sm:flex sm:items-start",children:(0,l.jsxs)("div",{className:"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left",children:[(0,l.jsx)("h3",{className:"text-lg leading-6 font-medium text-gray-900",children:"Delete Key"}),(0,l.jsx)("div",{className:"mt-2",children:(0,l.jsx)("p",{className:"text-sm text-gray-500",children:"Are you sure you want to delete this key ?"})})]})})}),(0,l.jsxs)("div",{className:"bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse",children:[(0,l.jsx)(o.Z,{onClick:j,color:"red",className:"ml-2",children:"Delete"}),(0,l.jsx)(o.Z,{onClick:()=>{m(!1),x(null)},children:"Cancel"})]})]})]})})]})},B=e=>{let{userID:t,userSpendData:s,userRole:n,accessToken:a}=e;console.log("User SpendData:",s);let[o,i]=(0,r.useState)(null==s?void 0:s.spend),[c,d]=(0,r.useState)((null==s?void 0:s.max_budget)||null);return(0,r.useEffect)(()=>{(async()=>{if("Admin"===n)try{let e=await p(a,"litellm-proxy-budget");console.log("Result from callSpendUsers:",e);let t=e[0];i(null==t?void 0:t.spend),d((null==t?void 0:t.max_budget)||null)}catch(e){console.error("Failed to get spend for user",e)}})()},[n,a,t]),(0,l.jsx)(l.Fragment,{children:(0,l.jsxs)(D.Z,{className:"mx-auto mb-4",children:[(0,l.jsxs)(K.Z,{children:["$",o]}),(0,l.jsxs)(F.Z,{children:["/ ",null!==c?"$".concat(c," limit"):"No limit"]})]})})},J=s(37963);console.log("isLocal:",!1);var G=e=>{let{userID:t,userRole:s,setUserRole:a,userEmail:o,setUserEmail:i}=e,[c,d]=(0,r.useState)(null),[u,h]=(0,r.useState)(null),x=(0,n.useSearchParams)();x.get("viewSpend"),(0,n.useRouter)();let p=x.get("token"),[y,f]=(0,r.useState)(null);if((0,r.useEffect)(()=>{if(p){let e=(0,J.o)(p);if(e){if(console.log("Decoded token:",e),console.log("Decoded key:",e.key),f(e.key),e.user_role){let t=function(e){if(!e)return"Undefined Role";switch(console.log("Received user role: ".concat(e)),e.toLowerCase()){case"app_owner":case"demo_app_owner":return"App Owner";case"app_admin":return"Admin";case"app_user":return"App User";default:return"Unknown Role"}}(e.user_role);console.log("Decoded user_role:",t),a(t)}else console.log("User role not defined");e.user_email?i(e.user_email):console.log("User Email is not set ".concat(e))}}if(t&&y&&s&&!c){let e=localStorage.getItem("userData"),l=localStorage.getItem("userSpendData");e&&l?(d(JSON.parse(e)),h(JSON.parse(l))):(async()=>{try{let e=await m(y,t,s);h(e.user_info),d(e.keys),localStorage.setItem("userData",JSON.stringify(e.keys)),localStorage.setItem("userSpendData",JSON.stringify(e.user_info))}catch(e){console.error("There was an error fetching the data",e)}})()}},[t,p,y,c,s]),null==t||null==p){let e="/sso/key/generate";return console.log("Full URL:",e),window.location.href=e,null}return null==y?null:(null==s&&a("App Owner"),(0,l.jsx)("div",{children:(0,l.jsx)(g.Z,{numItems:1,className:"gap-0 p-10 h-[75vh] w-full",children:(0,l.jsxs)(j.Z,{numColSpan:1,children:[(0,l.jsx)(B,{userID:t,userSpendData:u,userRole:s,accessToken:y}),(0,l.jsx)(L,{userID:t,accessToken:y,data:c,setData:d}),(0,l.jsx)(v,{userID:t,userRole:s,accessToken:y,data:c,setData:d})]})})}))},z=s(33509),W=s(30569);let{Sider:V}=z.default;var $=e=>{let{setPage:t}=e;return(0,l.jsx)(z.default,{style:{minHeight:"100vh",maxWidth:"120px"},children:(0,l.jsx)(V,{width:120,children:(0,l.jsxs)(W.Z,{mode:"inline",defaultSelectedKeys:["1"],style:{height:"100%",borderRight:0},children:[(0,l.jsx)(W.Z.Item,{onClick:()=>t("api-keys"),children:"API Keys"},"1"),(0,l.jsx)(W.Z.Item,{onClick:()=>t("usage"),children:"Usage"},"2")]})})})};let Y=e=>{let{payload:t,active:s}=e;if(!s||!t)return null;let r=t[0].payload,n=r.startTime,a=Object.entries(r).filter(e=>{let[t]=e;return"spend"!==t&&"startTime"!==t&&"models"!==t&&"users"!==t}).map(e=>{let[t,s]=e;return[t,s]});a.sort((e,t)=>t[1]-e[1]);let o=a.slice(0,5);return(0,l.jsxs)("div",{className:"w-56 rounded-tremor-default border border-tremor-border bg-tremor-background p-2 text-tremor-default shadow-tremor-dropdown",children:[n,o.map(e=>{let[t,s]=e;return(0,l.jsx)("div",{className:"flex flex-1 space-x-10",children:(0,l.jsx)("div",{className:"p-2",children:(0,l.jsxs)("p",{className:"text-tremor-content",children:["Token: ",t.substring(0,4)," ",(0,l.jsxs)("span",{className:"font-medium text-tremor-content-emphasis",children:["Spend: ",s]})]})})},t)})]})};var q=e=>{let{accessToken:t,token:s,userRole:n,userID:a}=e,o=new Date,[i,c]=(0,r.useState)([]),[d,u]=(0,r.useState)([]),[m,h]=(0,r.useState)([]),p=new Date(o.getFullYear(),o.getMonth(),1),y=new Date(o.getFullYear(),o.getMonth()+1,0),f=Z(p),w=Z(y);function Z(e){let t=e.getFullYear(),s=e.getMonth()+1,l=e.getDate();return"".concat(t,"-").concat(s<10?"0"+s:s,"-").concat(l<10?"0"+l:l)}return console.log("Start date is ".concat(f)),console.log("End date is ".concat(w)),(0,r.useEffect)(()=>{t&&s&&n&&a&&(async()=>{try{let e=await x(t,s,n,a,f,w);u(function(e){let t=[];e.forEach(e=>{Object.entries(e).forEach(e=>{let[s,l]=e;"spend"!==s&&"startTime"!==s&&"models"!==s&&"users"!==s&&t.push({key:s,spend:l})})}),t.sort((e,t)=>Number(t.spend)-Number(e.spend));let s=t.slice(0,5);return console.log("topKeys: ".concat(Object.keys(s[0]))),s}(e)),h(function(e){let t={};e.forEach(e=>{Object.entries(e.users).forEach(e=>{let[s,l]=e;""!==s&&null!=s&&"None"!=s&&(t[s]||(t[s]=0),t[s]+=l)})});let s=Object.entries(t).map(e=>{let[t,s]=e;return{user_id:t,spend:s}});s.sort((e,t)=>t.spend-e.spend);let l=s.slice(0,5);return console.log("topKeys: ".concat(Object.values(l[0]))),l}(e)),c(e)}catch(e){console.error("There was an error fetching the data",e)}})()},[t,s,n,a,f,w]),m.forEach(e=>{Object.values(e).forEach(e=>{console.log(e)})}),(0,l.jsx)("div",{style:{width:"100%"},children:(0,l.jsxs)(g.Z,{numItems:2,className:"gap-2 p-10 h-[75vh] w-full",children:[(0,l.jsx)(j.Z,{numColSpan:2,children:(0,l.jsxs)(D.Z,{children:[(0,l.jsx)(F.Z,{children:"Monthly Spend"}),(0,l.jsx)(R.Z,{data:i,index:"startTime",categories:["spend"],colors:["blue"],valueFormatter:e=>"$ ".concat(new Intl.NumberFormat("us").format(e).toString()),yAxisWidth:100,tickGap:5,customTooltip:Y})]})}),(0,l.jsx)(j.Z,{numColSpan:1,children:(0,l.jsxs)(D.Z,{children:[(0,l.jsx)(F.Z,{children:"Top API Keys"}),(0,l.jsx)(R.Z,{className:"mt-4 h-40",data:d,index:"key",categories:["spend"],colors:["blue"],yAxisWidth:200,tickGap:5,layout:"vertical",showXAxis:!1,showLegend:!1})]})}),(0,l.jsx)(j.Z,{numColSpan:1,children:(0,l.jsxs)(D.Z,{children:[(0,l.jsx)(F.Z,{children:"Top Users"}),(0,l.jsx)(R.Z,{className:"mt-4 h-40",data:m,index:"user_id",categories:["spend"],colors:["blue"],yAxisWidth:200,layout:"vertical",showXAxis:!1,showLegend:!1})]})})]})})},X=()=>{let[e,t]=(0,r.useState)(null),[s,a]=(0,r.useState)(null),o=(0,n.useSearchParams)(),c=o.get("userID"),d=o.get("token"),[u,m]=(0,r.useState)("api-keys"),[h,x]=(0,r.useState)(null);return(0,r.useEffect)(()=>{if(d){let e=(0,J.o)(d);if(e){if(console.log("Decoded token:",e),console.log("Decoded key:",e.key),x(e.key),e.user_role){let s=function(e){if(!e)return"Undefined Role";switch(console.log("Received user role: ".concat(e)),e.toLowerCase()){case"app_owner":case"demo_app_owner":return"App Owner";case"app_admin":return"Admin";case"app_user":return"App User";default:return"Unknown Role"}}(e.user_role);console.log("Decoded user_role:",s),t(s)}else console.log("User role not defined");e.user_email?a(e.user_email):console.log("User Email is not set ".concat(e))}}},[d]),(0,l.jsx)(r.Suspense,{fallback:(0,l.jsx)("div",{children:"Loading..."}),children:(0,l.jsxs)("div",{className:"flex flex-col min-h-screen",children:[(0,l.jsx)(i,{userID:c,userRole:e,userEmail:s}),(0,l.jsxs)("div",{className:"flex flex-1 overflow-auto",children:[(0,l.jsx)($,{setPage:m}),"api-keys"==u?(0,l.jsx)(G,{userID:c,userRole:e,setUserRole:t,userEmail:s,setUserEmail:a}):(0,l.jsx)(q,{userID:c,userRole:e,token:d,accessToken:h})]})]})})}}},function(e){e.O(0,[838,971,69,744],function(){return e(e.s=79615)}),_N_E=e.O()}]);
\ No newline at end of file
diff --git a/litellm/proxy/_experimental/out/_next/static/chunks/main-app-096338c8e1915716.js b/litellm/proxy/_experimental/out/_next/static/chunks/main-app-096338c8e1915716.js
new file mode 100644
index 000000000..421ae3e2c
--- /dev/null
+++ b/litellm/proxy/_experimental/out/_next/static/chunks/main-app-096338c8e1915716.js
@@ -0,0 +1 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[744],{70377:function(e,n,t){Promise.resolve().then(t.t.bind(t,47690,23)),Promise.resolve().then(t.t.bind(t,48955,23)),Promise.resolve().then(t.t.bind(t,5613,23)),Promise.resolve().then(t.t.bind(t,11902,23)),Promise.resolve().then(t.t.bind(t,31778,23)),Promise.resolve().then(t.t.bind(t,77831,23))}},function(e){var n=function(n){return e(e.s=n)};e.O(0,[971,69],function(){return n(35317),n(70377)}),_N_E=e.O()}]);
\ No newline at end of file